lit-html-utils v1.0.0-alpha.1

lit-html-free-router

work in progress, very simple docs, se demo for more info

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>             
    `;
    }