# LitElement Router
A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
[](https://coveralls.io/github/hamedasemi/lit-element-router?branch=mainline)
[](https://badge.fury.io/js/lit-element-router)
[](https://www.webcomponents.org/element/lit-element-router)
[](https://snyk.io/test/github/hamedasemi/lit-element-router?targetFile=package.json)
[](https://circleci.com/gh/hamedasemi/lit-element-router)
# 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