{"id":24499620,"url":"https://github.com/codewithkyle/router","last_synced_at":"2025-03-15T07:15:53.833Z","repository":{"id":43218480,"uuid":"351935305","full_name":"codewithkyle/router","owner":"codewithkyle","description":"A lightweight lazy loading declarative routing library for Web Components.","archived":false,"fork":false,"pushed_at":"2023-07-06T15:56:28.000Z","size":74,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T14:52:23.241Z","etag":null,"topics":["javascript-library","lazy-loading","lightweight","routing","single-page-app","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@codewithkyle/router","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/codewithkyle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-26T23:17:27.000Z","updated_at":"2023-07-18T09:04:28.000Z","dependencies_parsed_at":"2022-08-27T01:40:58.077Z","dependency_job_id":null,"html_url":"https://github.com/codewithkyle/router","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Frouter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Frouter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Frouter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Frouter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243695597,"owners_count":20332629,"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":["javascript-library","lazy-loading","lightweight","routing","single-page-app","web-components"],"created_at":"2025-01-21T22:15:08.004Z","updated_at":"2025-03-15T07:15:53.813Z","avatar_url":"https://github.com/codewithkyle.png","language":"TypeScript","readme":"# Router\n\nA SPA routing library for lazy loading Web Component with functionality similar to [FastRoute](https://github.com/nikic/FastRoute#defining-routes) and [ExpressJS](http://expressjs.com/en/guide/routing.html).\n\n## Install\n\nInstall via NPM:\n\n```bash\nnpm i -S @codewithkyle/router\n```\n\nOr via CDN:\n\n```javascript\nimport {\n    router,\n    navigateTo,\n    mount,\n    pageJump,\n    replaceState,\n    pushState,\n    enableTransition,\n    disableTransition,\n    setTransitionTimer,\n    transition\n} from \"https://cdn.jsdelivr.net/npm/@codewithkyle/router@2/router.min.mjs\";\n```\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@codewithkyle/router@2/router.min.js\"\u003e\n```\n\n## Usage\n\n```typescript\n// routes.js\n\nimport {\n    router,\n    navigateTo,\n    mount,\n    pageJump,\n    replaceState,\n    pushState,\n    transition\n} from \"https://cdn.jsdelivr.net/npm/@codewithkyle/router@2/router.min.mjs\";\n\n// Enable page transitions\nrouter.enableTransitions();\n\n// Disable page transitions (default)\nrouter.disableTransitions();\n\n// Override auto page transition timer (defaults to 5000)\nrouter.setTransitionTimer(600) // ms\n\n// Disable auto page transition timer\nrouter.setTransitionTimer(-1); // accepts -1, null, Infinity\n\n// Add a route to a custom file (supports external URLs)\nrouter.add(\"/\", {\n    tagName: \"homepage-component\",\n    file: \"./homepage.js\",\n});\n\n// Automatically load and mount the demo-page web component from the './demo-page.js' file\nrouter.add(\"/\", \"demo-page\");\n\n// Routes now support closures\nrouter.add(\"/closure\", (tokens, params) =\u003e {\n    sessionStorage.setItem(\"closure\", \"true\");\n    alert(\"You may now access the test pages.\");\n});\n\n// Routes now support redirecs\nrouter.redirect(\"/dead-link\", \"/\");\n\n// Create router groups with a prefix and optional middleware (middleware can be an array of functions)\nrouter.group(\n    {\n        prefix: \"/blog\",\n        middleware: (tokens, params) =\u003e {\n            if (!sessionStorage.getItem(\"closure\")) {\n                alert(\"Access blocked until you run the closure.\");\n\n                // Throw a URL to force a redirect\n                throw location.origin;\n            }\n        },\n    },\n    (router) =\u003e {\n        router.redirect(\"/dead-link\", \"/\");\n\n        // Chain groups to extend prefixs or add additional middleware closures\n        router.group({ prefix: \"/article\" }, (router) =\u003e {\n            // Route tokens now support RegExp strings (anything after the ':' character)\n            router.add(\"/{SLUG:\\\\d+}\", \"blog-number\");\n\n            // Route tokens without a RegExp string default to /.*/ (anything)\n            router.add(\"/{SLUG}\", \"blog-article\");\n        });\n    }\n);\n\n// Routes are now checked in the order that they're created\n// Add a wildcard (*) route at the bottom to catch any route\nrouter.add(\"/*\", \"missing-page\");\n```\n\n```typescript\n// homepage.js\n\n// You can export your Web Components as default or as a named export.\nexport default class Homepage extends HTMLElement {\n    constructor(tokens: Tokens, params: Params) {\n        super();\n        // ...snip...\n    }\n}\n```\n\n### Loading Animation\n\nSince this library bypasses the navive browser navigation functionality you will need to create your own loading state. When loading a route the Router will set a `[router]` attribute on the `\u003cHTML\u003e` element. You can use the snippets blow to create a custom loading animation.\n\nWhen page transitions (`router.enableTransitions()`) is in use you can trigger page transitions in two ways:\n\n1. You can set a default auto transition timer using `router.setTransitionTimer(ms)`\n1. You can manually trigger the transition using the `transition()` method\n\nIdeally you should use both of these methods. When you are ready to transition call the `transition()` method but also set up a reasonable auto transition timer. The page transition will occur when one of the two triggers resolve.\n\n#### CSS\n\n```css\nhtml[router=\"loading\"] * {\n    cursor: wait !important;\n}\n```\n\n#### SCSS\n\n```scss\n.my-class {\n    color: blue;\n\n    \u0026 html[router=\"loading\"] {\n        color: grey;\n    }\n}\n```\n\n### Custom Events\n\n```typescript\ntype Data = {\n    [key:string]: any;\n};\ntype RedirectingDetails = {\n    path: string,\n    hash: string,\n    params: Params,\n}\ntype PreloadingDetails = {\n    path: string,\n    hash: string,\n    params: Params,\n};\ntype LoadingDetails = {\n    path: string,\n    hash: string,\n    params: Params,\n    tokens: Tokens,\n    data: Data,\n};\ntype LoadedDetails = {\n    path: string,\n    hash: string,\n    tokens: Tokens,\n    params: Params,\n    data: Data,\n};\ntype OutgoingDetails = {\n    path: string,\n    hash: string,\n    params: Params,\n    tokens: Tokens,\n};\n\n// Fired after the router has started and is ready to hijack navigation events\ndocument.addEventListener(\"router:ready\", () =\u003e {\n    console.log(\"Ready\");\n});\n\n// Fired when the page has started the routing process\ndocument.addEventListener(\"router:preloading\", (e) =\u003e {\n    const incoming = e.detail.incoming instanceof PreloadingDetails;\n    const outgoing = e.detail.outgoing instanceof OutgoingDetails;\n    console.log(\"Preloading\", incoming, outgoing);\n});\n\n// Fired when the page has started the loading process\ndocument.addEventListener(\"router:loading\", (e) =\u003e {\n    const incoming = e.detail.incoming instanceof LoadingDetails;\n    const outgoing = e.detail.outgoing instanceof OutgoingDetails;\n    console.log(\"Loading\", incoming, outgoing);\n});\n\n// Fired after the page has loaded and the history state has been updated\ndocument.addEventListener(\"router:loaded\", (e) =\u003e {\n    const incoming = e.detail.incoming instanceof LoadedDetails;\n    const outgoing = e.detail.outgoing instanceof OutgoingDetails;\n    console.log(\"Loaded\", incoming, outgoing);\n});\n\n// Fired when the page was redirected\ndocument.addEventListener(\"router:redirecting\", (e) =\u003e {\n    const incoming = e.detail.incoming instanceof RedirectingDetails;\n    const outgoing = e.detail.outgoing instanceof OutgoingDetails;\n    console.log(\"Redirecting\", incoming, outgoing);\n});\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Frouter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Frouter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Frouter/lists"}