@neovici/cosmoz-page-router

cosmoz-page-router

<cosmoz-page-router>

cosmoz-page-router is a haunted component to handle client side URL routing and view loading / management.

By default cosmoz-page-router listens to popstate event , gets current location href and matches it against the routes defined.

Getting started

Installing

Using npm:

npm install --save @neovici/cosmoz-page-router

Importing

The cosmoz-page-router element can be imported using:

import '@neovici/cosmoz-page-router/cosmoz-page-router';

Usage

Routes

Routes are defined as an Array of Objects:

import { html } from 'lit-html';
import { creteElement, navigate } from '@neovici/cosmoz-page-router/lib/use-routes';

const routes = [
	{
		name: 'home', // optional (can be used to identity the route),
		rule: /^\/$/iu/, // a Regexp used to matched the route,
		handle: ({
			url, // the current url string ( that matched the route)
			match, // the result of matching route against the rule,
		}) => html`<home />`
	},
	{
		name: 'some-page',
		rule: (url) => url.startsWith('/some-page'), // function called with current url string
		handle: ({ url })=>import('page.js')
			.then(()=> createElement('some-element', Object.fromEntries(url.searchParams)))
	},
	{
		name: 'redirect',
		rule: /^\/some\-redirect$/iu,
		handle: ()=> navigate('#!/', null, {
			replace: true, // true to use replaceState,false to use pushState,
			notify: true // true to dispatch a `popstate` event
		})
	}
];

and passed to cosmoz-page-router:

html`<cosmoz-page-router .routes=${routes} />`;

Documentation

See http://neovici.github.io/cosmoz-page-router (outdated)

TODO