LitElement Router
A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
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.
;; ;; @router // ORLitElement static { return route: type: String params: type: Object query: type: Object ; } static { return name: 'home' pattern: '' data: title: 'Home' name: 'info' pattern: 'info' name: 'user' pattern: 'user/:id' name: 'not-found' pattern: '*' ; } { super; thisroute = ''; thisparams = {}; thisquery = {}; } { thisroute = route; thisparams = params; thisquery = query; console; } { return html` Home Info Info?data=12345 user/14 Home Info User Not Found `; } customElements;
Add the Outlet to LitElement using the outlet method.
;; @outlet // ORLitElement { return html` `; } customElements;
Add the Navigator to LitElement using the navigator method then use the navigate method to navigate.
;; @navigator // ORLitElement static { return href: type: String ; } { super; thishref = ''; } { return html` `; } { event; this; } customElements;
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:
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