Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
sheet-router
Advanced tools
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. Weighs 1.5KB minified and gzipped.
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
- HTML5 history support
- Catch and handle
<a href="">links
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>
history
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)
})
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)
})
It is good practice to represent JS actions as <a href="#">, as a good
number of components in the wild expect <a> tags to have an href value.
virtual-dom example
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>
react example
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>
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. Cleans urls to only match the pathname.
history(cb(href))
Call a callback to handle html5 pushsState history and handle <a href="">
clicks.
bridge(render, stateKey?, router(state))
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))
See Also
License
FAQs
Fast, modular client router
The npm package sheet-router receives a total of 0 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.
Package last updated on 12 May 2016
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.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025