LitElement Router

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


Installation

``sh
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.
`javascript
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
Home
Info
Info?data=12345
user/14

Home

Info ${this.query.data}

User ${this.params.id}

Not Found

;
}
}

customElements.define('my-app', App);
`


Add the __Outlet__ to LitElement using the outlet method.
`javascript
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

;
}
}

customElements.define('app-main', Main);
`


Add the __Navigator__ to LitElement using the navigator method then use the navigate method to navigate.
`javascript
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



;
}
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:
`sh
git clone git@github.com:hamedasemi/lit-element-router.git
`
`sh
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
`sh
npm install
`


Navigate to lit-element-router-test and __run__ the webpack dev __server__
`sh
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)
`sh
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