{"id":15288383,"url":"https://github.com/novacbn/svelte-router","last_synced_at":"2026-05-09T14:42:58.171Z","repository":{"id":45756374,"uuid":"514250564","full_name":"novacbn/svelte-router","owner":"novacbn","description":"Simple declarative clientside Svelte Router modeled on Web APIs and SvelteKit.","archived":false,"fork":false,"pushed_at":"2022-07-15T22:01:21.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-11T16:41:42.802Z","etag":null,"topics":["javascript","router","routing","svelte","sveltejs","typescript","ui-router"],"latest_commit_sha":null,"homepage":"","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/novacbn.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}},"created_at":"2022-07-15T11:49:20.000Z","updated_at":"2022-07-15T13:26:23.000Z","dependencies_parsed_at":"2022-08-05T08:00:20.283Z","dependency_job_id":null,"html_url":"https://github.com/novacbn/svelte-router","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/novacbn","download_url":"https://codeload.github.com/novacbn/svelte-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244945570,"owners_count":20536294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","router","routing","svelte","sveltejs","typescript","ui-router"],"created_at":"2024-09-30T15:48:38.268Z","updated_at":"2026-05-09T14:42:53.153Z","avatar_url":"https://github.com/novacbn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-router\n\n\u003e Simple declarative clientside Svelte Router modeled on Web APIs and SvelteKit.\n\n`svelte-router` is a simple router that uses declarative XML markup to build clientside routing using the Browser's hash fragment as the source path name. With the URL matching powered by the standard [`URLPattern`](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) Web API and asynchronous load functions modeled on SvelteKit's pages.\n\n## Getting Started\n\n1. Install the package via NPM:\n\n```sh\nnpm install @novacbn/svelte-router\n```\n\n2. Import the `Router` namespace of Components and your route into your main Svelte file and declare them:\n\n**Main.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router} from \"@novacbn/svelte-router\";\n\n    // NOTE: You need to import your routes as a module rather than by their default exports\n    import * as MyRoute from \"./MyRoute.svelte\";\n\u003c/script\u003e\n\n\u003cRouter.Provider\u003e\n    \u003cRouter.Route definition={MyRoute} /\u003e\n\u003c/Router.Provider\u003e\n```\n\n3. Define your route's `load` functionality and URL `pattern`:\n\n**MyRoute.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript context=\"module\"\u003e\n    import {define_load} from \"@novacbn/svelte-router\";\n\n    // NOTE: Check out the link below for pattern syntax\n    // https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API\n    export const pattern = \"/:file\";\n\n    // NOTE: Usage of `define_load` is /not required/, but helps provide typing awareness to your IDE\n    export const load = define_load(async ({pattern}) =\u003e {\n        const {file} = pattern.pathname.groups;\n\n        const response = await fetch(`${file}.json`);\n        const data = await response.json();\n\n        // NOTE: Any members you add to the `props` object gets passed to the Component's exports\n        return {\n            props: {\n                data,\n            },\n        };\n    });\n\u003c/script\u003e\n\n\u003cscript\u003e\n    export let data;\n\u003c/script\u003e\n\nHello, {data.message}!\n```\n\n4. Enjoy!\n\n## API\n\n### `Router.Fallback`\n\nWhenever a hash fragment URL is navigated to and there's no available registered routes, the `default` slot content will be rendered.\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router} from \"@novacbn/svelte-router\";\n\n    import * as MyRoute from \"./MyRoute.svelte\";\n\u003c/script\u003e\n\n\u003cRouter.Provider\u003e\n    \u003cRouter.Route definition={MyRoute} /\u003e\n\n    \u003cRouter.Fallback\u003e\n        404: not found\n    \u003c/Router.Fallback\u003e\n\u003c/Router.Provider\u003e\n```\n\n### `Router.Navigating`\n\nWhenever a `load` function is being await'd on, the `default` slot content will be rendered.\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router} from \"@novacbn/svelte-router\";\n\n    import * as MyRoute from \"./MyRoute.svelte\";\n\u003c/script\u003e\n\n\u003cRouter.Provider\u003e\n    \u003cRouter.Route definition={MyRoute} /\u003e\n\n    \u003cRouter.Navigating\u003e\n        \u003cdiv class=\"overlay-spinner\" /\u003e\n    \u003c/Router.Navigating\u003e\n\u003c/Router.Provider\u003e\n```\n\n### `Router.Provider`\n\n```typescript\ninterface $$Props {\n    /**\n     * Represents an optional cache of values that can be utilized by a `load` function\n     */\n    services?: Record\u003cstring, any\u003e;\n\n    /**\n     * Represents an optional custom Svelte Store which spits out `URL` objects to source location data from\n     */\n    url?: IURLStore;\n}\n```\n\nConfigures the required Svelte Contexts for all other children `\u003cRouter.*\u003e` Components can function. Along with holding a services cache for passing into child `load` functions.\n\n**Main.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router} from \"@novacbn/svelte-router\";\n\n    import * as MyRoute from \"./MyRoute.svelte\";\n\n    const my_services = {\n        my_value: true\n    }\n\u003c/script\u003e\n\n\u003cRouter.Provider services={my_services}\u003e\n    ...\n\u003c/Router.Provider\u003e\n```\n\n**MyRoute.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript context=\"module\"\u003e\n    import {define_load} from \"@novacbn/svelte-router\";\n\n    export const load = define_load(({services}) =\u003e {\n        const value = services.my_value;\n    });\n\u003c/script\u003e\n```\n\n### `Router.Route`\n\nRenders the provided route definition whenever it's active.\n\n```typescript\nexport interface IRouteDefinition {\n    /**\n     * Represents the Svelte Component that renders whenever the route is active\n     */\n    default: typeof SvelteComponent;\n\n    /**\n     * Represents an optional callback used to fetch prerequisite data before rendering the route.\n     */\n    load?: ILoadCallback;\n\n    /**\n     * Represents pathname URL patterns to match against the hash fragment.\n     *\n     * See: https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API\n     */\n    pattern: string | string[];\n}\n\nexport interface $$Props {\n    /**\n     * Represents the definition of the route being added.\n     */\n    definition: IRouteDefinition;\n}\n```\n\n**Main.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router} from \"@novacbn/svelte-router\";\n\n    import * as MyRoute from \"./MyRoute.svelte\";\n\u003c/script\u003e\n\n\u003cRouter.Provider\u003e\n    \u003cRouter.Route definition={MyRoute} /\u003e\n\u003c/Router.Provider\u003e\n```\n\n### `ILoadCallback`\n\n```typescript\nexport interface ILoadInput {\n    /**\n     * Represents the matched route parameters defined in the exported `pattern`.\n     *\n     * See: https://developer.mozilla.org/en-US/docs/Web/API/URLPattern/exec\n     */\n    pattern: URLPatternResult;\n\n    /**\n     * Represents the values supplied in `\u003cRoute.Provider services={...}\u003e`, only available if supplied.\n     */\n    services?: Record\u003cstring, any\u003e;\n\n    /**\n     * Represents the matched URL components.\n     *\n     * See: https://developer.mozilla.org/en-US/docs/Web/API/URL\n     */\n    url: URL;\n}\n\nexport interface ILoadOutput {\n    /**\n     * Represents key values that will be set as Svelte Contexts whenever the route is mounted.\n     */\n    context?: Record\u003cstring, any\u003e;\n\n    /**\n     * Represents key values that will be passed into the mounted route as properties.\n     */\n    props?: Record\u003cstring, any\u003e;\n\n    /**\n     * Represents a hash fragment that will be redirected to, instead of normal navigation if supplied.\n     */\n    redirect?: string;\n}\n\nexport type ILoadCallback = (input: ILoadInput) =\u003e ILoadOutput | void | Promise\u003cILoadOutput | void\u003e;\n```\n\nRepresents a `load` function with its inputs and outputs.\n\n**MyRoute.svelte**\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript context=\"module\"\u003e\n    import {define_load} from \"@novacbn/svelte-router\";\n\n    export const load = define_load((input) =\u003e {\n        const {pattern, services, url} = input;\n\n        return {\n            context: {\n                ...\n            },\n\n            props: {\n                ...\n            },\n\n            redirect: \"...\",\n        };\n    });\n\u003c/script\u003e\n```\n\n### `hash`\n\nRepresents a Svelte Store that bases its `URL` object output on the Browser's current hash fragment.\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router, hash} from \"@novacbn/router\";\n\n    const store = hash();\n\u003c/script\u003e\n\n\u003cRouter.Provider url={store}\u003e\n    ...\n\u003c/Router.Provider\u003e\n```\n\n### `location`\n\nRepresents a Svelte Store that bases its `URL` object output on the Browser's current URL bar.\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n    import {Router, location} from \"@novacbn/router\";\n\n    const store = location();\n\u003c/script\u003e\n\n\u003cRouter.Provider url={store}\u003e\n    ...\n\u003c/Router.Provider\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fsvelte-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovacbn%2Fsvelte-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fsvelte-router/lists"}