sheet-router
Advanced tools
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. Weighs 1.5KB minified and gzipped.
$ npm install sheet-router
<a href=""> linkssheet-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>
Interacting with the browser history is a common action, sheet-router
supports this out of the box. When the forwards or backwards buttons in the
browser are clicked, or history.back / history.go are called sheet-router
will update accordingly.
const history = require('sheet-router/history')
history(function (href) {
router(href)
console.log('history changed: ' + href)
})
In HTML links are represented with <a href=""> style tags. Sheet-router can
be smart about these and handle them globally. This way there's no need to
attach specific listeners to each link and static HTML templates can be
upgraded seemlessly to include single-page routing.
const href = require('sheet-router/href')
href(function (href) {
router(href)
console.log('link was clicked: ' + href)
})
const render = require('virtual-dom/create-element')
const sheetRouter = require('sheet-router')
const h = require('virtual-dom/h')
const router = sheetRouter(function (r, t) {
return [
r('/foo/bar', function (params, h, state) {
return h('div', null, 'hello world')
})
]
})
const node = render(router('/foo/bar', h, { name: 'Jane' }))
document.body.appendChild(node)
<body>
<div>hello world</div>
</body>
const sheetRouter = require('sheet-router')
const render = require('react-dom')
const react = require('react')
const router = sheetRouter(function (r, t) {
return [
r('/foo/bar', function (params, h, state) {
h('div', null, 'hello world')
}
]
})
render(router('/foo', react.createElement, { name: 'Jane' }), document.body)
<body>
<div>hello world</div>
</body>
Create a new router from a nested array. Takes an optional default path as the first argument.
Match a route on the router. Takes a path and an arbitrary list of arguments that are then passed to the matched routes. Cleans urls to only match the pathname.
Call a callback to handle html5 pushsState history and handle <a href="">
clicks.
Bridge a render function that passes a state object to sheet-router.
sheet-router is then wrapped in a thunk, and will only diff paths if the route
on the state object has changed. This requires routes to return a thunk which
takes additional arguments, which can be done by calling the second argument of
t (for thunk) instead of r to create routes.
const bridge = require('sheet-router/bridge')
const sheetRouter = require('sheet-router')
const createApp = require('virtual-app')
const app = createApp(document.body, vdom)
const render = app.start(modifyState, initialState)
bridge(render, (state) => router(state.location, app.h))
FAQs
Fast, modular client router
The npm package sheet-router receives a total of 28 weekly downloads. As such, sheet-router popularity was classified as not popular.
We found that sheet-router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.