@joist/router
A simple, fairly naive router that can render and views it is given, whether they are JoistElements or not.
Installation:
npm i @joist/di @joist/router @joist/component
Example:
import { component, get, JoistElement } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
import { Route, RouteCtx } from '@joist/router';
import { Child2Element } from './child-2.element';
const routes: Route[] = [
// Eager component route
{ path: '/foo-1', component: () => document.createElement('child-1') },
// Eager component route from a CustomElementConstructor
{ path: '/foo-2', component: () => Child1Element },
// Lazy component route
{ path: '/bar-1', component: () => import('child-2.element').then(() => document.createElement('child-2')) },
// Lazy component route
{ path: '/bar-2', component: () => import('child-2.element').then(m => m.Child2Element) },
// Child Paths. Will Match on any router that starts with /child-1
{ path: '/child-1(.*)', component: () => Child1Element }
];
@component({
tagName: 'app-root',
render: template(() => {
return html`
<router-link path-match="full">
<a href="/">Go To Home</a>
</router-link>
<router-link>
<a href="/bar">Go To Bar</a>
</router-link>
<router-outlet .routes=${routes}></router-outlet>
`;
})
})
export class AppElement extends JoistElement {}
@component({
tagName: 'child-1',
render: template(() => {
return html`
<h1>Hello From Child 1</h1>
<router-outlet .routes=${[
{ path: '/child-1/child-2', component: () => Child2Element }
]}></router-outlet>
`
})
})
class Child1Element extends JoistElement {
@get(RouteCtx)
private route: RouteCtx;
connectedCallback() {
super.connectedCallback();
console.log(this.route.value);
this.route.onChange(ctx => {
console.log(ctx);
})
}
}