{"id":18008888,"url":"https://github.com/fernandopasik/lit-redux-router","last_synced_at":"2025-05-16T08:03:03.559Z","repository":{"id":38484867,"uuid":"134985658","full_name":"fernandopasik/lit-redux-router","owner":"fernandopasik","description":"Declarative way of routing for lit-html powered by pwa-helpers, redux and lit-element","archived":false,"fork":false,"pushed_at":"2025-05-15T10:46:14.000Z","size":6014,"stargazers_count":121,"open_issues_count":0,"forks_count":15,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-16T08:01:47.757Z","etag":null,"topics":["lit","lit-element","lit-elements","redux","router","routing","web-component","web-components","web-components-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fernandopasik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-26T18:29:09.000Z","updated_at":"2025-05-15T10:46:17.000Z","dependencies_parsed_at":"2024-04-23T12:14:14.123Z","dependency_job_id":"592520a9-4514-450e-b7d7-9550882aa3e8","html_url":"https://github.com/fernandopasik/lit-redux-router","commit_stats":{"total_commits":1103,"total_committers":8,"mean_commits":137.875,"dds":"0.22756119673617403","last_synced_commit":"0ac77ecf399896bfdf7803851ae57c2bda4351ba"},"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandopasik%2Flit-redux-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandopasik%2Flit-redux-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandopasik%2Flit-redux-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandopasik%2Flit-redux-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fernandopasik","download_url":"https://codeload.github.com/fernandopasik/lit-redux-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493381,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit","lit-element","lit-elements","redux","router","routing","web-component","web-components","web-components-library"],"created_at":"2024-10-30T02:07:46.029Z","updated_at":"2025-05-16T08:03:03.524Z","avatar_url":"https://github.com/fernandopasik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lit Redux Router\n\n\u003c!-- BADGES - START --\u003e\n\n[![Gzip Bundle Size](https://img.badgesize.io/https://unpkg.com/lit-redux-router/lit-redux-router.min.js?compression=gzip)](https://unpkg.com/lit-redux-router/lit-redux-router.min.js 'Gzip Bundle Size')\n[![Build Status](https://github.com/fernandopasik/lit-redux-router/actions/workflows/main.yml/badge.svg)](https://github.com/fernandopasik/lit-redux-router/actions/workflows/main.yml 'Build Status')\n[![Coverage Status](https://codecov.io/gh/fernandopasik/lit-redux-router/branch/main/graph/badge.svg)](https://codecov.io/gh/fernandopasik/lit-redux-router 'Coverage Status')\n[![Known Vulnerabilities](https://snyk.io/test/github/fernandopasik/lit-redux-router/badge.svg?targetFile=package.json)](https://snyk.io/test/github/fernandopasik/lit-redux-router?targetFile=package.json 'Known Vulnerabilities')\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)\n[![npm version](https://img.shields.io/npm/v/lit-redux-router.svg?logo=npm)](https://www.npmjs.com/package/lit-redux-router 'npm version')\n[![npm downloads](https://img.shields.io/npm/dm/lit-redux-router.svg)](https://www.npmjs.com/package/lit-redux-router 'npm downloads')\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/lit-redux-router 'Webcomponents url')\n\n\u003c!-- BADGES - END --\u003e\n\nDeclarative 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/).\n\nA minimal router solution (~1.7 kb Gzipped) that consist in using `lit-route` elements and **connecting** them to the store.\n\nThe routing approach is based on the [PWA Starter Kit](https://github.com/polymer/pwa-starter-kit).\n\n## Install\n\nInstall this library and its peer dependencies\n\n```sh\nnpm i lit-redux-router lit pwa-helpers redux\n```\n\n## Usage\n\nFirstly ensure that the redux store has been created with the `lazyReducerEnhancer`, which allows for reducers to be installed lazily after initial store setup.\n\n```js\nimport { createStore, compose, combineReducers } from 'redux';\nimport { reducer } from './reducer';\nimport { lazyReducerEnhancer } from 'pwa-helpers';\n\nexport const store = createStore(reducer, compose(lazyReducerEnhancer(combineReducers)));\n```\n\nThen the router needs to **connect to a redux store**.\n\n```js\nimport { LitElement, html } from 'lit';\nimport { connectRouter } from 'lit-redux-router';\nimport store from './store.js';\n\nconnectRouter(store);\n```\n\n`lit-route` component can render the components when the **path attribute** matches. The corresponding active `lit-route` element will reflect the **active attribute**.\n\n```js\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003clit-route path=\"/\" active\u003e\u003ch1\u003eHome\u003c/h1\u003e\u003c/lit-route\u003e\n        \u003clit-route path=\"/about\"\u003e\u003ch1\u003eAbout\u003c/h1\u003e\u003c/lit-route\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n```\n\nIdeally all content would be in a component and can be passed to `lit-route` through a **component attribute**.\n\n```js\nclass AppHome extends LitElement {\n  render() {\n    return html`\u003ch1\u003eHome\u003c/h1\u003e`;\n  }\n}\ncustomElements.define('app-home', AppHome);\n\nclass AppAbout extends LitElement {\n  render() {\n    return html`\u003ch1\u003eAbout\u003c/h1\u003e`;\n  }\n}\ncustomElements.define('app-about', AppAbout);\n\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003clit-route path=\"/\" component=\"app-home\"\u003e\u003c/lit-route\u003e\n        \u003clit-route path=\"/about\" component=\"app-about\"\u003e\u003c/lit-route\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n```\n\n`lit-route` can **map path variables** and inject them in the provided component.\n\n```js\nclass AppProduct extends LitElement {\n  static get properties() {\n    return {\n      id: String,\n    };\n  }\n\n  render() {\n    return html`\u003ch1\u003eProduct with id: ${this.id}\u003c/h1\u003e`;\n  }\n}\ncustomElements.define('app-product', AppProduct);\n\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003clit-route path=\"/products/:id\" component=\"app-product\"\u003e\u003c/lit-route\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n```\n\nWhen no path attribute is provided to `lit-route`, it will render when no route matches (404)\n\n```js\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003clit-route path=\"/\"\u003e\u003ch1\u003eHome\u003c/h1\u003e\u003c/lit-route\u003e\n        \u003clit-route\u003e\u003ch1\u003e404 Not found\u003c/h1\u003e\u003c/lit-route\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n```\n\nTo trigger navigation without using a link element, the action `navigate` can be imported and triggered with the wanted path\n\n```js\nimport { navigate } from 'lit-redux-router';\nimport store from './store.js';\n\nclass MyApp extends LitElement {\n  goTo(path) {\n    store.dispatch(navigate(path));\n  }\n\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003cbutton @click=\"${() =\u003e this.goTo('/about')}\"\u003elearn more about us\u003c/button\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n```\n\nTo lazy load a component on route change and optionally show a loading component while waiting for the import to resolve\n\n```js\nimport { navigate } from 'lit-redux-router';\nimport store from './store.js';\n\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cdiv class=\"app-content\"\u003e\n        \u003clit-route\n          path=\"/docs\"\n          component=\"my-docs\"\n          .resolve=\"${() =\u003e import('./docs.js')}\"\n          loading=\"my-loading\"\n        \u003e\u003c/lit-route\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\ncustomElements.define('my-app', MyApp);\n\nclass MyLoading extends LitElement {\n  render() {\n    return html`\n      \u003cstyle\u003e\n        h1 {\n          margin-top: 0;\n          margin-bottom: 16px;\n        }\n      \u003c/style\u003e\n      \u003ch1\u003eLoading...\u003c/h1\u003e\n    `;\n  }\n}\n\ncustomElements.define('my-loading', MyLoading);\n```\n\nThe window will scroll to top by default, to disable add the attribute `scrollDisable`\n\n```html\n\u003clit-route path=\"/whatever\" component=\"my-whatever\" scrollDisable\u003e\u003c/lit-route\u003e\n```\n\nTo 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`\n\n```html\n\u003clit-route\n  path=\"/whatever\"\n  component=\"my-whatever\"\n  .scrollOpt=\"${{behavior: 'smooth', block:'end', inline:'nearest'}}\"\n\u003e\u003c/lit-route\u003e\n```\n\nCheck a more comprehensive example in https://github.com/fernandopasik/lit-redux-router/blob/main/demo/\n\n## Development\n\nStart server with example and watch mode for building the library\n\n```sh\nnpm run start\n```\n\nRun lint and test tasks\n\n```sh\nnpm run test\nnpm run lint\n```\n\nBuild the library\n\n```sh\nnpm run build\n```\n\nCheck the full size of the library\n\n```sh\nnpm run size\n```\n\n## Built with\n\n- [regexparam](https://github.com/lukeed/regexparam) - A tiny utility that converts route patterns into RegExp\n- [lit](https://github.com/lit/lit) - Lit is a simple library for building fast, lightweight web components\n- [pwa-helpers](https://github.com/Polymer/pwa-helpers) - Small helper methods or mixins to help you build web apps\n- [Redux](https://redux.js.org/) - Predictable state container for JavaScript apps\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://fernandopasik.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1301335?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFernando Pasik\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3Afernandopasik\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=fernandopasik\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=fernandopasik\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-fernandopasik\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/hutchgrant\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1429612?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGrant Hutchinson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3Ahutchgrant\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=hutchgrant\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=hutchgrant\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-hutchgrant\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/anoblet\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7674171?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Noblet\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3Aanoblet\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=anoblet\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.zainafzal.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/12245732?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eZain Afzal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=zainafzal08\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://christian.sterzl.info\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/689270?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChristian Sterzl\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3AWaxolunist\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=Waxolunist\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://bnf.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/473155?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBenjamin Franzke\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3Abnf\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=bnf\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ramykl\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5079228?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRamy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/fernandopasik/lit-redux-router/issues?q=author%3Aramykl\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/fernandopasik/lit-redux-router/commits?author=ramykl\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\nMIT (c) 2018 [Fernando Pasik](https://fernandopasik.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandopasik%2Flit-redux-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandopasik%2Flit-redux-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandopasik%2Flit-redux-router/lists"}