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 yo = require('yo-yo')
// default to `/404` if no path matches
const router = sheetRouter('/404', function (route) {
return [
route('/', (params) => yo`<div>Welcome to router land!</div>`),
route('/:username', (params) => yo`<div>${params.username}</div>`, [
route('/orgs', (params) => yo`<div>${params.username}'s orgs!</div>`)
]),
route('/404', (params) => yo`<div>Oh no, path not found!</div>`),
]
})
router('/hughsk/orgs')
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)
})
hash
Interacting with hash changes is often a common fallback scenario for those who don't have support for browser history. Whenever a hashchange event is triggered, sheet-router will trigger an update as seen below. However in order to match hash prefixed routes, the hash-match module can be used to normalize routes (ex: #/foo becomes /foo).
const hash = require('sheet-router/hash')
const match = require('hash-match')
hash(function (href) {
router(match(href))
console.log('hash location 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)
})
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), createRoute?)
Create a new router from a nested array. Takes an optional default path as the first argument.
If createRoute(route) is passed as the third argument, the route() function
passed to createTree() can be manipulated. This is useful for things like
changing argument order and the like.
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.
href(cb(href))
Call a callback to handle <a href="#"> clicks.
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 02 Jul 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