sv-router 0.0.2 → 0.0.4

package/src/index.d.ts

@@ -0,0 +1,77 @@
+import type { Component, Snippet } from 'svelte';
+
+/**
+ * Setup a new router instance with the given routes.
+ *
+ * ```js
+ * export const { path, goto, params } = createRouter({
+ *   '/': Home,
+ *   '/about': About,
+ *   ...
+ * });
+ * ```
+ */
+export function createRouter<T extends Routes>(r: T): RouterMethods<T>;
+export const Router: Component;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type BaseProps = {};
+
+export type LazyRouteComponent<Props extends BaseProps = BaseProps> = () => Promise<{
+	default: Component<Props>;
+}>;
+
+export type RouteComponent<Props extends BaseProps = any> =
+	| Component<Props>
+	| LazyRouteComponent<Props>;
+export type LayoutComponent = RouteComponent<{ children: Snippet }>;
+
+export type Routes = {
+	[_: `/${string}`]: RouteComponent | Routes;
+	'*'?: RouteComponent;
+	layout?: LayoutComponent;
+};
+
+export type RouterMethods<T extends Routes> = {
+	path<U extends Path<T>>(...args: ConstructPathArgs<U>): string;
+	goto<U extends Path<T>>(...args: ConstructPathArgs<U>): void;
+	params(): AllParams<T>;
+};
+
+export type Path<T extends Routes> = RemoveParenthesis<
+	RemoveLastSlash<RecursiveKeys<StripNonRoutes<T>>>
+>;
+
+export type ConstructPathArgs<T extends string> =
+	PathParams<T> extends never ? [T] : [T, PathParams<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 RemoveParenthesis<T extends string> = T extends `${infer A}(${infer B})${infer C}`
+	? RemoveParenthesis<`${A}${B}${C}`>
+	: T;
+
+type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}`
+	? Param | ExtractParams<`/${Rest}`>
+	: T extends `${string}:${infer Param}`
+		? Param
+		: never;

package/src/index.js

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

package/src/vite-plugin/index.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite';
+
+export type RouterOptions = {
+	/**
+	 * The path to the routes folder.
+	 *
+	 * @default 'src/routes'
+	 */
+	path?: string;
+};
+
+export const router: (options?: RouterOptions) => Plugin;

package/src/vite-plugin/index.js

@@ -0,0 +1 @@
+export { router } from './plugin.js';

package/src/vite-plugin/plugin.js

@@ -0,0 +1,42 @@
+import path from 'node:path';
+import { genConfig } from '../gen/config.js';
+import { writeRouterCode } from '../gen/write-router-code.js';
+
+/**
+ * @param {import('./index.d.ts').RouterOptions | undefined} options
+ * @returns {import('vite').Plugin}
+ */
+export function router(options) {
+	if (options?.path) {
+		genConfig.routesPath = options.path;
+	}
+
+	return {
+		name: 'sv-router',
+		config(config) {
+			if (!config.resolve) {
+				config.resolve = {};
+			}
+			if (!config.resolve.alias) {
+				config.resolve.alias = {};
+			}
+
+			const replacement = path.resolve(process.cwd(), genConfig.routerPath);
+
+			if (Array.isArray(config.resolve.alias)) {
+				config.resolve.alias.push({ find: genConfig.genCodeAlias, replacement });
+			} else {
+				/** @type {Record<string, string>} */ (config.resolve.alias)[genConfig.genCodeAlias] =
+					replacement;
+			}
+		},
+		buildStart() {
+			writeRouterCode();
+		},
+		watchChange(file) {
+			if (file.includes(genConfig.routesPath)) {
+				writeRouterCode();
+			}
+		},
+	};
+}

package/dist/RecursiveComponentTree.svelte.d.ts

@@ -1,8 +0,0 @@
-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/cli/index.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-export {};

package/dist/cli/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-import { writeRouterCode } from "../gen/write-router-code.js";
-writeRouterCode();

package/dist/common.d.ts

@@ -1,5 +0,0 @@
-export declare const ROUTES_PATH = "src/routes";
-export declare const GEN_CODE_DIR_PATH = ".router";
-export declare const ROUTER_PATH: string;
-export declare const TSCONFIG_PATH: string;
-export declare const GEN_CODE_ALIAS = "sv-router/generated";

package/dist/common.js

@@ -1,6 +0,0 @@
-import path from 'node:path';
-export const ROUTES_PATH = 'src/routes';
-export const GEN_CODE_DIR_PATH = '.router';
-export const ROUTER_PATH = path.join(GEN_CODE_DIR_PATH, '/router.ts');
-export const TSCONFIG_PATH = path.join(GEN_CODE_DIR_PATH, '/tsconfig.json');
-export const GEN_CODE_ALIAS = 'sv-router/generated';

package/dist/gen/generate-router-code.d.ts

@@ -1,12 +0,0 @@
-type FileTree = (string | {
-    name: string;
-    tree: FileTree;
-})[];
-type GeneratedRoutes = {
-    [key: string]: string | GeneratedRoutes;
-};
-export declare function generateRouterCode(routesPath: string): string;
-export declare function buildFileTree(routesPath: string): FileTree;
-export declare function createRouteMap(fileTree: FileTree, prefix?: string): GeneratedRoutes;
-export declare function createRouterCode(routes: GeneratedRoutes, routesPath: string): string;
-export {};

package/dist/gen/generate-router-code.js

@@ -1,67 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-const PARAM_FILENAME_REGEX = /\[(.*)\].svelte/g;
-export function generateRouterCode(routesPath) {
-    const fileTree = buildFileTree(path.join(process.cwd(), routesPath));
-    const routeMap = createRouteMap(fileTree);
-    return createRouterCode(routeMap, path.join('..', routesPath));
-}
-export function buildFileTree(routesPath) {
-    const entries = fs.readdirSync(routesPath);
-    const result = [];
-    for (const entry of entries) {
-        const stat = fs.lstatSync(path.join(routesPath, entry));
-        if (stat.isDirectory()) {
-            result.push({ name: entry, tree: buildFileTree(path.join(routesPath, entry)) });
-        }
-        else if (entry.endsWith('.svelte')) {
-            result.push(entry);
-        }
-    }
-    return result;
-}
-export function createRouteMap(fileTree, prefix = '') {
-    const result = {};
-    for (const entry of fileTree) {
-        if (typeof entry === 'string') {
-            switch (entry) {
-                case 'index.svelte': {
-                    result['/'] = prefix + entry;
-                    break;
-                }
-                case '*.svelte': {
-                    result['*'] = prefix + entry;
-                    break;
-                }
-                case '_layout.svelte': {
-                    result['layout'] = prefix + entry;
-                    break;
-                }
-                default: {
-                    if (PARAM_FILENAME_REGEX.test(entry)) {
-                        result['/' + entry.replaceAll(PARAM_FILENAME_REGEX, ':$1')] = prefix + entry;
-                        break;
-                    }
-                    result['/' + entry.replace('.svelte', '')] = prefix + entry;
-                    break;
-                }
-            }
-        }
-        else {
-            result['/' + entry.name] = createRouteMap(entry.tree, prefix + entry.name + '/');
-        }
-    }
-    return result;
-}
-export function createRouterCode(routes, routesPath) {
-    if (!routesPath.endsWith('/')) {
-        routesPath += '/';
-    }
-    const jsonRoutes = JSON.stringify(routes, undefined, 2);
-    const withImports = jsonRoutes.replaceAll(/"(.*)": "(.*)",?/g, `"$1": () => import("${routesPath}$2"),`);
-    return [
-        'import { createRouter } from "sv-router";',
-        '\n\n',
-        `export const { path, goto, params } = createRouter(${withImports});`,
-    ].join('');
-}

package/dist/gen/generate-router-code.test.d.ts

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

package/dist/gen/generate-router-code.test.js

@@ -1,103 +0,0 @@
-import { buildFileTree, createRouteMap, createRouterCode, generateRouterCode, } from "./generate-router-code.js";
-vi.mock('node:fs', () => ({
-    default: {
-        readdirSync: (dir) => {
-            if (dir.toString().endsWith('posts')) {
-                return [
-                    '[id].svelte',
-                    '_layout.svelte',
-                    'index.svelte',
-                    'static.svelte',
-                    'text.txt',
-                    'noextension',
-                ];
-            }
-            return ['*.svelte', 'about.svelte', 'index.svelte', 'posts'];
-        },
-        lstatSync: (dir) => ({
-            isDirectory: () => dir.toString().endsWith('posts'),
-        }),
-    },
-}));
-describe('generateRouterCode', () => {
-    it('should generate the router code', () => {
-        const result = generateRouterCode('./a/fake/path');
-        expect(result).toBe(`import { createRouter } from "sv-router";
-
-export const { path, goto, params } = createRouter({
-  "*": () => import("../a/fake/path/*.svelte"),
-  "/about": () => import("../a/fake/path/about.svelte"),
-  "/": () => import("../a/fake/path/index.svelte"),
-  "/posts": {
-    "/:id": () => import("../a/fake/path/posts/[id].svelte"),
-    "layout": () => import("../a/fake/path/posts/_layout.svelte"),
-    "/": () => import("../a/fake/path/posts/index.svelte"),
-    "/static": () => import("../a/fake/path/posts/static.svelte"),
-  }
-});`);
-    });
-});
-describe('buildFileTree', () => {
-    it('should get the file tree', () => {
-        const result = buildFileTree('a/fake/path');
-        expect(result).toEqual([
-            '*.svelte',
-            'about.svelte',
-            'index.svelte',
-            {
-                name: 'posts',
-                tree: ['[id].svelte', '_layout.svelte', 'index.svelte', 'static.svelte'],
-            },
-        ]);
-    });
-});
-describe('createRouteMap', () => {
-    it('should generate routes', () => {
-        const result = createRouteMap([
-            'index.svelte',
-            'about.svelte',
-            {
-                name: 'posts',
-                tree: ['index.svelte', 'static.svelte', '[id].svelte', '_layout.svelte'],
-            },
-            '*.svelte',
-        ]);
-        expect(result).toEqual({
-            '/': 'index.svelte',
-            '/about': 'about.svelte',
-            '/posts': {
-                '/': 'posts/index.svelte',
-                '/static': 'posts/static.svelte',
-                '/:id': 'posts/[id].svelte',
-                layout: 'posts/_layout.svelte',
-            },
-            '*': '*.svelte',
-        });
-    });
-});
-describe('createRouterCode', () => {
-    it('should generate the router', () => {
-        const result = createRouterCode({
-            '/': 'index.svelte',
-            '/about': 'about.svelte',
-            '/posts': {
-                '/': 'posts/index.svelte',
-                '/static': 'posts/static.svelte',
-                '/:id': 'posts/:id.svelte',
-            },
-            '*': '*.svelte',
-        }, './routes');
-        expect(result).toBe(`import { createRouter } from "sv-router";
-
-export const { path, goto, params } = createRouter({
-  "/": () => import("./routes/index.svelte"),
-  "/about": () => import("./routes/about.svelte"),
-  "/posts": {
-    "/": () => import("./routes/posts/index.svelte"),
-    "/static": () => import("./routes/posts/static.svelte"),
-    "/:id": () => import("./routes/posts/:id.svelte"),
-  },
-  "*": () => import("./routes/*.svelte"),
-});`);
-    });
-});

package/dist/gen/write-router-code.d.ts

@@ -1 +0,0 @@
-export declare function writeRouterCode(): void;

package/dist/gen/write-router-code.js

@@ -1,36 +0,0 @@
-/* eslint-disable no-console */
-import fs from 'node:fs';
-import path from 'node:path';
-import { GEN_CODE_ALIAS, GEN_CODE_DIR_PATH, ROUTER_PATH, ROUTES_PATH, TSCONFIG_PATH, } from "../common.js";
-import { generateRouterCode } from "./generate-router-code.js";
-export function writeRouterCode() {
-    try {
-        if (!fs.existsSync(GEN_CODE_DIR_PATH)) {
-            fs.mkdirSync(GEN_CODE_DIR_PATH);
-        }
-        // Write `.router/router.ts` file
-        const routerCode = generateRouterCode(ROUTES_PATH);
-        writeFileIfDifferent(ROUTER_PATH, routerCode);
-        // Write `.router/tsconfig.json` file
-        const tsConfig = {
-            compilerOptions: {
-                module: 'Preserve',
-                moduleResolution: 'Bundler',
-                paths: {
-                    [GEN_CODE_ALIAS]: [path.join('..', ROUTER_PATH)],
-                },
-            },
-            include: ['./router.ts'],
-        };
-        writeFileIfDifferent(TSCONFIG_PATH, JSON.stringify(tsConfig, undefined, 2));
-        console.log('✅️ Routes generated');
-    }
-    catch (error) {
-        console.error('Error during routes generation:', error);
-    }
-}
-function writeFileIfDifferent(filePath, content) {
-    if (!fs.existsSync(filePath) || fs.readFileSync(filePath, 'utf8') !== content) {
-        fs.writeFileSync(filePath, content);
-    }
-}

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

@@ -1,7 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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;
-            }
-            if (index !== routeParts.length - 1) {
-                continue;
-            }
-            const routeMatch = routes[routeParts.join('/')];
-            if (typeof routeMatch !== 'function' &&
-                routeMatch?.layout &&
-                !layouts.includes(routeMatch.layout)) {
-                layouts.push(routeMatch.layout);
-            }
-            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

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

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

@@ -1,146 +0,0 @@
-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,
-                    layout: Layout1,
-                },
-                '*': PageNotFound,
-            },
-        },
-        {
-            mode: 'tree unordered',
-            routes: {
-                '*': PageNotFound,
-                '/posts': {
-                    '/:id': {
-                        '/:commentId': DynamicPostComment,
-                        '/': DynamicPost,
-                        layout: Layout2,
-                    },
-                    '/': Posts,
-                    '/static': StaticPost,
-                    layout: Layout1,
-                },
-                '/users': {
-                    '*': UserNotFound,
-                    layout: Layout1,
-                },
-                '/': Home,
-            },
-        },
-    ])('$mode paths', ({ mode, routes: r }) => {
-        const routes = r;
-        const treeMode = mode.startsWith('tree');
-        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 (treeMode) {
-            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 route', () => {
-            const { match, layouts } = matchRoute('/notfound', routes);
-            expect(match).toEqual(PageNotFound);
-            if (treeMode) {
-                expect(layouts).toEqual([]);
-            }
-        });
-        it('should match wildcard nested route', () => {
-            const { match, layouts } = matchRoute('/users/notfound', routes);
-            expect(match).toEqual(UserNotFound);
-            if (treeMode) {
-                expect(layouts).toEqual([Layout1]);
-            }
-        });
-        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

@@ -1,8 +0,0 @@
-import type { Component } from 'svelte';
-import type { PathParams } from '../types/types.ts';
-import type { LazyRouteComponent, RouteComponent } 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;
-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

@@ -1,28 +0,0 @@
-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;
-}
-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

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