npmpackage.info

Gathering detailed insights and metrics for lit-redux-router

Other packages similar to lit-redux-router

@evergreen-wc/lazyroute

0.1.1

Lazyload routes with lit-redux-router

Gathering detailed insights and metrics for lit-redux-router

lit-redux-router - 0.22.0 | npmpackage.info

lit-redux-router

Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element

0.22.0

121

MIT

TypeScript

1.94 kB

83,448 5

Installations

npm install lit-redux-router

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

21.5.0

NPM Version

10.2.5 Score

65.9

Supply Chain

98.3

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

488

Closed

67

Merged

421

Issues

Open

0

Total

38

Closed

38

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

TypeScript (91.18%)

JavaScript (8.82%)

Developer

fernandopasik

Download Statistics

Total Downloads

83,448

Last Day

Last Week

111

Last Month

662

Last Year

9,323

GitHub Statistics

MIT License

121 Stars

1,279 Commits

15 Forks

7 Watchers

2 Branches

7 Contributors

Updated on May 09, 2025

Bundle Size

4.71 kB

Minified

1.94 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

0.22.0

Package Id

lit-redux-router@0.22.0

Unpacked Size

69.42 kB

Size

18.77 kB

File Count

NPM Version

10.2.5

Node Version

21.5.0

Published on

Jan 28, 2024

Total Downloads

Cumulative downloads

Total Downloads

83,448

Last Day

21.2%

Compared to previous day

Last Week

-52.6%

111

Compared to previous week

Last Month

-50.3%

662

Compared to previous month

Last Year

5.9%

9,323

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

regexparam

Peer Dependencies

lit pwa-helpers redux

Dev Dependencies

Lit Redux Router

Declarative way of routing for lit powered by pwa-helpers and redux.

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.

Install

Install this library and its peer dependencies

1npm 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.

1import { createStore, compose, combineReducers } from 'redux';
2import { reducer } from './reducer';
3import { lazyReducerEnhancer } from 'pwa-helpers';
4
5export const store = createStore(reducer, compose(lazyReducerEnhancer(combineReducers)));

Then the router needs to connect to a redux store.

1import { LitElement, html } from 'lit';
2import { connectRouter } from 'lit-redux-router';
3import store from './store.js';
4
5connectRouter(store);

lit-route component can render the components when the path attribute matches. The corresponding active lit-route element will reflect the active attribute.

1class MyApp extends LitElement {
2  render() {
3    return html`
4      <div class="app-content">
5        <lit-route path="/" active><h1>Home</h1></lit-route>
6        <lit-route path="/about"><h1>About</h1></lit-route>
7      </div>
8    `;
9  }
10}
11customElements.define('my-app', MyApp);

Ideally all content would be in a component and can be passed to lit-route through a component attribute.

1class AppHome extends LitElement {
2  render() {
3    return html`<h1>Home</h1>`;
4  }
5}
6customElements.define('app-home', AppHome);
7
8class AppAbout extends LitElement {
9  render() {
10    return html`<h1>About</h1>`;
11  }
12}
13customElements.define('app-about', AppAbout);
14
15class MyApp extends LitElement {
16  render() {
17    return html`
18      <div class="app-content">
19        <lit-route path="/" component="app-home"></lit-route>
20        <lit-route path="/about" component="app-about"></lit-route>
21      </div>
22    `;
23  }
24}
25customElements.define('my-app', MyApp);

lit-route can map path variables and inject them in the provided component.

1class AppProduct extends LitElement {
2  static get properties() {
3    return {
4      id: String,
5    };
6  }
7
8  render() {
9    return html`<h1>Product with id: ${this.id}</h1>`;
10  }
11}
12customElements.define('app-product', AppProduct);
13
14class MyApp extends LitElement {
15  render() {
16    return html`
17      <div class="app-content">
18        <lit-route path="/products/:id" component="app-product"></lit-route>
19      </div>
20    `;
21  }
22}
23customElements.define('my-app', MyApp);

When no path attribute is provided to lit-route, it will render when no route matches (404)

1class MyApp extends LitElement {
2  render() {
3    return html`
4      <div class="app-content">
5        <lit-route path="/"><h1>Home</h1></lit-route>
6        <lit-route><h1>404 Not found</h1></lit-route>
7      </div>
8    `;
9  }
10}
11customElements.define('my-app', MyApp);

To trigger navigation without using a link element, the action navigate can be imported and triggered with the wanted path

1import { navigate } from 'lit-redux-router';
2import store from './store.js';
3
4class MyApp extends LitElement {
5  goTo(path) {
6    store.dispatch(navigate(path));
7  }
8
9  render() {
10    return html`
11      <div class="app-content">
12        <button @click="${() => this.goTo('/about')}">learn more about us</button>
13      </div>
14    `;
15  }
16}
17customElements.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

1import { navigate } from 'lit-redux-router';
2import store from './store.js';
3
4class MyApp extends LitElement {
5  render() {
6    return html`
7      <div class="app-content">
8        <lit-route
9          path="/docs"
10          component="my-docs"
11          .resolve="${() => import('./docs.js')}"
12          loading="my-loading"
13        ></lit-route>
14      </div>
15    `;
16  }
17}
18customElements.define('my-app', MyApp);
19
20class MyLoading extends LitElement {
21  render() {
22    return html`
23      <style>
24        h1 {
25          margin-top: 0;
26          margin-bottom: 16px;
27        }
28      </style>
29      <h1>Loading...</h1>
30    `;
31  }
32}
33
34customElements.define('my-loading', MyLoading);

The window will scroll to top by default, to disable add the attribute scrollDisable

1<lit-route path="/whatever" component="my-whatever" scrollDisable></lit-route>

To scroll to the route element on load, you can set the scrollIntoViewOptions object in the attribute .scrollOpt

1<lit-route
2  path="/whatever"
3  component="my-whatever"
4  .scrollOpt="${{behavior: 'smooth', block:'end', inline:'nearest'}}"
5></lit-route>

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

1npm run start

Run lint and test tasks

1npm run test
2npm run lint

Build the library

1npm run build

Check the full size of the library

1npm run size

Built with

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Fernando Pasik}
🐛 💻 📖 🤔

_{Grant Hutchinson}
🐛 💻 📖 🤔

_{Andrew Noblet}
🐛 💻

_{Zain Afzal}
📖

_{Christian Sterzl}
🐛 💻

_{Benjamin Franzke}
🐛 💻

_Ramy
🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependabot.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/dependabot.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/dependabot.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/dependabot.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:98: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:100: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:102: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/reports.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/fernandopasik/lit-redux-router/reports.yml/main?enable=pin
Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 10 third-party GitHubAction dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

5

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More