A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
npm install lit-element-router




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 ${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);
`
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 |
Hamed Asemi | Lazy Llama | Andreas Kohn | zzzgit | Nguyễn Trường Minh |
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