sv-router 0.18.0 → 0.19.0

package/README.md

@@ -11,7 +11,7 @@
 
 Flexible, ergonomic, and complete Svelte 5 router.
 
-[Documentation](https://sv-router.vercel.app/) • [Getting Started](https://sv-router.vercel.app/guide/getting-started) • [Reference](https://sv-router.vercel.app/reference)
+[Documentation](https://sv-router.dev/) • [Getting Started](https://sv-router.dev/guide/getting-started) • [Reference](https://sv-router.dev/reference)
 
 </div>
 
@@ -21,7 +21,7 @@ Flexible, ergonomic, and complete Svelte 5 router.
 
 - 🔒 **Type-safe navigation**: Catch broken links before you ship.
 - 🗂️ **File-based routing (optional)**: DX of a meta-framework-like approach.
-- 🪶 **Lightweight**: < 5kB gzipped.
+- 🪶 **Lightweight**: ~ 5kB gzipped.
 - ⚡ **Performance**: Built-in code splitting and preloading.
 - 🔍 **Reactive search params**: For simpler state management in the URL.
 - 🌿 **Nested routes**: Share layouts across pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Type-safe routing for Svelte SPAs",
   "keywords": [
     "router",
@@ -16,6 +16,9 @@
     "type": "git",
     "url": "git+https://github.com/colinlienard/sv-router.git"
   },
+  "bin": {
+    "sv-router": "./src/cli/index.js"
+  },
   "files": [
     "src"
   ],
@@ -32,32 +35,35 @@
       "types": "./src/vite-plugin/index.d.ts"
     }
   },
+  "publishConfig": {
+    "provenance": true
+  },
   "dependencies": {
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.31.0",
+    "@changesets/cli": "^3.0.2",
     "@eslint/js": "^10.0.1",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/svelte": "^5.4.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.13.2",
-    "@vitest/coverage-v8": "^4.1.9",
-    "eslint": "^10.6.0",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^24.13.4",
+    "@vitest/coverage-v8": "^5.0.0",
+    "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-simple-import-sort": "^13.0.0",
-    "eslint-plugin-svelte": "^3.20.0",
-    "eslint-plugin-unicorn": "^70.0.0",
-    "globals": "^17.7.0",
-    "happy-dom": "^20.10.6",
-    "oxfmt": "^0.57.0",
-    "svelte-check": "^4.7.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "eslint-plugin-svelte": "^3.23.0",
+    "eslint-plugin-unicorn": "^74.0.0",
+    "globals": "^17.12.0",
+    "happy-dom": "^20.14.3",
+    "oxfmt": "^0.67.0",
+    "svelte-check": "^4.7.6",
     "type-testing": "^0.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
-    "vite": "^8.1.3",
-    "vitest": "^4.1.9"
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "svelte": "^5"
@@ -76,8 +82,5 @@
     "format": "oxfmt --check",
     "format:fix": "oxfmt",
     "changeset": "changeset"
-  },
-  "bin": {
-    "sv-router": "./src/cli/index.js"
   }
 }

package/src/attachments.svelte.js

@@ -1,4 +1,5 @@
 import { base, location } from './create-router.svelte.js';
+import { comparePathParts, toPathParts } from './helpers/utils.js';
 
 /** @type {import('./index.d.ts').IsActiveLink} */
 export function isActiveLink({ className = 'is-active', startsWith = false } = {}) {
@@ -8,14 +9,13 @@ export function isActiveLink({ className = 'is-active', startsWith = false } = {
 		}
 
 		$effect(() => {
-			let pathname;
-			if (base.name === '#') {
-				pathname = new URL(node.href).hash.slice(1);
-			} else {
-				pathname = new URL(node.href).pathname;
-			}
-			const tokens = className.split(' ').filter(Boolean) ?? [];
-			if (startsWith ? location.pathname.startsWith(pathname) : location.pathname === pathname) {
+			const url = new URL(node.href);
+			const pathname = base.name === '#' ? url.hash.slice(1) : url.pathname;
+			const tokens = className.split(' ').filter(Boolean);
+			const isActive =
+				pathname !== '' &&
+				comparePathParts(toPathParts(pathname), toPathParts(location.pathname), startsWith);
+			if (isActive) {
 				node.classList.add(...tokens);
 			} else {
 				node.classList.remove(...tokens);

package/src/create-router.svelte.js

@@ -147,7 +147,7 @@ export function createRouter(r, options = {}) {
 				return params.value;
 			},
 			getParams(pathname) {
-				if (!isActive(pathname)) {
+				if (!isActive.startsWith(pathname)) {
 					throw new Error(`\`${pathname}\` does not match the current route`);
 				}
 				return params.value;
@@ -220,21 +220,21 @@ export async function onNavigate(path, options = {}) {
 		return;
 	}
 
+	const popstateDelta = path ? 0 : historyIndex - (history.state?._routerIndex ?? 0);
+	function revertPopstate() {
+		if (path || popstateDelta === 0) return;
+		isSkipNextPopstate = true;
+		history.go(popstateDelta);
+	}
+
 	if (navigationBlockers.size > 0) {
-		const popstateDelta = path ? 0 : historyIndex - (history.state?._routerIndex ?? 0);
 		for (const blocker of navigationBlockers.values()) {
 			const shouldNavigate = typeof blocker === 'object' ? blocker.onNavigate : blocker;
 			if (!(await shouldNavigate())) {
-				if (!path && popstateDelta !== 0) {
-					isSkipNextPopstate = true;
-					history.go(popstateDelta);
-				}
+				revertPopstate();
 				return;
 			}
 		}
-		if (!path) {
-			historyIndex = history.state?._routerIndex ?? historyIndex;
-		}
 	}
 
 	if (pendingController && pendingController !== currentNavigationController) {
@@ -250,7 +250,13 @@ export async function onNavigate(path, options = {}) {
 
 	const navContext = path ? options : { ...options, ...updatedLocation() };
 	const search = parseSearch(navContext.search);
-	const hooksContext = { ...navContext, pathname: matchPath, meta: newMeta, search };
+	const hooksContext = {
+		...navContext,
+		pathname: matchPath,
+		meta: newMeta,
+		params: newParams,
+		search,
+	};
 
 	let errorHooks = [];
 	for (const hook of hooks) {
@@ -259,7 +265,11 @@ export async function onNavigate(path, options = {}) {
 			const { beforeLoad } = hook;
 			errorHooks.push(hook);
 			pendingController = currentNavigationController;
-			await beforeLoad?.(hooksContext);
+			if ((await beforeLoad?.(hooksContext)) === false) {
+				if (signal.aborted) return currentNavigationPromise;
+				revertPopstate();
+				return;
+			}
 		} catch (error) {
 			if (signal.aborted) return currentNavigationPromise;
 			for (const { onError } of errorHooks) {
@@ -271,6 +281,10 @@ export async function onNavigate(path, options = {}) {
 		}
 	}
 
+	if (!path) {
+		historyIndex = history.state?._routerIndex ?? historyIndex;
+	}
+
 	let routeComponents;
 	try {
 		routeComponents = await resolveRouteComponents(match ? [...layouts, match] : layouts);

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

@@ -212,7 +212,7 @@ export function createRouterCode(routes, routesPath, { allLazy = false, base, js
 				result[key] = `{ ...${varNames.toReversed().join(', ...')} }`;
 			} else if (
 				typeof value === 'string' &&
-				(key === 'hooks' || key === 'meta' || (!value.endsWith('.lazy.svelte') && !allLazy))
+				(key === 'hooks' || key === 'meta' || (!allLazy && !value.endsWith('.lazy.svelte')))
 			) {
 				const variableName = pathToCorrectCasing(value);
 				importsMap.set(variableName, routesPath + value);

package/src/helpers/is-active.js

@@ -1,5 +1,5 @@
-import { base, location } from '../create-router.svelte.js';
-import { constructPath } from './utils.js';
+import { location } from '../create-router.svelte.js';
+import { comparePathParts, stripBase, toPathParts } from './utils.js';
 
 /**
  * @param {string} pathname
@@ -7,7 +7,7 @@ import { constructPath } from './utils.js';
  * @returns {boolean}
  */
 export function isActive(pathname, params) {
-	return compare((a, b) => a === b, pathname, params);
+	return compare(pathname, false, params);
 }
 
 /**
@@ -16,41 +16,20 @@ export function isActive(pathname, params) {
  * @returns {boolean}
  */
 isActive.startsWith = (pathname, params) => {
-	return compare((a, b) => a.startsWith(b), pathname, params);
+	return compare(pathname, true, params);
 };
 
 /**
- * @param {function(string, string): boolean} compareFn
  * @param {string} pathname
+ * @param {boolean} startsWith
  * @param {Record<string, string>} [params]
  * @returns {boolean}
  */
-function compare(compareFn, pathname, params) {
-	if (!pathname.includes(':')) {
-		const target = base.name && base.name !== '#' ? constructPath(pathname) : pathname;
-		return compareFn(location.pathname, target);
-	}
-
-	if (params) {
-		if (base.name === '#') {
-			return compareFn(location.pathname, constructPath(pathname, params).replace('/#', ''));
-		}
-		return compareFn(location.pathname, constructPath(pathname, params));
-	}
-
-	const pathParts = pathname.split('/').slice(1);
-	let routeParts = location.pathname.split('/').slice(1);
-	if (pathParts.length > routeParts.length) {
-		return false;
-	}
-	for (const [index, pathPart] of pathParts.entries()) {
-		if (pathPart.startsWith(':')) {
-			continue;
-		}
-		const routePart = routeParts[index];
-		if (pathPart !== routePart) {
-			return false;
-		}
-	}
-	return true;
+function compare(pathname, startsWith, params) {
+	return comparePathParts(
+		toPathParts(pathname),
+		toPathParts(stripBase(location.pathname)),
+		startsWith,
+		params,
+	);
 }

package/src/helpers/match-route.js

@@ -118,7 +118,7 @@ function tryMatch(route, pathParts, pathname, routes, baseMeta) {
 			};
 		}
 		// Static segment mismatch
-		else if (routePart.toLowerCase() !== pathPart?.toLowerCase() && !isLayoutGroup) {
+		else if (!isLayoutGroup && routePart.toLowerCase() !== pathPart?.toLowerCase()) {
 			return null;
 		}
 

package/src/helpers/preload.js

@@ -12,11 +12,12 @@ const PREDICT_TIMEOUT = 50;
  * @param {import('../index.d.ts').NavigateOptions} [options]
  */
 export async function preload(routes, path, options) {
-	const { match, layouts, hooks, meta } = matchRoute(path, routes);
+	const { match, layouts, hooks, meta, params } = matchRoute(path, routes);
 	for (const { onPreload } of hooks) {
 		void onPreload?.({
 			pathname: path,
 			meta,
+			params,
 			...options,
 			search: parseSearch(options?.search),
 		});
@@ -49,7 +50,7 @@ export function preloadOnHover(routes) {
 	/** @type {ReturnType<typeof setTimeout> | null} */
 	let throttleTimer = null;
 	function pointerMoveListener(/** @type {PointerEvent} */ event) {
-		if (!event.getPredictedEvents || throttleTimer) return;
+		if (throttleTimer || !event.getPredictedEvents) return;
 		throttleTimer = setTimeout(() => {
 			throttleTimer = null;
 		}, PREDICT_TIMEOUT);

package/src/helpers/utils.js

@@ -92,6 +92,42 @@ export function join(...parts) {
 	return result;
 }
 
+/**
+ * @param {string} pathname
+ * @returns {string[]}
+ */
+export function toPathParts(pathname) {
+	return pathname.replace(/\/+$/, '').split('/').slice(1);
+}
+
+/**
+ * @param {string[]} templateParts
+ * @param {string[]} pathParts
+ * @param {boolean} [startsWith]
+ * @param {Record<string, string>} [params]
+ * @returns {boolean}
+ */
+export function comparePathParts(templateParts, pathParts, startsWith, params) {
+	if (
+		startsWith ? pathParts.length < templateParts.length : pathParts.length !== templateParts.length
+	) {
+		return false;
+	}
+
+	for (const [index, templatePart] of templateParts.entries()) {
+		const pathPart = pathParts[index];
+		if (templatePart.startsWith(':')) {
+			const param = params?.[templatePart.slice(1)];
+			if (param !== undefined && encodeURIComponent(param) !== pathPart) {
+				return false;
+			}
+		} else if (templatePart.toLowerCase() !== pathPart.toLowerCase()) {
+			return false;
+		}
+	}
+	return true;
+}
+
 /**
  * @param {string} pathname
  * @returns {string}

package/src/index.d.ts

@@ -119,8 +119,18 @@ export type Hooks = {
 	 *   throw navigate('/home');
 	 * }
 	 * ```
+	 *
+	 * Returning `false` cancels the navigation and stays on the current route.
+	 *
+	 * ```js
+	 * beforeLoad({ meta }) {
+	 *   if (meta.requiresAuth && !user) {
+	 *     return false;
+	 *   }
+	 * }
+	 * ```
 	 */
-	beforeLoad?(context: HooksContext): void | Promise<void>;
+	beforeLoad?(context: HooksContext): void | boolean | Promise<void | boolean>;
 	/** A function that will be called after the route is loaded. */
 	afterLoad?(context: HooksContext): void | Promise<void>;
 	/** A function that will be called when the route is preloaded. */
@@ -304,6 +314,7 @@ export type Search = string | Record<string, string | number | boolean>;
 export type HooksContext = {
 	hash?: string;
 	meta: RouteMeta;
+	params: Record<string, string>;
 	pathname: string;
 	replace?: boolean;
 	search: Record<string, string | number | boolean>;
@@ -350,17 +361,19 @@ type NavigateArgs<T extends string> =
 	| [number];
 
 type StripNonRoutes<T extends Routes> = {
-	[K in keyof T as K extends `*${string}`
-		? never
-		: K extends `(*${string})`
+	[
+		K in keyof T as K extends `*${string}`
 			? never
-			: K extends 'layout'
+			: K extends `(*${string})`
 				? never
-				: K extends 'hooks'
+				: K extends 'layout'
 					? never
-					: K extends 'meta'
+					: K extends 'hooks'
 						? never
-						: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
+						: K extends 'meta'
+							? never
+							: K
+	]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
 };
 
 type NormalizeSlashes<T extends string> = T extends `${infer A}//${infer B}`