sv-router 0.0.2 → 0.0.4

package/package.json

@@ -1,75 +1,70 @@
 {
-	"name": "sv-router",
-	"version": "0.0.2",
-	"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"
-		},
-		"./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 .",
-		"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",
-		"@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",
-		"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.15.0"
-}
+  "name": "sv-router",
+  "version": "0.0.4",
+  "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": {
+    ".": {
+      "import": "./src/index.js",
+      "svelte": "./src/index.js",
+      "types": "./src/index.d.ts"
+    },
+    "./vite-plugin": {
+      "import": "./src/vite-plugin/index.js",
+      "types": "./src/vite-plugin/index.d.ts"
+    }
+  },
+  "bin": "./src/cli/index.js",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "esm-env": "^1.2.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.10",
+    "@eslint/js": "^9.16.0",
+    "@types/node": "^22.10.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-svelte": "^2.46.1",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-jsdoc": "^1.3.0",
+    "prettier-plugin-svelte": "^3.3.2",
+    "type-testing": "^0.2.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.0",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "svelte": "^5"
+  },
+  "scripts": {
+    "ex:basic": "pnpm --filter basic-example",
+    "ex:file-based": "pnpm --filter file-based-example",
+    "test": "vitest",
+    "check": "tsc --noEmit && pnpm -r check",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
+    "changeset": "changeset"
+  }
+}

package/{dist → src}/RecursiveComponentTree.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-	import type { Component } from 'svelte';
+<script>
+	import { paramsStore } from './create-router.svelte.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
-	import { paramsStore } from './router.svelte.js';
 
-	let { tree }: { tree: Component[] } = $props();
+	/** @type {{ tree: import('svelte').Component[] }} */
+	let { tree } = $props();
 
 	const FirstComponent = $derived(tree[0]);
 	const restTree = $derived(tree.slice(1));

package/{dist → src}/Router.svelte

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

package/src/cli/index.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+import { genConfig } from '../gen/config.js';
+import { writeRouterCode } from '../gen/write-router-code.js';
+
+const args = process.argv.slice(2).flatMap((arg) => arg.split('='));
+
+const pathArgIndex = args.indexOf('--path');
+if (pathArgIndex !== -1 && pathArgIndex + 1 < args.length) {
+	genConfig.routesPath = args[pathArgIndex + 1];
+}
+
+writeRouterCode();

package/src/create-router.svelte.js

@@ -0,0 +1,67 @@
+import { BROWSER, DEV } from 'esm-env';
+import { matchRoute } from './helpers/match-route.js';
+import { constructPath, resolveRouteComponents } from './helpers/utils.js';
+
+/** @type {import('./index.d.ts').Routes} */
+export let routes;
+
+/** @type {import('svelte').Component[]} */
+export const componentTree = $state([]);
+
+/** @type {Record<string, string>} */
+export const paramsStore = $state({});
+
+/**
+ * @template {import('./index.d.ts').Routes} T
+ * @param {T} r
+ * @returns {import('./index.d.ts').RouterMethods<T>}
+ */
+export function createRouter(r) {
+	routes = r;
+
+	if (DEV && BROWSER) {
+		import('./helpers/validate-routes.js').then(({ validateRoutes }) => {
+			validateRoutes(routes);
+		});
+	}
+
+	return {
+		path: constructPath,
+		goto(...args) {
+			const path = constructPath(args[0], args[1]);
+			globalThis.history.pushState({}, '', path);
+			onNavigate();
+		},
+		params() {
+			const readonly = $derived(paramsStore);
+			return readonly;
+		},
+	};
+}
+
+export function onNavigate() {
+	if (!routes) {
+		throw new Error('Router not initialized: `createRouter` was not called.');
+	}
+	const { match, layouts, params } = matchRoute(globalThis.location.pathname, routes);
+	resolveRouteComponents(match ? [...layouts, match] : layouts).then((components) => {
+		Object.assign(componentTree, components);
+	});
+	Object.assign(paramsStore, params);
+}
+
+/** @param {Event} event */
+export function onGlobalClick(event) {
+	const anchor = /** @type {HTMLElement} */ (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/src/gen/config.js

@@ -0,0 +1,16 @@
+/**
+ * @type {{
+ * 	routesPath: string;
+ * 	readonly genCodeDirPath: string;
+ * 	readonly routerPath: string;
+ * 	readonly tsconfigPath: string;
+ * 	readonly genCodeAlias: string;
+ * }}
+ */
+export const genConfig = {
+	routesPath: 'src/routes',
+	genCodeDirPath: '.router',
+	routerPath: '.router/router.ts',
+	tsconfigPath: '.router/tsconfig.json',
+	genCodeAlias: 'sv-router/generated',
+};

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

@@ -0,0 +1,102 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+/** @typedef {(string | { name: string; tree: FileTree })[]} FileTree */
+
+/**
+ * @typedef {{
+ * 	[key: string]: string | GeneratedRoutes;
+ * }} GeneratedRoutes
+ */
+
+const PARAM_FILENAME_REGEX = /\[(.*)\].svelte/g;
+
+/**
+ * @param {string} routesPath
+ * @returns {string}
+ */
+export function generateRouterCode(routesPath) {
+	const fileTree = buildFileTree(path.join(process.cwd(), routesPath));
+	const routeMap = createRouteMap(fileTree);
+	return createRouterCode(routeMap, path.join('..', routesPath));
+}
+
+/**
+ * @param {string} routesPath
+ * @returns {FileTree}
+ */
+export function buildFileTree(routesPath) {
+	const entries = fs.readdirSync(routesPath);
+	/** @type {FileTree} */
+	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;
+}
+
+/**
+ * @param {FileTree} fileTree
+ * @param {string} prefix
+ * @returns {GeneratedRoutes}
+ */
+export function createRouteMap(fileTree, prefix = '') {
+	/** @type {GeneratedRoutes} */
+	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;
+}
+
+/**
+ * @param {GeneratedRoutes} routes
+ * @param {string} routesPath
+ * @returns {string}
+ */
+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/src/gen/write-router-code.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-console */
+import fs from 'node:fs';
+import { genConfig } from './config.js';
+import { generateRouterCode } from './generate-router-code.js';
+
+export function writeRouterCode() {
+	try {
+		if (!fs.existsSync(genConfig.genCodeDirPath)) {
+			fs.mkdirSync(genConfig.genCodeDirPath);
+		}
+
+		// Write `.router/router.ts` file
+		const routerCode = generateRouterCode(genConfig.routesPath);
+		writeFileIfDifferent(genConfig.routerPath, routerCode);
+
+		// Write `.router/tsconfig.json` file
+		const tsConfig = {
+			compilerOptions: {
+				module: 'preserve',
+				moduleResolution: 'bundler',
+				baseUrl: '..',
+				paths: {
+					[genConfig.genCodeAlias]: [genConfig.routerPath],
+				},
+			},
+			include: [
+				'../src/**/*.js',
+				'../src/**/*.ts',
+				'../src/**/*.svelte',
+				'../tests/**/*.js',
+				'../tests/**/*.ts',
+				'../tests/**/*.svelte',
+				'./router.ts',
+			],
+		};
+		writeFileIfDifferent(genConfig.tsconfigPath, JSON.stringify(tsConfig, undefined, 2));
+
+		console.log('✅️ Routes generated');
+	} catch (error) {
+		console.error('Error during routes generation:', error);
+	}
+}
+
+/**
+ * @param {string} filePath
+ * @param {string} content
+ */
+function writeFileIfDifferent(filePath, content) {
+	if (!fs.existsSync(filePath) || fs.readFileSync(filePath, 'utf8') !== content) {
+		fs.writeFileSync(filePath, content);
+	}
+}

package/src/helpers/match-route.js

@@ -0,0 +1,112 @@
+/**
+ * @typedef {import('../index.d.ts').LayoutComponent} LayoutComponent
+ *
+ * @typedef {import('../index.d.ts').RouteComponent} RouteComponent
+ *
+ * @typedef {import('../index.d.ts').Routes} Routes
+ */
+
+/**
+ * @param {string} pathname
+ * @param {Routes} routes
+ * @returns {{
+ * 	match: RouteComponent | undefined;
+ * 	layouts: LayoutComponent[];
+ * 	params: Record<string, string>;
+ * 	breakFromLayouts: boolean;
+ * }}
+ */
+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('/'));
+
+	/** @type {RouteComponent | undefined} */
+	let match;
+
+	/** @type {LayoutComponent[]} */
+	let layouts = [];
+
+	/** @type {Record<string, string>} */
+	let params = {};
+
+	let breakFromLayouts = false;
+
+	outer: for (const routeParts of allRouteParts) {
+		for (let [index, routePart] of sortRoutes(routeParts).entries()) {
+			breakFromLayouts = routePart.startsWith('(') && routePart.endsWith(')');
+			if (breakFromLayouts) {
+				routePart = routePart.slice(1, -1);
+			}
+
+			const pathPart = pathParts[index];
+			if (routePart.startsWith(':')) {
+				params[routePart.slice(1)] = pathPart;
+			} else if (routePart === '*') {
+				match = /** @type {RouteComponent} */ (
+					routes[/** @type {keyof Routes} */ (routeParts.join('/'))]
+				);
+				break outer;
+			} else if (routePart !== pathPart) {
+				break;
+			}
+
+			if (index !== routeParts.length - 1) {
+				continue;
+			}
+
+			if (!breakFromLayouts && 'layout' in routes && routes.layout) {
+				layouts.push(routes.layout);
+			}
+
+			const routeMatch = /** @type {RouteComponent} */ (
+				routes[/** @type {keyof Routes} */ (routeParts.join('/'))]
+			);
+
+			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 };
+					if (result.breakFromLayouts) {
+						layouts = [];
+					} else {
+						layouts.push(...result.layouts);
+					}
+				}
+			}
+			break outer;
+		}
+	}
+
+	return { match, layouts, params, breakFromLayouts };
+}
+
+/**
+ * @param {string[]} routes
+ * @returns {string[]}
+ */
+export function sortRoutes(routes) {
+	return routes.toSorted((a, b) => getRoutePriority(a) - getRoutePriority(b));
+}
+
+/**
+ * @param {string} route
+ * @returns {number}
+ */
+function getRoutePriority(route) {
+	if (route === '' || route === '/') return 1;
+	if (route === '*') return 4;
+	if (route.includes(':')) return 3;
+	return 2;
+}

package/src/helpers/utils.js

@@ -0,0 +1,46 @@
+/**
+ * @param {string} path
+ * @param {Record<string, string>} [params]
+ * @returns {string}
+ */
+export function constructPath(path, params) {
+	if (!params) return path;
+
+	let result = path;
+	for (const key in params) {
+		result = result.replace(`:${key}`, params[key]);
+	}
+	return result;
+}
+
+/**
+ * @param {import('../index.d.ts').RouteComponent[]} input
+ * @returns {Promise<import('svelte').Component[]>}
+ */
+export function resolveRouteComponents(input) {
+	return Promise.all(input.map((c) => resolveRouteComponent(c)));
+}
+
+/**
+ * @param {import('../index.d.ts').RouteComponent} input
+ * @returns {Promise<import('svelte').Component>}
+ */
+export function resolveRouteComponent(input) {
+	return new Promise((resolve) => {
+		if (isLazyImport(input)) {
+			Promise.resolve(input()).then((module) => {
+				resolve(module.default);
+			});
+		} else {
+			resolve(input);
+		}
+	});
+}
+
+/**
+ * @param {unknown} input
+ * @returns {input is import('../index.d.ts').LazyRouteComponent}
+ */
+export function isLazyImport(input) {
+	return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/g.test(String(input));
+}

package/src/helpers/validate-routes.js

@@ -0,0 +1,46 @@
+/** @param {import('../index.d.ts').Routes} routes */
+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), // Match dynamic paths without slashes after the colon
+		);
+		if (dynamicPath) {
+			console.warn(
+				`Router warning: Wildcard route \`${wildcardPath}\` should not be at the same level as dynamic route \`${dynamicPath}\`.`,
+			);
+		}
+	}
+}
+
+/**
+ * @param {import('../index.d.ts').Routes} routes
+ * @returns {string[]}
+ */
+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;
+}