sv-router 0.0.1 → 0.0.2

package/dist/RecursiveComponentTree.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
-	import { paramsStore } from './router.svelte.ts';
+	import { paramsStore } from './router.svelte.js';
 
 	let { tree }: { tree: Component[] } = $props();
 

package/dist/Router.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { on } from 'svelte/events';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
-	import { componentTree, onGlobalClick, onNavigate } from './router.svelte.ts';
+	import { componentTree, onGlobalClick, onNavigate } from './router.svelte.js';
 
 	onNavigate();
 

package/dist/cli/index.d.ts

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

package/dist/cli/index.js

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

package/dist/common.d.ts

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+/* 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.js

@@ -21,32 +21,33 @@ export function matchRoute(pathname, routes) {
             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 (index === routeParts.length - 1) {
-                if (typeof routeMatch === 'function') {
-                    if (routeParts.length === pathParts.length) {
-                        match = routeMatch;
-                    }
-                    else {
-                        continue;
-                    }
+            if (typeof routeMatch === 'function') {
+                if (routeParts.length === pathParts.length) {
+                    match = routeMatch;
                 }
-                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);
-                    }
+                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;
             }
+            break outer;
         }
     }
     return { match, layouts, params };

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

@@ -48,7 +48,10 @@ describe('matchRoute', () => {
                     },
                     layout: Layout1,
                 },
-                '/users/*': UserNotFound,
+                '/users': {
+                    '*': UserNotFound,
+                    layout: Layout1,
+                },
                 '*': PageNotFound,
             },
         },
@@ -66,12 +69,16 @@ describe('matchRoute', () => {
                     '/static': StaticPost,
                     layout: Layout1,
                 },
-                '/users/*': UserNotFound,
+                '/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);
@@ -98,7 +105,7 @@ describe('matchRoute', () => {
             expect(match).toEqual(DynamicPostComment);
             expect(params).toEqual({ id: 'bar', commentId: 'baz' });
         });
-        if (mode === 'nested') {
+        if (treeMode) {
             it('should match routes with layout', () => {
                 const { layouts: layouts1 } = matchRoute('/', routes);
                 const { layouts: layouts2 } = matchRoute('/posts', routes);
@@ -110,13 +117,19 @@ describe('matchRoute', () => {
                 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);
+            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['*'];

package/dist/helpers/utils.d.ts

@@ -1,5 +1,8 @@
 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,3 +1,13 @@
+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)));
 }

package/dist/router.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import { type ConstructPathArgs } from './helpers/construct-path.ts';
+import { type ConstructPathArgs } from './helpers/utils.ts';
 import type { AllParams, Path, Routes } from './types/types.ts';
 export declare let routes: Routes;
 export declare const componentTree: Component<{}, {}, string>[];

package/dist/router.svelte.js

@@ -1,14 +1,13 @@
 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";
+import { constructPath, 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 }) => {
+        import('./helpers/validate-routes.js').then(({ validateRoutes }) => {
             validateRoutes(routes);
         });
     }

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

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

package/dist/vite-plugin/index.js

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

package/dist/vite-plugin/plugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function router(): Plugin;

package/dist/vite-plugin/plugin.js

@@ -0,0 +1,31 @@
+import path from 'node:path';
+import { GEN_CODE_ALIAS, ROUTER_PATH, ROUTES_PATH } from "../common.js";
+import { writeRouterCode } from "../gen/write-router-code.js";
+export function router() {
+    return {
+        name: 'sv-router',
+        config(config) {
+            if (!config.resolve) {
+                config.resolve = {};
+            }
+            if (!config.resolve.alias) {
+                config.resolve.alias = {};
+            }
+            const replacement = path.resolve(process.cwd(), ROUTER_PATH);
+            if (Array.isArray(config.resolve.alias)) {
+                config.resolve.alias.push({ find: GEN_CODE_ALIAS, replacement });
+            }
+            else {
+                config.resolve.alias[GEN_CODE_ALIAS] = replacement;
+            }
+        },
+        buildStart() {
+            writeRouterCode();
+        },
+        watchChange(file) {
+            if (file.includes(ROUTES_PATH)) {
+                writeRouterCode();
+            }
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sv-router",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "Modern Svelte routing",
 	"keywords": [
 		"svelte",
@@ -23,14 +23,21 @@
 			"import": "./dist/index.js",
 			"svelte": "./dist/index.js",
 			"types": "./dist/index.d.ts"
+		},
+		"./vite-plugin": {
+			"import": "./dist/vite-plugin/index.js",
+			"types": "./dist/vite-plugin/index.d.ts"
 		}
 	},
+	"bin": "./dist/cli/index.js",
 	"files": [
 		"dist"
 	],
 	"scripts": {
 		"ex:basic": "pnpm --filter basic-example",
+		"ex:file-based": "pnpm --filter file-based-example",
 		"build": "svelte-package -i src && rm -rf .svelte-kit",
+		"watch": "svelte-package -i src --watch",
 		"test": "vitest",
 		"check": "tsc --noEmit && pnpm -r check",
 		"lint": "eslint .",
@@ -46,6 +53,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.15.0",
 		"@sveltejs/package": "^2.3.7",
+		"@types/node": "^22.10.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-simple-import-sort": "^12.1.1",
 		"eslint-plugin-svelte": "^2.46.0",
@@ -63,5 +71,5 @@
 	"peerDependencies": {
 		"svelte": "^5"
 	},
-	"packageManager": "pnpm@9.14.2"
+	"packageManager": "pnpm@9.15.0"
 }

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

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

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