sheet-router

sheet-router

sheet-router is a fast, modular client-side router. It enables view composition and is tuned for performance by statically declaring routes in a radix-trie.

Installation

$ npm install sheet-router

Features

• View composition through functions
• Tuned for performance by generating a radix-trie
• Not bound to any framework
• Minimal dependencies and tiny code size

Usage

sheet-router tries to make routing understandable and pleasant to work with. It does so by using a lisp-like structure which is internally compiled to an efficient data structure. Here each route takes either an array of children or a callback, which are then translated to paths that take callbacks

const sheetRouter = require('sheet-router')
const h = require('virtual-dom/h')

const router = sheetRouter('/404', function (route) {
  return [
    route('/', (params, h, state) => h('div', 'index path')),
    route('/foo', [
      route('/', (params, h, state) => h('div', 'foo path')),
      route('/:name/text', (params, h, state) => h('div', state.text))
    ])
  ]
})

router('/foo/hugh/text', h, { text: 'hello world' })

sheet-router can also be used to compose multiple views. Composing views is useful because often views share a lot of the same layout.

Say we would want to have a base view with a sidebar and header, and different content based on the url, we could declare a view called base.js using virtual-dom.

module.exports = function (content) {
  return function (params, h, state) {
    return h('main', [
      h('header'),
      h('aside'),
      content(params, h, state)
    ])
  }
}

Say we would want to render a /foo and /bar views that extend our base view, we could pass the arguments into ./base which then renders it out as content.

const sheetRouter = require('sheet-router')
const h = require('virtual-dom/h')
const base = require('./base')

const router = sheetRouter(function (route) {
  return [
    route('/foo', (params, h, state) => base(h('section', 'this is bar path')),
    route('/bar', (params, h, state) => base(h('section', 'this is foo path'))
  ]
})

router('/foo')

Calling the router with /foo will then return the following html:

<main>
  <menu></menu>
  <aside></aside>
  <section>this is foo path</section>
</main>

API

router = sheetRouter(dft?, createTree(route))

Create a new router from a nested array. Takes an optional default path as the first argument.

router(route, [,...])

Match a route on the router. Takes a path and an arbitrary list of arguments that are then passed to the matched routes.

See Also

• wayfarer
• virtual-dom

License

MIT