{"id":21735415,"url":"https://github.com/syu93/lit-router","last_synced_at":"2025-08-02T19:10:37.607Z","repository":{"id":57164184,"uuid":"173119667","full_name":"syu93/lit-router","owner":"syu93","description":"LitRouter is a simple client side router, page.js based, component loader (PRPL)","archived":false,"fork":false,"pushed_at":"2023-03-03T04:16:56.000Z","size":117,"stargazers_count":10,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T01:53:21.327Z","etag":null,"topics":["lit-element","prpl-pattern","router","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/syu93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2019-02-28T13:44:49.000Z","updated_at":"2023-08-18T12:34:59.000Z","dependencies_parsed_at":"2024-11-26T05:13:15.351Z","dependency_job_id":"91aa0f8e-8bf3-4c39-80a9-6b9aad2bab1b","html_url":"https://github.com/syu93/lit-router","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":0.06666666666666665,"last_synced_commit":"4f0a37e9deed684c9ea178e156fc598837af21e9"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syu93%2Flit-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syu93%2Flit-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syu93%2Flit-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syu93%2Flit-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syu93","download_url":"https://codeload.github.com/syu93/lit-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654052,"owners_count":21140235,"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-element","prpl-pattern","router","webcomponents"],"created_at":"2024-11-26T05:13:05.475Z","updated_at":"2025-04-13T01:53:44.659Z","avatar_url":"https://github.com/syu93.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lit-router\n\n\n**LitRouter** is a simple client side router, component loader (see [PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)) based on [page.js](https://github.com/visionmedia/page.js). It's designed to work well with [**Web Components**](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [**LitElement**](https://lit-element.polymer-project.org).\n\nInspired by **vue-router**.\n\n## Import\n\nThe **lit-router** package comes with sub package `lit-page` which is a lightweight web-component that handle display of the selected route and view rendering based on the `active` attribute.\n\n### Full import\n\nTo import all three classes, just import  lit-router global package :\n\n```javascript\nimport { LitRouter } from \"lit-router\";\n```\n\n\n\n### Import as you use\n\nYou can also only import what you need :\n\n```javascript\nimport { LitRouter } from \"lit-router/pkg/dist-src/lit-router/lit-router.js\";\n```\n\n```javascript\nimport \"lit-router/pkg/dist-src/lit-page/lit-page.js\";\n```\n\n## Usage\n\nDefine your routes as an Array of route Objects containing a name, a path, and a component to load (if needed).\n\nThen call `router.start();` to activate the router.\n\nYou can also define `sub routes` and add route `middlewares`.\n\n\n\n### Define routes\n\n```javascript\nimport { LitRouter } from \"lit-router/pkg/dist-src/lit-router/lit-router.js\";\n\n// Define your routes and the view component associated\nconst router = new LitRouter([\n  {\n    name: \"view1\",\n    path: \"/\",\n    component: () =\u003e import(\"./views/my-view1.js\"), // Dynamically import component\n    middlewares: [\n      (ctx, next) =\u003e {\n        // Do stuff ...\n        next();\n      },\n    ],\n    children: [\n      {\n        name: \"subview1\",\n        path: \"/view1/detail\",\n        component: () =\u003e import(\"./views/my-detail.js\"),\n      }\n    ]\n  }, {\n    name: \"view2\",\n    path: \"/view2\",\n    component: () =\u003e import(\"./views/my-view2.js\")\n  }, {\n    name: \"view3\",\n    path: \"/view3\",\n    component: () =\u003e import(\"./views/my-view3.js\")\n  }, {\n    name: \"404\",\n    path: '*',\n    middlewares: [\n      (ctx, next) =\u003e {\n        console.log(`Oups, I'm lost 😱 !!!`);\n        next();\n      }\n    ]\n  }\n]);\n\n// Start the router\nrouter.start();\n```\n\n\n\n### Define route guard\n\nYou can define route guard with the **beforeEach** method like this :\n\n```javascript\nrouter.beforeEach((route, ctx, next) =\u003e {\n  if (route.name == 'view2') { return document.page.redirect('/login'); }\n  next();\n});\n```\n\n\n\n### Define the view to display\n\nOnce your have define your routes, you can now listen on the `page-changed` event fired by the router to detect page changes.\n\nYour can access the current matched route object via `document.$router`.\n\nThe router object expose a `getCurrentPage` method to retrieve the current view name. \n\n```javascript\n// my-app.js\nimport { LitElement, html, css } from \"lit-element\";\n\n// ...\n\nclass MyApp extends LitElement {\n  constructor() {\n    super();\n    // Add an event listener on the `page-changed` event\n    document.addEventListener('page-changed', () =\u003e {\n      const router = document.$router;\n      this.page = router.getCurrentPage();\n    });\n  }\n\n  static get properties() {\n    return {\n      page: String\n    };\n  }\n\n  static get styles() {\n    return css`\n      main \u003e * {\n        display: none;\n      }\n      main [active] {\n        display: block;\n      }\n    `;\n  } \n\n  render() {\n  \treturn html`\n      \u003cmain id=\"view\"\u003e\n        \u003cmy-view1 name=\"view1\" ?active=\"${this.page == 'view1'}\"\u003e\u003c/my-view1\u003e\n        \u003cmy-view2 name=\"view2\" ?active=\"${this.page == 'view2'}\"\u003e\u003c/my-view2\u003e\n        \u003cmy-view3 name=\"view3\" ?active=\"${this.page == 'view3'}\"\u003e\u003c/my-view3\u003e\n      \u003c/main\u003e\n\t`;\n  }\n}\n```\n\n\n\n## API\n\n### LitRouter\n\nImport **LitRouter** from the lit-route ES module.\n\n```javascript\nimport { LitRouter } from \"./lit-router.js\";\n```\n\nThen start defining you routes by giving an **array** of route **objects**.\n\nRoute (*option*) :\n\n**name** : The name of the route path. (this option is mandatory).\n\n**path** : The path that need to be matched. (this option is mandatory).\n\n**component** : This is used to load the component that need to be displayed for this route. It use [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports) to load component. See [PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) for more information. \n\n**middlewares** : An array of middleware function to be executed before the route handler. This function takes two argument, a `context` object which represent the matched route, and a `next` method used to pass to the next middleware or route handler.\n\n**children** : An array of sub route objects.\n**NOTE**  : The child path must be the full path. e.g : `/view` and `/view/details`.\n\n\n\n# lit-page\n\n**lit-page** is a simple Web Component, that works with **lit-router**, that handle the display of the selected view.\n\n## Import\n\nEither import the whole **lit-router** package or just import the **lit-page** component.\n\n```javascript\nimport \"lit-router/pkg/dist-src/lit-page/lit-page.js\";\n```\n\n\n\n## Usage\n\n```javascript\n// my-app.js\nimport { LitElement, html, css } from \"lit-element\";\nimport \"lit-router/pkg/dist-src/lit-page/lit-page.js\";\n\n// ...\n\nclass MyApp extends LitElement {\n  render() {\n  \treturn html`\n      \u003clit-page\u003e\n        \u003cmy-view1 name=\"view1\" data-animation=\"page-enter\"\u003e\u003c/my-view1\u003e\n        \u003cmy-view2 name=\"view2\"\u003e\u003c/my-view2\u003e\n        \u003cmy-view3 name=\"view3\"\u003e\u003c/my-view3\u003e\n        \u003csection name=\"404\"\u003e\n          \u003ch1\u003eOups, I'm lost 😱 !!!\u003c/h1\u003e\n        \u003c/section\u003e\n      \u003c/lit-page\u003e\n\t`;\n  }\n}\n```\n\n\n\n## API\n\n### Properties\n\n**attrForSelected**\t\t`String`\t= \t'*name*'\n\n*The **attrForSelected** property can be used to define the selective attribute to use on view component or tags* \n\n### Events\n\n**page-changed**\n\n*The page-changed event is fired when navigating to different page*\n\n### Transition\n\n**LitPage** provide a simple way to handle transition between pages with the data attribute `data-animation`.\n\nThere is two values for this attribute : \n\n* page-enter (***default***)\n* page-leave","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyu93%2Flit-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyu93%2Flit-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyu93%2Flit-router/lists"}