sv-router 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Colin Lienard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# sv-router
+
+https://www.npmjs.com/package/sv-router

package/dist/RecursiveComponentTree.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
+	import { paramsStore } from './router.svelte.ts';
+
+	let { tree }: { tree: Component[] } = $props();
+
+	const FirstComponent = $derived(tree[0]);
+	const restTree = $derived(tree.slice(1));
+</script>
+
+{#key restTree.length > 0 || Object.values(paramsStore)}
+	<FirstComponent>
+		{#if restTree.length > 0}
+			<RecursiveComponentTree tree={restTree}></RecursiveComponentTree>
+		{/if}
+	</FirstComponent>
+{/key}

package/dist/RecursiveComponentTree.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+import RecursiveComponentTree from './RecursiveComponentTree.svelte';
+type $$ComponentProps = {
+    tree: Component[];
+};
+declare const RecursiveComponentTree: Component<$$ComponentProps, {}, "">;
+type RecursiveComponentTree = ReturnType<typeof RecursiveComponentTree>;
+export default RecursiveComponentTree;

package/dist/Router.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { on } from 'svelte/events';
+	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
+	import { componentTree, onGlobalClick, onNavigate } from './router.svelte.ts';
+
+	onNavigate();
+
+	$effect(() => {
+		const off1 = on(globalThis, 'popstate', onNavigate);
+		const off2 = on(globalThis, 'click', onGlobalClick);
+
+		return () => {
+			off1();
+			off2();
+		};
+	});
+</script>
+
+<RecursiveComponentTree tree={componentTree}></RecursiveComponentTree>

package/dist/helpers/construct-path.d.ts

@@ -0,0 +1,3 @@
+import type { PathParams } from '../types/types.ts';
+export type ConstructPathArgs<T extends string> = PathParams<T> extends never ? [T] : [T, PathParams<T>];
+export declare function constructPath<T extends string>(...args: ConstructPathArgs<T>): string;

package/dist/helpers/construct-path.js

@@ -0,0 +1,10 @@
+export function constructPath(...args) {
+    const [path, params] = args;
+    if (!params)
+        return path;
+    let result = path;
+    for (const key in params) {
+        result = result.replace(`:${key}`, params[key]);
+    }
+    return result;
+}

package/dist/helpers/match-route.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutComponent, RouteComponent, Routes } from '../types/types.ts';
+export declare function matchRoute(pathname: string, routes: Routes): {
+    match: RouteComponent | undefined;
+    layouts: LayoutComponent[];
+    params: Record<string, string>;
+};
+export declare function sortRoutes(routes: string[]): string[];

package/dist/helpers/match-route.js

@@ -0,0 +1,65 @@
+export function matchRoute(pathname, routes) {
+    // Remove trailing slash
+    if (pathname.length > 1 && pathname.endsWith('/')) {
+        pathname = pathname.slice(0, -1);
+    }
+    const pathParts = pathname.split('/');
+    const allRouteParts = sortRoutes(Object.keys(routes)).map((route) => route.split('/'));
+    let match;
+    const layouts = [];
+    let params = {};
+    outer: for (const routeParts of allRouteParts) {
+        for (const [index, routePart] of sortRoutes(routeParts).entries()) {
+            const pathPart = pathParts[index];
+            if (routePart.startsWith(':')) {
+                params[routePart.slice(1)] = pathPart;
+            }
+            else if (routePart === '*') {
+                match = routes[routeParts.join('/')];
+                break outer;
+            }
+            else if (routePart !== pathPart) {
+                break;
+            }
+            const routeMatch = routes[routeParts.join('/')];
+            if (typeof routeMatch !== 'function' &&
+                routeMatch?.layout &&
+                !layouts.includes(routeMatch.layout)) {
+                layouts.push(routeMatch.layout);
+            }
+            if (index === routeParts.length - 1) {
+                if (typeof routeMatch === 'function') {
+                    if (routeParts.length === pathParts.length) {
+                        match = routeMatch;
+                    }
+                    else {
+                        continue;
+                    }
+                }
+                else if (routeMatch) {
+                    const nestedPathname = '/' + pathParts.slice(index + 1).join('/');
+                    const result = matchRoute(nestedPathname, routeMatch);
+                    if (result) {
+                        match = result.match;
+                        params = { ...params, ...result.params };
+                        layouts.push(...result.layouts);
+                    }
+                }
+                break outer;
+            }
+        }
+    }
+    return { match, layouts, params };
+}
+export function sortRoutes(routes) {
+    return routes.toSorted((a, b) => getRoutePriority(a) - getRoutePriority(b));
+}
+function getRoutePriority(route) {
+    if (route === '' || route === '/')
+        return 1;
+    if (route === '*')
+        return 4;
+    if (route.includes(':'))
+        return 3;
+    return 2;
+}

package/dist/helpers/match-route.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/match-route.test.js

@@ -0,0 +1,133 @@
+import { matchRoute, sortRoutes } from "./match-route.js";
+const Home = (() => 'Home');
+const Posts = (() => 'Posts');
+const StaticPost = (() => 'StaticPost');
+const DynamicPost = (() => 'DynamicPost');
+const DynamicPostComment = (() => 'DynamicPostComment');
+const UserNotFound = (() => 'UserNotFound');
+const PageNotFound = (() => 'PageNotFound');
+const Layout1 = (() => 'Layout1');
+const Layout2 = (() => 'Layout2');
+describe('matchRoute', () => {
+    describe.each([
+        {
+            mode: 'flat',
+            routes: {
+                '/': Home,
+                '/posts': Posts,
+                '/posts/static': StaticPost,
+                '/posts/:id': DynamicPost,
+                '/posts/:id/:commentId': DynamicPostComment,
+                '/users/*': UserNotFound,
+                '*': PageNotFound,
+            },
+        },
+        {
+            mode: 'flat unordered',
+            routes: {
+                '/posts/:id/:commentId': DynamicPostComment,
+                '/posts': Posts,
+                '/users/*': UserNotFound,
+                '/posts/static': StaticPost,
+                '*': PageNotFound,
+                '/posts/:id': DynamicPost,
+                '/': Home,
+            },
+        },
+        {
+            mode: 'tree',
+            routes: {
+                '/': Home,
+                '/posts': {
+                    '/': Posts,
+                    '/static': StaticPost,
+                    '/:id': {
+                        '/': DynamicPost,
+                        '/:commentId': DynamicPostComment,
+                        layout: Layout2,
+                    },
+                    layout: Layout1,
+                },
+                '/users/*': UserNotFound,
+                '*': PageNotFound,
+            },
+        },
+        {
+            mode: 'tree unordered',
+            routes: {
+                '*': PageNotFound,
+                '/posts': {
+                    '/:id': {
+                        '/:commentId': DynamicPostComment,
+                        '/': DynamicPost,
+                        layout: Layout2,
+                    },
+                    '/': Posts,
+                    '/static': StaticPost,
+                    layout: Layout1,
+                },
+                '/users/*': UserNotFound,
+                '/': Home,
+            },
+        },
+    ])('$mode paths', ({ mode, routes: r }) => {
+        const routes = r;
+        it('should match the root route', () => {
+            const { match } = matchRoute('/', routes);
+            expect(match).toEqual(Home);
+        });
+        it('should match a simple route', () => {
+            const { match } = matchRoute('/posts', routes);
+            expect(match).toEqual(Posts);
+        });
+        it('should match a simple route with a trailing slash', () => {
+            const { match } = matchRoute('/posts', routes);
+            expect(match).toEqual(Posts);
+        });
+        it('should match a nested route', () => {
+            const { match } = matchRoute('/posts/static', routes);
+            expect(match).toEqual(StaticPost);
+        });
+        it('should match a dynamic route and return a param', () => {
+            const { match, params } = matchRoute('/posts/bar', routes);
+            expect(match).toEqual(DynamicPost);
+            expect(params).toEqual({ id: 'bar' });
+        });
+        it('should match multiple dynamic nested routes and return params', () => {
+            const { match, params } = matchRoute('/posts/bar/baz', routes);
+            expect(match).toEqual(DynamicPostComment);
+            expect(params).toEqual({ id: 'bar', commentId: 'baz' });
+        });
+        if (mode === 'nested') {
+            it('should match routes with layout', () => {
+                const { layouts: layouts1 } = matchRoute('/', routes);
+                const { layouts: layouts2 } = matchRoute('/posts', routes);
+                const { layouts: layouts3 } = matchRoute('/posts/static', routes);
+                const { layouts: layouts4 } = matchRoute('/posts/bar/baz', routes);
+                expect(layouts1).toEqual([]);
+                expect(layouts2).toEqual([Layout1]);
+                expect(layouts3).toEqual([Layout1]);
+                expect(layouts4).toEqual([Layout1, Layout2]);
+            });
+        }
+        it('should match wildcard nested route', () => {
+            const { match } = matchRoute('/users/notfound', routes);
+            expect(match).toEqual(UserNotFound);
+        });
+        it('should match wildcard route', () => {
+            const { match } = matchRoute('/notfound', routes);
+            expect(match).toEqual(PageNotFound);
+        });
+        it('should not match any route', () => {
+            delete routes['*'];
+            const { match } = matchRoute('/notfound', routes);
+            expect(match).toBeUndefined();
+        });
+    });
+});
+describe('sortRoutes', () => {
+    it('should sort routes', () => {
+        const result = sortRoutes(['/:id', '*', '/foo', '', '/']);
+        expect(result).toEqual(['', '/', '/foo', '/:id', '*']);
+    });
+});

package/dist/helpers/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+import type { LazyRouteComponent, RouteComponent } from '../types/types.ts';
+export declare function resolveRouteComponents(input: RouteComponent<any>[]): Promise<Component[]>;
+export declare function resolveRouteComponent(input: RouteComponent): Promise<Component>;
+export declare function isLazyImport(input: unknown): input is LazyRouteComponent;

package/dist/helpers/utils.js

@@ -0,0 +1,18 @@
+export function resolveRouteComponents(input) {
+    return Promise.all(input.map((c) => resolveRouteComponent(c)));
+}
+export function resolveRouteComponent(input) {
+    return new Promise((resolve) => {
+        if (isLazyImport(input)) {
+            Promise.resolve(input()).then((module) => {
+                resolve(module.default);
+            });
+        }
+        else {
+            resolve(input);
+        }
+    });
+}
+export function isLazyImport(input) {
+    return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/g.test(String(input));
+}

package/dist/helpers/validate-routes.d.ts

@@ -0,0 +1,3 @@
+import type { Routes } from '../types/types.ts';
+export declare function validateRoutes(routes: Routes): void;
+export declare function getRoutePaths(routes: Routes): string[];

package/dist/helpers/validate-routes.js

@@ -0,0 +1,34 @@
+export function validateRoutes(routes) {
+    const paths = getRoutePaths(routes);
+    const wildcardPaths = paths.filter((path) => path.endsWith('*'));
+    for (const wildcardPath of wildcardPaths) {
+        const parentPath = wildcardPath.slice(0, -1);
+        const dynamicPath = paths.find((p) => p !== '/' &&
+            !p.endsWith('*') &&
+            p.startsWith(parentPath === '' ? '/:' : parentPath) &&
+            p.match(/:[^/]*$/g));
+        if (dynamicPath) {
+            console.warn(`Router warning: Wildcard route \`${wildcardPath}\` should not be at the same level as dynamic route \`${dynamicPath}\`.`);
+        }
+    }
+}
+export function getRoutePaths(routes) {
+    const paths = [];
+    for (const [key, value] of Object.entries(routes)) {
+        if (typeof value === 'object') {
+            paths.push(...getRoutePaths(value).map((path) => {
+                if (path === '*') {
+                    return key + '/*';
+                }
+                if (path === '/') {
+                    return key;
+                }
+                return key + path;
+            }));
+        }
+        else {
+            paths.push(key);
+        }
+    }
+    return paths;
+}

package/dist/helpers/validate-routes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/validate-routes.test.js

@@ -0,0 +1,67 @@
+import { getRoutePaths, validateRoutes } from "./validate-routes.js";
+const component = (() => ({}));
+const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(vi.fn());
+beforeEach(() => {
+    vi.clearAllMocks();
+});
+describe('validateRoutes', () => {
+    it('should validate routes', () => {
+        validateRoutes({
+            '/': component,
+            '/about': component,
+            '/posts': {
+                '/': component,
+                '/:id': component,
+            },
+            '*': component,
+        });
+        expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('should raise a warning if a wildcard route is at the same level as a dynamic route', () => {
+        validateRoutes({
+            '/': component,
+            '/:id': component,
+            '*': component,
+        });
+        expect(consoleSpy).toHaveBeenCalledWith('Router warning: Wildcard route `*` should not be at the same level as dynamic route `/:id`.');
+    });
+    it.each([
+        {
+            '/': component,
+            '/posts/*': component,
+            '/posts/:id': component,
+            '/:id': component,
+            '*': component,
+        },
+        {
+            '/': component,
+            '/posts': {
+                '*': component,
+                '/:id': component,
+            },
+            '/:id': component,
+            '*': component,
+        },
+    ])('should raise multiple warnings if wildcard routes are at the same level as dynamic routes', (routes) => {
+        validateRoutes(routes);
+        expect(consoleSpy).toHaveBeenCalledTimes(2);
+        expect(consoleSpy).toHaveBeenCalledWith('Router warning: Wildcard route `*` should not be at the same level as dynamic route `/:id`.');
+        expect(consoleSpy).toHaveBeenCalledWith('Router warning: Wildcard route `/posts/*` should not be at the same level as dynamic route `/posts/:id`.');
+    });
+});
+describe('getRoutePaths', () => {
+    it('should return all paths in an array', () => {
+        const result = getRoutePaths({
+            '/': component,
+            '/about': component,
+            '/posts': {
+                '/': component,
+                '/:id': component,
+                '*': component,
+            },
+            '/foo/bar': component,
+            '*': component,
+        });
+        expect(result).toEqual(['/', '/about', '/posts', '/posts/:id', '/posts/*', '/foo/bar', '*']);
+    });
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Router } from './Router.svelte';
+export { createRouter } from './router.svelte.ts';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as Router } from './Router.svelte';
+export { createRouter } from "./router.svelte.js";

package/dist/router.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+import { type ConstructPathArgs } from './helpers/construct-path.ts';
+import type { AllParams, Path, Routes } from './types/types.ts';
+export declare let routes: Routes;
+export declare const componentTree: Component<{}, {}, string>[];
+export declare const paramsStore: Record<string, string>;
+export declare function createRouter<T extends Routes>(r: T): {
+    path<U extends Path<T>>(...args: ConstructPathArgs<U>): string;
+    goto<U extends Path<T>>(...args: ConstructPathArgs<U>): void;
+    params(): AllParams<T>;
+};
+export declare function onNavigate(): void;
+export declare function onGlobalClick(event: Event): void;

package/dist/router.svelte.js

@@ -0,0 +1,50 @@
+import { BROWSER, DEV } from 'esm-env';
+import { constructPath } from "./helpers/construct-path.js";
+import { matchRoute } from "./helpers/match-route.js";
+import { resolveRouteComponents } from "./helpers/utils.js";
+export let routes;
+export const componentTree = $state([]);
+export const paramsStore = $state({});
+export function createRouter(r) {
+    routes = r;
+    if (DEV && BROWSER) {
+        import('./helpers/validate-routes.ts').then(({ validateRoutes }) => {
+            validateRoutes(routes);
+        });
+    }
+    return {
+        path(...args) {
+            return constructPath(...args);
+        },
+        goto(...args) {
+            const path = constructPath(...args);
+            globalThis.history.pushState({}, '', path);
+            onNavigate();
+        },
+        params() {
+            const readonly = $derived(paramsStore);
+            return readonly;
+        },
+    };
+}
+export function onNavigate() {
+    const { match, layouts, params } = matchRoute(globalThis.location.pathname, routes);
+    resolveRouteComponents(match ? [...layouts, match] : layouts).then((components) => {
+        Object.assign(componentTree, components);
+    });
+    Object.assign(paramsStore, params);
+}
+export function onGlobalClick(event) {
+    const anchor = event.target.closest('a');
+    if (!anchor)
+        return;
+    if (anchor.hasAttribute('target') || anchor.hasAttribute('download'))
+        return;
+    const url = new URL(anchor.href);
+    const currentOrigin = globalThis.location.origin;
+    if (url.origin !== currentOrigin)
+        return;
+    event.preventDefault();
+    globalThis.history.pushState({}, '', anchor.href);
+    onNavigate();
+}

package/dist/types/test-types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/test-types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,26 @@
+import type { Component, Snippet } from 'svelte';
+type BaseProps = Record<string, any>;
+export type LazyRouteComponent<Props extends BaseProps = BaseProps> = () => Promise<{
+    default: Component<Props>;
+}>;
+export type RouteComponent<Props extends BaseProps = BaseProps> = Component<Props> | LazyRouteComponent<Props>;
+export type LayoutComponent = RouteComponent<{
+    children: Snippet;
+}>;
+export type Routes = {
+    [_: `/${string}`]: RouteComponent | Routes;
+    '*'?: RouteComponent;
+    layout?: LayoutComponent;
+};
+export type Path<T extends Routes> = RemoveLastSlash<RecursiveKeys<StripNonRoutes<T>>>;
+export type PathParams<T extends string> = ExtractParams<T> extends never ? never : Record<ExtractParams<T>, string>;
+export type AllParams<T extends Routes> = Partial<Record<ExtractParams<RecursiveKeys<T>>, string>>;
+type StripNonRoutes<T extends Routes> = {
+    [K in keyof T as K extends '*' ? never : K extends 'layout' ? never : K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
+};
+type RecursiveKeys<T extends Routes, Prefix extends string = ''> = {
+    [K in keyof T]: K extends string ? T[K] extends Routes ? RecursiveKeys<T[K], `${Prefix}${K}`> : `${Prefix}${K}` : never;
+}[keyof T];
+type RemoveLastSlash<T extends string> = T extends '/' ? T : T extends `${infer R}/` ? R : T;
+type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}` ? Param | ExtractParams<`/${Rest}`> : T extends `${string}:${infer Param}` ? Param : never;
+export {};

package/dist/types/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,67 @@
+{
+	"name": "sv-router",
+	"version": "0.0.1",
+	"description": "Modern Svelte routing",
+	"keywords": [
+		"svelte",
+		"router",
+		"spa"
+	],
+	"homepage": "https://github.com/colinlienard/sv-router",
+	"bugs": {
+		"url": "https://github.com/colinlienard/sv-router/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/colinlienard/sv-router.git"
+	},
+	"license": "MIT",
+	"type": "module",
+	"exports": {
+		".": {
+			"sv-router/source": "./src/index.ts",
+			"import": "./dist/index.js",
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"ex:basic": "pnpm --filter basic-example",
+		"build": "svelte-package -i src && rm -rf .svelte-kit",
+		"test": "vitest",
+		"check": "tsc --noEmit && pnpm -r check",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier . --check",
+		"format:fix": "prettier . --write",
+		"sherif": "sherif -r root-package-private-field",
+		"sherif:fix": "sherif  -r root-package-private-field --fix"
+	},
+	"dependencies": {
+		"esm-env": "^1.1.4"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.15.0",
+		"@sveltejs/package": "^2.3.7",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-svelte": "^2.46.0",
+		"eslint-plugin-unicorn": "^56.0.1",
+		"globals": "^15.12.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.3.2",
+		"sherif": "^1.0.1",
+		"type-testing": "^0.2.0",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.14.0",
+		"vite": "^5.4.10",
+		"vitest": "^2.1.5"
+	},
+	"peerDependencies": {
+		"svelte": "^5"
+	},
+	"packageManager": "pnpm@9.14.2"
+}