- Notifications
You must be signed in to change notification settings - Fork16
Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element
License
fernandopasik/lit-redux-router
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Declarative way of routing forlit powered bypwa-helpers andredux.
A minimal router solution (~1.7 kb Gzipped) that consist in usinglit-route elements andconnecting them to the store.
The routing approach is based on thePWA Starter Kit.
Install this library and its peer dependencies
npm i lit-redux-router lit pwa-helpers redux
Firstly ensure that the redux store has been created with thelazyReducerEnhancer, which allows for reducers to be installed lazily after initial store setup.
import{createStore,compose,combineReducers}from'redux';import{reducer}from'./reducer';import{lazyReducerEnhancer}from'pwa-helpers';exportconststore=createStore(reducer,compose(lazyReducerEnhancer(combineReducers)));
Then the router needs toconnect to a redux store.
import{LitElement,html}from'lit';import{connectRouter}from'lit-redux-router';importstorefrom'./store.js';connectRouter(store);
lit-route component can render the components when thepath attribute matches. The corresponding activelit-route element will reflect theactive attribute.
classMyAppextendsLitElement{render(){returnhtml`<divclass="app-content"><lit-routepath="/"active><h1>Home</h1></lit-route><lit-routepath="/about"><h1>About</h1></lit-route></div> `;}}customElements.define('my-app',MyApp);
Ideally all content would be in a component and can be passed tolit-route through acomponent attribute.
classAppHomeextendsLitElement{render(){returnhtml`<h1>Home</h1>`;}}customElements.define('app-home',AppHome);classAppAboutextendsLitElement{render(){returnhtml`<h1>About</h1>`;}}customElements.define('app-about',AppAbout);classMyAppextendsLitElement{render(){returnhtml`<divclass="app-content"><lit-routepath="/"component="app-home"></lit-route><lit-routepath="/about"component="app-about"></lit-route></div> `;}}customElements.define('my-app',MyApp);
lit-route canmap path variables and inject them in the provided component.
classAppProductextendsLitElement{staticgetproperties(){return{id:String,};}render(){returnhtml`<h1>Product with id:${this.id}</h1>`;}}customElements.define('app-product',AppProduct);classMyAppextendsLitElement{render(){returnhtml`<divclass="app-content"><lit-routepath="/products/:id"component="app-product"></lit-route></div> `;}}customElements.define('my-app',MyApp);
When no path attribute is provided tolit-route, it will render when no route matches (404)
classMyAppextendsLitElement{render(){returnhtml`<divclass="app-content"><lit-routepath="/"><h1>Home</h1></lit-route><lit-route><h1>404 Not found</h1></lit-route></div> `;}}customElements.define('my-app',MyApp);
To trigger navigation without using a link element, the actionnavigate can be imported and triggered with the wanted path
import{navigate}from'lit-redux-router';importstorefrom'./store.js';classMyAppextendsLitElement{goTo(path){store.dispatch(navigate(path));}render(){returnhtml`<divclass="app-content"><button@click="${()=>this.goTo('/about')}">learn more about us</button></div> `;}}customElements.define('my-app',MyApp);
To lazy load a component on route change and optionally show a loading component while waiting for the import to resolve
import{navigate}from'lit-redux-router';importstorefrom'./store.js';classMyAppextendsLitElement{render(){returnhtml`<divclass="app-content"><lit-routepath="/docs"component="my-docs".resolve="${()=>import('./docs.js')}"loading="my-loading"></lit-route></div> `;}}customElements.define('my-app',MyApp);classMyLoadingextendsLitElement{render(){returnhtml`<style>h1 {margin-top:0;margin-bottom:16px; }</style><h1>Loading...</h1> `;}}customElements.define('my-loading',MyLoading);
The window will scroll to top by default, to disable add the attributescrollDisable
<lit-routepath="/whatever"component="my-whatever"scrollDisable></lit-route>
To scroll to the route element on load, you can set thescrollIntoViewOptions object in the attribute.scrollOpt
<lit-routepath="/whatever"component="my-whatever".scrollOpt="${{behavior: 'smooth', block:'end', inline:'nearest'}}"></lit-route>
Check a more comprehensive example inhttps://github.com/fernandopasik/lit-redux-router/blob/main/demo/
Start server with example and watch mode for building the library
npm run start
Run lint and test tasks
npm runtestnpm run lintBuild the library
npm run build
Check the full size of the library
npm run size
- regexparam - A tiny utility that converts route patterns into RegExp
- lit - Lit is a simple library for building fast, lightweight web components
- pwa-helpers - Small helper methods or mixins to help you build web apps
- Redux - Predictable state container for JavaScript apps
Thanks goes to these wonderful people (emoji key):
Fernando Pasik 🐛💻📖🤔 | Grant Hutchinson 🐛💻📖🤔 | Andrew Noblet 🐛💻 | Zain Afzal 📖 | Christian Sterzl 🐛💻 | Benjamin Franzke 🐛💻 | Ramy 🐛💻 |
This project follows theall-contributors specification. Contributions of any kind welcome!
MIT (c) 2018Fernando Pasik
About
Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element
Topics
Resources
License
Code of conduct
Contributing
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors9
Uh oh!
There was an error while loading.Please reload this page.