{"id":26354473,"url":"https://github.com/ayndqy/svelte-micro","last_synced_at":"2025-04-06T15:11:51.426Z","repository":{"id":42504347,"uuid":"234731053","full_name":"ayndqy/svelte-micro","owner":"ayndqy","description":"Light \u0026 reactive client-side router for Svelte","archived":false,"fork":false,"pushed_at":"2025-03-26T06:09:44.000Z","size":510,"stargazers_count":95,"open_issues_count":2,"forks_count":3,"subscribers_count":7,"default_branch":"v2","last_synced_at":"2025-03-30T14:09:40.252Z","etag":null,"topics":["light","reactive","router","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-micro","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayndqy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-18T12:25:01.000Z","updated_at":"2025-02-18T22:42:40.000Z","dependencies_parsed_at":"2023-11-10T12:38:11.309Z","dependency_job_id":"62a2e7ff-941f-487d-a810-f3310b4ccfb8","html_url":"https://github.com/ayndqy/svelte-micro","commit_stats":{"total_commits":95,"total_committers":4,"mean_commits":23.75,"dds":"0.41052631578947374","last_synced_commit":"80bf2f8aa63b9dfed274c0450a0b14ffef38c254"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayndqy%2Fsvelte-micro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayndqy%2Fsvelte-micro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayndqy%2Fsvelte-micro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayndqy%2Fsvelte-micro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayndqy","download_url":"https://codeload.github.com/ayndqy/svelte-micro/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500468,"owners_count":20948880,"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":["light","reactive","router","svelte"],"created_at":"2025-03-16T12:17:41.332Z","updated_at":"2025-04-06T15:11:51.405Z","avatar_url":"https://github.com/ayndqy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Micro\n\nLight \u0026 reactive client-side router for Svelte\n\n[Announcement of svelte-micro v3](./Announcement.md)\n\n## Table of content\n\n- [Installation](#installation)\n- [Example](#example)\n- [API](#api)\n  - [Imports reference](#imports-reference)\n  - [`router` object](#router-object)\n  - [`options` store](#options-store)\n  - [`path` store](#path-store)\n  - [`query` store](#query-store)\n  - [`hash` store](#hash-store)\n  - [`Route` component](#route-component)\n  - [`Link` component](#link-component)\n  - [`linkHandle` action](#linkhandle-action)\n  - [`getPathSegments` function](#getpathsegments-function)\n- [Tips](#tips)\n  - [`path`, `query`, `hash` usage](#path-query-hash-usage)\n  - [Scroll behavior control](#scroll-behavior-control)\n  - [Redirect](#redirect)\n  - [Guarded route](#guarded-route)\n\n## Installation\n\n```\nnpm i svelte-micro\n```\n\n## Example\n\n```svelte\n\u003cscript\u003e\n  import { Route, Link, linkHandle } from \"svelte-micro\"\n\u003c/script\u003e\n\n\u003c!-- Root component path always have to be equal to '/' --\u003e\n\u003cRoute\u003e\n  \u003c!-- Always will be shown --\u003e\n  \u003cnav use:linkHandle\u003e\n    \u003ca href=\"/\"\u003eHome\u003c/a\u003e\n    \u003ca href=\"/portfolio\"\u003ePortfolio\u003c/a\u003e\n    \u003ca href=\"/about-us/story\"\u003eOur story\u003c/a\u003e\n    \u003ca href=\"https://github.com/ayndqy/svelte-micro\"\u003eGithub\u003c/a\u003e\n  \u003c/nav\u003e\n\n  \u003c!-- Will be shown only when $path is equal to '/' --\u003e\n  \u003cRoute path=\"/\"\u003e\n    \u003ch1\u003eHome page\u003c/h1\u003e\n    \u003cp\u003eMake yourself at home.\u003c/p\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/portfolio\"\u003e\n    \u003ch1\u003ePortfolio\u003c/h1\u003e\n\n    \u003c!-- Will be shown only when $path is equal to '/portfolio' --\u003e\n    \u003cRoute path=\"/\"\u003e\n      \u003ch2\u003ePortfolio main page\u003c/h2\u003e\n      \u003cLink href=\"/portfolio/sites\"\u003eSites\u003c/Link\u003e\n      \u003cLink href=\"/portfolio/apps\"\u003eApps\u003c/Link\u003e\n    \u003c/Route\u003e\n\n    \u003cRoute path=\"/sites\"\u003e\n      \u003ch2\u003eSites\u003c/h2\u003e\n      \u003cLink href=\"/portfolio\"\u003eBack to portfolio main page\u003c/Link\u003e\n    \u003c/Route\u003e\n\n    \u003cRoute path=\"/apps\"\u003e\n      \u003ch2\u003eApps\u003c/h2\u003e\n      \u003cLink href=\"/portfolio\"\u003eBack to portfolio main page\u003c/Link\u003e\n    \u003c/Route\u003e\n\n    \u003cRoute fallback\u003e\n      \u003ch2\u003eThe route is not found in /portfolio\u003c/h2\u003e\n      \u003cLink href=\"/portfolio\"\u003eBack to portfolio main page\u003c/Link\u003e\n    \u003c/Route\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/about-us/story\"\u003e\n    \u003ch1\u003eOur story\u003c/h1\u003e\n  \u003c/Route\u003e\n\n  \u003cRoute fallback\u003e\n    \u003ch1\u003eThe route is not found\u003c/h1\u003e\n    \u003cLink href=\"/\"\u003eBack to home\u003c/Link\u003e\n  \u003c/Route\u003e\n\u003c/Route\u003e\n```\n\nThis code shows the capabilities of the `svelte-micro` routing system.\\\nSpend a minute analyzing this example to understand the approach.\n\nFor advanced examples see the [Tips](#tips) section.\n\n## API\n\n### Imports reference\n\n| Entity                                                  | Related imports                                                           |\n| ------------------------------------------------------- | ------------------------------------------------------------------------- |\n| [`router` object](#router-object)                       | `import { router, type Router } from 'svelte-micro'`                      |\n| [`options` store](#options-store)                       | `import { options, type OptionsStore, type Options } from 'svelte-micro'` |\n| [`path` store](#path-store)                             | `import { path, type PathStore, type Path } from 'svelte-micro'`          |\n| [`query` store](#query-store)                           | `import { query, type QueryStore, type Query } from 'svelte-micro'`       |\n| [`hash` store](#hash-store)                             | `import { hash, type HashStore, type Hash } from 'svelte-micro'`          |\n| [`Route` component](#route-component)                   | `import { Route } from 'svelte-micro'`                                    |\n| [`Link` component](#link-component)                     | `import { Link } from 'svelte-micro'`                                     |\n| [`linkHandle` action](#linkhandle-action)               | `import { linkHandle, type LinkHandle } from 'svelte-micro'`              |\n| [`getPathSegments` function](#getpathsegments-function) | `import { getPathSegments, type GetPathSegments } from 'svelte-micro'`    |\n\n### `router` object\n\n#### Type definition\n\n```typescript\ntype Router = {\n  go: (delta?: number) =\u003e void\n  push: (url?: string | URL | null, state?: any) =\u003e void\n  replace: (url?: string | URL | null, state?: any) =\u003e void\n}\n```\n\n#### Description\n\nThe `router` object is an object whose methods allow to manipulate history.\n\n- `router.go`\\\n  Move on `delta` steps through the history.\n\n- `router.push`\\\n  Push new `url` and [`state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to the history.\n\n- `router.replace`\\\n  Replace current `url` and [`state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) in the history.\n\n### `options` store\n\n#### Type definition\n\n```typescript\ntype OptionsStore = {\n  subscribe: import('svelte/store').Readable\u003cOptions\u003e['subscribe']\n  set: (changedOptions: Partial\u003cOptions\u003e) =\u003e void\n}\n```\n\n```typescript\ntype Options = {\n  mode: 'window' | 'hash'\n  basePath: null | string\n}\n```\n\n#### Description\n\nThe `options` store provides `subscribe` and `set` methods to access and modify router options.\n\n- `$options.mode`\\\n  Default: `'window'`\\\n  Set the `mode` for the router.\n\n- `$options.basePath`\\\n  Default: `null`\\\n  Set the `basePath` for the router.\\\n  If a `basePath` value is not found at the beginning of `$path`, the router will continue to operate properly, ignoring the `basePath` option for this state of `$path`. Be aware that if `mode` is set to `'hash'`, the router will try to find the `basePath` value in the hash location fragment, since the hash location fragment is already separated from the path location fragment.\n\n### `path` store\n\n#### Type definition\n\n```typescript\ntype Path = string\n```\n\n```typescript\ntype PathStore = import('svelte/store').Readable\u003cPath\u003e\n```\n\n#### Description\n\nThe store which contains current path.\n\n### `query` store\n\n#### Type definition\n\n```typescript\ntype Query = string\n```\n\n```typescript\ntype QueryStore = import('svelte/store').Readable\u003cQuery\u003e\n```\n\n#### Description\n\nThe store which contains current query.\n\n### `hash` store\n\n#### Type definition\n\n```typescript\ntype Hash = string\n```\n\n```typescript\ntype HashStore = import('svelte/store').Readable\u003cHash\u003e\n```\n\n#### Description\n\nThe store which contains current hash.\n\n### `Route` component\n\n#### Type definition\n\n```svelte\n\u003c!--\n  props: { fallback: boolean; path: string; };\n  slots: { default: {}; };\n--\u003e\n\u003cRoute fallback={false} path=\"/\"\u003e \u003cslot /\u003e \u003c/Route\u003e\n```\n\n#### Description\n\nThe `Route` component defines a route. The props of `Route` are reactive. A nested `Route` component works in context of its parental `Route` component, so you don't need to define its full `path`.\n\n- `fallback`\\\n  Default: `{false}`\n  The property which defines if the route is fallback. A fallback route is active when there is no active routes on its depth.\n\n- `path`\\\n  Default: `'/'`\n  The property which defines route path. `path` must start from `'/'`.\n\nThe top-level (root) `Route` must have `path` equal to `'/'` and `fallback` equal to `false`.\\\nThese values are set by default, so you can leave them unchanged (see [Example](#example) section).\n\n### `Link` component\n\n#### Type definition\n\n```svelte\n\u003c!--\n  props: { href: string; [x: string]: any; };\n  slots: { default: {}; };\n--\u003e\n\u003cLink href=\"/\" {...restProps}\u003e \u003cslot /\u003e \u003c/Link\u003e\n```\n\n#### Description\n\nThe `\u003cLink /\u003e` component is built on top of [`linkHandle`](#linkhandle-action) and should be used for the internal application navigation.\\\nIt automatically prevents the window from refreshing.\n\n- `href`\\\n  Default: `'/'`\n  The property which defines link href.\n\n- `{...restProps}`\\\n  Any other property is attached on the inner `a` element.\n\nIf the [`basePath` option](#options-store) isn't set to `null`, the `\u003cLink /\u003e` component will append the `basePath` value to the `href` attribute.\\\nIf the [`mode` option](#options-store) is set to `\"hash\"`, the `\u003cLink /\u003e` component will append a `#` to the beginning of the `href` attribute.\n\n### `linkHandle` action\n\n#### Type definition\n\n```typescript\ntype LinkHandle = import('svelte/action').Action\u003cHTMLElement\u003e\n```\n\n#### Description\n\nThe `linkHandle` action prevents window from refreshing when the click event occurs on a handled `a[href]` element.\\\n`linkHandle` can be applied on a parental element to handle nested `a[href]` elements.\n\n`linkHandle` ignores an `a[href]` element if:\n\n- `a[href]` has `data-handle-ignore` attribute\n- `a[href]` has `target` attribute which isn't equal to `'_self'`\n- `a[href]` has external href (`new URL(href).origin !== document.location.origin`)\n- `(event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) === true` during the click event\n\n### `getPathSegments` function\n\n#### Type definition\n\n```typescript\nexport type GetPathSegments = (path: string) =\u003e string[]\n```\n\n#### Description\n\nThe `getPathSegments` function divides `path` into segments.\n\nFor example: `getPathSegments('/about-us/story') =\u003e ['/about-us', '/story']`.\n\n## Tips\n\n### `path`, `query`, `hash` usage\n\n```svelte\n\u003cscript\u003e\n  import { path, query, hash } from 'svelte-micro'\n\n  // For example current location equals to '/somepath?text=Hello#modal'\n  // $path  === '/somepath'\n  // $query === '?text=Hello'\n  // $hash  === '#modal'\n\n  $: text = new URLSearchParams($query)?.get('text') ?? 'Fallback value'\n\u003c/script\u003e\n\n\u003c!-- Query usage example --\u003e\n{text}\n\n\u003c!-- Hash usage example --\u003e\n{#if $hash === '#modal'}\n  \u003cdiv class=\"modal\"\u003eHello from modal!\u003c/div\u003e\n{/if}\n```\n\n### Scroll behavior control\n\n```javascript\nimport { path } from 'svelte-micro'\n\n// Disable browser scroll behavior control\nif ('scrollRestoration' in history) {\n  history.scrollRestoration = 'manual'\n}\n\n// On path change reset scroll position\npath.subscribe(() =\u003e window.scrollTo(0, 0))\n```\n\nBy default `svelte-micro` doesn't control scroll behavior, but it's easy to do on your own.\n\n### Redirect\n\n```svelte\n\u003cscript\u003e\n  import { router, Route } from 'svelte-micro'\n\u003c/script\u003e\n\n\u003cRoute\u003e\n  \u003cRoute path=\"/redirect\"\u003e\n    {router.replace('/redirect-target')}\n  \u003c/Route\u003e\n\n  \u003cRoute path=\"/redirect-target\"\u003e\n    \u003ch1\u003eYou have been redirected\u003c/h1\u003e\n  \u003c/Route\u003e\n\u003c/Route\u003e\n```\n\n### Guarded route\n\n```svelte\n\u003cscript\u003e\n  import { Route } from 'svelte-micro'\n\n  let isUserAuthenticated = false\n  const toggleAuth = () =\u003e (isUserAuthenticated = !isUserAuthenticated)\n\u003c/script\u003e\n\n\u003cRoute\u003e\n  \u003cRoute path=\"/auth\"\u003e\n    \u003cbutton on:click={toggleAuth}\u003e{isUserAuthenticated ? \"Log out\" : \"Log in\"}\u003c/button\u003e\n  \u003c/Route\u003e\n\n  {#if isUserAuthenticated}\n    \u003cRoute path=\"/profile\"\u003e\n      \u003ch1\u003eWelcome!\u003c/h1\u003e\n      \u003cbutton on:click={toggleAuth}\u003eLog out\u003c/button\u003e\n    \u003c/Route\u003e\n  {/if}\n\u003c/Route\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayndqy%2Fsvelte-micro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayndqy%2Fsvelte-micro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayndqy%2Fsvelte-micro/lists"}