1.9.1 • Published 1 year ago
@marianmeres/simple-router v1.9.1
@marianmeres/simple-router
Small path-like string parser. Originally inspired by sapper-like regex routes. Intended primarily for - but not limited to - client side SPA routing.
Installation
npm i @marianmeres/simple-routerQuick example
// routes definitions can be added via ctor config object
const router = new SimpleRouter({
'/': () => pageIndex(),
'*': () => page404(), // catch all (last resort fallback)
});
// or via "on" api
router.on(
'/article/[id([0-9]+)]/[slug]',
({ id, slug }) => pageArticle(id, slug)
);
// finally, perform route match (execute router)
// (example here returns "component" which is then "rendered")
window.onhashchange = () => render(router.exec(location.hash));See tests or examples for more.
Route matching
Route segments:
exactmatchesexact[name]matchesanyand is resolved as{ name: 'any' }param[name(regex)]matches ifregex.test(segment)is truthyexact?or[name]?marks segment as optional[...name]matches "rest segments"
Few notes on segments separators (which is slash / by default):
- multiple ones are always normalized to single,
- separator is always trimmed (both left and right) before matching
| Example route definition | Example input | Result |
|---|---|---|
/foo | /bar | null |
/foo | (empty string) | null |
/foo/[bar] | /foo | null |
/[foo]/bar | /foo | null |
/[foo]/[bar] | /foo | null |
/ | (empty string) | {} |
| (empty string) | /// | {} |
foo | foo | {} |
//foo///bar.baz/ | foo/bar.baz | {} |
foo/bar/baz | //foo//bar/baz// | {} |
/[foo] | /bar | {"foo":"bar"} |
#/foo/[bar] | #/foo/bat | {"bar":"bat"} |
#/[foo]/[bar] | #/baz/bat | {"foo":"baz","bar":"bat"} |
#/[foo]/bar | #/baz/bar | {"foo":"baz"} |
/[id([0-9]+)] | /123 | {"id":"123"} |
/[id(\d-\d)] | /1-2 | {"id":"1-2"} |
/[id([0-9]+)] | /foo | null |
/foo/[bar]/[id([0-9]+)] | /foo/baz/123 | {"bar":"baz","id":"123"} |
/foo/[id([0-9]+)]/[bar] | /foo/bar/baz | null |
/foo/[([0-9]+)] | /foo/123 | null (missing name before regex) |
/foo/[bar]? | /foo | {} |
/foo/[bar]? | /foo/bar | { bar: 'bar' } |
/foo/[bar]?/baz | /foo/bar/baz | { bar: 'bar' } |
/[...path]/[file] | /foo/bar/baz.js | { path': 'foo/bar', file: 'baz.js' } |