sv-router 0.15.0 → 0.16.1

package/README.md

@@ -5,10 +5,11 @@
 # sv-router
 
 [![npm](https://badgen.net/npm/v/sv-router)](https://www.npmjs.com/package/sv-router)
-[![install size](https://packagephobia.com/badge?p=sv-router)](https://packagephobia.com/result?p=sv-router)
+![downloads](https://badgen.net/npm/dm/sv-router)
+![size](https://badgen.net/bundlephobia/minzip/sv-router)
 [![codecov](https://codecov.io/github/colinlienard/sv-router/graph/badge.svg?token=C9RBSEFO9S)](https://codecov.io/github/colinlienard/sv-router)
 
-A feature-rich yet intuitive routing library for Svelte single-page apps.
+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)
 
@@ -18,16 +19,14 @@ A feature-rich yet intuitive routing library for Svelte single-page apps.
 
 ## Features
 
-- 🔒 **Typesafe navigation**: Get autocomplete and type checking for your routes.
-- 🔄 **Flexibility**: Choose between code-based or file-based routing approaches.
-- 🌿 **Nested routes**: Create complex layouts with ease.
+- 🔒 **Type-safe navigation**: Catch broken links before you ship.
+- 🗂️ **File-based routing (optional)**: DX of a meta-framework-like approach.
+- 🪶 **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.
 - 🛡️ **Hooks**: For navigation guards, data loading, or analytics tracking.
-- ⚡ **Performance**: Optimized for speed with built-in code splitting and preloading.
-- 🧩 **Familiar API**: Follows established conventions from popular meta frameworks.
-- 🪶 **Lightweight**: Minimal impact on your bundle size.
-- 🚀 **Made for Svelte 5**: True Svelte 5 implementation with the latest features.
-- #️⃣ **Hash-based routing**: Hash-based routing enables usage in local environments.
+- #️⃣ **Hash-based routing**: Works inside Electron/Tauri.
 
 ## Getting Started
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sv-router",
-  "version": "0.15.0",
-  "description": "Modern Svelte Routing",
+  "version": "0.16.1",
+  "description": "Type-safe routing for Svelte SPAs",
   "keywords": [
     "svelte",
     "router",
@@ -28,7 +28,6 @@
       "types": "./src/vite-plugin/index.d.ts"
     }
   },
-  "bin": "./src/cli/index.js",
   "files": [
     "src"
   ],
@@ -36,30 +35,30 @@
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^2.31.0",
     "@eslint/js": "^10.0.1",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.12.0",
-    "@vitest/coverage-v8": "^4.1.0",
-    "eslint": "^10.0.3",
+    "@types/node": "^24.12.3",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^3.15.2",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "eslint-plugin-svelte": "^3.17.1",
     "eslint-plugin-unicorn": "^64.0.0",
-    "globals": "^17.4.0",
-    "happy-dom": "^20.8.4",
-    "prettier": "^3.8.1",
+    "globals": "^17.6.0",
+    "happy-dom": "^20.9.0",
+    "prettier": "^3.8.3",
     "prettier-plugin-jsdoc": "^1.8.0",
     "prettier-plugin-svelte": "^3.5.1",
-    "svelte-check": "^4.4.5",
+    "svelte-check": "^4.4.8",
     "type-testing": "^0.2.0",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.57.1",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.11",
+    "vitest": "^4.1.5"
   },
   "peerDependencies": {
     "svelte": "^5"
@@ -78,5 +77,8 @@
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
     "changeset": "changeset"
+  },
+  "bin": {
+    "sv-router": "./src/cli/index.js"
   }
 }

package/src/Router.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { untrack } from 'svelte';
 	import { on } from 'svelte/events';
 	import {
 		componentTree,
@@ -7,14 +8,19 @@
 		onGlobalClick,
 		onNavigate,
 	} from './create-router.svelte.js';
+	import { getUserState } from './helpers/utils.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
 
 	/** @type {{ base?: string }} */
 	let { base: basename } = $props();
 
-	init(basename);
+	init(untrack(() => basename));
 
-	onNavigate();
+	onNavigate(undefined, {
+		search: location.search,
+		hash: location.hash,
+		state: getUserState(history.state),
+	});
 
 	$effect(() => {
 		const cleanup = [

package/src/attachments.svelte.js

@@ -23,25 +23,3 @@ export function isActiveLink({ className = 'is-active', startsWith = false } = {
 		});
 	};
 }
-
-/** @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/gen/generate-router-code.js

@@ -165,8 +165,14 @@ function mergeRouteGroup(result, childMap) {
 		} else if (!Array.isArray(val)) {
 			routeWithGroupFiles = { ...val };
 		}
-		if (layout) routeWithGroupFiles.layout = /** @type {string} */ (layout);
-		if (hooks) routeWithGroupFiles.hooks = /** @type {string} */ (hooks);
+		if (layout) {
+			if (routeWithGroupFiles.layout) {
+				routeWithGroupFiles = { '/': routeWithGroupFiles, layout: layout };
+			} else {
+				routeWithGroupFiles.layout = layout;
+			}
+		}
+		if (hooks) routeWithGroupFiles.hooks = hooks;
 		if (mergedMeta) routeWithGroupFiles.meta = /** @type {string | string[]} */ (mergedMeta);
 		if (result[key]) {
 			throw new Error(`Route conflict at \`${key}\``);

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

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import { genConfig } from './config.js';
 import { generateRouterCode } from './generate-router-code.js';
 
@@ -10,14 +11,18 @@ export function writeRouterCode() {
 		}
 
 		// Write `.router/tsconfig.json` file
+		const tsMajor = getTypeScriptMajorVersion();
+		const useBaseUrl = tsMajor === undefined || tsMajor < 6;
+		let alias = genConfig.routerPath;
+		if (!useBaseUrl) {
+			alias = alias.replace(genConfig.genCodeDirPath, '.');
+		}
 		const tsConfig = {
 			compilerOptions: {
 				module: 'preserve',
 				moduleResolution: 'bundler',
-				baseUrl: '..',
-				paths: {
-					[genConfig.genCodeAlias]: [genConfig.routerPath],
-				},
+				...(useBaseUrl ? { baseUrl: '..' } : {}),
+				paths: { [genConfig.genCodeAlias]: [alias] },
 			},
 			include: [
 				'../src/**/*.js',
@@ -62,3 +67,14 @@ function writeFileIfDifferent(filePath, content) {
 		return true;
 	}
 }
+
+function getTypeScriptMajorVersion() {
+	try {
+		const require = createRequire(process.cwd() + '/package.json');
+		const tsPackagePath = require.resolve('typescript/package.json');
+		const tsPackage = JSON.parse(fs.readFileSync(tsPackagePath, 'utf8'));
+		return Number(tsPackage.version.split('.')[0]);
+	} catch {
+		return;
+	}
+}

package/src/helpers/utils.js

@@ -104,7 +104,7 @@ export function stripBase(pathname) {
 }
 
 /** @param {any} state */
-function getUserState(state) {
+export function getUserState(state) {
 	if (state && '_userState' in state) {
 		return state._userState;
 	}

package/src/index.d.ts

@@ -2,19 +2,6 @@ import type { Component, Snippet } from 'svelte';
 import type { Action } from 'svelte/action';
 import type { Attachment } from 'svelte/attachments';
 
-/**
- * @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
@@ -329,6 +316,7 @@ export type SearchParams = Omit<
 	getAll(name: string): (string | number | boolean)[];
 	set(name: string, value: string | number | boolean, options?: { replace?: boolean }): void;
 	sort(options?: { replace?: boolean }): void;
+	toURLSearchParams(): URLSearchParams;
 	values(): (string | number | boolean)[];
 };
 

package/src/index.js

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

package/src/search-params.svelte.js

@@ -47,6 +47,9 @@ const shell = {
 	values() {
 		return [...searchParams.values()].map(parseSearchValue);
 	},
+	toURLSearchParams() {
+		return new URLSearchParams(searchParams);
+	},
 	get size() {
 		return searchParams.size;
 	},
@@ -66,7 +69,8 @@ export function syncSearchParams(search) {
 	for (const [key, value] of newSearch) {
 		searchParams.set(key, value);
 	}
-	for (const key of searchParams.keys()) {
+	// eslint-disable-next-line unicorn/no-useless-spread
+	for (const key of [...searchParams.keys()]) {
 		if (!newSearch.has(key)) {
 			searchParams.delete(key);
 		}