Skip to content

Minimalistic route parser for sapper-like regex routes

Notifications You must be signed in to change notification settings

arnivuo/simple-router

 
 

Repository files navigation

@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-router

Quick 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:

  • exact matches exact
  • [name] matches any and is resolved as { name: 'any' } param
  • [name(regex)] matches if regex.test(segment) is truthy
  • exact? 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' }
See tests or examples for more.

About

Minimalistic route parser for sapper-like regex routes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.1%
  • TypeScript 41.9%