lit-html-free-router
work in progress, very simple docs, se demo for more info api changing a lot- will do untill I get time to refactor/clean up all code Im extperimenting with
Sample https://stackblitz.com/edit/lit-html-free-router?file=routersConfig.ts
install
``npm install lit-html-free-router@alpha`
register routes
import { unknowRouteHandler, authRouteHandler, addRouterConfig, goto, href } from 'lit-html-free-router';
// unknow route handler
unknowRouteHandler(()=>{
goto(href('unknown'))
})
authRouteHandler(()=>{
alert('you have no access');
goto(href('home'))
return false;
})
authRouteHandler('main', [
{
path: '',
name: 'Home',
load: () => {
return import('./routes/home');
},
componentName: 'home-comp',
},
{
path: 'settings',
name: 'Settings',
load: () => {
return import('./routes/settings');
},
componentName: 'settings-comp',
},
{
path: 'login',
name: 'Login',
load: () => {
return import('./routes/login');
},
componentName: 'login-comp',
isNav: false
},
{
path: 'protected',
name: 'Protected',
load: () => {
return import('./routes/protected');
},
componentName: 'protected-comp',
isAuth: true
}]);
add nav links
To in you render method in main application and add <free-router name="main"></free-router>
import { navs } from 'lit-html-free-router';
.....
public render() {
return html`
<ul class="flex bg-teal-500 p-6">
${navs('main').map(route => {
if (route.isNav) {
return html`
<li >
<a href="${route.href}">${route.name}</a>
</li>
`;
}})
}
</ul>
<free-router name="main"></free-router>
`;
}
