sv-router 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -36,28 +36,29 @@
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.4",
-    "@eslint/js": "^9.28.0",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@changesets/cli": "^2.29.5",
+    "@eslint/js": "^9.32.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/svelte": "^5.2.8",
-    "@types/node": "^22.15.30",
-    "eslint": "^9.28.0",
-    "eslint-config-prettier": "^10.1.5",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.2.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^3.9.1",
-    "eslint-plugin-unicorn": "^59.0.1",
-    "globals": "^16.2.0",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-jsdoc": "^1.3.2",
+    "eslint-plugin-svelte": "^3.11.0",
+    "eslint-plugin-unicorn": "^60.0.0",
+    "globals": "^16.3.0",
+    "happy-dom": "^18.0.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-jsdoc": "^1.3.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "svelte-check": "^4.2.1",
+    "svelte-check": "^4.3.1",
     "type-testing": "^0.2.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
-    "vite": "^7.0.0",
-    "vitest": "^3.2.2"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.1.0",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "svelte": "^5"

package/src/Router.svelte

@@ -1,20 +1,12 @@
 <script>
 	import { on } from 'svelte/events';
-	import { base, componentTree, onGlobalClick, onNavigate } from './create-router.svelte.js';
-	import { join } from './helpers/utils.js';
+	import { componentTree, init, onGlobalClick, onNavigate } from './create-router.svelte.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
 
 	/** @type {{ base?: string }} */
 	let { base: basename } = $props();
 
-	if (basename) {
-		base.name = (basename.startsWith('/') ? '' : '/') + basename;
-		const url = new URL(globalThis.location.href);
-		if (!url.pathname.startsWith(base.name)) {
-			url.pathname = join(base.name, url.pathname);
-			history.replaceState(history.state || {}, '', url.href);
-		}
-	}
+	init(basename);
 
 	onNavigate();
 

package/src/actions.svelte.js

@@ -8,14 +8,20 @@ export function isActiveLink(node, { className = 'is-active', startsWith = false
 	}
 
 	$effect(() => {
-		let pathname = new URL(node.href).pathname;
-		if (base.name) {
-			pathname = join(base.name, pathname);
+		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(className);
+			node.classList.add(...tokens);
 		} else {
-			node.classList.remove(className);
+			node.classList.remove(...tokens);
 		}
 	});
 }

package/src/create-router.svelte.js

@@ -2,12 +2,23 @@ import { BROWSER, DEV } from 'esm-env';
 import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preload, preloadOnHover } from './helpers/preload.js';
-import { constructPath, join, resolveRouteComponents, updatedLocation } from './helpers/utils.js';
+import {
+	constructPath,
+	join,
+	resolveRouteComponents,
+	stripBase,
+	updatedLocation,
+} from './helpers/utils.js';
 import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
 let routes;
 
+/** @type {{ name?: string }} */
+export const base = {
+	name: undefined,
+};
+
 /** @type {{ value: import('svelte').Component[] }} */
 export let componentTree = $state({ value: [] });
 
@@ -21,10 +32,26 @@ let meta = $state({ value: {} });
 let navigationIndex = 0;
 let pendingNavigationIndex = 0;
 
-/** @type {{ name?: string }} */
-export const base = {
-	name: undefined,
-};
+/** @param {string | undefined} basename */
+export function init(basename) {
+	if (basename) {
+		const url = new URL(globalThis.location.toString());
+		if (basename === '#') {
+			base.name = '#';
+			if (!globalThis.location.href.includes('#')) {
+				url.hash = '/';
+				history.replaceState(history.state || {}, '', url.toString());
+			}
+		} else {
+			base.name = (basename.startsWith('/') ? '' : '/') + basename;
+			if (!url.pathname.startsWith(base.name)) {
+				url.pathname = join(base.name, url.pathname);
+				history.replaceState(history.state || {}, '', url.toString());
+			}
+		}
+	}
+	Object.assign(location, updatedLocation());
+}
 
 /**
  * @template {import('./index.d.ts').Routes} T
@@ -60,7 +87,7 @@ export function createRouter(r) {
 				return params.value;
 			},
 			get pathname() {
-				return /** @type {import('./index.d.ts').Path<T>} */ (location.pathname);
+				return /** @type {import('./index.d.ts').Path<T>} */ (stripBase(location.pathname));
 			},
 			get search() {
 				return location.search;
@@ -87,18 +114,39 @@ function navigate(path, options = {}) {
 		globalThis.history.go(path);
 		return;
 	}
-	if (options.params) {
-		path = constructPath(path, options.params);
-	}
+
+	path = constructPath(path, options.params);
 	if (options.search && !options.search.startsWith('?')) {
 		options.search = '?' + options.search;
 	}
-	if (options.hash && !options.hash.startsWith('#')) {
+	if (options.hash && !options.hash.startsWith('#') && base.name !== '#') {
 		options.hash = '#' + options.hash;
 	}
+	if (base.name === '#') {
+		path = new URL(path).hash;
+	}
 	onNavigate(path, options);
 }
 
+/** @param {string} [path] */
+function getMatchPath(path) {
+	let matchPath = '';
+
+	if (path) {
+		matchPath = path;
+	} else if (base.name === '#') {
+		matchPath = globalThis.location.hash.slice(1);
+	} else {
+		matchPath = globalThis.location.pathname;
+	}
+
+	if (base.name && matchPath.startsWith(base.name)) {
+		matchPath = matchPath.slice(base.name.length) || '/';
+	}
+
+	return stripBase(matchPath);
+}
+
 /**
  * @param {string} [path]
  * @param {import('./index.d.ts').NavigateOptions} options
@@ -111,24 +159,35 @@ export async function onNavigate(path, options = {}) {
 	navigationIndex++;
 	const currentNavigationIndex = navigationIndex;
 
-	let matchPath = path || globalThis.location.pathname;
-	if (base.name && matchPath.startsWith(base.name)) {
-		matchPath = matchPath.slice(base.name.length) || '/';
-	}
+	let matchPath = getMatchPath(path);
 	const { match, layouts, hooks, meta: newMeta, params: newParams } = matchRoute(matchPath, routes);
 
-	for (const { beforeLoad } of hooks) {
+	let errorHooks = [];
+	for (const hook of hooks) {
 		try {
+			const { beforeLoad } = hook;
+			errorHooks.push(hook);
 			pendingNavigationIndex = currentNavigationIndex;
-			await beforeLoad?.({ pathname: matchPath, ...options });
-		} catch {
+			await beforeLoad?.({ pathname: matchPath, meta: newMeta, ...options });
+		} catch (error) {
+			for (const { onError } of errorHooks) {
+				void onError?.(error, { pathname: matchPath, meta: newMeta, ...options });
+			}
 			return;
 		}
 	}
 
 	const fromBeforeLoadHook = new Error().stack?.includes('beforeLoad');
 
-	const routeComponents = await resolveRouteComponents(match ? [...layouts, match] : layouts);
+	let routeComponents;
+	try {
+		routeComponents = await resolveRouteComponents(match ? [...layouts, match] : layouts);
+	} catch (error) {
+		for (const { onError } of hooks) {
+			void onError?.(error, { pathname: matchPath, meta: newMeta, ...options });
+		}
+		throw error;
+	}
 	if (
 		navigationIndex !== currentNavigationIndex ||
 		(fromBeforeLoadHook && pendingNavigationIndex + 1 !== currentNavigationIndex)
@@ -137,11 +196,20 @@ export async function onNavigate(path, options = {}) {
 	}
 
 	if (path) {
-		if (options.search) path += options.search;
-		if (options.hash) path += options.hash;
+		let url = new URL(globalThis.location.toString());
+		url.search = '';
+		if (options.search) url.search = options.search;
+		if (base.name === '#') {
+			url.hash = path;
+		} else {
+			if (options.hash) path += options.hash;
+			url.pathname = base.name ? join(base.name, path) : path;
+		}
 		const historyMethod = options.replace ? 'replaceState' : 'pushState';
-		const to = base.name ? join(base.name, path) : path;
-		globalThis.history[historyMethod](options.state || {}, '', to);
+		globalThis.history[historyMethod](options.state || {}, '', url.toString());
+		syncSearchParams(options.search);
+	} else {
+		syncSearchParams(globalThis.location.search);
 	}
 
 	if (options.viewTransition && document.startViewTransition !== undefined) {
@@ -153,7 +221,6 @@ export async function onNavigate(path, options = {}) {
 	}
 	params.value = newParams;
 	meta.value = newMeta;
-	syncSearchParams();
 	Object.assign(location, updatedLocation());
 
 	if (options.scrollToTop !== false) {
@@ -161,7 +228,7 @@ export async function onNavigate(path, options = {}) {
 	}
 
 	for (const { afterLoad } of hooks) {
-		afterLoad?.({ pathname: matchPath, ...options });
+		void afterLoad?.({ pathname: matchPath, meta: newMeta, ...options });
 	}
 }
 
@@ -176,13 +243,16 @@ export function onGlobalClick(event) {
 	const currentOrigin = globalThis.location.origin;
 	if (url.origin !== currentOrigin) return;
 
+	const path = base.name === '#' ? url.hash : url.pathname;
+	const hash = base.name === '#' ? undefined : url.hash;
+
 	event.preventDefault();
 	const { replace, state, scrollToTop, viewTransition } = anchor.dataset;
-	onNavigate(url.pathname, {
+	onNavigate(path, {
 		replace: replace === '' || replace === 'true',
 		search: url.search,
 		state,
-		hash: url.hash,
+		hash,
 		scrollToTop: scrollToTop === 'false' ? false : /** @type ScrollBehavior */ (scrollToTop),
 		viewTransition: viewTransition === '' || viewTransition === 'true',
 	});

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

@@ -177,7 +177,9 @@ export function createRouterCode(routes, routesPath, { allLazy = false } = {}) {
 		`import { createRouter } from 'sv-router';`,
 		...imports,
 		'',
-		`export const { p, navigate, isActive, preload, route } = createRouter(${stringifiedRoutes});`,
+		`const routes = ${stringifiedRoutes};`,
+		'export type Routes = typeof routes;',
+		'export const { p, navigate, isActive, preload, route } = createRouter(routes);',
 	].join('\n');
 }
 

package/src/helpers/is-active.js

@@ -7,7 +7,7 @@ import { constructPath, join } from './utils.js';
  * @returns {boolean}
  */
 export function isActive(pathname, params) {
-	const p = base.name ? join(base.name, pathname) : pathname;
+	const p = base.name && base.name !== '#' ? join(base.name, pathname) : pathname;
 	return compare((a, b) => a === b, p, params);
 }
 
@@ -17,7 +17,7 @@ export function isActive(pathname, params) {
  * @returns {boolean}
  */
 isActive.startsWith = (pathname, params) => {
-	const p = base.name ? join(base.name, pathname) : pathname;
+	const p = base.name && base.name !== '#' ? join(base.name, pathname) : pathname;
 	return compare((a, b) => a.startsWith(b), p, params);
 };
 
@@ -33,11 +33,15 @@ function compare(compareFn, pathname, params) {
 	}
 
 	if (params) {
-		return compareFn(location.pathname, constructPath(pathname, params));
+		if (base.name === '#') {
+			return compareFn(location.pathname, new URL(constructPath(pathname, params)).hash.slice(1));
+		} else {
+			return compareFn(location.pathname, constructPath(pathname, params));
+		}
 	}
 
 	const pathParts = pathname.split('/').slice(1);
-	const routeParts = location.pathname.split('/').slice(1);
+	let routeParts = location.pathname.split('/').slice(1);
 	if (pathParts.length > routeParts.length) {
 		return false;
 	}

package/src/helpers/match-route.js

@@ -109,7 +109,7 @@ export function matchRoute(pathname, routes) {
 
 			const nestedPathname = '/' + pathParts.slice(index + 1).join('/');
 			const result = matchRoute(nestedPathname, routeMatch);
-			if (result) {
+			if (result.match) {
 				match = result.match;
 				params = { ...params, ...result.params };
 				hooks.push(...result.hooks);
@@ -119,6 +119,8 @@ export function matchRoute(pathname, routes) {
 				} else {
 					layouts.push(...result.layouts);
 				}
+			} else {
+				continue;
 			}
 			break outer;
 		}
@@ -141,7 +143,7 @@ export function sortRoutes(routes) {
  */
 function getRoutePriority(route) {
 	if (route === '' || route === '/') return 1;
-	if (route.startsWith('*')) return 4;
+	if (route.includes('*')) return 4;
 	if (route.includes(':')) return 3;
 	return 2;
 }

package/src/helpers/preload.js

@@ -7,9 +7,9 @@ import { resolveRouteComponents } from './utils.js';
  * @param {import('../index.d.ts').NavigateOptions} [options]
  */
 export async function preload(routes, path, options) {
-	const { match, layouts, hooks } = matchRoute(path, routes);
+	const { match, layouts, hooks, meta } = matchRoute(path, routes);
 	for (const { onPreload } of hooks) {
-		onPreload?.({ pathname: path, ...options });
+		void onPreload?.({ pathname: path, meta, ...options });
 	}
 	await resolveRouteComponents(match ? [...layouts, match] : layouts);
 }

package/src/helpers/utils.js

@@ -1,16 +1,26 @@
+import { base } from '../create-router.svelte.js';
+
 /**
  * @param {string} path
  * @param {Record<string, string>} [params]
  * @returns {string}
  */
 export function constructPath(path, params) {
-	if (!params) return path;
+	if (params) {
+		for (const key in params) {
+			path = path.replace(`:${key}`, params[key]);
+		}
+	}
 
-	let result = path;
-	for (const key in params) {
-		result = result.replace(`:${key}`, params[key]);
+	if (base.name === '#') {
+		const url = new URL(globalThis.location.toString());
+		url.hash = path;
+		url.search = '';
+
+		return url.toString();
 	}
-	return result;
+
+	return path;
 }
 
 /**
@@ -42,7 +52,10 @@ function resolveRouteComponent(input) {
  * @returns {input is import('../index.d.ts').LazyRouteComponent}
  */
 export function isLazyImport(input) {
-	return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/.test(String(input));
+	return (
+		typeof input === 'function' &&
+		!!/\(\)\s?=>\s?(import|__vite_ssr_dynamic_import__)\(.*\)/.test(String(input))
+	);
 }
 
 /** @param {...string} parts */
@@ -60,11 +73,25 @@ export function join(...parts) {
 	return result;
 }
 
+/**
+ * @param {string} pathname
+ * @returns {string}
+ */
+export function stripBase(pathname) {
+	if (base.name && pathname.startsWith(base.name)) {
+		pathname = pathname.slice(base.name.length) || '/';
+	}
+	return pathname;
+}
+
 export function updatedLocation() {
+	const pathname =
+		base.name === '#' ? globalThis.location.hash.slice(1) : globalThis.location.pathname;
+	const hash = base.name === '#' ? '' : globalThis.location.hash;
 	return {
-		pathname: globalThis.location.pathname,
+		pathname,
 		search: globalThis.location.search,
 		state: history.state,
-		hash: globalThis.location.hash,
+		hash,
 	};
 }

package/src/index.d.ts

@@ -41,11 +41,12 @@ export const searchParams: SearchParams;
 type BaseProps = {};
 
 export type LazyRouteComponent<Props extends BaseProps = BaseProps> = () => Promise<{
-	default: Component<Props>;
+	default: Component<Props> | Snippet<[Props]>;
 }>;
 
 export type RouteComponent<Props extends BaseProps = any> =
 	| Component<Props>
+	| Snippet<[Props]>
 	| LazyRouteComponent<Props>;
 export type LayoutComponent = RouteComponent<{ children: Snippet }>;
 export type Hooks = {
@@ -64,9 +65,11 @@ export type Hooks = {
 	 */
 	beforeLoad?(context: HooksContext): void | Promise<void>;
 	/** A function that will be called after the route is loaded. */
-	afterLoad?(context: HooksContext): void;
+	afterLoad?(context: HooksContext): void | Promise<void>;
 	/** A function that will be called when the route is preloaded. */
-	onPreload?(context: HooksContext): void;
+	onPreload?(context: HooksContext): void | Promise<void>;
+	/** A function that will be called when the route fails to load. */
+	onError?(error: unknown, context: HooksContext): void | Promise<void>;
 };
 
 export type Routes = {
@@ -79,7 +82,11 @@ export type Routes = {
 
 export type IsActiveLink = Action<
 	HTMLAnchorElement,
-	{ className?: string; startsWith?: boolean } | undefined
+	| {
+			className?: string;
+			startsWith?: boolean;
+	  }
+	| undefined
 >;
 
 /**
@@ -143,7 +150,7 @@ export type RouterApi<T extends Routes> = {
 	 */
 	isActive: {
 		<U extends Path<T>>(...args: IsActiveArgs<U>): boolean;
-		startsWith<U extends Path<T>>(...args: IsActiveArgs<U>): boolean;
+		startsWith<U extends Path<T>>(...args: IsActiveArgs<U, true>): boolean;
 	};
 
 	/**
@@ -190,27 +197,39 @@ export type Path<T extends Routes, AnyParam extends boolean = false> = RemovePar
 	RemoveLastSlash<RecursiveKeys<StripNonRoutes<T>, '', AnyParam>>
 >;
 
-export type ConstructPathArgs<T extends string> =
-	PathParams<T> extends never ? [T] : [T, PathParams<T>];
+export type ConstructPathArgs<TPath extends string> = {
+	[Path in TPath]: PathParams<Path> extends never ? [Path] : [Path, PathParams<Path>];
+}[TPath];
 
-export type IsActiveArgs<T extends string> =
-	PathParams<T> extends never ? [T] : [T] | [T, PathParams<T>];
+export type IsActiveArgs<
+	TPath extends string,
+	StartsWith extends boolean = false,
+> = StartsWith extends true
+	? {
+			[Path in TPath]: PathParams<Path> extends never
+				? [PathPrefixes<Path>]
+				: [PathPrefixes<Path>] | [PathPrefixes<Path>, PathParams<Path>];
+		}[TPath]
+	: {
+			[Path in TPath]: PathParams<Path> extends never ? [Path] : [Path] | [Path, PathParams<Path>];
+		}[TPath];
 
-export type PathParams<T extends string> =
-	ExtractParams<RemoveParenthesis<T>> extends never
+export type PathParams<TPath extends string> =
+	ExtractParams<RemoveParenthesis<TPath>> extends never
 		? never
-		: Record<ExtractParams<RemoveParenthesis<T>>, string>;
+		: Record<ExtractParams<RemoveParenthesis<TPath>>, string>;
 
-export type AllParams<T extends Routes> = Partial<
-	Record<ExtractParams<RemoveParenthesis<RecursiveKeys<T>>>, string>
+export type AllParams<TRoutes extends Routes> = Partial<
+	Record<ExtractParams<RemoveParenthesis<RecursiveKeys<TRoutes>>>, string>
 >;
 
 export type HooksContext = {
+	hash?: string;
+	meta: RouteMeta;
 	pathname: string;
 	replace?: boolean;
 	search?: string;
 	state?: string;
-	hash?: string;
 };
 
 export type NavigateOptions =
@@ -224,7 +243,7 @@ export type NavigateOptions =
 	  }
 	| undefined;
 
-export type SearchParams = URLSearchParams & {
+export type SearchParams = Omit<URLSearchParams, 'append' | 'delete' | 'set' | 'sort'> & {
 	append: (name: string, value: string, options?: { replace?: boolean }) => void;
 	delete: (name: string, value?: string, options?: { replace?: boolean }) => void;
 	set: (name: string, value: string, options?: { replace?: boolean }) => void;
@@ -288,3 +307,15 @@ type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${inf
 				? never
 				: Param
 			: never;
+
+type PathPrefixes<T extends string, Acc extends string = ''> = T extends '/'
+	? '/'
+	: T extends `/${infer Segment}/${infer Rest}`
+		? Acc extends ''
+			? PathPrefixes<`/${Rest}`, `/${Segment}`> | `/${Segment}`
+			: PathPrefixes<`/${Rest}`, `${Acc}/${Segment}`> | `${Acc}/${Segment}` | Acc
+		: T extends `/${infer Segment}`
+			? Acc extends ''
+				? `/${Segment}`
+				: `${Acc}/${Segment}` | Acc
+			: Acc;

package/src/search-params.svelte.js

@@ -55,22 +55,21 @@ const shell = {
 
 export { shell as searchParams };
 
-export function syncSearchParams() {
-	const newSearchParams = new URLSearchParams(globalThis.location.search);
-	if (searchParams.toString() === newSearchParams.toString()) {
-		return;
-	}
-	searchParams = new SvelteURLSearchParams();
-	for (const [key, value] of newSearchParams.entries()) {
-		searchParams.append(key, value);
+/** @param {string} [search] */
+export function syncSearchParams(search) {
+	if (searchParams.toString() !== search) {
+		searchParams = new SvelteURLSearchParams();
+		const newSearchParams = new URLSearchParams(search);
+		for (const [key, value] of newSearchParams.entries()) {
+			searchParams.append(key, value);
+		}
 	}
 }
 
 /** @param {{ replace?: boolean }} [options] */
 function updateUrlSearchParams(options) {
-	let url = globalThis.location.origin + globalThis.location.pathname;
-	if (searchParams.size > 0) {
-		url += '?' + searchParams.toString();
-	}
+	let url = new URL(globalThis.location.toString());
+	url.search = searchParams.toString();
+
 	globalThis.history[options?.replace ? 'replaceState' : 'pushState']({}, '', url);
 }