Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fernandopasik/lit-redux-router
Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element
https://github.com/fernandopasik/lit-redux-router
lit lit-element lit-elements redux router routing web-component web-components web-components-library
Last synced: 2 days ago
JSON representation
Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element
- Host: GitHub
- URL: https://github.com/fernandopasik/lit-redux-router
- Owner: fernandopasik
- License: mit
- Created: 2018-05-26T18:29:09.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-19T10:46:10.000Z (12 days ago)
- Last Synced: 2024-12-22T10:05:45.316Z (9 days ago)
- Topics: lit, lit-element, lit-elements, redux, router, routing, web-component, web-components, web-components-library
- Language: TypeScript
- Homepage:
- Size: 4.34 MB
- Stars: 121
- Watchers: 8
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Lit Redux Router
[](https://unpkg.com/lit-redux-router/lit-redux-router.min.js 'Gzip Bundle Size')
[](https://github.com/fernandopasik/lit-redux-router/actions/workflows/main.yml 'Build Status')
[](https://codecov.io/gh/fernandopasik/lit-redux-router 'Coverage Status')
[](https://snyk.io/test/github/fernandopasik/lit-redux-router?targetFile=package.json 'Known Vulnerabilities')
[](#contributors)
[](https://www.npmjs.com/package/lit-redux-router 'npm version')
[](https://www.npmjs.com/package/lit-redux-router 'npm downloads')
[](https://webcomponents.org/element/lit-redux-router 'Webcomponents url')
Declarative way of routing for [lit](https://github.com/lit/lit) powered by [pwa-helpers](https://github.com/Polymer/pwa-helpers) and [redux](https://redux.js.org/).
A minimal router solution (~1.7 kb Gzipped) that consist in using `lit-route` elements and **connecting** them to the store.
The routing approach is based on the [PWA Starter Kit](https://github.com/polymer/pwa-starter-kit).
## Install
Install this library and its peer dependencies
```sh
npm i lit-redux-router lit pwa-helpers redux
```
## Usage
Firstly ensure that the redux store has been created with the `lazyReducerEnhancer`, which allows for reducers to be installed lazily after initial store setup.
```js
import { createStore, compose, combineReducers } from 'redux';
import { reducer } from './reducer';
import { lazyReducerEnhancer } from 'pwa-helpers';
export const store = createStore(reducer, compose(lazyReducerEnhancer(combineReducers)));
```
Then the router needs to **connect to a redux store**.
```js
import { LitElement, html } from 'lit';
import { connectRouter } from 'lit-redux-router';
import store from './store.js';
connectRouter(store);
```
`lit-route` component can render the components when the **path attribute** matches. The corresponding active `lit-route` element will reflect the **active attribute**.
```js
class MyApp extends LitElement {
render() {
return html`
Home
About
`;
}
}
customElements.define('my-app', MyApp);
```
Ideally all content would be in a component and can be passed to `lit-route` through a **component attribute**.
```js
class AppHome extends LitElement {
render() {
return html`
Home
`;
}
}
customElements.define('app-home', AppHome);
class AppAbout extends LitElement {
render() {
return html`
About
`;
}
}
customElements.define('app-about', AppAbout);
class MyApp extends LitElement {
render() {
return html`
`;
}
}
customElements.define('my-app', MyApp);
```
`lit-route` can **map path variables** and inject them in the provided component.
```js
class AppProduct extends LitElement {
static get properties() {
return {
id: String,
};
}
render() {
return html`
Product with id: ${this.id}
`;
}
}
customElements.define('app-product', AppProduct);
class MyApp extends LitElement {
render() {
return html`
`;
}
}
customElements.define('my-app', MyApp);
```
When no path attribute is provided to `lit-route`, it will render when no route matches (404)
```js
class MyApp extends LitElement {
render() {
return html`
Home
404 Not found
`;
}
}
customElements.define('my-app', MyApp);
```
To trigger navigation without using a link element, the action `navigate` can be imported and triggered with the wanted path
```js
import { navigate } from 'lit-redux-router';
import store from './store.js';
class MyApp extends LitElement {
goTo(path) {
store.dispatch(navigate(path));
}
render() {
return html`
this.goTo('/about')}">learn more about us
`;
}
}
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
```js
import { navigate } from 'lit-redux-router';
import store from './store.js';
class MyApp extends LitElement {
render() {
return html`
`;
}
}
customElements.define('my-app', MyApp);
class MyLoading extends LitElement {
render() {
return html`
h1 {
margin-top: 0;
margin-bottom: 16px;
}
Loading...
`;
}
}
customElements.define('my-loading', MyLoading);
```
The window will scroll to top by default, to disable add the attribute `scrollDisable`
```html
```
To scroll to the route element on load, you can set the [scrollIntoViewOptions](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Example) object in the attribute `.scrollOpt`
```html
```
Check a more comprehensive example in https://github.com/fernandopasik/lit-redux-router/blob/main/demo/
## Development
Start server with example and watch mode for building the library
```sh
npm run start
```
Run lint and test tasks
```sh
npm run test
npm run lint
```
Build the library
```sh
npm run build
```
Check the full size of the library
```sh
npm run size
```
## Built with
- [regexparam](https://github.com/lukeed/regexparam) - A tiny utility that converts route patterns into RegExp
- [lit](https://github.com/lit/lit) - Lit is a simple library for building fast, lightweight web components
- [pwa-helpers](https://github.com/Polymer/pwa-helpers) - Small helper methods or mixins to help you build web apps
- [Redux](https://redux.js.org/) - Predictable state container for JavaScript apps
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Fernando Pasik
🐛 💻 📖 🤔
Grant Hutchinson
🐛 💻 📖 🤔
Andrew Noblet
🐛 💻
Zain Afzal
📖
Christian Sterzl
🐛 💻
Benjamin Franzke
🐛 💻
Ramy
🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
MIT (c) 2018 [Fernando Pasik](https://fernandopasik.com)