Neutralize Pesky Miscreants
    Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i lit-element-router

    DownloadsWeekly Downloads

    281

    Version

    2.0.3

    License

    ISC

    Unpacked Size

    27.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar