LitElement Router

A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.

Installation

npm install lit-element-router --save

Working Examples

You can find working example projects on StackBlitz:

Simple: https://stackblitz.com/edit/lit-element-router
Authentication: https://stackblitz.com/edit/lit-element-router-authentication
Authentication and Authorization (todo): https://stackblitz.com/edit/lit-element-router-authentication-and-authorization
Advanced (todo): https://stackblitz.com/edit/lit-element-router-advanced
Multi Router (todo): https://stackblitz.com/edit/lit-element-router-multi
All In One: https://stackblitz.com/edit/lit-element-router-all-in-one

Usage

Add the Router to LitElement using the router method then register the routes and the router callback.

import { LitElement, html } from 'lit-element';
import { router } from 'lit-element-router';
 
import './app-link';
import './app-main';
 
@router
class App extends LitElement {
// OR
class App extends router(LitElement) {
  static get properties() {
    return {
      route: { type: String },
      params: { type: Object },
      query: { type: Object }
    };
  }
 
  static get routes() {
    return [{
      name: 'home',
      pattern: '',
      data: { title: 'Home' }
    }, {
      name: 'info',
      pattern: 'info'
    }, {
      name: 'user',
      pattern: 'user/:id'
    }, {
      name: 'not-found',
      pattern: '*'
    }];
  }
 
  constructor() {
    super();
    this.route = '';
    this.params = {};
    this.query = {};
  }
 
  router(route, params, query, data) {
    this.route = route;
    this.params = params;
    this.query = query;
    console.log(route, params, query, data);
  }
 
  render() {
    return html`
      <app-link href="/">Home</app-link>
      <app-link href="/info">Info</app-link>
      <app-link href="/info?data=12345">Info?data=12345</app-link>
      <app-link href="/user/14">user/14</app-link>
 
      <app-main active-route=${this.route}>
          <h1 route='home'>Home</h1>
          <h1 route='info'>Info ${this.query.data}</h1>
          <h1 route='user'>User ${this.params.id} </h1>
          <h1 route='not-found'>Not Found </h1>
      </app-main>
    `;
  }
}
 
customElements.define('my-app', App);

Add the Outlet to LitElement using the outlet method.

import { LitElement, html } from 'lit-element';
import { outlet } from 'lit-element-router';
 
@outlet
class Main extends LitElement {
// OR
class Main extends outlet(LitElement) {
  render() {
    return html`
      <slot></slot>
    `;
  }
}
 
customElements.define('app-main', Main);

Add the Navigator to LitElement using the navigator method then use the navigate method to navigate.

import { LitElement, html } from 'lit-element';
import { navigator } from 'lit-element-router';
 
@navigator
class Link extends LitElement {
// OR
class Link extends navigator(LitElement) {
    static get properties() {
        return {
            href: { type: String }
        };
    }
    constructor() {
        super();
        this.href = '';
    }
    render() {
        return html`
            <a href='${this.href}' @click='${this.linkClick}'>
                <slot></slot>
            </a>
        `;
    }
    linkClick(event) {
        event.preventDefault();
        this.navigate(this.href);
    }
}
 
customElements.define('app-link', Link);

Supported Browsers

Edge	Firefox	Chrome	Safari	Mobile Safari	Samsung	Opera	Electron
Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions	Last 2 versions

Contributors

Hamed Asemi

Lazy Llama

Andreas Kohn

zzzgit

Nguyễn Trường Minh

Contributions

Clone these two repositories and put them side by side in a common folder:

git clone [e-mail]:hamedasemi/lit-element-router.git

git clone [e-mail]:hamedasemi/lit-element-router-test.git

Navigate to both lit-element-router and lit-element-router-test directories and install dependencies

npm install

Navigate to lit-element-router-test and run the webpack dev server

npm run serve

Start the development on lit-element-router, observe and test changes right in the lit-element-router-test live

Run the test locally (only necessary if you are developing the utility)

npm test

Add your name and picture to the contributors' list at lit-element-router repository https://github.com/hamedasemi/lit-element-router#contributors

Create a pull request of your changes on both repositories lit-element-router and lit-element-router-test