sv-router 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Modern Svelte routing",
   "keywords": [
     "svelte",
@@ -33,25 +33,25 @@
     "src"
   ],
   "dependencies": {
-    "esm-env": "^1.2.1"
+    "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.10",
-    "@eslint/js": "^9.16.0",
-    "@types/node": "^22.10.1",
-    "eslint-config-prettier": "^9.1.0",
+    "@changesets/cli": "^2.27.11",
+    "@eslint/js": "^9.18.0",
+    "@types/node": "^22.10.7",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-svelte": "^2.46.1",
     "eslint-plugin-unicorn": "^56.0.1",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-jsdoc": "^1.3.0",
-    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-jsdoc": "^1.3.2",
+    "prettier-plugin-svelte": "^3.3.3",
     "type-testing": "^0.2.0",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0",
-    "vite": "^6.0.3",
-    "vitest": "^2.1.8"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.2"
   },
   "peerDependencies": {
     "svelte": "^5"

package/src/actions.svelte.js

@@ -0,0 +1,17 @@
+import { location } from './create-router.svelte.js';
+
+/** @type {import('./index.d.ts').IsActiveLink} */
+export function isActiveLink(node, { className = 'is-active' } = {}) {
+	if (node.tagName !== 'A') {
+		throw new Error('isActiveLink can only be used on <a> elements');
+	}
+
+	$effect(() => {
+		const pathname = new URL(node.href).pathname;
+		if (pathname === location.pathname) {
+			node.classList.add(className);
+		} else {
+			node.classList.remove(className);
+		}
+	});
+}

package/src/create-router.svelte.js

@@ -1,7 +1,9 @@
 import { BROWSER, DEV } from 'esm-env';
+import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preloadOnHover } from './helpers/preload-on-hover.js';
 import { constructPath, resolveRouteComponents } from './helpers/utils.js';
+import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
 export let routes;
@@ -12,7 +14,7 @@ export let componentTree = $state({ value: [] });
 /** @type {{ value: Record<string, string> }} */
 export let params = $state({ value: {} });
 
-let location = $state(updatedLocation());
+export let location = $state(updatedLocation());
 
 /**
  * @template {import('./index.d.ts').Routes} T
@@ -32,24 +34,8 @@ export function createRouter(r) {
 
 	return {
 		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();
-		},
+		navigate,
+		isActive,
 		route: {
 			get params() {
 				return params.value;
@@ -70,11 +56,36 @@ export function createRouter(r) {
 	};
 }
 
+/**
+ * @param {string} path
+ * @param {import('./index.d.ts').NavigateOptions & { params?: Record<string, string> }} options
+ */
+function navigate(path, options = {}) {
+	if (options.params) {
+		path = constructPath(path, options.params);
+	}
+	if (options.search) {
+		path += (options.search.startsWith('?') ? '' : '?') + options.search;
+	}
+	if (options.hash) {
+		path += options.hash;
+	}
+	const historyMethod = options.replace ? 'replaceState' : 'pushState';
+	globalThis.history[historyMethod](options.state || {}, '', path);
+	onNavigate();
+}
+navigate.back = () => globalThis.history.back();
+navigate.forward = () => globalThis.history.forward();
+
 export function onNavigate() {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
-	location = updatedLocation();
+
+	syncSearchParams();
+
+	Object.assign(location, updatedLocation());
+
 	const { match, layouts, params: newParams } = matchRoute(globalThis.location.pathname, routes);
 	params.value = newParams || {};
 	resolveRouteComponents(match ? [...layouts, match] : layouts).then((components) => {

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

@@ -46,7 +46,8 @@ export function buildFileTree(routesPath) {
  * @param {string} path
  */
 function handleFlatFilename(tree, path) {
-	const splited = path.split('.');
+	// Split the path by the first dot that is not preceded or followed by another dot
+	const splited = path.split(/(?<!\.)\.(?!\.)/);
 	if (splited.length === 2) {
 		tree.push(path);
 		return;
@@ -74,17 +75,18 @@ export function createRouteMap(fileTree, prefix = '') {
 	const result = {};
 	for (const entry of fileTree) {
 		if (typeof entry === 'string') {
-			switch (entry) {
-				case 'index.svelte': {
+			const catchAll = /\[\.\.\.(.*)\]\.svelte/g.exec(entry); // Match [...slug].svelte
+			switch (true) {
+				case entry === 'index.svelte': {
 					result['/'] = prefix + entry;
 					break;
 				}
-				case '*.svelte': {
-					result['*'] = prefix + entry;
+				case entry === 'layout.svelte': {
+					result['layout'] = prefix + entry;
 					break;
 				}
-				case '_layout.svelte': {
-					result['layout'] = prefix + entry;
+				case !!catchAll: {
+					result['*' + catchAll[1]] = prefix + entry;
 					break;
 				}
 				default: {
@@ -121,6 +123,6 @@ export function createRouterCode(routes, routesPath) {
 	return [
 		'import { createRouter } from "sv-router";',
 		'\n\n',
-		`export const { p, navigate, route } = createRouter(${withImports});`,
+		`export const { p, navigate, isActive, route } = createRouter(${withImports});`,
 	].join('');
 }

package/src/helpers/is-active.js

@@ -0,0 +1,31 @@
+import { location } from '../create-router.svelte.js';
+import { constructPath } from './utils.js';
+
+/**
+ * @param {string} pathname
+ * @param {Record<string, string>} [params]
+ * @returns {boolean}
+ */
+export function isActive(pathname, params) {
+	if (!pathname.includes(':')) {
+		return pathname === location.pathname;
+	}
+
+	if (params) {
+		return constructPath(pathname, params) === location.pathname;
+	}
+
+	const pathParts = pathname.split('/').slice(1);
+	const routeParts = location.pathname.split('/').slice(1);
+	if (pathParts.length !== routeParts.length) {
+		return false;
+	}
+	for (const [index, pathPart] of pathParts.entries()) {
+		const routePart = routeParts[index];
+		if (routePart.startsWith(':')) {
+			continue;
+		}
+		return pathPart === routePart;
+	}
+	return false;
+}

package/src/helpers/match-route.js

@@ -48,7 +48,11 @@ export function matchRoute(pathname, routes) {
 			const pathPart = pathParts[index];
 			if (routePart.startsWith(':')) {
 				params[routePart.slice(1)] = pathPart;
-			} else if (routePart === '*') {
+			} else if (routePart.startsWith('*')) {
+				const param = routePart.slice(1);
+				if (param) {
+					params[param] = pathParts.slice(index).join('/');
+				}
 				const resolvedPath = /** @type {keyof Routes} */ (
 					(index ? '/' : '') + routeParts.join('/')
 				);
@@ -110,7 +114,7 @@ export function sortRoutes(routes) {
  */
 function getRoutePriority(route) {
 	if (route === '' || route === '/') return 1;
-	if (route === '*') return 4;
+	if (route.startsWith('*')) return 4;
 	if (route.includes(':')) return 3;
 	return 2;
 }

package/src/index.d.ts

@@ -1,5 +1,16 @@
 import type { Component, Snippet } from 'svelte';
+import type { Action } from 'svelte/action';
 
+/**
+ * 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`.
+ *
+ * ```svelte
+ * <a href="/about" use:isActiveLink={{ className: 'active-link' }}>
+ * ```
+ */
+export const isActiveLink: IsActiveLink;
 /**
  * Setup a new router instance with the given routes.
  *
@@ -12,7 +23,13 @@ import type { Component, Snippet } from 'svelte';
  * ```
  */
 export function createRouter<T extends Routes>(r: T): RouterApi<T>;
+/** The component that will render the current route. */
 export const Router: Component;
+/**
+ * The reactive search params of the URL. It is just a wrapper around `SvelteURLSearchParam` that
+ * will update the url on change.
+ */
+export const searchParams: URLSearchParams;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type BaseProps = {};
@@ -28,10 +45,12 @@ export type LayoutComponent = RouteComponent<{ children: Snippet }>;
 
 export type Routes = {
 	[_: `/${string}`]: RouteComponent | Routes;
-	'*'?: RouteComponent;
+	[_: `*${string}`]: RouteComponent | undefined;
 	layout?: LayoutComponent;
 };
 
+export type IsActiveLink = Action<HTMLAnchorElement, { className?: string } | undefined>;
+
 export type RouterApi<T extends Routes> = {
 	/**
 	 * Construct a path while ensuring type safety.
@@ -57,12 +76,29 @@ export type RouterApi<T extends Routes> = {
 	 * 		id: 1,
 	 * 	},
 	 * });
+	 * // Back and forward
+	 * navigate.back();
+	 * navigate.forward();
 	 * ```
 	 *
 	 * @param route The route to navigate to.
 	 * @param options The navigation options.
 	 */
-	navigate<U extends Path<T>>(...args: NavigateArgs<U>): void;
+	navigate: {
+		<U extends Path<T>>(...args: NavigateArgs<U>): void;
+		back: () => void;
+		forward: () => void;
+	};
+	/**
+	 * Will return `true` if the given path is active.
+	 *
+	 * Can be used with params to check the exact path, or without to check for any params in the
+	 * path.
+	 *
+	 * @param path The route to check.
+	 * @param params The optional parameters to replace in the route.
+	 */
+	isActive<U extends Path<T>>(...args: IsActiveArgs<U>): boolean;
 	route: {
 		/**
 		 * An object containing the parameters of the current route.
@@ -90,6 +126,9 @@ export type Path<T extends Routes> = RemoveParenthesis<
 export type ConstructPathArgs<T extends string> =
 	PathParams<T> extends never ? [T] : [T, PathParams<T>];
 
+export type IsActiveArgs<T extends string> =
+	PathParams<T> extends never ? [T] : [T] | [T, PathParams<T>];
+
 export type PathParams<T extends string> =
 	ExtractParams<T> extends never ? never : Record<ExtractParams<T>, string>;
 
@@ -104,15 +143,17 @@ export type NavigateOptions =
 	  }
 	| undefined;
 
-export type NavigateArgs<T extends string> =
+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]>
-		: T[K];
+	[K in keyof T as K extends `*${string}`
+		? never
+		: K extends 'layout'
+			? never
+			: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
 };
 
 type RecursiveKeys<T extends Routes, Prefix extends string = ''> = {
@@ -133,4 +174,8 @@ type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${inf
 	? Param | ExtractParams<`/${Rest}`>
 	: T extends `${string}:${infer Param}`
 		? Param
-		: never;
+		: T extends `${string}*${infer Param}`
+			? Param extends ''
+				? never
+				: Param
+			: never;

package/src/index.js

@@ -1,2 +1,4 @@
+export { isActiveLink } from './actions.svelte.js';
 export { createRouter } from './create-router.svelte.js';
 export { default as Router } from './Router.svelte';
+export { searchParams } from './search-params.svelte.js';

package/src/search-params.svelte.js

@@ -0,0 +1,78 @@
+import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+let searchParams = new SvelteURLSearchParams(globalThis.location.search);
+
+/** @type {URLSearchParams} */
+const shell = {
+	append(...args) {
+		searchParams.append(...args);
+		updateUrlSearchParams();
+	},
+	delete(...args) {
+		searchParams.delete(...args);
+		updateUrlSearchParams();
+	},
+	entries() {
+		return searchParams.entries();
+	},
+	forEach(...args) {
+		// eslint-disable-next-line unicorn/no-array-for-each
+		return searchParams.forEach(...args);
+	},
+	get(...args) {
+		return searchParams.get(...args);
+	},
+	getAll(...args) {
+		return searchParams.getAll(...args);
+	},
+	has(...args) {
+		return searchParams.has(...args);
+	},
+	keys() {
+		return searchParams.keys();
+	},
+	set(...args) {
+		searchParams.set(...args);
+		updateUrlSearchParams();
+	},
+	sort() {
+		searchParams.sort();
+		updateUrlSearchParams();
+	},
+	toString() {
+		return searchParams.toString();
+	},
+	values() {
+		return searchParams.values();
+	},
+	get size() {
+		return searchParams.size;
+	},
+	[Symbol.iterator]() {
+		return searchParams[Symbol.iterator]();
+	},
+};
+
+export { shell as searchParams };
+
+export function syncSearchParams() {
+	const newSearchParams = new URLSearchParams(globalThis.location.search);
+	if (searchParams.toString() === newSearchParams.toString()) {
+		return;
+	}
+
+	for (const key of searchParams.keys()) {
+		searchParams.delete(key);
+	}
+	for (const [key, value] of newSearchParams.entries()) {
+		searchParams.append(key, value);
+	}
+}
+
+function updateUrlSearchParams() {
+	let url = globalThis.location.origin + globalThis.location.pathname;
+	if (searchParams.size > 0) {
+		url += '?' + searchParams.toString();
+	}
+	globalThis.history.pushState({}, '', url);
+}