sv-router 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Modern Svelte routing",
   "keywords": [
     "svelte",
@@ -57,7 +57,7 @@
     "svelte": "^5"
   },
   "scripts": {
-    "ex:basic": "pnpm --filter basic-example",
+    "ex:config-based": "pnpm --filter config-based-example",
     "ex:file-based": "pnpm --filter file-based-example",
     "test": "vitest",
     "check": "tsc --noEmit && pnpm -r check",

package/src/RecursiveComponentTree.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { paramsStore } from './create-router.svelte.js';
+	import { params } from './create-router.svelte.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
 
 	/** @type {{ tree: import('svelte').Component[] }} */
@@ -9,7 +9,7 @@
 	const restTree = $derived(tree.slice(1));
 </script>
 
-{#key restTree.length > 0 || Object.values(paramsStore)}
+{#key restTree.length > 0 || Object.values(params.value)}
 	<FirstComponent>
 		{#if restTree.length > 0}
 			<RecursiveComponentTree tree={restTree}></RecursiveComponentTree>

package/src/Router.svelte

@@ -16,4 +16,4 @@
 	});
 </script>
 
-<RecursiveComponentTree tree={componentTree}></RecursiveComponentTree>
+<RecursiveComponentTree tree={componentTree.value}></RecursiveComponentTree>

package/src/cli/index.js

@@ -5,9 +5,23 @@ 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];
+/**
+ * @param {keyof import('../vite-plugin/index.d.ts').RouterOptions} option
+ * @returns
+ */
+function arg(option) {
+	const pathArgIndex = args.indexOf('--' + option);
+	if (pathArgIndex === -1) return;
+	if (pathArgIndex + 1 < args.length) {
+		return args[pathArgIndex + 1];
+	}
+	return args[pathArgIndex];
 }
 
+const pathArg = arg('path');
+if (pathArg) genConfig.routesPath = pathArg;
+
+const jsArg = arg('js');
+if (jsArg) genConfig.routesInJs = true;
+
 writeRouterCode();

package/src/create-router.svelte.js

@@ -1,20 +1,23 @@
 import { BROWSER, DEV } from 'esm-env';
 import { matchRoute } from './helpers/match-route.js';
+import { preloadOnHover } from './helpers/preload-on-hover.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 {{ value: import('svelte').Component[] }} */
+export let componentTree = $state({ value: [] });
 
-/** @type {Record<string, string>} */
-export const paramsStore = $state({});
+/** @type {{ value: Record<string, string> }} */
+export let params = $state({ value: {} });
+
+let location = $state(updatedLocation());
 
 /**
  * @template {import('./index.d.ts').Routes} T
  * @param {T} r
- * @returns {import('./index.d.ts').RouterMethods<T>}
+ * @returns {import('./index.d.ts').RouterApi<T>}
  */
 export function createRouter(r) {
 	routes = r;
@@ -25,16 +28,44 @@ export function createRouter(r) {
 		});
 	}
 
+	preloadOnHover(routes);
+
 	return {
-		path: constructPath,
-		goto(...args) {
-			const path = constructPath(args[0], args[1]);
-			globalThis.history.pushState({}, '', path);
+		p: constructPath,
+		/**
+		 * @param {string} path
+		 * @param {import('./index.d.ts').NavigateOptions & { params?: Record<string, string> }} options
+		 */
+		navigate(path, options = {}) {
+			if (options.params) {
+				path = constructPath(path, options.params);
+			}
+			if (options.search) {
+				path += options.search;
+			}
+			if (options.hash) {
+				path += options.hash;
+			}
+			const historyMethod = options.replace ? 'replaceState' : 'pushState';
+			globalThis.history[historyMethod](options.state || {}, '', path);
 			onNavigate();
 		},
-		params() {
-			const readonly = $derived(paramsStore);
-			return readonly;
+		route: {
+			get params() {
+				return params.value;
+			},
+			get pathname() {
+				return location.pathname;
+			},
+			get search() {
+				return location.search;
+			},
+			get state() {
+				return location.state;
+			},
+			get hash() {
+				return location.hash;
+			},
 		},
 	};
 }
@@ -43,11 +74,12 @@ export function onNavigate() {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
-	const { match, layouts, params } = matchRoute(globalThis.location.pathname, routes);
+	location = updatedLocation();
+	const { match, layouts, params: newParams } = matchRoute(globalThis.location.pathname, routes);
+	params.value = newParams || {};
 	resolveRouteComponents(match ? [...layouts, match] : layouts).then((components) => {
-		Object.assign(componentTree, components);
+		componentTree.value = components;
 	});
-	Object.assign(paramsStore, params);
 }
 
 /** @param {Event} event */
@@ -62,6 +94,17 @@ export function onGlobalClick(event) {
 	if (url.origin !== currentOrigin) return;
 
 	event.preventDefault();
-	globalThis.history.pushState({}, '', anchor.href);
+	const { replace, state } = anchor.dataset;
+	const historyMethod = replace === undefined || replace === 'false' ? 'pushState' : 'replaceState';
+	globalThis.history[historyMethod](state || {}, '', anchor.href);
 	onNavigate();
 }
+
+function updatedLocation() {
+	return {
+		pathname: globalThis.location.pathname,
+		search: globalThis.location.search,
+		state: globalThis.history.state,
+		hash: globalThis.location.hash,
+	};
+}

package/src/gen/config.js

@@ -1,6 +1,7 @@
 /**
  * @type {{
  * 	routesPath: string;
+ * 	routesInJs: boolean;
  * 	readonly genCodeDirPath: string;
  * 	readonly routerPath: string;
  * 	readonly tsconfigPath: string;
@@ -9,8 +10,11 @@
  */
 export const genConfig = {
 	routesPath: 'src/routes',
+	routesInJs: false,
 	genCodeDirPath: '.router',
-	routerPath: '.router/router.ts',
+	get routerPath() {
+		return '.router/router.' + (this.routesInJs ? 'js' : 'ts');
+	},
 	tsconfigPath: '.router/tsconfig.json',
 	genCodeAlias: 'sv-router/generated',
 };

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

@@ -28,16 +28,40 @@ export function generateRouterCode(routesPath) {
 export function buildFileTree(routesPath) {
 	const entries = fs.readdirSync(routesPath);
 	/** @type {FileTree} */
-	const result = [];
+	const tree = [];
 	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);
+			tree.push({ name: entry, tree: buildFileTree(path.join(routesPath, entry)) });
+			continue;
 		}
+		if (!entry.endsWith('.svelte')) continue;
+		handleFlatFilename(tree, entry);
 	}
-	return result;
+	return tree;
+}
+
+/**
+ * @param {FileTree} tree
+ * @param {string} path
+ */
+function handleFlatFilename(tree, path) {
+	const splited = path.split('.');
+	if (splited.length === 2) {
+		tree.push(path);
+		return;
+	}
+	const first = /** @type {string} */ (splited.shift());
+	for (const item of tree) {
+		if (typeof item === 'object' && item.name === first) {
+			handleFlatFilename(item.tree, splited.join('.'));
+			return;
+		}
+	}
+	/** @type {FileTree} */
+	const branch = [];
+	handleFlatFilename(branch, splited.join('.'));
+	tree.push({ name: first, tree: branch });
 }
 
 /**
@@ -97,6 +121,6 @@ export function createRouterCode(routes, routesPath) {
 	return [
 		'import { createRouter } from "sv-router";',
 		'\n\n',
-		`export const { path, goto, params } = createRouter(${withImports});`,
+		`export const { p, navigate, route } = createRouter(${withImports});`,
 	].join('');
 }

package/src/helpers/match-route.js

@@ -21,8 +21,8 @@ export function matchRoute(pathname, routes) {
 	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('/'));
+	const pathParts = pathname.split('/').slice(1);
+	const allRoutes = sortRoutes(Object.keys(routes));
 
 	/** @type {RouteComponent | undefined} */
 	let match;
@@ -35,8 +35,11 @@ export function matchRoute(pathname, routes) {
 
 	let breakFromLayouts = false;
 
-	outer: for (const routeParts of allRouteParts) {
-		for (let [index, routePart] of sortRoutes(routeParts).entries()) {
+	outer: for (const route of allRoutes) {
+		const routeParts = route.split('/');
+		if (routeParts[0] === '') routeParts.shift();
+
+		for (let [index, routePart] of routeParts.entries()) {
 			breakFromLayouts = routePart.startsWith('(') && routePart.endsWith(')');
 			if (breakFromLayouts) {
 				routePart = routePart.slice(1, -1);
@@ -46,9 +49,10 @@ export function matchRoute(pathname, routes) {
 			if (routePart.startsWith(':')) {
 				params[routePart.slice(1)] = pathPart;
 			} else if (routePart === '*') {
-				match = /** @type {RouteComponent} */ (
-					routes[/** @type {keyof Routes} */ (routeParts.join('/'))]
+				const resolvedPath = /** @type {keyof Routes} */ (
+					(index ? '/' : '') + routeParts.join('/')
 				);
+				match = /** @type {RouteComponent} */ (routes[resolvedPath]);
 				break outer;
 			} else if (routePart !== pathPart) {
 				break;
@@ -58,31 +62,31 @@ export function matchRoute(pathname, routes) {
 				continue;
 			}
 
+			const routeMatch = /** @type {RouteComponent} */ (
+				routes[/** @type {keyof Routes} */ ('/' + routeParts.join('/'))]
+			);
+
 			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;
+					break outer;
 				}
-			} 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);
-					}
+				continue;
+			}
+
+			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;

package/src/helpers/preload-on-hover.js

@@ -0,0 +1,28 @@
+import { matchRoute } from './match-route.js';
+import { resolveRouteComponents } from './utils.js';
+
+const linkSet = new Set();
+
+/** @param {import('../index.d.ts').Routes} routes */
+export function preloadOnHover(routes) {
+	const observer = new MutationObserver(() => {
+		const links = document.querySelectorAll('a[data-preload]');
+		for (const link of links) {
+			if (linkSet.has(link)) continue;
+			linkSet.add(link);
+
+			link.addEventListener('mouseenter', function callback() {
+				link.removeEventListener('mouseenter', callback);
+				const href = link.getAttribute('href');
+				if (!href) return;
+				const { match, layouts } = matchRoute(href, routes);
+				resolveRouteComponents(match ? [...layouts, match] : layouts);
+			});
+		}
+	});
+
+	observer.observe(document.body, {
+		subtree: true,
+		childList: true,
+	});
+}

package/src/index.d.ts

@@ -4,14 +4,14 @@ import type { Component, Snippet } from 'svelte';
  * Setup a new router instance with the given routes.
  *
  * ```js
- * export const { path, goto, params } = createRouter({
+ * export const { p, navigate, route } = createRouter({
  *   '/': Home,
  *   '/about': About,
  *   ...
  * });
  * ```
  */
-export function createRouter<T extends Routes>(r: T): RouterMethods<T>;
+export function createRouter<T extends Routes>(r: T): RouterApi<T>;
 export const Router: Component;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -32,10 +32,55 @@ export type Routes = {
 	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 RouterApi<T extends Routes> = {
+	/**
+	 * Construct a path while ensuring type safety.
+	 *
+	 * ```js
+	 * p('/users');
+	 * // With parameters
+	 * p('/users/:id', { id: 1 });
+	 * ```
+	 *
+	 * @param route The route to navigate to.
+	 * @param params The parameters to replace in the route.
+	 */
+	p<U extends Path<T>>(...args: ConstructPathArgs<U>): string;
+	/**
+	 * Navigate programatically to a route.
+	 *
+	 * ```js
+	 * navigate('/users');
+	 * // With parameters
+	 * navigate('/users/:id', {
+	 * 	params: {
+	 * 		id: 1,
+	 * 	},
+	 * });
+	 * ```
+	 *
+	 * @param route The route to navigate to.
+	 * @param options The navigation options.
+	 */
+	navigate<U extends Path<T>>(...args: NavigateArgs<U>): void;
+	route: {
+		/**
+		 * An object containing the parameters of the current route.
+		 *
+		 * For example, given the route `/posts/:slug/comments/:commentId` and the URL
+		 * `http://localhost:5173/posts/hello-world/comments/123`, the `params` object would be `{ slug:
+		 * 'hello-world', commentId: '123' }`.
+		 */
+		params: AllParams<T>;
+		/** The reactive pathname of the URL. */
+		pathname: string;
+		/** The reactive query string part of the URL. */
+		search: string;
+		/** The reactive history state that can be passed to the `navigate` function. */
+		state: unknown;
+		/** The reactive hash part of the URL. */
+		hash: string;
+	};
 };
 
 export type Path<T extends Routes> = RemoveParenthesis<
@@ -50,6 +95,20 @@ export type PathParams<T extends string> =
 
 export type AllParams<T extends Routes> = Partial<Record<ExtractParams<RecursiveKeys<T>>, string>>;
 
+export type NavigateOptions =
+	| {
+			replace?: boolean;
+			search?: string;
+			state?: string;
+			hash?: `#${string}`;
+	  }
+	| undefined;
+
+export type NavigateArgs<T extends string> =
+	PathParams<T> extends never
+		? [T, NavigateOptions]
+		: [T, NavigateOptions & { params: PathParams<T> }];
+
 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]>

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

@@ -7,6 +7,12 @@ export type RouterOptions = {
 	 * @default 'src/routes'
 	 */
 	path?: string;
+	/**
+	 * If true, generates the routes in a .js file instead of a .ts file.
+	 *
+	 * @default false
+	 */
+	js?: boolean;
 };
 
 export const router: (options?: RouterOptions) => Plugin;

package/src/vite-plugin/plugin.js

@@ -7,9 +7,8 @@ import { writeRouterCode } from '../gen/write-router-code.js';
  * @returns {import('vite').Plugin}
  */
 export function router(options) {
-	if (options?.path) {
-		genConfig.routesPath = options.path;
-	}
+	if (options?.path) genConfig.routesPath = options.path;
+	if (options?.js) genConfig.routesInJs = options.js;
 
 	return {
 		name: 'sv-router',