lit-element-router
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

LitElement Router

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

Coverage Status npm version Published on webcomponents.org Known Vulnerabilities CircleCI

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
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
Mobile Safari
Samsung
Samsung
Opera
Opera
Electron
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
Hamed Asemi
Lazy Llama
Lazy Llama
Andreas Kohn
Andreas Kohn
zzzgit
zzzgit
truongminh
Nguyễn Trường Minh

Contributions

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

git clone git@github.com:hamedasemi/lit-element-router.git
git clone git@github.com: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

Package Sidebar

Install

npm i lit-element-router

Weekly Downloads

738

Version

2.0.3

License

ISC

Unpacked Size

27.1 kB

Total Files

8

Last publish

Collaborators

  • hamedabolghasemi