riot-route-tag: tag based router for Riot.js

I’m thinking about tag-based router as a new feature. I’m now working on feature/route-tag branch and I’d like to share my current idea here. Nothing was decided yet. Any feedback is welcome!

Todos

• for the first release
  • implement riot-route-tag (draft)
  • write tests
  • 2 packages in 1 repo 2 builds in 1 repo
  • adjust api specs (gathering ideas)
  • write documents
• for the second release
  • fix some logic on riot-route
  • maybe a little fix on riot, too

Specs (proposal)

<app>
  <router>
    <route path="fruit/apple"><p>Apple</p></route>
    <route path="fruit/banana"><p>Banana</p></route>
    <route path="fruit/*"><inner-tag /></route>
  </router>
</app>

<inner-tag>
  <p>{ name } is not found</p>
  <script>
    this.on('route', name => this.name = name)
  </script>
</inner-tag>

• <router>
  • it can contains multiple routes
  • it has base attribute (optional) maybe later
  • equivalent to const r = route.create() so it creates subrouter
• <route>
  • it has path attribute
  • <route path="fruit/apple"> is equivalent to r('fruit/apple', () => { ... })
  • when the route has selected, it triggers route event on its children and passes some arguments to them

Two builds:

• route.js: almost same as v3.0
• route+tag.js: includes tags above and it includes riot-route inside

We could import them like this:

import route from 'riot-route'
// or
import route from 'riot-route/lib/tag' // note that it's not same as cjs below

const route = require('riot-route')
// or
const route = require('riot-route/tag')

Q&A

• Q: What is packages dir?
  • A: to provide 2 packages in one repo
• Q: Why not making a separated repo?
  • A: riot-route-tag is tightly coupled with riot-route
• Q: Why two npm packages?
  • A: because of ES6 and CJS modules handling. We have no general way to provide submodules in both at this point: require('riot-route/tag') is not compatible with import 'riot-route/tag'.
• Q: Why now?
  • A: Riot v3 has got much better if implementation 😄

Related informations:

• html-router in ikki: my experiment on Riot.js last year
• react-router: declarative routing for React

[cognitom]

OK, v3.1.0 has been released just now with our new tag based router 🎉

[cognitom]

@karantir sounds interesting. How about simply making seperated <lazy> loading tag?

<app>
  <router>
    <route path="fruit/*"><inner-tag /></route>
    <route path="veggie/*"><lazy src="tags/lazy-inner-tag.tag" /></route>
  </router>
</app>

I think we don’t have to couple the router and lazy loader, at this point.