ler

lit-element-router

A LitElement Router (1278 bytes gzip)

Showing:

Popularity

Downloads/wk

299

GitHub Stars

92

Maintenance

Last Commit

1yr ago

Contributors

5

Package

Dependencies

0

Size (min+gzip)

1.1KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial