{"id":13604371,"url":"https://github.com/EmilTholin/svelte-routing","last_synced_at":"2025-04-12T02:30:27.518Z","repository":{"id":43383269,"uuid":"112380522","full_name":"EmilTholin/svelte-routing","owner":"EmilTholin","description":"A declarative Svelte routing library with SSR support","archived":false,"fork":false,"pushed_at":"2024-07-25T20:53:55.000Z","size":128,"stargazers_count":2044,"open_issues_count":41,"forks_count":184,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-09T02:15:32.028Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmilTholin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-28T19:38:55.000Z","updated_at":"2025-04-06T09:12:34.000Z","dependencies_parsed_at":"2023-01-29T19:10:13.272Z","dependency_job_id":"9b9a70bc-1769-49ba-aed3-cf273f4f957c","html_url":"https://github.com/EmilTholin/svelte-routing","commit_stats":{"total_commits":51,"total_committers":15,"mean_commits":3.4,"dds":0.3137254901960784,"last_synced_commit":"140a83a5b75d3534a68d12eb881b04cd0f933029"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilTholin%2Fsvelte-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilTholin%2Fsvelte-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilTholin%2Fsvelte-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmilTholin%2Fsvelte-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmilTholin","download_url":"https://codeload.github.com/EmilTholin/svelte-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506901,"owners_count":21115503,"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":[],"created_at":"2024-08-01T19:00:44.432Z","updated_at":"2025-04-12T02:30:27.483Z","avatar_url":"https://github.com/EmilTholin.png","language":"JavaScript","funding_links":[],"categories":["Roteamento","components and libraries","JavaScript","Routers","Uncategorized"],"sub_categories":["Comunidade Global","routers","Internationalization","Internationalisation","Uncategorized"],"readme":"[![npm][npm]][npm-url]\n\n# Svelte Routing\n\nA declarative Svelte routing library with SSR support.\n\n[[CHANGELOG][changelog-url]]\n\n## Install\n\n```bash\nnpm i -D svelte-routing\n```\n\n## Usage\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n  import { Router, Link, Route } from \"svelte-routing\";\n  import Home from \"./routes/Home.svelte\";\n  import About from \"./routes/About.svelte\";\n  import Blog from \"./routes/Blog.svelte\";\n\n  export let url = \"\";\n\u003c/script\u003e\n\n\u003cRouter {url}\u003e\n  \u003cnav\u003e\n    \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n    \u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e\n    \u003cLink to=\"/blog\"\u003eBlog\u003c/Link\u003e\n  \u003c/nav\u003e\n  \u003cdiv\u003e\n    \u003cRoute path=\"/blog/:id\" component={BlogPost} /\u003e\n    \u003cRoute path=\"/blog\" component={Blog} /\u003e\n    \u003cRoute path=\"/about\" component={About} /\u003e\n    \u003cRoute path=\"/\"\u003e\u003cHome /\u003e\u003c/Route\u003e\n  \u003c/div\u003e\n\u003c/Router\u003e\n```\n\n```javascript\n// main.js\nimport App from \"./App.svelte\";\n\nconst app = new App({\n    target: document.getElementById(\"app\"),\n});\n```\n\n## API\n\n#### `Router`\n\nThe `Router` component supplies the `Link` and `Route` descendant components\nwith routing information through context, so you need at least one `Router` at\nthe top of your application. It assigns a score to all its `Route` descendants\nand picks the best match to render.\n\n`Router` components can also be nested to allow for seamless merging of many\nsmaller apps.\n\n###### Properties\n\n|     Property     | Required | Default Value | Description                                                                                                                                                                                                                                                                                                 |\n| :--------------: | :------: | :-----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\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`. |\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 `export let url = \"\";` for your topmost component and only give it a value in SSR.           |\n| `viewtransition` |          |    `null`     | View Transition (Experimental)                                                                                                                                                                                                                                                                              |\n\n#### `Link`\n\nA component used to navigate around the application.\n\n###### Properties\n\n|     Property     | Required | Default Value | Description                                                                                                                                                                                                                           |\n| :--------------: | :------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n|       `to`       |   ✔ ️   |     `\"#\"`     | URL the component should link to.                                                                                                                                                                                                     |\n|    `replace`     |          |    `false`    | When `true`, clicking the `Link` will replace the current entry in the history stack instead of adding a new one.                                                                                                                     |\n|     `state`      |          |     `{}`      | An object that will be pushed to the history stack when the `Link` is clicked.                                                                                                                                                        |\n|    `getProps`    |          | `() =\u003e ({})`  | 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`. |\n| `preserveScroll` |          |    `false`    | When `true`, clicking the `Link` will not scroll the page to the top.                                                                                                                                                                 |\n\n#### `Route`\n\nA component that will render its `component` property or children when its\nancestor `Router` component decides it is the best match.\n\nAll properties other than `path` and `component` given to the `Route` will be\npassed to the rendered `component`.\n\nPotential path parameters will be passed to the rendered `component` as\nproperties. A wildcard `*` can be given a name with `*wildcardName` to pass the\nwildcard string as the `wildcardName` property instead of as the `*` property.\n\nPotential path parameters are passed back to the parent using props, so they can\nbe exposed to the slot template using `let:params`.\n\n```html\n\u003cRoute path=\"/blog/:id\" let:params\u003e\n    \u003cBlogPost id=\"{params.id}\" /\u003e\n\u003c/Route\u003e\n```\n\nThe active status of link can be exposed to the slot template using\n`let:active`.\n\n```html\n\u003cLink to=\"/browser\" let:active\u003e\n  \u003cMenuItem active={active}\u003eBrowser\u003c/MenuItem\u003e\n\u003c/Link\u003e\n```\n\n###### Properties\n\n|  Property   | Required | Default Value | Description                                                                                                                                                              |\n| :---------: | :------: | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\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. |\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.         |\n\n#### `navigate`\n\nA function that allows you to imperatively navigate around the application for\nthose use cases where a `Link` component is not suitable, e.g. after submitting\na form.\n\nThe first argument is a string denoting where to navigate to, and the second\nargument is an object with a `replace`, `state` and `preserveScroll` properties equivalent to those\nin the `Link` component.\n\n```html\n\u003cscript\u003e\n    import { navigate } from \"svelte-routing\";\n\n    function onSubmit() {\n        login().then(() =\u003e {\n            navigate(\"/success\", { replace: true });\n        });\n    }\n\u003c/script\u003e\n```\n\n#### `link`\n\nAn action used on anchor tags to navigate around the application. You can add an\nattribute `replace` to replace the current entry in the history stack instead of\nadding a new one and `preserveScroll` to not scroll the page to the top when clicked.\n\n```html\n\u003cscript\u003e\n    import { link } from \"svelte-routing\";\n\u003c/script\u003e\n\n\u003cRouter\u003e\n    \u003ca href=\"/\" use:link\u003eHome\u003c/a\u003e\n    \u003ca href=\"/replace\" use:link replace\u003eReplace this URL\u003c/a\u003e\n    \u003c!-- ... --\u003e\n\u003c/Router\u003e\n```\n\n#### `links`\n\nAn action used on a root element to make all relative anchor elements navigate\naround the application. You can add an attribute `replace` on any anchor to\nreplace the current entry in the history stack instead of adding a new one.\nYou can add an attribute `preserveScroll` on any anchor to not to scroll the page to the top when clicked. You\ncan add an attribute `noroute` for this action to skip over the anchor and allow\nit to use the native browser action.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n    import { links } from \"svelte-routing\";\n\u003c/script\u003e\n\n\u003cdiv use:links\u003e\n    \u003cRouter\u003e\n        \u003ca href=\"/\"\u003eHome\u003c/a\u003e\n        \u003ca href=\"/replace\" replace\u003eReplace this URL\u003c/a\u003e\n        \u003ca href=\"/native\" noroute\u003eUse the native action\u003c/a\u003e\n        \u003c!-- ... --\u003e\n    \u003c/Router\u003e\n\u003c/div\u003e\n```\n\n#### `viewtransition`\n\nViewtransition for navigation (Experimental).\n\n_`builtin transition`_\n\n```html\n\u003cscript\u003e\n    import { fade } from \"svelte/transition\";\n    // ...\n\u003c/script\u003e\n\n\u003cRouter viewtransition=\"{() =\u003e { fn: fade, duration: 500 }}\"\u003e\n    \u003cRoute path=\"/\" component=\"{Home}\" /\u003e\n    \u003cRoute path=\"/contact\" component=\"{Contact}\" /\u003e\n\u003c/Router\u003e\n```\n\n_`custom transition`_\n\n```html\n\u003cscript\u003e\n    import { cubicin } from \"svelte/easing\";\n    // ...\n\u003c/script\u003e\n\n\u003cRouter\n    viewtransition=\"{() =\u003e { duration: 500, easing: cubicin, css: (t) =\u003e `scale:${t};transform-origin:center center;` }}\"\n\u003e\n    \u003cRoute path=\"/\" component=\"{Home}\" /\u003e\n    \u003cRoute path=\"/contact\" component=\"{Contact}\" /\u003e\n\u003c/Router\u003e\n```\n\n# License\n\nThis project is licensed under the [**MIT**](LICENSE).\n\n# Contribution\n\nUnless you explicitly state otherwise, any contribution intentionally submitted\nfor this project by you, shall be licensed as **MIT**, without any additional\nterms or conditions. [**Code of Conduct**](CODE_OF_CONDUCT.md).\n\n[npm]: https://img.shields.io/npm/v/svelte-routing.svg\n[npm-url]: https://npmjs.com/package/svelte-routing\n[changelog-url]: https://github.com/EmilTholin/svelte-routing/blob/master/CHANGELOG.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEmilTholin%2Fsvelte-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEmilTholin%2Fsvelte-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEmilTholin%2Fsvelte-routing/lists"}