Hacker News new | ask | show | jobs
by nherment 3228 days ago
I am very happy to hear that top level components now support state :) It's a major pain that is now relieved.

For state management, we have built https://github.com/Portchain/markojs-shared-state. The main problem with this solution is that it's a singleton. Being able to have state at the top level will help in allowing us to pass the state manager to children.

Router wise, maybe it should not be a component's responsibility to know their route but rather the parent's ?

Marko already comes with an elegant way of doing conditional forks in the HTML. This is a huge strength of Marko. What is displayed is defined in the template (.marko files). We currently have input and state defining what needs to be displayed. Adding to these two a `route` object and simple state management is made easy.

This is something we'd be very happy to do as we could use it immediately. However it's not urgent because we route server-side*

eg.

  <html>
    <body>
      <if(route.path === '/about' || route.path === '/about/*' /* matches 'http://www.example.com/about and all subpaths' */)>
        <about-content />
      </if>
      <else>
        <home-content />
      </else>
    </body>
  </html>

With each component getting a nested value of the path but also being able to access the whole URL. For example, in about-content.marko:

  <div>
    <!-- get the 'nested' path only -->
    <if(route.path === '/company' /* matches 'http://www.example.com/about/company' */)>
      <div class="company">Lorem ipsum...</div>
    </if>
    <!-- or access the full path -->
    <if(route.fullPath === '/about/career')>
      <div>Get hired !</div>
    </if>
  
    <!-- being fancy now ! -->
    <if(route.path === '/:mySubsection')>
      <div>Get hired ${route.params.mySubsection}!</div>
    </if>
  </div>
```

However, there is probably no need to re-invent the wheel. While I like the idea of embedding routes in the templates, Vue.js approach seem quite sane too: https://vuejs.org/v2/guide/routing.html