{"id":28089522,"url":"https://github.com/dedego/web-component-router","last_synced_at":"2025-07-28T11:02:51.844Z","repository":{"id":35034211,"uuid":"198913700","full_name":"dedego/web-component-router","owner":"dedego","description":"Simple web component router","archived":false,"fork":false,"pushed_at":"2023-01-04T21:56:42.000Z","size":1205,"stargazers_count":19,"open_issues_count":17,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-06T22:41:08.039Z","etag":null,"topics":["javascript","router","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/simple-wc-router","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dedego.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-25T23:25:56.000Z","updated_at":"2025-05-17T10:34:02.000Z","dependencies_parsed_at":"2023-01-15T12:27:17.218Z","dependency_job_id":null,"html_url":"https://github.com/dedego/web-component-router","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dedego/web-component-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dedego%2Fweb-component-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dedego%2Fweb-component-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dedego%2Fweb-component-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dedego%2Fweb-component-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dedego","download_url":"https://codeload.github.com/dedego/web-component-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dedego%2Fweb-component-router/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267505099,"owners_count":24098346,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","router","webcomponents"],"created_at":"2025-05-13T12:59:30.886Z","updated_at":"2025-07-28T11:02:51.822Z","avatar_url":"https://github.com/dedego.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Web Component Router\n![alt text](simple-wc-router.png \"Simple \u003cWeb Component /\u003e Router\")\n\nThis is a *simple web component router* that hooks into both the history API and the web components API. You can use this to setup routing for your web components application.\n\n**Features:**\n\n- Dynamic imports (Lazy loading for javascript modules)\n- Simple setup\n- Flexibility using either the `render` method or a `component` name for rendering a route  \n\n**Documentation:**\n- [Getting Started](#getting-started)\n- [Router](#router)\n- [RouteMixin](#routemixin)\n\n---\n\n## Getting started\n\n**Installation**\n```javascript\nnpm install simple-wc-router --save\n```\n\n```javascript\nyarn add simple-wc-router\n```\n\n**Usage**\n\nYou can import the Router and/or RouteMixin from the package and use it to extends the web component class\n```javascript\nimport { Router, RouteMixin } from 'simple-wc-router';\n\nclass SomeComponent extends Router(SomeWebComponentLibrary) {\n```\n\n---\n\n## Router\n\nTo make sure the routing works as intended, please add a base tag to your root HTML page, like so:\n```html\n\u003cbase href=\"/\"\u003e\n```\nThe base href itself does not have to be `/`.\n\nThe Router is a class mixin which you can use to extend your webcomponent. The following example will show you how to use it.\n\n### Exampe with Lit Element\n\n\u003e As of version 2.1.0 a render method is added to the route definitions.\n\n\u003e As of version 2.3.0 you can have optional path parts.\n\nYou can make use of [dynamic imports](https://v8.dev/features/dynamic-import) if your build tooling supports it. If not make sure the components have been (imported and) defined. The imported component will be passed a `routeProps` object containing the properties that are set in the route.\n\nYou can define paths as: \n\n| Type | Syntax | Explanation |\n| ---- | ------ | ----------- |\n| Normal | `/stocks/latest` | This route can only be exactly matched. |\n| Dynamic | `/stocks/:type` | This route contains the variable *type*, the value will be provided as routeProps to the given component. |\n| Optional | `/stocks/:type/:?period` | The route contains both a variable *type* and *period*. Where *period* is optional. The route will be matched with and without the *period* route part. |\n| Wildcard | `*` | This is a fallback pattern if no routes are matched. |\n\n**app.js**\n```javascript\nimport { LitElement, html } from 'lit-element';\nimport { Router } from 'simple-wc-router';\nimport './pages/page_home';\nimport './components';\n\nconst globalProp = \"version-1.2.3\";\n\nclass App extends Router(LitElement) {\n    static get routes() {\n        return [\n            // Root path\n            {\n                path: \"/\",\n                component: \"page-home\"\n            },\n            // Using 'type' and 'day' variable.\n            {\n                path: \"/stock/:type/:day\",\n                component: \"page-stocks\",\n                import: () =\u003e import(\"./src/page_stock.js\")\n            },\n            // Using 'stockId' and optionally 'againstRate' variable.\n            {\n                path: \"/trade/:stockId/:?againstRate\",\n                component: \"page-trade\",\n                import: () =\u003e import(\"./src/page_trade.js\")\n            },\n            // Using 'category' variable.\n            {\n                path: \"/news/:category\",\n                render: routeProps =\u003e html`\n                    \u003cpage-news \n                        .category=${routeProps.category} \n                        .someOtherGlobalProp=${globalProp}\u003e\n                    \u003c/page-news\u003e`,\n                import: () =\u003e import(\"./src/page_news.js\")\n            },\n            // Fallback for all unmatched routes.  \n            {\n                path: \"*\",\n                render: () =\u003e html`\u003ch2\u003e404 The requested page could not be found\u003c/h2\u003e`\n            }\n        ];\n    }\n    render() {\n        return html`\n            \u003capp-header\u003e\n                \u003ch1 slot=\"left\"\u003e... some title goes here ...\u003c/h1\u003e\n                \u003cnav slot=\"right\"\u003e... some navigation goes here ...\u003c/nav\u003e\n            \u003c/app-header\u003e\n            \u003cmain\u003e\n                ${this.routeElement}\n            \u003c/main\u003e\n            \u003capp-footer\u003e\n                ... some copyright goes here ...\n            \u003c/app-footer\u003e\n        `\n    }\n}\ncustomElements.define('my-app', App);\n```\n\n**page_stocks.js**\n```javascript\nimport { LitElement, html } from 'lit-element';\n\nclass Stocks extends LitElement {\n    render() {\n        // If provided, the properties for type and day are taking from the path.\n        const { type = 'NASDAC', day = 'monday' } = this.routeProps;\n        return html`This is the page for ${type} on a ${day}`\n    }\n}\ncustomElements.define('page-stocks', Stocks);\n```\n\n---\n\n## RouteMixin\n\nThe RouteMixin class should be used for those components that trigger navigation. The `navigate` method is added to the class, which only requires you to set a `route` property. The `navigate` method can also be called with a route. The mixin also provides you a boolean that tells you if the given route is active (`isRouteActive`) which you can utilize for e.g. styles.\n\n```javascript\nimport { LitElement, html, css } from 'lit-element';\nimport { RouteMixin } from 'simple-wc-router'; \n\nclass Button extends RouteMixin(LitElement) {\n    static get properties() {\n        return {\n           route: String,\n           disabled: Boolean\n        }\n    }\n    static get styles() {\n        return css`\n            :host \u003e button.active {\n                color: red;\n            }\n        `;\n    }\n    handleClick() {\n        if (this.disabled) this.navigate('/button-was-disabled-why-did-you-click-it');\n        this.navigate();\n    }\n    render() {\n        const activeClass = this.isRouteActive ? 'active' : '';\n        const clickHandler = this.handleClick.bind(this);\n        return html`\n            \u003cbutton class=\"${activeClass}\" @click=\"${clickHandler}\"\u003e\n                \u003cslot\u003e\u003c/slot\u003e\n            \u003c/button\u003e\n        `;\n    }    \n}\ncustomElements.define('w-button', Button);\n```\n\nNow when you want to use the component, it is as simple as:\n\n```html\n\u003cw-button route=\"/foo/bar\"\u003eThe only bar in town... FooBar\u003c/w-button\u003e\n```\n\n## Changelog\n\n| Version | Changes                                                                          |\n| ------- | -------------------------------------------------------------------------------- |\n| 1.0.0   | Initial version of simple web component router                                   |\n| 1.0.1   | Small bugfix                                                                     |\n| 1.0.2   | Another small bugfix                                                             |\n| 1.1.0   | Changed the routing setup                                                        |\n| 2.0.0   | Changed route matching, routes must be defined as static. Also created example to play around.                          |\n| 2.1.0   | Added a render method to the route definition.                                   |\n| 2.2.0   | Added wildcard posibility.                                                       |\n| 2.2.1   | Changed the documentation.                                                       |\n| 2.3.0   | Added optional routing based on the suggestion JaySunSyn                         |\n| 2.3.1   | Fixed NPM audit finding                                                          |\n| 2.3.2   | Improved documentation                                                           |\n| 2.3.3   | Improved documentation                                                           |\n| 2.3.4   | Improved build size                                                              |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedego%2Fweb-component-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdedego%2Fweb-component-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedego%2Fweb-component-router/lists"}