choreographer-router 💃🕺
A client-side router for web apps using Web Components and URI Templates.
Usage
import { Choreographer, Router, UriTemplate }
from 'choreographer-router'
const choreographer = new Choreographer({
stage: document.body,
scenes: [
// Static route renders the <app-signup> custom element
['/signup', 'app-signup'],
// Pass the `email` query string parameter as dataset property
['/login{?email,}', 'app-login'],
// Redirect to a URL
['/account', new URL('/account/profile', location)],
// Catch-all fallback route showing a custom element
['/{pathname}', 'app-404']
]
})
Modules
Class: UriTemplate
Code: source/uri-template.js
Source: https://github.com/geraintluff/uri-templates
URI Templates (RFC6570) implementation.
Class: Router
Code: source/router.js
The History API and link click trapping. The popstate
event is fired whenever a navigation occurs.
Class: Choreographer({ stage, scenes })
Code: source/choreographer.js
Associates Web Component element names with specific routes. Creates and removes Web Components (custom HTML elements) as scenes on the stage.
-
stage
is an container HTML element where the active scene element is appended. -
scenes
is an Array or other iterable object whose elements are key-value pairs. Each key is a URI Template of a route. Its value is the type of content to perform on the stage.
Scene content can be:
- An absolute URL instance to which to redirect.
- A tag name to render, for example a custom element. If a route change renders the same tag name as the current scene, only its dataset attributes are updated without recreating the entire scene. Use the
attributeChangedCallback
hook of Custom Elements to handle these changes. - A callback function to invoke with arguments
pattern
andparams
. The current stage will be cleared.
See Also
- Commons Host website dashboard uses Choreographer for client side routing.