sv-router 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -37,28 +37,28 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@eslint/js": "^9.39.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.2.9",
+    "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.1",
-    "eslint": "^9.39.1",
+    "@types/node": "^24.10.13",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^3.13.1",
-    "eslint-plugin-unicorn": "^62.0.0",
-    "globals": "^16.5.0",
-    "happy-dom": "^20.0.11",
-    "prettier": "^3.7.4",
+    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-unicorn": "^63.0.0",
+    "globals": "^17.3.0",
+    "happy-dom": "^20.6.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-jsdoc": "^1.8.0",
-    "prettier-plugin-svelte": "^3.4.0",
-    "svelte-check": "^4.3.4",
+    "prettier-plugin-svelte": "^3.4.1",
+    "svelte-check": "^4.3.6",
     "type-testing": "^0.2.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
-    "vitest": "^4.0.15"
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "svelte": "^5"

package/src/attachments.svelte.js

@@ -0,0 +1,47 @@
+import { base, location } from './create-router.svelte.js';
+
+/** @type {import('./index.d.ts').IsActiveLink} */
+export function isActiveLink({ className = 'is-active', startsWith = false } = {}) {
+	return (node) => {
+		if (node.tagName !== 'A') {
+			throw new Error('isActiveLink can only be used on <a> elements');
+		}
+
+		$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) {
+				node.classList.add(...tokens);
+			} else {
+				node.classList.remove(...tokens);
+			}
+		});
+	};
+}
+
+/** @type {import('./index.d.ts').IsActiveLinkAction} */
+export function isActiveLinkAction(node, { className = 'is-active', startsWith = false } = {}) {
+	if (node.tagName !== 'A') {
+		throw new Error('isActiveLink can only be used on <a> elements');
+	}
+
+	$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) {
+			node.classList.add(...tokens);
+		} else {
+			node.classList.remove(...tokens);
+		}
+	});
+}

package/src/create-router.svelte.js

@@ -43,8 +43,15 @@ let params = $state({ value: {} });
 
 let meta = $state({ value: {} });
 
-let navigationIndex = 0;
-let pendingNavigationIndex = 0;
+/** @type {(() => boolean) | null} */
+let navigationBlocker = null;
+
+/** @type {AbortController | null} */
+let currentNavigationController = null;
+let pendingController = /** @type {AbortController | null} */ (null);
+
+/** @type {Promise<void | null> | null} */
+let currentNavigationPromise = null;
 
 /** @param {string | undefined} basename */
 export function init(basename) {
@@ -126,7 +133,7 @@ export function createRouter(r) {
  * 	search?: import('./index.d.ts').Search;
  * }} options
  */
-function navigate(path, options = {}) {
+async function navigate(path, options = {}) {
 	if (typeof path === 'number') {
 		globalThis.history.go(path);
 		return new Navigation(`History entry: ${path}`);
@@ -138,7 +145,9 @@ function navigate(path, options = {}) {
 	} else if (options.hash && !options.hash.startsWith('#')) {
 		options.hash = '#' + options.hash;
 	}
-	onNavigate(path, options);
+	const promise = onNavigate(path, options);
+	currentNavigationPromise = promise;
+	await promise;
 	return new Navigation(`${path}${serializeSearch(options?.search ?? '')}${options?.hash ?? ''}`);
 }
 
@@ -151,8 +160,29 @@ export async function onNavigate(path, options = {}) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
 
-	navigationIndex++;
-	const currentNavigationIndex = navigationIndex;
+	if (navigationBlocker) {
+		if (!navigationBlocker()) {
+			const url = new URL(globalThis.location.toString());
+			url.search = location.search;
+			url.hash = location.hash;
+			if (base.name === '#') {
+				url.hash = location.pathname;
+			} else {
+				url.pathname = location.pathname;
+			}
+			globalThis.history.replaceState($state.snapshot(location.state) || {}, '', url.toString());
+			return;
+		}
+		navigationBlocker = null;
+	}
+
+	if (pendingController && pendingController !== currentNavigationController) {
+		return;
+	}
+
+	currentNavigationController?.abort();
+	currentNavigationController = new AbortController();
+	const { signal } = currentNavigationController;
 
 	const matchPath = getMatchPath(path);
 	const { match, layouts, hooks, meta: newMeta, params: newParams } = matchRoute(matchPath, routes);
@@ -162,21 +192,23 @@ export async function onNavigate(path, options = {}) {
 
 	let errorHooks = [];
 	for (const hook of hooks) {
+		if (signal.aborted) return currentNavigationPromise;
 		try {
 			const { beforeLoad } = hook;
 			errorHooks.push(hook);
-			pendingNavigationIndex = currentNavigationIndex;
+			pendingController = currentNavigationController;
 			await beforeLoad?.(hooksContext);
 		} catch (error) {
+			if (signal.aborted) return currentNavigationPromise;
 			for (const { onError } of errorHooks) {
 				void onError?.(error, hooksContext);
 			}
 			return;
+		} finally {
+			pendingController = null;
 		}
 	}
 
-	const fromBeforeLoadHook = new Error().stack?.includes('beforeLoad');
-
 	let routeComponents;
 	try {
 		routeComponents = await resolveRouteComponents(match ? [...layouts, match] : layouts);
@@ -186,12 +218,7 @@ export async function onNavigate(path, options = {}) {
 		}
 		throw error;
 	}
-	if (
-		navigationIndex !== currentNavigationIndex ||
-		(fromBeforeLoadHook && pendingNavigationIndex + 1 !== currentNavigationIndex)
-	) {
-		return;
-	}
+	if (signal.aborted) return currentNavigationPromise;
 
 	if (path) {
 		const search = serializeSearch(options.search);
@@ -292,3 +319,8 @@ export function onGlobalClick(event) {
 		viewTransition: viewTransition === '' || viewTransition === 'true',
 	});
 }
+
+/** @param {() => boolean} callback */
+export function blockNavigation(callback) {
+	navigationBlocker = callback;
+}

package/src/helpers/is-active.js

@@ -27,7 +27,8 @@ isActive.startsWith = (pathname, params) => {
  */
 function compare(compareFn, pathname, params) {
 	if (!pathname.includes(':')) {
-		return compareFn(location.pathname, pathname);
+		const target = base.name && base.name !== '#' ? constructPath(pathname) : pathname;
+		return compareFn(location.pathname, target);
 	}
 
 	if (params) {

package/src/helpers/match-route.js

@@ -64,14 +64,13 @@ export function matchRoute(pathname, routes) {
 
 			const pathPart = pathParts[index];
 			if (routePart.startsWith(':')) {
-				params[routePart.slice(1)] = pathPart;
+				params[routePart.slice(1)] = decodeURIComponent(pathPart);
 			} else if (routePart.startsWith('*')) {
 				const param = routePart.slice(1);
 				if (param) {
-					params[param] = pathParts.slice(index).join('/');
+					params[param] = pathParts.slice(index).map(decodeURIComponent).join('/');
 				}
 				if (breakFromLayouts) {
-					routePart = `(${routePart})`;
 					layouts = [];
 				} else if ('layout' in routes && routes.layout) {
 					layouts.push(routes.layout);
@@ -126,6 +125,7 @@ export function matchRoute(pathname, routes) {
 				meta = { ...meta, ...result.meta };
 				if (result.breakFromLayouts) {
 					layouts = [];
+					breakFromLayouts = true;
 				} else {
 					layouts.push(...result.layouts);
 				}

package/src/index.d.ts

@@ -1,13 +1,27 @@
 import type { Component, Snippet } from 'svelte';
 import type { Action } from 'svelte/action';
+import type { Attachment } from 'svelte/attachments';
 
 /**
- * A Svelte action that will add a class to the anchor if its `href` matches the current route. It
- * can have an optional `className` parameter to specify the class to add, otherwise it will default
- * to `is-active`.
+ * @deprecated Use the `isActiveLink` [attachment](https://svelte.dev/docs/svelte/@attach) instead.
+ *
+ *   A Svelte action that will add a class to the anchor if its `href` matches the current route. It
+ *   can have an optional `className` parameter to specify the class to add, otherwise it will
+ *   default to `is-active`, and an optional `startsWith` parameter.
+ *
+ *   ```svelte
+ *   <a href={p('/about')} use:isActiveLink={{ className: 'active-link' }}>
+ * ```
+ */
+export const isActiveLinkAction: IsActiveLinkAction;
+
+/**
+ * A Svelte attachment that will add a class to the anchor if its `href` matches the current route.
+ * It can have an optional `className` parameter to specify the class to add, otherwise it will
+ * default to `is-active`, and an optional `startsWith` parameter.
  *
  * ```svelte
- * <a href={p('/about')} use:isActiveLink={{ className: 'active-link' }}>
+ * <a href={p('/about')} {@attach isActiveLink({ className: 'active-link' })}>
  * ```
  */
 export const isActiveLink: IsActiveLink;
@@ -28,6 +42,15 @@ export function serializeSearch(search: Search): string | undefined;
  */
 export function createRouter<T extends Routes>(r: T): RouterApi<T>;
 
+/**
+ * Block navigation until the callback returns `false`.
+ *
+ * ```js
+ * blockNavigation(() => confirm('Are you sure you want to leave?'));
+ * ```
+ */
+export function blockNavigation(callback: () => boolean): void;
+
 /**
  * The component that will render the current route. You can pass a `base` prop to set the base path
  * that is prepended to every url.
@@ -83,7 +106,12 @@ export type Routes = {
 	meta?: RouteMeta;
 };
 
-export type IsActiveLink = Action<
+export type IsActiveLink = (options?: {
+	className?: string;
+	startsWith?: boolean;
+}) => Attachment<HTMLAnchorElement>;
+
+export type IsActiveLinkAction = Action<
 	HTMLAnchorElement,
 	| {
 			className?: string;
@@ -145,7 +173,7 @@ export type RouterApi<T extends Routes> = {
 	 * @param options The navigation options.
 	 * @returns {@link Navigation} For use with `throw navigate(...)` inside hooks.
 	 */
-	navigate<U extends Path<T>>(...args: NavigateArgs<U>): Navigation;
+	navigate<U extends Path<T>>(...args: NavigateArgs<U>): Promise<Navigation>;
 
 	/**
 	 * Will return `true` if the given path is active.

package/src/index.js

@@ -1,5 +1,5 @@
-export { isActiveLink } from './actions.svelte.js';
-export { createRouter } from './create-router.svelte.js';
+export { isActiveLink, isActiveLinkAction } from './attachments.svelte.js';
+export { blockNavigation, createRouter } from './create-router.svelte.js';
 export { serializeSearch } from './helpers/utils.js';
 export { Navigation } from './navigation.js';
 export { default as Router } from './Router.svelte';

package/src/actions.svelte.js

@@ -1,27 +0,0 @@
-import { base, location } from './create-router.svelte.js';
-import { join } from './helpers/utils.js';
-
-/** @type {import('./index.d.ts').IsActiveLink} */
-export function isActiveLink(node, { className = 'is-active', startsWith = false } = {}) {
-	if (node.tagName !== 'A') {
-		throw new Error('isActiveLink can only be used on <a> elements');
-	}
-
-	$effect(() => {
-		let pathname;
-		if (base.name === '#') {
-			pathname = new URL(node.href).hash.slice(1);
-		} else {
-			pathname = new URL(node.href).pathname;
-			if (base.name) {
-				pathname = join(base.name, pathname);
-			}
-		}
-		const tokens = className.split(' ').filter(Boolean) ?? [];
-		if (startsWith ? location.pathname.startsWith(pathname) : location.pathname === pathname) {
-			node.classList.add(...tokens);
-		} else {
-			node.classList.remove(...tokens);
-		}
-	});
-}