\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Fallback Route\r\n\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport ViewHome from './views/Home'\r\nimport ViewNotFound from './views/NotFound'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'home': {\r\n\t\t\tpath: '/',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t},\r\n\t\t'404': {\r\n\t\t\tpath: '/404',\r\n\t\t\tcomponent: ViewNotFound,\r\n\t\t},\r\n\t},\r\n\tfallback: {\r\n\t\tname: '404',\r\n\t\treplace: false, // true by default\r\n\t},\r\n})\r\n```\r\n\r\n`fallback` is optional and defines the route the router should fallback to in\r\ncase the user navigates to an inexistent URL. If `replace` is `false` then the\r\nfallback will push the route into the browser history and change the URL,\r\notherwise it'll just display the fallback route in the router viewport without\r\naffecting the browser history. `replace` is `true` by default.\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route View Component Props\r\n\r\nThe route view components always get the props `router`, `params`, `urlQuery`\r\nand `props`.\r\n\r\n```svelte\r\n\r\n\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Props\r\n\r\nRoutes can be assigned arbitrary props which are then available in the view\r\ncomponent:\r\n\r\n**router.ts**\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport ViewHome from './views/Home'\r\nimport ViewAbout from './views/About'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'root': {\r\n\t\t\tpath: '/',\r\n\t\t},\r\n\t\t'home': {\r\n\t\t\tpath: '/home',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t\tprops: {\r\n\t\t\t\tnav: {\r\n\t\t\t\t\ttitle: 'Home',\r\n\t\t\t\t\ticon: 'fas fa-home',\r\n\t\t\t\t},\r\n\t\t\t\tpicture: 'https://sample.url/picture.jpg',\r\n\t\t\t},\r\n\t\t},\r\n\t\t'about': {\r\n\t\t\tpath: '/about',\r\n\t\t\tcomponent: ViewAbout,\r\n\t\t\tprops: {\r\n\t\t\t\tnav: {\r\n\t\t\t\t\ttitle: 'About me',\r\n\t\t\t\t\ticon: 'fas fa-address-card',\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n})\r\n```\r\n\r\n**views/Home.svelte**\r\n\r\n```svelte\r\n\r\n\r\n\r\n
{props.nav.title}
\r\n\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Before-Push Hooks\r\n\r\nThe `beforePush` hooks are promises which are executed before a route is pushed\r\nto the history. The passed function receives an object containing the current\r\n`location`, the `pendingRoute` (which the router is about to navigate to) and both\r\nthe `resolver` and `rejector`. A hook must either resolve (approve) the pending\r\nroute otherwise to reject it by passing an another route, or even\r\nnothing (`undefined`) to cancel routing. It can be used for specifying redirect behavior or\r\nanything else that should be done before a push.\r\n\r\nYou may use the `$router.isLoading` property to determine whether the router is\r\nloading a new route and resolving before push hooks, which may be asynchronous.\r\n\r\n| ⚠ Warning ⚠ |\r\n|:--|\r\nBe sure to always either resolve or reject a hook, otherwise it will **dead-lock** your router.\r\n\r\nSimple example of using a hook:\r\n\r\n```svelte\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Global Before-Push Hook\r\n\r\nThe global before push hook is a persistent hook, which can't be removed.\r\nIt's defined right in the router config.\r\nHere's a simple example:\r\n\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport {get as getStore} from 'svelte/store'\r\nimport {isValidUserSession} from 'user_session'\r\n// isValidSession could be any of your implementations - in this example it is\r\n// just a derived store returning false or true\r\n\r\nimport ViewLogin from './views/Login'\r\nimport ViewHome from './views/Home'\r\nimport ViewUser from './views/User'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'root': {\r\n\t\t\tpath: '/',\r\n\t\t},\r\n\t\t'login': {\r\n\t\t\tpath: '/login',\r\n\t\t\tcomponent: ViewLogin,\r\n\t\t},\r\n\t\t'home': {\r\n\t\t\tpath: '/home',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t},\r\n\t\t'user': {\r\n\t\t\tpath: '/user/:uid',\r\n\t\t\tcomponent: ViewUser,\r\n\t\t},\r\n\t\t'very-secret': {\r\n\t\t\tpath: '/treasure',\r\n\t\t}\r\n\t},\r\n\tbeforePush({pendingRoute, location, resolve, reject}) {\r\n\t\tif (!getStore(isValidUserSession)) {\r\n\t\t\treject({name: 'login'})\r\n\t\t} else if (pendingRoute.name === 'login') {\r\n\t\t\treject()\r\n\t\t}\r\n\r\n\t\tswitch (pendingRoute) {\r\n\t\tcase 'root':\r\n\t\t\treject({name: 'home'})\r\n\t\t\tbreak\r\n\t\tcase 'user':\r\n\t\t\tif (params.uid === 'a') {\r\n\t\t\t\treject({\r\n\t\t\t\t\tname: pendingRoute.name,\r\n\t\t\t\t\tparams: {uid: 'b'},\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\tbreak\r\n\t\tcase 'very-secret':\r\n\t\t\treject()\r\n\t\t}\r\n\t\tresolve()\r\n\t},\r\n})\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Programmatic History Navigation\r\n\r\nTo programmatically go back or forward in history just use the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) or the built-in aliases:\r\n\r\n\r\n```svelte\r\n\r\n\r\n\r\n\r\n```\r\n\r\nTo navigate to a new route use the built-in `push` API of the router, which\r\nrequires the route name as the first parameter and if needed a `key:value` object\r\nwith the parameter values:\r\n\r\n```svelte\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Updated Event Listener\r\n\r\nThe `routeUpdated` event listener if fired right after the route has been updated.\r\nThe payload in the event is the current location.\r\n\r\n```svelte\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# RouteLink Component\r\nA `
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Svelte Action `use:link`\r\nThe use action can only be used inside a `
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Transitions\r\nRoute transitions can't be just applied and used on a route easily. If you\r\nwould just add some transitions into the route component and navigate through\r\nthe routes, it will show unexpected behavior (\r\n\tsee Svelte Issues:\r\n\t[#6779](https://github.com/sveltejs/svelte/issues/6779),\r\n\t[#6763](https://github.com/sveltejs/svelte/issues/6763),\r\n\t[and even including my simple REPL](https://svelte.dev/repl/a5122281148c4c458f40e317fc4be11e?version=3.44.2)\r\n).\r\n\r\n**But! Dirty hacks to the rescue:** 😎💡\r\n\r\nTo tell the viewport that a route has a transition you must dispatch the event\r\n`hasOutro` inside the `onMount` handler. Now that the viewport is aware of the\r\noutro transition, it's going to await the route to finish its transition,\r\nbefore switching to the next route.\r\nNow that the router is awaiting the outro, at the end of the transition we have\r\nto tell the viewport that it may switch further to the next route.\r\nThis is done by dispatching the another event called `outroDone`.\r\nThat's the trick!\r\n\r\n| ℹ Info |\r\n|:--|\r\nAny mistaken dispatched event `outroDone` will be ignored by the viewport, as it only listens for the event after the routers location has changed. Meaning you may just dispatch this event on every outro transition without worring.\r\n\r\n| ℹ Info |\r\n|:--|\r\nInside the route component be sure to call the `outroDone` event on the longest outro transition on any element inside the component, as they have to finish as well. For better understanding see the second example below 👇\r\n\r\n| ⚠ Warning ⚠ |\r\n|:--|\r\nBe sure to fire the event `outroDone` after telling the viewport to await the outro transition, otherwise the viewport will wait a indefinitely.\r\n\r\n```svelte\r\n\r\n\r\n
dispatch('outroDone')}>\r\n\t
\r\n```\r\n\r\n##### A route containing a child transition\r\n```svelte\r\n\r\n\r\n\r\n\r\nSome content
\r\n\r\n\tLorem Impsum...
\r\n dispatch('outroDone')}>\r\n\t
\r\n```\r\n\r\n\r\n\r\n\t\tSome content\r\n\t
\r\n\r\n\t\r\n\t\tLorem Impsum...\r\n\t
\r\n\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# 🧩 Router Examples\r\nYou can find full router examples in [danielsharkov/svelte-router-examples](https://github.com/DanielSharkov/svelte-router-examples)\r\n
\r\n\r\n\r\n\r\n# ✨ Thanks for contribution goes to:\r\n[@romshark](https://github.com/romshark)\r\n[@madebyfabian](https://github.com/madebyfabian)\r\n
\r\n\r\n\r\n\r\n# ⚖️ License\r\nSvelte Router is a open source software [licensed as MIT](LICENSE).\r\n
\r\n\r\n\r\n\r\n# ⚖️ Additional notices\r\nYou may feel free to use the [Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo.svg), [Animated Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo-animated.svg) and [Banner](https://github.com/DanielSharkov/svelte-router/blob/master/readme-banner.svg) for non-commercial usage only, but first please ask me kindly. Contact me by email on `scharktv[at]gmail.com`.\r\n","readmeFilename":"README.md","gitHead":"a1bc4bec193d6f40cbe4c29120ea44f4bad5ecbb","_id":"@danielsharkov/svelte-router@3.0.1-test.18","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-/8mdNXsMXIAzZqMytRWRkSICfTf6kZlDVoV8fwyf9/mD6TYaKtfc1CiYKR2l591sdTR2w5iv2TP64TNXix5viA==","shasum":"754181cbe1372cfd0f9e705ad4106e05b02308f6","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.0.1-test.18.tgz","fileCount":15,"unpackedSize":148572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAq/4CRA9TVsSAnZWagAAK3MP/2ElbHYtmMFWqhatURsj\nOZd91cmRwDFjzXGRhJZNdih6VvDXUlnHlmv3jqNGOAY/k2PTfYvTGdTBXzYs\nvtLwwp3XicqOuolPvqTYExP5tEI31RnK8ute41IMiT5No1c4SKCoyvnolgLi\n1bGMPIH9mKUvltKkhgEA3c47ZNBy/YtPliYKkxkrSojhJqqCDTccfa6PgSDy\nDr2QZwl/5nOU9CzBNJLGU5nMnfTw5JReS9vWD/33UbjcXCwL4Si4EyVFfIhZ\nrw8Ip9Tv0gbThfnKpg0bEuritfeyYNLjGZA5K4N7v3AosW8lM+ap9Kl51Nca\nXhycQs+LNCIm51WJzVnTeoFcJpfB1G1utkJyMEvIEhXIXy288eG0aIH6FUvJ\nb9huzHioPVExbhfKNDx5f3sAjnLzb/vteQ4fOuDWdk4fu8ISMuYk6JRQUa03\n0xysyd0ENne41LrzTmJjQLYTqxOjdXV6qix5mAe9jSJoO6Jm5Vp1bk8PMC0l\nPz7xO+dn45eUwKvAXVqDtADVNEcXlO21dUSQuUFJZaSnXgjS6D6MSCM3q/7t\nNRbc5C+iPhgzMaRpDsmE+X8Xq/WrAeoMJ1bMRJfzTP7VhEqix7P9DUFCbpNH\nDMa/NyIpc9I8e8pjpOsBogHH9Yd/Jh9a0+yK8Xz23X9ZmC6al/XXEH1pbq0u\n/W4R\r\n=6TrF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyyUTwvUi7Vj2eSK/FkHWveFBpDwUT2QRmHjPjML1XvAIgMLsKzRUhmmbvmXnW5M1Vv+kd8k6BXSgK7pbYEWrqtf4="}]},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.0.1-test.18_1644343288632_0.3580532851036651"},"_hasShrinkwrap":false},"3.0.1-test.19":{"name":"@danielsharkov/svelte-router","version":"3.0.1-test.19","description":"A simple, fast and easy to use svelte router.","license":"MIT","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://danielsharkov.github.io/danielsharkov_com"}],"publishConfig":{"access":"public"},"private":false,"source":"./src/index.ts","types":"./src/index.d.ts","main":"./src/router_c.js","module":"./src/router_es.js","browser":"./src/router.js","unpkg":"./src/router.min.js","svelte":"./src/Router.svelte","scripts":{"build":"rollup -c","lint":"eslint \"src/*.ts\""},"type":"module","devDependencies":{"@rollup/plugin-node-resolve":"^13.0.6","@rollup/plugin-typescript":"^8.3.0","@tsconfig/svelte":"^2.0.1","@typescript-eslint/eslint-plugin":"^5.4.0","@typescript-eslint/parser":"^5.4.0","rollup":"^2.60.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.44.2","tslib":"^2.3.1","typescript":"^4.5.2"},"readme":"[](#)\r\n\r\n[](https://danielsharkov.github.io/svelte-router-examples)\r\n[](https://github.com/DanielSharkov/svelte-router-examples)\r\n[](https://badge.fury.io/js/@danielsharkov%2Fsvelte-router)\r\n\r\n\r\n# 🗂 Index\r\n\r\n- [Installation](#-installation)\r\n- [Initializing a Router Instance](#initializing-a-router-instance)\r\n- [Fallback Route](#fallback-route)\r\n- [Route View Component Props](#route-view-component-props)\r\n- [Route Props](#route-props)\r\n- [Before-Push Hooks](#before-push-hooks)\r\n- [Global Before-Push Hook](#global-before-push-hook)\r\n- [Programmatic History Navigation](#programmatic-history-navigation)\r\n- [Route Updated Event Listener](#route-updated-event-listener)\r\n- [RouteLink Component](#routelink-component)\r\n\t- [RouteLink with Parameters](#routelink-with-parameters)\r\n- [Svelte Action use:link](#svelte-action-uselink)\r\n- [Route Transitions](#route-transitions)\r\n- [Router Examples](#-router-examples)\r\n\r\n
\r\n\r\n# 🧗♀️ Getting Started\r\n\r\n## 💿 Installation\r\n\r\nJust `npm i --save-dev @danielsharkov/svelte-router` and done 😁 🎉\r\n\r\n
\r\n\r\n## Initializing a Router Instance\r\n\r\nInitialize a new router with the configuration in `src/router.ts` or where\r\never you like, maybe even inside `App.svelte` as a module - it's up to you.\r\n\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport ViewHome from './views/Home'\r\nimport ViewUser from './views/User'\r\n\r\nexport default new SvelteRouter({\r\n\twindow: window,\r\n\tscrollingElement: window.document.scrollingElement,\r\n\tbaseUrl: '/persistent/path',\r\n\troutes: {\r\n\t\t'home': {\r\n\t\t\tpath: '/',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t},\r\n\t\t'users.user': {\r\n\t\t\t// paths must always begin with a slash\r\n\t\t\t// and may take parameters prefixed by a colon\r\n\t\t\tpath: '/users/:uid',\r\n\t\t\tcomponent: ViewUser,\r\n\t\t},\r\n\t\t'user.album': {\r\n\t\t\t// paths may take multiple parameters\r\n\t\t\tpath: '/users/:uid/albums/:aid',\r\n\t\t\tcomponent: ViewUser,\r\n\t\t},\r\n\t},\r\n})\r\n```\r\n\r\n* `window` should usually be assigned the [browser object model](https://www.w3schools.com/js/js_window.asp)\r\nbut can also be used for testing and debugging purposes.\r\n\r\n* `scrollingElement` should usually be assigned the [Document.scrollingElement](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement),\r\nwhich is the usual scrollable viewport. But if your viewport differs you may\r\nthen provid it your needed `Element`. When no `scrollableElement` is provided\r\nthen the router won't save and restore scroll state by the history.\r\n\r\n* `basePath` is an optional field which has the same principle as the HTML\r\n`
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Fallback Route\r\n\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport ViewHome from './views/Home'\r\nimport ViewNotFound from './views/NotFound'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'home': {\r\n\t\t\tpath: '/',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t},\r\n\t\t'404': {\r\n\t\t\tpath: '/404',\r\n\t\t\tcomponent: ViewNotFound,\r\n\t\t},\r\n\t},\r\n\tfallback: {\r\n\t\tname: '404',\r\n\t\treplace: false, // true by default\r\n\t},\r\n})\r\n```\r\n\r\n`fallback` is optional and defines the route the router should fallback to in\r\ncase the user navigates to an inexistent URL. If `replace` is `false` then the\r\nfallback will push the route into the browser history and change the URL,\r\notherwise it'll just display the fallback route in the router viewport without\r\naffecting the browser history. `replace` is `true` by default.\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route View Component Props\r\n\r\nThe route view components always get the props `router`, `params`, `urlQuery`\r\nand `props`.\r\n\r\n```svelte\r\n\r\n\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Props\r\n\r\nRoutes can be assigned arbitrary props which are then available in the view\r\ncomponent:\r\n\r\n**router.ts**\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport ViewHome from './views/Home'\r\nimport ViewAbout from './views/About'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'root': {\r\n\t\t\tpath: '/',\r\n\t\t},\r\n\t\t'home': {\r\n\t\t\tpath: '/home',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t\tprops: {\r\n\t\t\t\tnav: {\r\n\t\t\t\t\ttitle: 'Home',\r\n\t\t\t\t\ticon: 'fas fa-home',\r\n\t\t\t\t},\r\n\t\t\t\tpicture: 'https://sample.url/picture.jpg',\r\n\t\t\t},\r\n\t\t},\r\n\t\t'about': {\r\n\t\t\tpath: '/about',\r\n\t\t\tcomponent: ViewAbout,\r\n\t\t\tprops: {\r\n\t\t\t\tnav: {\r\n\t\t\t\t\ttitle: 'About me',\r\n\t\t\t\t\ticon: 'fas fa-address-card',\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n\t},\r\n})\r\n```\r\n\r\n**views/Home.svelte**\r\n\r\n```svelte\r\n\r\n\r\n\r\n
{props.nav.title}
\r\n\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Before-Push Hooks\r\n\r\nThe `beforePush` hooks are promises which are executed before a route is pushed\r\nto the history. The passed function receives an object containing the current\r\n`location`, the `pendingRoute` (which the router is about to navigate to) and both\r\nthe `resolver` and `rejector`. A hook must either resolve (approve) the pending\r\nroute otherwise to reject it by passing an another route, or even\r\nnothing (`undefined`) to cancel routing. It can be used for specifying redirect behavior or\r\nanything else that should be done before a push.\r\n\r\nYou may use the `$router.isLoading` property to determine whether the router is\r\nloading a new route and resolving before push hooks, which may be asynchronous.\r\n\r\n| ⚠ Warning ⚠ |\r\n|:--|\r\nBe sure to always either resolve or reject a hook, otherwise it will **dead-lock** your router.\r\n\r\nSimple example of using a hook:\r\n\r\n```svelte\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Global Before-Push Hook\r\n\r\nThe global before push hook is a persistent hook, which can't be removed.\r\nIt's defined right in the router config.\r\nHere's a simple example:\r\n\r\n```ts\r\nimport {SvelteRouter} from '@danielsharkov/svelte-router'\r\nimport {get as getStore} from 'svelte/store'\r\nimport {isValidUserSession} from 'user_session'\r\n// isValidSession could be any of your implementations - in this example it is\r\n// just a derived store returning false or true\r\n\r\nimport ViewLogin from './views/Login'\r\nimport ViewHome from './views/Home'\r\nimport ViewUser from './views/User'\r\n\r\nexport default new SvelteRouter({\r\n\twindow,\r\n\troutes: {\r\n\t\t'root': {\r\n\t\t\tpath: '/',\r\n\t\t},\r\n\t\t'login': {\r\n\t\t\tpath: '/login',\r\n\t\t\tcomponent: ViewLogin,\r\n\t\t},\r\n\t\t'home': {\r\n\t\t\tpath: '/home',\r\n\t\t\tcomponent: ViewHome,\r\n\t\t},\r\n\t\t'user': {\r\n\t\t\tpath: '/user/:uid',\r\n\t\t\tcomponent: ViewUser,\r\n\t\t},\r\n\t\t'very-secret': {\r\n\t\t\tpath: '/treasure',\r\n\t\t}\r\n\t},\r\n\tbeforePush({pendingRoute, location, resolve, reject}) {\r\n\t\tif (!getStore(isValidUserSession)) {\r\n\t\t\treject({name: 'login'})\r\n\t\t} else if (pendingRoute.name === 'login') {\r\n\t\t\treject()\r\n\t\t}\r\n\r\n\t\tswitch (pendingRoute) {\r\n\t\tcase 'root':\r\n\t\t\treject({name: 'home'})\r\n\t\t\tbreak\r\n\t\tcase 'user':\r\n\t\t\tif (params.uid === 'a') {\r\n\t\t\t\treject({\r\n\t\t\t\t\tname: pendingRoute.name,\r\n\t\t\t\t\tparams: {uid: 'b'},\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\tbreak\r\n\t\tcase 'very-secret':\r\n\t\t\treject()\r\n\t\t}\r\n\t\tresolve()\r\n\t},\r\n})\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Programmatic History Navigation\r\n\r\nTo programmatically go back or forward in history just use the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) or the built-in aliases:\r\n\r\n\r\n```svelte\r\n\r\n\r\n\r\n\r\n```\r\n\r\nTo navigate to a new route use the built-in `push` API of the router, which\r\nrequires the route name as the first parameter and if needed a `key:value` object\r\nwith the parameter values:\r\n\r\n```svelte\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Updated Event Listener\r\n\r\nThe `routeUpdated` event listener if fired right after the route has been updated.\r\nThe payload in the event is the current location.\r\n\r\n```svelte\r\n\r\n\r\n
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# RouteLink Component\r\nA `
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Svelte Action `use:link`\r\nThe use action can only be used inside a `
\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# Route Transitions\r\nRoute transitions can't be just applied and used on a route easily. If you\r\nwould just add some transitions into the route component and navigate through\r\nthe routes, it will show unexpected behavior (\r\n\tsee Svelte Issues:\r\n\t[#6779](https://github.com/sveltejs/svelte/issues/6779),\r\n\t[#6763](https://github.com/sveltejs/svelte/issues/6763),\r\n\t[and even including my simple REPL](https://svelte.dev/repl/a5122281148c4c458f40e317fc4be11e?version=3.44.2)\r\n).\r\n\r\n**But! Dirty hacks to the rescue:** 😎💡\r\n\r\nTo tell the viewport that a route has a transition you must dispatch the event\r\n`hasOutro` inside the `onMount` handler. Now that the viewport is aware of the\r\noutro transition, it's going to await the route to finish its transition,\r\nbefore switching to the next route.\r\nNow that the router is awaiting the outro, at the end of the transition we have\r\nto tell the viewport that it may switch further to the next route.\r\nThis is done by dispatching the another event called `outroDone`.\r\nThat's the trick!\r\n\r\n| ℹ Info |\r\n|:--|\r\nAny mistaken dispatched event `outroDone` will be ignored by the viewport, as it only listens for the event after the routers location has changed. Meaning you may just dispatch this event on every outro transition without worring.\r\n\r\n| ℹ Info |\r\n|:--|\r\nInside the route component be sure to call the `outroDone` event on the longest outro transition on any element inside the component, as they have to finish as well. For better understanding see the second example below 👇\r\n\r\n| ⚠ Warning ⚠ |\r\n|:--|\r\nBe sure to fire the event `outroDone` after telling the viewport to await the outro transition, otherwise the viewport will wait a indefinitely.\r\n\r\n```svelte\r\n\r\n\r\n
dispatch('outroDone')}>\r\n\t
\r\n```\r\n\r\n##### A route containing a child transition\r\n```svelte\r\n\r\n\r\n\r\n\r\nSome content
\r\n\r\n\tLorem Impsum...
\r\n dispatch('outroDone')}>\r\n\t
\r\n```\r\n\r\n\r\n\r\n\t\tSome content\r\n\t
\r\n\r\n\t\r\n\t\tLorem Impsum...\r\n\t
\r\n\r\n\r\n--------------------------------------------------------------------------------\r\n
\r\n\r\n\r\n# 🧩 Router Examples\r\nYou can find full router examples in [danielsharkov/svelte-router-examples](https://github.com/DanielSharkov/svelte-router-examples)\r\n
\r\n\r\n\r\n\r\n# ✨ Thanks for contribution goes to:\r\n[@romshark](https://github.com/romshark)\r\n[@madebyfabian](https://github.com/madebyfabian)\r\n
\r\n\r\n\r\n\r\n# ⚖️ License\r\nSvelte Router is a open source software [licensed as MIT](LICENSE).\r\n
\r\n\r\n\r\n\r\n# ⚖️ Additional notices\r\nYou may feel free to use the [Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo.svg), [Animated Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo-animated.svg) and [Banner](https://github.com/DanielSharkov/svelte-router/blob/master/readme-banner.svg) for non-commercial usage only, but first please ask me kindly. Contact me by email on `scharktv[at]gmail.com`.\r\n","readmeFilename":"README.md","gitHead":"a1bc4bec193d6f40cbe4c29120ea44f4bad5ecbb","_id":"@danielsharkov/svelte-router@3.0.1-test.19","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-h3MRchxSBaTV/ERg9GucpBSv0XpuGUS7mSqkyva31ynhdmdg885hZeEjE6EM0iSRTfqmHUbLPqnT0UEBtuMveA==","shasum":"a5531f3f9d70bd9f79ab6387fbcaf12879c0ec97","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.0.1-test.19.tgz","fileCount":17,"unpackedSize":257815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/e2CRA9TVsSAnZWagAAaMoP/itmdQb99NmXUrkUSVax\nlRTXHLJMg8aO8KckTG64SAL8tKObtOFmWwc4JmSQQJAtsB7l1InxTm1BdAvo\nYqcOZR0ab5RRE8VdmpVznZLryhh88t2Wp+8zHpkMsaWUWpGeDkTvi5X41UWf\nvUFTngubO7tfVSWUoKZRR/KiswCWjqiT1rBCj5yYrFD6hytN6XW1HrVXi4d+\nS58Ttr+ENZVqh1+KJH3lwqknQBaZ97wu7Ok0fhMFNVvGS5yw0w7ZJiEWk8mm\nPRBc5dCyHHaRWYgTQz4MUfXFE8ZRacxSssWj1Kbgs6k1F6lQnE/ISOTrQgUK\nOaSeW1GmE1aERD6YZVOZDG/BsxnySHCx4xObnijnMxYUxr2KxC7Bs9lgTBJE\n4LRXmEwoK5TbiW0yLpgwDippirKcpsZAnJY41I+2CrMHzROWqJUbtqTrlFg3\nxgeLSTxy88Six/G7qVC0smTJDu32hI5IOScKyt7UyZc30S0TWD3gBTasu2U0\nQMkosAEQug6BIWmBTGfb5yjwZnfLMzfDpdod6Uih46Bts0IC8PIY4PglKo/W\nu3k6/Oia6x1tsoVi+6BuSlFEY4XcQrNTm61ob0BYoX21F1E9jgalCZBC+2p1\npcVFHrZP0gJAB5kbvB3KT8cH76UaPDmnZBPiHzPDqSdVVS4XzKVOF7EtxNb9\nzrA6\r\n=BD0+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFn0IxF7GVT2Xb/HSGXdwwxNdNXLzmvqUdH5+zolc02EAiEA7C1XDjLiiwG7Ooo8VSNzTrIQDblPqRhPT+4BYEYPJE4="}]},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.0.1-test.19_1644427190124_0.5903346589650711"},"_hasShrinkwrap":false},"3.0.2":{"name":"@danielsharkov/svelte-router","version":"3.0.2","description":"A simple, fast and easy to use svelte router.","license":"MIT","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://danielsharkov.github.io/danielsharkov_com"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/router.js","module":"src/router.mjs","svelte":"src/index.js","scripts":{"build":"rollup -c","lint":"eslint \"src/*.ts\""},"exports":{"./package.json":"./package.json",".":{"types":"./index.d.ts","browser":{"import":"./index.mjs","require":"./index.js"},"import":"./index.mjs","require":"./index.js"}},"devDependencies":{"@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.4.0","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.36.1","@typescript-eslint/parser":"^5.36.1","rollup":"^2.79.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.49.0","tslib":"^2.4.0","typescript":"^4.8.2"},"gitHead":"514d2915baad187ae7d23a682538da365e34914e","_id":"@danielsharkov/svelte-router@3.0.2","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-RuTFqqwzz9R8p9bMBv/b+z1G39yzQR/ckRx65aiIApRohY4tqfPq8Jr4F6yupvtAoUtpo6vVEJJq4QL57ru3Lw==","shasum":"4f0afaafd071189c8f454e9b80715ac98e88ffaa","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.0.2.tgz","fileCount":12,"unpackedSize":73672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYLp7sSasNlpLHsQtMt0CbFyyg9xJA+nkvSqfbKt//LQIgD/gQri7WZaNhdSwgK5LyffoQL9GZ5gVjkZomesJh6pQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjETGrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLNQ/+LQEFssviJeU+8qE/x8qCeRmOV8HvOyPpRB2v5VFgPwYru8Wj\r\n2dtib6jPLkohcbnFvZP/XIDfwtAse9iBnl673bBYE8jHB+mb0q6/mOu1mruZ\r\nBI48GbJsX0a7D6MMIm7QqCFltoXWF+3c9TUppTQ9oqXQz3E+mebaKMAMRyy5\r\nch+kkr6vZhLRvcFz7ci++4EZuWdlDS6c2L4kHhZjx8IvBG4GwpxtNT8u/V9W\r\nClDpc834TgE5xKlgaZvzJ/J8I0l28VDF28B9KdYIzkDQfUTcknQQ7SzfX7N8\r\nghhc4u5Iq9ODwIct4NLoUmExwtxUOejcM3Dxh/KhgiDX25S8TAAEEppX7pNQ\r\nnyhRRbBEiVclKQbLsgWsVY0uQN9YqtFhz7QcyvY7QmQX1+agfsoZZ/gMuP7t\r\nkiJ6lWbON9pOd1baMKtNINeO4P32da+oAJnJ5lXeFzhY6u7u5l9atP5lxb10\r\nNTtozPSWuSNVLs/15diytmTgPfn0v8b9TkWqvvwWkUXbsnj0NloXjByZQzsn\r\nQbOabC8o4XWmfamKvwRQCthdQPZkxZxscTGB0p52lyLuWb9F5J4Mmy/kahw4\r\na3UVlB4KdAvMa7VLfrqGfbK2xdaRPHDqbamFOf9O/4eH89vshcgfZo0g+Oak\r\nhQgiWYvW5/QgIbTJBT92t8WTs7d7GH/GXPY=\r\n=oFnf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.0.2_1662071211251_0.6448479189926424"},"_hasShrinkwrap":false},"3.0.3":{"name":"@danielsharkov/svelte-router","version":"3.0.3","description":"A simple, fast and easy to use svelte router.","license":"MIT","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://danielsharkov.github.io/danielsharkov_com"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/router.js","module":"src/router.mjs","svelte":"src/index.js","scripts":{"build":"rollup -c","lint":"eslint \"src/*.ts\""},"exports":{"./package.json":"./package.json",".":{"types":"./index.d.ts","browser":{"import":"./index.mjs","require":"./index.js"},"import":"./index.mjs","require":"./index.js"}},"devDependencies":{"@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.4.0","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.36.1","@typescript-eslint/parser":"^5.36.1","rollup":"^2.79.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.49.0","tslib":"^2.4.0","typescript":"^4.8.2"},"gitHead":"ac72653941f9b63179173c84223f7b16a9fd5bed","_id":"@danielsharkov/svelte-router@3.0.3","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ZaetR9WLR1P30Toaorw+sa/pxWlKDCSTHn4z6kgEgLypKXaqbGAw0QDRbcLUY12AoUqKaXkEzbWjNqKLPPg48A==","shasum":"4a3d0adf992cbbe999d37f3de60d61e2a0a561d8","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.0.3.tgz","fileCount":13,"unpackedSize":73672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZzBMwkecCb0I3JZ5uOGVCE+LJ50oJHrau/w31i6WI8AiADvYzj5kjcjwPb/fXwN+RGX8MWMXO/FWG4SFh5y8k0eA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNXyWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+lQ/+IjXU2d8zE1/wwoqw3H/ubjj5d7JnAEhwC1BgF/GbPP4+j5fg\r\ndrTXVd86UvCzbaOiIGQKlfnNiJfMkUFSdqv3yJ8RhVTgOkuEw5Am/DRgXZLH\r\nlO1nfW4zLR0jk8lbRKUD786kOvaLFcAQSqEFa3ekumaQbDtGeyXPS5gW/xbA\r\nRPrGHxRohKAFvihRMdomIv8GhrQ2ffExvfAHNDNTu9eRnUgD/d3Sq3uP+Nvm\r\niPnJr/8clei+pWl/fHNuwaVXSaLgR9W+D/vxARxPLbrXgU+P5pqLUxVP90mo\r\n/odU2iz5Y/lX7VdwSgcjLeBgwjyGqhEsL8ZyMwCIYyrcqnEfxJA9nJFK2URh\r\nmPfkk6+OdkbZ6YeRaQeAQ90HXvom37moPY4X2qWVZOGLvb83kxytZDu+5qQu\r\ndJveoHH6Dp5QfpiOkBq/mR6OzKM5KEAMRlbU3FC/KP4WHUCFTrCfpzJ0TEav\r\nb9l5iWhl+rnOmr1uhdSOxdBndc0y0FFSyKBrrXR5hx2jru14+U/iXNO4h1bb\r\np4oPvyBA0DEXenJfAn6RB9G2v7031M3dCGfOwqQ4pNVcl1SsQI7r93c6KT4y\r\nfaksneYoWLbhm2QGsp5+GnTvswqG8K3Fb+BZ3SGDWEoKiRlhLcb93dxBYcSz\r\nMXfF3cbxfy/10+gzQ5PLbO+NmXdyvTXZdwE=\r\n=2/n7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.0.3_1664449686783_0.4693002961514592"},"_hasShrinkwrap":false},"3.1.4":{"name":"@danielsharkov/svelte-router","version":"3.1.4","description":"A simple, fast and easy to use svelte router.","license":"MIT","type":"module","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://danielsharkov.com"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/router.js","module":"src/router.mjs","svelte":"src/index.js","scripts":{"build":"rollup -c","lint":"eslint \"src/*.ts\""},"exports":{"./package.json":"./package.json",".":{"types":"./index.d.ts","browser":{"import":"./index.mjs","require":"./index.js"},"import":"./index.mjs","require":"./index.js"}},"devDependencies":{"@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-typescript":"^9.0.2","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.42.0","@typescript-eslint/parser":"^5.42.0","rollup":"^3.2.5","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.52.0","tslib":"^2.4.1","typescript":"^4.8.4"},"gitHead":"8ecf6e8e0286dc7cd0aae358f735407eb1fe0ab4","_id":"@danielsharkov/svelte-router@3.1.4","_nodeVersion":"16.17.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-57Bp8twrncz8JF1UqidnifL2VoGX03pRzBemp16LbdbGWktPScQVbJ297Ov+fTvFx11G6rZWhEZunyIDv/PeuQ==","shasum":"6609323e63e86b242ada904034491658342b4d7a","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.1.4.tgz","fileCount":12,"unpackedSize":77976,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWpUuuz5u15XgyOKCVZMYLO/sXViUF0YSrbjKgklNDuAiBXOBnh8XrrR3fQs2UsZaxaxjEG1l/eYfEdiRE2U9dwWw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaEquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmownw/8DOUGAFu/S6NJ8Ce+wAe2GY3hrqlah7Lca6W9dyfnkIiuUTxh\r\n7V9H3iGgb91+SNR4tH6SsUubKtufTthfpTsTeHYkEPlfOkyg9WrcVhyf0ZPY\r\nMhJgHzi8R9CbXSs6UMjRySkr0snob3CAOUe1D2ODapEV9rANCm3Ft5mRCYom\r\nimFlSRP9TSsDokWRK28iR+vgvWwfoRqCnZkBglQaC17/YT8gtmpaqgiQX7dF\r\nWDvY6fobcgMMi/mxVPhz+8Ugg1rOBhC+f6UOhqAwk/ddvWijuCMEGmP2E+17\r\n1cSnIiD1zjLt36UkEBDDldhuNdystoKLrHWQMFb8k7TJBrepdGxvnt+3Dwgr\r\nvJPWyPxw0NdMSwp5edczaTF0LpN3xGY3NDWO4HMk7bwzy3f0EpYvsTDZ3s+7\r\nmhCLSAdoypI39vFif+04zxXeUNcq5uKV3gesFW1BoazrjDgV04cPgF3WvjqU\r\nIVCrUjGZKoCn6IlRKcXUFp2jnFDjE0tydzbJh7ajVTju2L0ZPT8gxOIGSPSK\r\nzyjUZf4TrTCqQWthgPz30jtpnykUwwneJmV/ykzfyUuYeNnj6U+eQZRT8EBv\r\nVLA7rAOedA0XZeKD4n6MkjpE8PrvZQwmTWgig12zKtM+j5UeuzLI+A8r+A/z\r\nhhfSxILytvQkqWxBzA5x0qsqLXXTW+h/Yzw=\r\n=TJY8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.1.4_1667779245829_0.38631910226688615"},"_hasShrinkwrap":false},"3.1.5":{"name":"@danielsharkov/svelte-router","version":"3.1.5","description":"A simple, fast and easy to use svelte router.","license":"MIT","type":"module","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://daniel-scharkov.engineer"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/router.js","module":"src/router.mjs","svelte":"src/index.js","exports":{"./package.json":"./package.json",".":{"types":"./index.d.ts","browser":{"import":"./index.mjs","require":"./index.js"},"import":"./index.mjs","require":"./index.js"}},"devDependencies":{"@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-typescript":"^9.0.2","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.42.0","@typescript-eslint/parser":"^5.42.0","rollup":"^3.2.5","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.52.0","tslib":"^2.4.1","typescript":"^4.8.4"},"scripts":{"preinstall":"npx only-allow pnpm","build":"rollup -c","lint":"eslint \"src/*.ts\""},"_id":"@danielsharkov/svelte-router@3.1.5","_integrity":"sha512-FssNzqNES42Yo6g41ugWHywDzpcC3buF6b1GW9nJ5gl1xHjOiY4RP3sMtmR4MYMWZ76XHYPRJD6608AlHnDhdw==","_resolved":"/private/var/folders/14/9gcwxb_91bg1zrs90txtlr380000gp/T/ade99de8ec96e58647c57fa7e14fe425/danielsharkov-svelte-router-3.1.5.tgz","_from":"file:danielsharkov-svelte-router-3.1.5.tgz","_nodeVersion":"16.17.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FssNzqNES42Yo6g41ugWHywDzpcC3buF6b1GW9nJ5gl1xHjOiY4RP3sMtmR4MYMWZ76XHYPRJD6608AlHnDhdw==","shasum":"9e2461f4130f543ba6962209951d53b2498a7236","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.1.5.tgz","fileCount":12,"unpackedSize":79565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIgI1RnbsOVCbLGYueL+3nfOjUbsO0PQRvc7E1zxqqjQIhAPzZGaNYRMvDePog+RE5OgYc/DI3IXdsBJdU+0WBzsNp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbu+0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+ww/8CS6Qs1JSFdAEpkwRV5dziTj1wMNiWw+UK2jrar01dH35E4bI\r\n68n/TgTnkilR+4TcWasUcnnn+s0cGe5dnCjZIwxtK+5+cwAw5+5BMoTMyx9S\r\nobE4ssiBvHF+cNyMasfxRHHaoBoSeVj6+kq82gK848TLMI53ciletfEXW9lY\r\nsssYXCLcZGvHT1FsMqY95rXdgQGDff/W78ci2lKmqxCR3n0JCg1MDt17Z2MG\r\noxWFYk0di/Elnx2aXuFKsuUvUFGiTv8DsD2GX3zWXCjFpGRM7peOme1T5GQK\r\nO/8u9xXPOGcAREpsmCgRfT2PkLoxR+rVA6ojIN1GtVg0bNQmdD5pekRyqUhT\r\nY7OuUmV9LAdbbR8lBT/mgiUqu3nTZJdAcHFpadMfPKFI89olZtwdvISjcL4u\r\n2NgtJCXRV8oAPNNfYP/6H/3XG1OT7W1fQAWUwpwKxwbnHb7LgMhv92+XXHee\r\nkaOyTV5sD+l0uhzlJDHzH6QrDgHXHZeHQw+RXiyGiCSKiNDaVksshlYHWMsK\r\ngdp8jQ7r39L4QY8sSWLZhsyh5W9ouccv0xE697SqtqwQvonQxUQUurnO3ass\r\ngMPEqVNXpsD94EANN5FIBVF7JJGmalcefD0sBzAG3DRJP3X9Ai04saPFA+Pr\r\nj4tb4cxuTqMqNzB0Df97aqzwVG/dH15LxIA=\r\n=Tk0J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.1.5_1668214708778_0.7532303823916586"},"_hasShrinkwrap":false},"3.1.6":{"name":"@danielsharkov/svelte-router","version":"3.1.6","description":"A simple, fast and easy to use svelte router.","license":"MIT","type":"module","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://daniel-scharkov.engineer"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/router.js","module":"src/router.mjs","svelte":"src/index.js","scripts":{"preinstall":"npx only-allow pnpm","build":"rollup -c","lint":"eslint \"src/*.ts\""},"exports":{".":{"types":"./src/index.d.ts","default":"./src/index.js"}},"devDependencies":{"@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-typescript":"^9.0.2","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.42.0","@typescript-eslint/parser":"^5.42.0","rollup":"^3.2.5","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.52.0","tslib":"^2.4.1","typescript":"^4.8.4"},"gitHead":"437806a89ab3e2aaeacf3176aa35162755119a06","_id":"@danielsharkov/svelte-router@3.1.6","_nodeVersion":"16.17.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-32LfSYg0cCnteN94XOPjlhbR/fH29D73h9/4iRPesWzZBVSrQJqboKb8w/K/npUxbVJOHisdr6HXIwJtWL03dQ==","shasum":"f02ada4864b9caff122a50369f5a873ea23ee08a","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-3.1.6.tgz","fileCount":12,"unpackedSize":79453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC307cNIXHQ8i+RuarTCrrCWzwwvg0Py1SZVBxsUHfEeAiEA/S4J+qfB3yA/xnhzM1gND46C7wkKbtyOCxAmM53qxDQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMfQfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohsQ/+NJ9AoPxLp5WJEubmWAnBba49DKY+Jk/5sLx0uYcBXnYZcnFj\r\n9Zg2gc3YEQ+d+QcvdFbL3bBvb2ly3ybU/icoHkYKl4FdsvCfoI1llF4Ax6ga\r\n5L4nJ9rn49o8sKN5UNALxJC0jn+KvFHS7JxjOGPA0PLL6/vhDO/Blw+0BDl1\r\nA6cX3i/2XLu99VHmn4TaCH4aMJG8s2xmIr/nLW0TlyXpZ8SM28hox9946/VT\r\nV9b785DVg5/AvxXZ/41UurKAiL5dx3qtnsApcMUlUPXhJg/zQ3Ot8grRDnk/\r\nTAAU3agQD4x8V8rbC4mLEvz71tewHLnP7+eXaTAtndytiLD78t6CICh7i4iy\r\nCXrLJrKTKgcpucMd/cVa1jvJtLURH8gpjsi36rpH5UzrbHOKncVRlzxbl6UA\r\nZkCdpaQU9SET1J1OAM+/jrzizOx1lB25ab7PyfbKLT9htqV3W9K6/2Fblb8g\r\n49rDhkB8YikF6MkA6WoYkdamdeMjZ89dGRg6BjcbfzaiNhryjG6EACE/0qEw\r\nVXc/o4+0aRpZi7hteJELHKMdM+/iw2t08RgdFumqBSxxgXG6ERtfrr3m3otO\r\nYT9F3YNOgkBmDCCwXaO05eecoYsVo1NegU15BdvIEOERmLvSSZMpt6BVDjpV\r\npGgkWlrCQN0+FLUNV+Q+qD5z5Y5ZpRTATsQ=\r\n=CidF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_3.1.6_1680995359339_0.1718982574782233"},"_hasShrinkwrap":false},"4.0.0":{"name":"@danielsharkov/svelte-router","version":"4.0.0","description":"A simple, fast and easy to use svelte router. Developed with smooth page transitions in mind.","license":"MIT","type":"module","keywords":["svelte","svelte3","router","typescript","spa"],"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"homepage":"https://github.com/DanielSharkov/svelte-router","repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"authors":[{"name":"Roman Sharkov","email":"roman.scharkov@gmail.com","url":"https://github.com/romshark"},{"name":"Daniel Sharkov","email":"scharktv@gmail.com","url":"https://daniel-scharkov.engineer"}],"publishConfig":{"access":"public"},"private":false,"source":"src/index.ts","types":"src/index.d.ts","main":"src/index.js","module":"src/index.mjs","svelte":"src/index.js","scripts":{"preinstall":"npx only-allow pnpm","build":"rollup -c","lint":"eslint \"src/*.ts\""},"exports":{".":{"types":"./src/index.d.ts","default":"./src/index.js"},"./Viewport":"./src/Viewport.svelte","./RouteLink":"./src/RouteLink.svelte"},"devDependencies":{"@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-typescript":"^9.0.2","@tsconfig/svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^5.42.0","@typescript-eslint/parser":"^5.42.0","rollup":"^3.2.5","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.52.0","tslib":"^2.4.1","typescript":"^4.8.4"},"gitHead":"dfe23fc45b71c0594014302855b7edbe38ce2aa1","_id":"@danielsharkov/svelte-router@4.0.0","_nodeVersion":"16.17.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mmce/+WiaOA8rfQEH+rsocY1gcglq5FMSBXuJELD4Fl7TCfukqf12wjkZk9tzzPp+H/7uHnTY8DMAhYiyCLLMg==","shasum":"e4e8a78f2b0db7f54c2b09e9060e48aa91fb1e2e","tarball":"https://registry.npmjs.org/@danielsharkov/svelte-router/-/svelte-router-4.0.0.tgz","fileCount":11,"unpackedSize":65605,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKdyzJDnRqRPOfqBRwtDz2ij7MwgL99161n5LU38d8iAiB1SlCNqvyR5H0RbrFhL/m6A+j9HORWiPnxTpIqyBCDrw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMqpiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7mw//WeES6+RhGVXdCd50Xxe/9eAXJ0CodOoXizRp9yx1F4S3EyxL\r\n2TpsVrhvlsxvdziuxBDmkmirLipufJyiz8TEQK8DzZn1cwyY+QdnQvBGi/j6\r\ntpj/wVLcFMgsJLFIi9GBkw+dytR6FPIsjLKGk7lcnJZbhKAo1NJ1I0x4o+Lk\r\nRpUBLYS8FqFZizZWMvcLfI9dmBZKwG4NpYpklLTSZ81wOqzTdjQT/+UY+VzG\r\ncm6kZOM5L/Rsf0P5ElBTR8yj/CM+5QZAD9+14Rd/nuiVJLni0siWLhoI9Mr+\r\nArHkaAW804jCEeigPG9LKWMKJ4vCLjPqkthrpaLPHWDxZL8wt4I3+taTiSrC\r\nxKznBNy3ES4PpOrFeMyR9NgJjhS6OF1qm4gtyWA7ktaFYD2LKNOZaAbDH2JO\r\nCtliaGOSs5jYTKkE8wQ9iGxiX1uxCO/t4LnHLB2HZhPdpiIQMw3zken63GgA\r\n3NyyHu7uml6xTgNOOfYmU1z3ohCdqKWRCyeTMM/0hteHYsoKyIolcva3/HNE\r\nj4J++b+I+lSj2+CbCOJ4FD88MqPKjoUMAPTXX91OQRVwCciu8FJoTuneGVrR\r\nrYXI3W/qtZn8ETCukBMTk6aoWu2I9wWqvgP3ROo3Y1b+LtbrL1ekC17lQVB4\r\nr30qrehDoZP5T/Xq5izUMEKJFxc6XXuwFsQ=\r\n=BUXZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"danielsharkov","email":"scharktv@gmail.com"},"directories":{},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-router_4.0.0_1681042018135_0.5056877410723564"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-12T18:07:10.374Z","1.0.0":"2019-06-12T18:07:10.635Z","modified":"2023-04-09T12:06:58.517Z","1.0.1":"2019-06-12T23:48:13.215Z","1.0.2":"2019-06-13T11:45:01.467Z","1.0.3":"2019-06-20T20:56:05.650Z","1.1.0":"2019-06-23T15:36:03.038Z","1.1.1":"2019-07-06T22:02:03.524Z","1.2.0":"2019-07-06T22:08:45.822Z","1.2.1":"2019-07-06T23:52:03.057Z","1.3.1":"2019-07-21T11:18:16.075Z","1.3.2":"2019-07-28T16:30:37.444Z","1.3.3":"2019-09-01T21:28:28.152Z","1.3.4":"2019-09-12T22:20:46.142Z","1.4.4":"2021-01-23T23:23:34.355Z","1.4.5":"2021-01-24T13:04:44.482Z","1.5.5":"2021-02-24T09:24:23.251Z","2.0.0":"2021-11-21T14:42:21.103Z","2.0.1":"2021-11-21T15:07:11.908Z","2.1.3":"2021-11-22T08:35:19.359Z","2.4.6":"2021-11-27T20:34:25.324Z","2.4.12":"2021-11-28T20:26:29.678Z","3.0.0":"2021-11-29T17:49:13.584Z","3.0.1-test.0":"2022-02-05T23:46:06.841Z","3.0.1-test.1":"2022-02-06T00:21:24.854Z","3.0.1-test.2":"2022-02-06T01:47:40.938Z","3.0.1-test.3":"2022-02-07T19:29:51.091Z","3.0.1-test.4":"2022-02-07T19:37:30.555Z","3.0.1-test.5":"2022-02-07T20:00:29.968Z","3.0.1-test.6":"2022-02-07T20:11:27.719Z","3.0.1-test.7":"2022-02-08T00:37:53.402Z","3.0.1-test.8":"2022-02-08T01:55:25.163Z","3.0.1-test.9":"2022-02-08T02:14:15.619Z","3.0.1-test.10":"2022-02-08T16:42:44.530Z","3.0.1-test.11":"2022-02-08T16:47:04.610Z","3.0.1-test.12":"2022-02-08T16:50:53.304Z","3.0.1-test.13":"2022-02-08T16:53:34.530Z","3.0.1-test.14":"2022-02-08T17:09:04.807Z","3.0.1-test.16":"2022-02-08T17:38:28.205Z","3.0.1-test.17":"2022-02-08T17:53:04.263Z","3.0.1-test.18":"2022-02-08T18:01:28.821Z","3.0.1-test.19":"2022-02-09T17:19:50.295Z","3.0.1-test.20":"2022-02-10T22:10:18.714Z","3.0.2":"2022-09-01T22:26:51.481Z","3.0.3":"2022-09-29T11:08:06.968Z","3.1.4":"2022-11-07T00:00:46.054Z","3.1.5":"2022-11-12T00:58:28.940Z","3.1.6":"2023-04-08T23:09:19.523Z","4.0.0":"2023-04-09T12:06:58.408Z"},"maintainers":[{"name":"danielsharkov","email":"scharktv@gmail.com"}],"description":"A simple, fast and easy to use svelte router. Developed with smooth page transitions in mind.","homepage":"https://github.com/DanielSharkov/svelte-router","keywords":["svelte","svelte3","router","typescript","spa"],"repository":{"type":"git","url":"git+https://github.com/danielsharkov/svelte-router.git"},"bugs":{"url":"https://github.com/DanielSharkov/svelte-router/issues"},"license":"MIT","readme":"[](#)\n\n[](https://danielsharkov.github.io/svelte-router-examples)\n[](https://github.com/DanielSharkov/svelte-router-examples)\n[](https://badge.fury.io/js/@danielsharkov%2Fsvelte-router)\n\n[](https://github.com/TheComputerM/awesome-svelte#readme)\n\n# 🗂 Index\n\n- [Installation](#-installation)\n- [Initializing a Router Instance](#initializing-a-router-instance)\n- [Fallback Route](#fallback-route)\n- [Route View Component Props](#route-view-component-props)\n- [Route Props](#route-props)\n- [Before-Push Hooks](#before-push-hooks)\n- [Global Before-Push Hook](#global-before-push-hook)\n- [Programmatic History Navigation](#programmatic-history-navigation)\n- [Route Updated Event Listener](#route-updated-event-listener)\n- [RouteLink Component](#routelink-component)\n\t- [RouteLink with Parameters](#routelink-with-parameters)\n- [Svelte Action use:link](#svelte-action-uselink)\n- [Route Transitions](#route-transitions)\n- [Lazy loading](#lazy-loading)\n- [Router Examples](#-router-examples)\n\n
\n\n# 🧗♀️ Getting Started\n\n## 💿 Installation\n\nDepending on your package manager just:\n\n**pnpm**
\n`pnpm add -D @danielsharkov/svelte-router`\n\n**yarn**
\n`yarn add --dev @danielsharkov/svelte-router`\n\n**npm**
\n`npm i -D @danielsharkov/svelte-router`\n\nAnd done 😁 🎉\n\n
\n\n## Initializing a Router Instance\n\nInitialize a new router with the configuration in `src/router.ts` or where\never you like, maybe even inside `App.svelte` as a module - it's up to you.\n\n```ts\nimport SvelteRouter from '@danielsharkov/svelte-router'\nimport ViewHome from './views/Home.svelte'\nimport ViewUser from './views/User.svelte'\nimport ViewAlbum from './views/Album.svelte'\n\nexport default new SvelteRouter({\n\twindow: window,\n\tscrollingElement: window.document.scrollingElement,\n\tbasePath: '/persistent/path',\n\troutes: {\n\t\t'home': {\n\t\t\tpath: '/',\n\t\t\tcomponent: ViewHome,\n\t\t},\n\t\t'users.user': {\n\t\t\t// paths must always begin with a slash\n\t\t\t// and may take parameters prefixed by a colon\n\t\t\tpath: '/users/:uid',\n\t\t\tcomponent: ViewUser,\n\t\t},\n\t\t'user.album': {\n\t\t\t// paths may take multiple parameters\n\t\t\tpath: '/users/:uid/albums/:aid',\n\t\t\tcomponent: ViewAlbum,\n\t\t},\n\t},\n})\n```\n\n* `window` should usually be assigned the [browser object model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)\nbut can also be used for testing and debugging purposes.\n\n* `scrollingElement` should usually be assigned the [Document.scrollingElement](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement),\nwhich is the usual scrollable viewport. But if your viewport differs you may\nthen provid it your needed `Element`. When no `scrollableElement` is provided\nthen the router won't save and restore scroll state by the history.\n\n* `basePath` is an optional field which has the same principle as the HTML\n`
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Fallback Route\n\n```ts\nimport SvelteRouter from '@danielsharkov/svelte-router'\nimport ViewHome from './views/Home.svelte'\nimport ViewNotFound from './views/NotFound.svelte'\n\nexport default new SvelteRouter({\n\twindow,\n\troutes: {\n\t\t'home': {\n\t\t\tpath: '/',\n\t\t\tcomponent: ViewHome,\n\t\t},\n\t\t'404': {\n\t\t\tpath: '/404',\n\t\t\tcomponent: ViewNotFound,\n\t\t},\n\t},\n\tfallback: {\n\t\tname: '404',\n\t\treplace: false, // true by default\n\t},\n})\n```\n\n`fallback` is optional and defines the route the router should fallback to in\ncase the user navigates to an inexistent URL. If `replace` is `false` then the\nfallback will push the route into the browser history and change the URL,\notherwise it'll just display the fallback route in the router viewport without\naffecting the browser history. `replace` is `true` by default.\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Route View Component Props\n\nThe route view components always get the props `router`, `params`, `urlQuery`\nand `props`.\n\n```svelte\n\n\n\n```\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Route Props\n\nRoutes can be assigned arbitrary props which are then available in the view\ncomponent:\n\n**router.ts**\n```ts\nimport SvelteRouter from '@danielsharkov/svelte-router'\nimport ViewHome from './views/Home.svelte'\nimport ViewAbout from './views/About.svelte'\n\nexport default new SvelteRouter({\n\twindow,\n\troutes: {\n\t\t'root': {\n\t\t\tpath: '/',\n\t\t},\n\t\t'home': {\n\t\t\tpath: '/home',\n\t\t\tcomponent: ViewHome,\n\t\t\tprops: {\n\t\t\t\tnav: {\n\t\t\t\t\ttitle: 'Home',\n\t\t\t\t\ticon: 'fas fa-home',\n\t\t\t\t},\n\t\t\t\tpicture: 'https://sample.url/picture.jpg',\n\t\t\t},\n\t\t},\n\t\t'about': {\n\t\t\tpath: '/about',\n\t\t\tcomponent: ViewAbout,\n\t\t\tprops: {\n\t\t\t\tnav: {\n\t\t\t\t\ttitle: 'About me',\n\t\t\t\t\ticon: 'fas fa-address-card',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n})\n```\n\n**views/Home.svelte**\n\n```svelte\n\n\n\n
{props.nav.title}
\n\n\n--------------------------------------------------------------------------------\n
\n\n\n# Before-Push Hooks\n\nThe `beforePush` hooks are promises which are executed before a route is pushed\nto the history. The passed function receives an object containing the current\n`location`, the `pendingRoute` (which the router is about to navigate to) and both\nthe `resolver` and `rejector`. A hook must either resolve (approve) the pending\nroute otherwise to reject it by passing an another route, or even\nnothing (`undefined`) to cancel routing. It can be used for specifying redirect behavior or\nanything else that should be done before a push.\n\nYou may use the `$router.isLoading` property to determine whether the router is\nloading a new route and resolving before push hooks, which may be asynchronous.\n\n| ⚠ Warning ⚠ |\n|:--|\nBe sure to always either resolve or reject a hook, otherwise it will **dead-lock** your router.\n\nSimple example of using a hook:\n\n```svelte\n\n```\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Global Before-Push Hook\n\nThe global before push hook is a persistent hook, which can't be removed.\nIt's defined right in the router config.\nHere's a simple example:\n\n```ts\nimport SvelteRouter from '@danielsharkov/svelte-router'\nimport {get as get$} from 'svelte/store'\nimport {isValidUserSession} from 'user_session'\n// isValidSession could be any of your implementations - in this example it is\n// just a derived store returning false or true\n\nimport ViewLogin from './views/Login.svelte'\nimport ViewHome from './views/Home.svelte'\nimport ViewUser from './views/User.svelte'\n\nexport default new SvelteRouter({\n\twindow,\n\troutes: {\n\t\t'root': {\n\t\t\tpath: '/',\n\t\t},\n\t\t'login': {\n\t\t\tpath: '/login',\n\t\t\tcomponent: ViewLogin,\n\t\t},\n\t\t'home': {\n\t\t\tpath: '/home',\n\t\t\tcomponent: ViewHome,\n\t\t},\n\t\t'user': {\n\t\t\tpath: '/user/:uid',\n\t\t\tcomponent: ViewUser,\n\t\t},\n\t\t'very-secret': {\n\t\t\tpath: '/treasure',\n\t\t}\n\t},\n\tbeforePush({pendingRoute, location, resolve, reject}) {\n\t\tif (!get$(isValidUserSession)) {\n\t\t\treject({name: 'login'})\n\t\t} else if (pendingRoute.name === 'login') {\n\t\t\treject()\n\t\t}\n\n\t\tswitch (pendingRoute) {\n\t\tcase 'root':\n\t\t\treject({name: 'home'})\n\t\t\tbreak\n\t\tcase 'user':\n\t\t\tif (params.uid === 'a') {\n\t\t\t\treject({\n\t\t\t\t\tname: pendingRoute.name,\n\t\t\t\t\tparams: {uid: 'b'},\n\t\t\t\t})\n\t\t\t}\n\t\t\tbreak\n\t\tcase 'very-secret':\n\t\t\treject()\n\t\t}\n\t\tresolve()\n\t},\n})\n```\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Programmatic History Navigation\n\nTo programmatically go back or forward in history just use the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) or the built-in aliases:\n\n\n```svelte\n\n\n\n\n```\n\nTo navigate to a new route use the built-in `push` API of the router, which\nrequires the route name as the first parameter and if needed a `key:value` object\nwith the parameter values:\n\n```svelte\n\n\n\n\n\n```\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Route Updated Event Listener\n\nThe `routeUpdated` event listener if fired right after the route has been updated.\nThe payload in the event is the current location.\n\n```svelte\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# RouteLink Component\nA `
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Svelte Action `use:link`\nThe use action can only be used inside a `
\n\n--------------------------------------------------------------------------------\n
\n\n\n# Route Transitions\nRoute transitions can't be just applied and used on a route easily. If you\nwould just add some transitions into the route component and navigate through\nthe routes, it will show unexpected behavior (\n\tsee Svelte Issues:\n\t[#6779](https://github.com/sveltejs/svelte/issues/6779),\n\t[#6763](https://github.com/sveltejs/svelte/issues/6763),\n\t[and even including my simple REPL](https://svelte.dev/repl/a5122281148c4c458f40e317fc4be11e?version=3.44.2)\n).\n\n**But! Dirty hacks to the rescue:** 😎💡\n\nTo tell the viewport that a route has a transition you must dispatch the event\n`hasOutro` inside the `onMount` handler. Now that the viewport is aware of the\noutro transition, it's going to await the route to finish its transition,\nbefore switching to the next route.\nNow that the router is awaiting the outro, at the end of the transition we have\nto tell the viewport that it may switch further to the next route.\nThis is done by dispatching the another event called `outroDone`.\nThat's the trick!\n\n| ℹ Info |\n|:--|\nAny mistaken dispatched event `outroDone` will be ignored by the viewport, as it only listens for the event after the routers location has changed. Meaning you may just dispatch this event on every outro transition without worring.\n\n| ℹ Info |\n|:--|\nInside the route component be sure to call the `outroDone` event on the longest outro transition on any element inside the component, as they have to finish as well. For better understanding see the second example below 👇\n\n| ⚠ Warning ⚠ |\n|:--|\nBe sure to fire the event `outroDone` after telling the viewport to await the outro transition, otherwise the viewport will wait a indefinitely.\n\n```svelte\n\n\n
dispatch('outroDone')}>\n\t
\n```\n\n##### A route containing a child transition\n```svelte\n\n\n\n\nSome content
\n\n\tLorem Impsum...
\n dispatch('outroDone')}>\n\t
\n```\n\n\n\n\t\tSome content\n\t
\n\n\t\n\t\tLorem Impsum...\n\t
\n\n\n--------------------------------------------------------------------------------\n
\n\n\n# 🥱 Lazy loading\nTo lazy load components you would need to set the field `lazyComponent` instead\nof `component`. The router will panic when using both, as it makes no sense.\nYou may even provide a `loading` and `fallback` component, which act like a\nregular route component, meaning they [can be smoothly transitioned](#route-transitions) as well.\n\n```ts\nimport SvelteRouter from '@danielsharkov/svelte-router'\nimport RouteLoading from './components/RouteLoading.svelte'\nimport RouteLoadFailedFallback from './components/RouteLoadFailedFallback.svelte'\n\nimport ViewHome from './views/Home.svelte'\nimport ViewNotFound from './views/NotFound.svelte'\n\nexport default new SvelteRouter({\n\twindow: window,\n\tscrollingElement: window.document.scrollingElement,\n\troutes: {\n\t\t'home': {\n\t\t\tpath: '/',\n\t\t\tcomponent: ViewHome,\n\t\t},\n\t\t'users.user': {\n\t\t\tpath: '/users/:uid',\n\t\t\tlazyComponent: {\n\t\t\t\t// lazy load and show this component:\n\t\t\t\tcomponent: async ()=> (await import('./views/User.svelte')).default,\n\t\t\t\t// when the actual route component is loading show:\n\t\t\t\tloading: RouteLoading,\n\t\t\t\t// in case it fails loading the component show:\n\t\t\t\tfallback: RouteLoadFailedFallback,\n\t\t\t},\n\t\t},\n\t\t'user.album': {\n\t\t\tpath: '/users/:uid/albums/:aid',\n\t\t\tlazyComponent: {\n\t\t\t\tcomponent: async ()=> (await import('./views/Album.svelte')).default,\n\t\t\t\tloading: RouteLoading,\n\t\t\t\tfallback: RouteLoadFailedFallback,\n\t\t\t},\n\t\t},\n\t\t// this route below will never load, it would always first show the\n\t\t// loading and then the fallback component after 2 seconds\n\t\t'will-never-load': {\n\t\t\tpath: '/users/:uid/albums/:aid',\n\t\t\tlazyComponent: {\n\t\t\t\tcomponent: async ()=> new Promise((_, reject)=> setTimeout(reject, 2e3)),\n\t\t\t\tloading: RouteLoading,\n\t\t\t\tfallback: RouteLoadFailedFallback,\n\t\t\t},\n\t\t},\n\t\t'404': {\n\t\t\tpath: '/404',\n\t\t\t// This component mustn't be lazy loaded, as it makes no sense.\n\t\t\t// Still though it's possible.\n\t\t\tcomponent: ViewNotFound,\n\t\t},\n\t},\n\tfallback: {name: '404'},\n})\n```\n\n\n
\n\n--------------------------------------------------------------------------------\n
\n\n\n# 🧩 Router Examples\nYou can find full router examples in [danielsharkov/svelte-router-examples](https://github.com/DanielSharkov/svelte-router-examples)\n
\n\n\n\n# ✨ Thanks for contribution goes to:\n[@romshark](https://github.com/romshark)\n[@madebyfabian](https://github.com/madebyfabian)\n
\n\n\n\n# ⚖️ License\nSvelte Router is a open source software [licensed as MIT](LICENSE).\n
\n\n\n\n# ⚖️ Additional notices\nYou may feel free to use the [Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo.svg), [Animated Logo](https://github.com/DanielSharkov/svelte-router/blob/master/logo-animated.svg) and [Banner](https://github.com/DanielSharkov/svelte-router/blob/master/readme-banner.svg) for non-commercial usage only, but first please ask me kindly. Contact me by email on `scharktv[at]gmail.com`.\n","readmeFilename":"README.md"}