{"_id":"svelte5-router","_rev":"4-a448daa20d13739807ccce3be345627f","name":"svelte5-router","dist-tags":{"latest":"3.1.0"},"versions":{"3.0.0":{"name":"svelte5-router","version":"3.0.0","keywords":["svelte routing","svelte","sveltejs","route","router","routing","svelte route","svelte router","typescript"],"author":{"name":"Jacob Cutshall @jpcutshall"},"license":"MIT","_id":"svelte5-router@3.0.0","maintainers":[{"name":"jpcutshall","email":"jpcutshall@gmail.com"}],"homepage":"https://github.com/jpcutshall/svelte5-router","bugs":{"url":"https://github.com/jpcutshall/svelte5-router/issues"},"dist":{"shasum":"d2b4c3b0d7a752c2294150f77f59f768836440fa","tarball":"https://registry.npmjs.org/svelte5-router/-/svelte5-router-3.0.0.tgz","fileCount":39,"integrity":"sha512-IA2a/GpJFOj6OLwOxvV0Ybkrr7BA+YOn5G5ivIHBELihiwctqydP1M4l7Huca8r+kyeGODgYfY4c9GzwQRwRHQ==","signatures":[{"sig":"MEQCIG8v4lfgXY9iRVpRz1A2cQO/gSWq9ukxtuRNuowoYeXbAiAiWSmaaPiQnFSyvgIwRYkgtU3b1igkPfuU0kYBWoPDgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53881},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"02e02388e46a18817db712e171710cefe3f9e060","scripts":{"check":"svelte-check --tsconfig ./tsconfig.json","package":"svelte-package"},"_npmUser":{"name":"jpcutshall","email":"jpcutshall@gmail.com"},"repository":{"url":"git+https://github.com/jpcutshall/svelte5-router.git","type":"git"},"_npmVersion":"10.8.2","description":"A declarative Svelte routing library with SSR support","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.11","tslib":"^2.8.1","svelte":"^5.2.3","prettier":"^3.2.5","typescript":"^5.6.3","svelte-check":"^4.0.9","vite-plugin-dts":"^4.3.0","@tsconfig/svelte":"^5.0.4","@sveltejs/package":"^2.3.7","@sveltejs/adapter-auto":"^3.3.1","prettier-plugin-svelte":"^3.2.3","@sveltejs/vite-plugin-svelte":"^4.0.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte5-router_3.0.0_1732198765015_0.4940921265981193","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"svelte5-router","version":"3.0.1","keywords":["svelte routing","svelte","sveltejs","route","router","routing","svelte route","svelte router","typescript"],"author":{"name":"Jacob Cutshall @jpcutshall"},"license":"MIT","_id":"svelte5-router@3.0.1","maintainers":[{"name":"jpcutshall","email":"jpcutshall@gmail.com"}],"homepage":"https://github.com/jpcutshall/svelte5-router","bugs":{"url":"https://github.com/jpcutshall/svelte5-router/issues"},"dist":{"shasum":"f29bd6aacb8f167bac01be399ca5816420a6ce8e","tarball":"https://registry.npmjs.org/svelte5-router/-/svelte5-router-3.0.1.tgz","fileCount":39,"integrity":"sha512-vm/O6sC6zvb8O9DbHeMLVJcX8m26ehCknY7I46OE4nx0oVRdvjgdiY0GLZD/wjajaNVBx+W+dzWDEzfMRHSkVg==","signatures":[{"sig":"MEQCICT0tJZXgf8zC0GWmPNd/3bzue9vx7AYLExlQRbbqCy3AiBM3fVzdAFEDUcKdKvVDpUnuq+hVvAyt1SqrNM4NEBfaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54678},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"ad842de97d49d696fcc4036ccaa8ed0dd94ce195","scripts":{"check":"svelte-check --tsconfig ./tsconfig.json","package":"svelte-package"},"_npmUser":{"name":"jpcutshall","email":"jpcutshall@gmail.com"},"repository":{"url":"git+https://github.com/jpcutshall/svelte5-router.git","type":"git"},"_npmVersion":"10.9.0","description":"A declarative Svelte routing library with SSR support","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.11","svelte":"^5.2.3","prettier":"^3.2.5","typescript":"^5.6.3","svelte-check":"^4.0.9","@tsconfig/svelte":"^5.0.4","@sveltejs/package":"^2.3.7","@sveltejs/adapter-auto":"^3.3.1","prettier-plugin-svelte":"^3.2.3","@sveltejs/vite-plugin-svelte":"^4.0.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte5-router_3.0.1_1732232491012_0.040739574946834","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"svelte5-router","version":"3.0.2","keywords":["svelte routing","svelte","sveltejs","route","router","routing","svelte route","svelte router","typescript"],"author":{"name":"Jacob Cutshall @jpcutshall"},"license":"MIT","_id":"svelte5-router@3.0.2","maintainers":[{"name":"jpcutshall","email":"jpcutshall@gmail.com"}],"homepage":"https://github.com/jpcutshall/svelte5-router","bugs":{"url":"https://github.com/jpcutshall/svelte5-router/issues"},"dist":{"shasum":"f3cadeb1d65b44aa293e9f91da792963489f0324","tarball":"https://registry.npmjs.org/svelte5-router/-/svelte5-router-3.0.2.tgz","fileCount":39,"integrity":"sha512-3XE97eEVrV2OY/7iuhrBIvD48KWmD9M8Cf2mZqjoxnI9bR5ZiwtAg9ObGP3kP7Z/kyVrn0n8riNBJdHeddctlQ==","signatures":[{"sig":"MEQCIGvjKCas0XjEVwO7swNo4rHCuUiX/568VQbFno9Jch9IAiA0UYCCCAFsuUH2tm7Euwno6R+tB6E1Yn4ProoTeKPWFA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55059},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"ea08b2da1fd7c9e0ec5254a397fca8792e668317","scripts":{"test":"vite -c vite.config.ts --force tests/","check":"svelte-check --tsconfig ./tsconfig.json","package":"svelte-package"},"_npmUser":{"name":"jpcutshall","email":"jpcutshall@gmail.com"},"repository":{"url":"git+https://github.com/jpcutshall/svelte5-router.git","type":"git"},"_npmVersion":"10.9.0","description":"A declarative Svelte routing library with SSR support","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.11","svelte":"^5.2.3","prettier":"^3.2.5","typescript":"^5.6.3","svelte-check":"^4.0.9","@tsconfig/svelte":"^5.0.4","@sveltejs/package":"^2.3.7","@sveltejs/adapter-auto":"^3.3.1","prettier-plugin-svelte":"^3.2.3","@sveltejs/vite-plugin-svelte":"^4.0.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte5-router_3.0.2_1737588417388_0.12125580696832272","host":"s3://npm-registry-packages-npm-production"}},"3.1.0":{"name":"svelte5-router","version":"3.1.0","author":{"name":"Jacob Cutshall @jpcutshall"},"license":"MIT","type":"module","description":"A declarative Svelte routing library with SSR support","keywords":["svelte routing","svelte","sveltejs","route","router","routing","svelte route","svelte router","typescript"],"repository":{"type":"git","url":"git+https://github.com/jpcutshall/svelte5-router.git"},"bugs":{"url":"https://github.com/jpcutshall/svelte5-router/issues"},"homepage":"https://github.com/jpcutshall/svelte5-router","main":"./dist/index.js","types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^3.3.1","@sveltejs/package":"^2.3.7","@sveltejs/vite-plugin-svelte":"^4.0.1","@tsconfig/svelte":"^5.0.4","prettier":"^3.2.5","prettier-plugin-svelte":"^3.2.3","svelte":"^5.2.3","svelte-check":"^4.0.9","typescript":"^5.6.3","vite":"^5.4.11","svelte5-router":"./dist"},"scripts":{"package":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","test":"vite -c vite.config.ts --force tests/"},"_id":"svelte5-router@3.1.0","_integrity":"sha512-rBuFLm8AxnuBZX/RtZDIJbpOrWHvMmSAXvhNOr3zyI9PCTTfASKjkglLvdq7wPpzrc/7XTFzwxM+nHMe9gfgpw==","_resolved":"C:\\Users\\jpcut\\AppData\\Local\\Temp\\296b8b0854826040230f89b7ad0f0f33\\svelte5-router-3.1.0.tgz","_from":"file:svelte5-router-3.1.0.tgz","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-rBuFLm8AxnuBZX/RtZDIJbpOrWHvMmSAXvhNOr3zyI9PCTTfASKjkglLvdq7wPpzrc/7XTFzwxM+nHMe9gfgpw==","shasum":"3d03f79f12365d17ee63642d444855c6f5b701e7","tarball":"https://registry.npmjs.org/svelte5-router/-/svelte5-router-3.1.0.tgz","fileCount":39,"unpackedSize":57222,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCsdgrMq62ArSjXUJrmH/WWxVX3p2e1wGlYh5xZUKgFPgIgVZwxlhImEK7BATDxdrwQfygKl/p3vhZxSYljHBa1Ipc="}]},"_npmUser":{"name":"jpcutshall","email":"jpcutshall@gmail.com"},"directories":{},"maintainers":[{"name":"jpcutshall","email":"jpcutshall@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte5-router_3.1.0_1771030811941_0.5387714811552458"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-21T14:19:25.015Z","modified":"2026-02-14T01:00:12.218Z","3.0.0":"2024-11-21T14:19:25.202Z","3.0.1":"2024-11-21T23:41:31.202Z","3.0.2":"2025-01-22T23:26:57.572Z","3.1.0":"2026-02-14T01:00:12.105Z"},"bugs":{"url":"https://github.com/jpcutshall/svelte5-router/issues"},"author":{"name":"Jacob Cutshall @jpcutshall"},"license":"MIT","homepage":"https://github.com/jpcutshall/svelte5-router","keywords":["svelte routing","svelte","sveltejs","route","router","routing","svelte route","svelte router","typescript"],"repository":{"type":"git","url":"git+https://github.com/jpcutshall/svelte5-router.git"},"description":"A declarative Svelte routing library with SSR support","maintainers":[{"name":"jpcutshall","email":"jpcutshall@gmail.com"}],"readme":"[![npm][npm]][npm-url]\r\n\r\n# Svelte5 Router\r\n\r\nForked from [svelte-routing](https://github.com/EmilTholin/svelte-routing)\r\n\r\nA declarative Svelte routing library with SSR support.\r\n\r\n[[CHANGELOG][changelog-url]]\r\n\r\n## Install\r\n\r\n```bash\r\nnpm i -D svelte5-router\r\n```\r\n\r\n## Usage\r\n\r\n```html\r\n<!-- App.svelte -->\r\n<script>\r\n  import { Router, Link, Route } from \"svelte5-router\";\r\n  import Home from \"./routes/Home.svelte\";\r\n  import About from \"./routes/About.svelte\";\r\n  import Blog from \"./routes/Blog.svelte\";\r\n\r\n  export let url = $state(\"\");\r\n</script>\r\n\r\n<Router {url}>\r\n  <nav>\r\n    <Link to=\"/\">Home</Link>\r\n    <Link to=\"/about\">About</Link>\r\n    <Link to=\"/blog\">Blog</Link>\r\n  </nav>\r\n  <div>\r\n    <Route path=\"/blog/:id\" component={BlogPost} />\r\n    <Route path=\"/blog\" component={Blog} />\r\n    <Route path=\"/about\" component={About} />\r\n    <Route path=\"/\"><Home /></Route>\r\n  </div>\r\n</Router>\r\n```\r\n\r\n```javascript\r\n// main.js\r\nimport App from \"./App.svelte\";\r\nimport { mount } from \"svelte\";\r\n\r\nconst app = mount(App, {\r\n  target: document.getElementById(\"app\"),\r\n});\r\n```\r\n\r\n## API\r\n\r\n#### `Router`\r\n\r\nThe `Router` component supplies the `Link` and `Route` descendant components\r\nwith routing information through context, so you need at least one `Router` at\r\nthe top of your application. It assigns a score to all its `Route` descendants\r\nand picks the best match to render.\r\n\r\n`Router` components can also be nested to allow for seamless merging of many\r\nsmaller apps.\r\n\r\n###### Properties\r\n\r\n|     Property     | Required | Default Value | Description                                                                                                                                                                                                                                                                                                 |\r\n| :--------------: | :------: | :-----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n|    `basepath`    |          |     `\"/\"`     | The `basepath` property will be added to all the `to` properties of `Link` descendants and to all `path` properties of `Route` descendants. This property can be ignored in most cases, but if you host your application on e.g. `https://example.com/my-site`, the `basepath` should be set to `/my-site`. |\r\n|      `url`       |          |     `\"\"`      | The `url` property is used in SSR to force the current URL of the application and will be used by all `Link` and `Route` descendants. A falsy value will be ignored by the `Router`, so it's enough to declare `let url = $state(\"\");` for your topmost component and only give it a value in SSR.          |\r\n| `viewtransition` |          |    `null`     | View Transition (Experimental)                                                                                                                                                                                                                                                                              |\r\n\r\n#### `Link`\r\n\r\nA component used to navigate around the application.\r\n\r\n###### Properties\r\n\r\n|     Property     | Required | Default Value | Description                                                                                                                                                                                                                           |\r\n| :--------------: | :------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n|       `to`       |   ✔ ️   |     `\"#\"`     | URL the component should link to.                                                                                                                                                                                                     |\r\n|    `replace`     |          |    `false`    | When `true`, clicking the `Link` will replace the current entry in the history stack instead of adding a new one.                                                                                                                     |\r\n|     `state`      |          |     `{}`      | An object that will be pushed to the history stack when the `Link` is clicked.                                                                                                                                                        |\r\n|  ~~`getProps`~~  |          | `() => ({})`  | A function that returns an object that will be spread on the underlying anchor element's attributes. The first argument given to the function is an object with the properties `location`, `href`, `isPartiallyCurrent`, `isCurrent`. |\r\n| `preserveScroll` |          |    `false`    | When `true`, clicking the `Link` will not scroll the page to the top.                                                                                                                                                                 |\r\n\r\n#### `Route`\r\n\r\nA component that will render its `component` property or children when its\r\nancestor `Router` component decides it is the best match.\r\n\r\nAll properties other than `path` and `component` given to the `Route` will be\r\npassed to the rendered `component`.\r\n\r\nPotential path parameters will be passed to the rendered `component` as\r\nproperties. A wildcard `*` can be given a name with `*wildcardName` to pass the\r\nwildcard string as the `wildcardName` property instead of as the `*` property.\r\n\r\nPotential path parameters are passed back to the parent using props, so they can\r\nbe exposed to the children snippet.\r\n\r\n```html\r\n<Route path=\"/blog/:id\">\r\n  {#snippet children(params)}\r\n  <BlogPost id=\"{params.id}\" />\r\n  {/snippet}\r\n</Route>\r\n```\r\n\r\nThe active status of link can be exposed to the children snippet.\r\n\r\n```html\r\n<Link to=\"/browser\">\r\n  {#snippet children(active)}\r\n    <MenuItem active={active}>Browser</MenuItem>\r\n  {/snippet}\r\n</Link>\r\n```\r\n\r\n###### Properties\r\n\r\n|    Property     | Required | Default Value | Description                                                                                                                                                              |\r\n| :-------------: | :------: | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n|     `path`      |          | `\"\"`          | The path for when this component should be rendered. If no `path` is given the `Route` will act as the default that matches if no other `Route` in the `Router` matches. |\r\n| ~~`component`~~ |          | `null`        | The component constructor that will be used for rendering when the `Route` matches. If `component` is not set, the children of `Route` will be rendered instead.         |\r\n|   `children`    |   yes    |               | children passed inside the element. You can use the children snippet to access any url parameters `{#snippet children(params)}`                                          |\r\n\r\n#### `navigate`\r\n\r\nA function that allows you to imperatively navigate around the application for\r\nthose use cases where a `Link` component is not suitable, e.g. after submitting\r\na form.\r\n\r\nThe first argument is a string denoting where to navigate to, and the second\r\nargument is an object with a `replace`, `state` and `preserveScroll` properties equivalent to those\r\nin the `Link` component.\r\n\r\n```html\r\n<script>\r\n  import { navigate } from \"svelte5-router\";\r\n\r\n  function onSubmit() {\r\n    login().then(() => {\r\n      navigate(\"/success\", { replace: true });\r\n    });\r\n  }\r\n</script>\r\n```\r\n\r\n#### `listen`\r\n\r\nA function that allows you to listen to path changes made from `navigate`, `Link` and browser back button.\r\n\r\nThe argument supplied must be a function that receives a Location object. Use the returned function to unsubscribe the listener.\r\n\r\nThis function is meant to be used outside a Svelte component. The alternative function is `useLocation`, `useRouter` and `useHistory` where it uses Svelte context to retrieve location, router or history object.\r\n\r\n```js\r\nimport { listen as addListener } from 'svelte5-router';\r\n\r\nfunction init() {\r\n    addListener(({ location }) => {\r\n        console.log(location.pathname);\r\n    })\r\n}\r\n```\r\n\r\n#### `link`\r\n\r\nAn action used on anchor tags to navigate around the application. You can add an\r\nattribute `replace` to replace the current entry in the history stack instead of\r\nadding a new one and `preserveScroll` to not scroll the page to the top when clicked.\r\n\r\n```html\r\n<script>\r\n  import { link } from \"svelte5-router\";\r\n</script>\r\n\r\n<Router>\r\n  <a href=\"/\" use:link>Home</a>\r\n  <a href=\"/replace\" use:link replace>Replace this URL</a>\r\n  <!-- ... -->\r\n</Router>\r\n```\r\n\r\n#### `links`\r\n\r\nAn action used on a root element to make all relative anchor elements navigate\r\naround the application. You can add an attribute `replace` on any anchor to\r\nreplace the current entry in the history stack instead of adding a new one.\r\nYou can add an attribute `preserveScroll` on any anchor to not to scroll the page to the top when clicked. You\r\ncan add an attribute `noroute` for this action to skip over the anchor and allow\r\nit to use the native browser action.\r\n\r\n```html\r\n<!-- App.svelte -->\r\n<script>\r\n  import { links } from \"svelte5-router\";\r\n</script>\r\n\r\n<div use:links>\r\n  <Router>\r\n    <a href=\"/\">Home</a>\r\n    <a href=\"/replace\" replace>Replace this URL</a>\r\n    <a href=\"/native\" noroute>Use the native action</a>\r\n    <!-- ... -->\r\n  </Router>\r\n</div>\r\n```\r\n\r\n#### `viewtransition`\r\n\r\nViewtransition for navigation (Experimental).\r\n\r\n_`builtin transition`_\r\n\r\n```html\r\n<script>\r\n  import { fade } from \"svelte/transition\";\r\n  // ...\r\n</script>\r\n\r\n<Router viewtransition=\"{() => { fn: fade, duration: 500 }}\">\r\n  <Route path=\"/\" component=\"{Home}\" />\r\n  <Route path=\"/contact\" component=\"{Contact}\" />\r\n</Router>\r\n```\r\n\r\n_`custom transition`_\r\n\r\n```html\r\n<script>\r\n  import { cubicin } from \"svelte/easing\";\r\n  // ...\r\n</script>\r\n\r\n<Router\r\n  viewtransition=\"{() => { duration: 500, easing: cubicin, css: (t) => `scale:${t};transform-origin:center center;` }}\"\r\n>\r\n  <Route path=\"/\" component=\"{Home}\" />\r\n  <Route path=\"/contact\" component=\"{Contact}\" />\r\n</Router>\r\n```\r\n\r\n# License\r\n\r\nThis project is licensed under the [**MIT**](LICENSE).\r\n\r\n# Contribution\r\n\r\nUnless you explicitly state otherwise, any contribution intentionally submitted\r\nfor this project by you, shall be licensed as **MIT**, without any additional\r\nterms or conditions. [**Code of Conduct**](CODE_OF_CONDUCT.md).\r\n\r\n[npm]: https://img.shields.io/npm/v/svelte5-router.svg\r\n[npm-url]: https://npmjs.com/package/svelte5-router\r\n[changelog-url]: https://github.com/jpcutshall/svelte5-router/blob/master/CHANGELOG.md\r\n","readmeFilename":"README.md"}