sv-router 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Modern Svelte routing",
   "keywords": [
     "svelte",
@@ -33,31 +33,31 @@
     "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"
   },
   "scripts": {
-    "ex:basic": "pnpm --filter basic-example",
+    "ex:config-based": "pnpm --filter config-based-example",
     "ex:file-based": "pnpm --filter file-based-example",
     "test": "vitest",
     "check": "tsc --noEmit && pnpm -r check",

package/src/RecursiveComponentTree.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { paramsStore } from './create-router.svelte.js';
+	import { params } from './create-router.svelte.js';
 	import RecursiveComponentTree from './RecursiveComponentTree.svelte';
 
 	/** @type {{ tree: import('svelte').Component[] }} */
@@ -9,7 +9,7 @@
 	const restTree = $derived(tree.slice(1));
 </script>
 
-{#key restTree.length > 0 || Object.values(paramsStore)}
+{#key restTree.length > 0 || Object.values(params.value)}
 	<FirstComponent>
 		{#if restTree.length > 0}
 			<RecursiveComponentTree tree={restTree}></RecursiveComponentTree>

package/src/Router.svelte

@@ -16,4 +16,4 @@
 	});
 </script>
 
-<RecursiveComponentTree tree={componentTree}></RecursiveComponentTree>
+<RecursiveComponentTree tree={componentTree.value}></RecursiveComponentTree>

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/cli/index.js

@@ -5,9 +5,23 @@ import { writeRouterCode } from '../gen/write-router-code.js';
 
 const args = process.argv.slice(2).flatMap((arg) => arg.split('='));
 
-const pathArgIndex = args.indexOf('--path');
-if (pathArgIndex !== -1 && pathArgIndex + 1 < args.length) {
-	genConfig.routesPath = args[pathArgIndex + 1];
+/**
+ * @param {keyof import('../vite-plugin/index.d.ts').RouterOptions} option
+ * @returns
+ */
+function arg(option) {
+	const pathArgIndex = args.indexOf('--' + option);
+	if (pathArgIndex === -1) return;
+	if (pathArgIndex + 1 < args.length) {
+		return args[pathArgIndex + 1];
+	}
+	return args[pathArgIndex];
 }
 
+const pathArg = arg('path');
+if (pathArg) genConfig.routesPath = pathArg;
+
+const jsArg = arg('js');
+if (jsArg) genConfig.routesInJs = true;
+
 writeRouterCode();

package/src/create-router.svelte.js

@@ -1,20 +1,25 @@
 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;
 
-/** @type {import('svelte').Component[]} */
-export const componentTree = $state([]);
+/** @type {{ value: import('svelte').Component[] }} */
+export let componentTree = $state({ value: [] });
 
-/** @type {Record<string, string>} */
-export const paramsStore = $state({});
+/** @type {{ value: Record<string, string> }} */
+export let params = $state({ value: {} });
+
+export let location = $state(updatedLocation());
 
 /**
  * @template {import('./index.d.ts').Routes} T
  * @param {T} r
- * @returns {import('./index.d.ts').RouterMethods<T>}
+ * @returns {import('./index.d.ts').RouterApi<T>}
  */
 export function createRouter(r) {
 	routes = r;
@@ -25,29 +30,67 @@ export function createRouter(r) {
 		});
 	}
 
+	preloadOnHover(routes);
+
 	return {
-		path: constructPath,
-		goto(...args) {
-			const path = constructPath(args[0], args[1]);
-			globalThis.history.pushState({}, '', path);
-			onNavigate();
-		},
-		params() {
-			const readonly = $derived(paramsStore);
-			return readonly;
+		p: constructPath,
+		navigate,
+		isActive,
+		route: {
+			get params() {
+				return params.value;
+			},
+			get pathname() {
+				return location.pathname;
+			},
+			get search() {
+				return location.search;
+			},
+			get state() {
+				return location.state;
+			},
+			get hash() {
+				return location.hash;
+			},
 		},
 	};
 }
 
+/**
+ * @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.');
 	}
-	const { match, layouts, params } = matchRoute(globalThis.location.pathname, routes);
+
+	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) => {
-		Object.assign(componentTree, components);
+		componentTree.value = components;
 	});
-	Object.assign(paramsStore, params);
 }
 
 /** @param {Event} event */
@@ -62,6 +105,17 @@ export function onGlobalClick(event) {
 	if (url.origin !== currentOrigin) return;
 
 	event.preventDefault();
-	globalThis.history.pushState({}, '', anchor.href);
+	const { replace, state } = anchor.dataset;
+	const historyMethod = replace === undefined || replace === 'false' ? 'pushState' : 'replaceState';
+	globalThis.history[historyMethod](state || {}, '', anchor.href);
 	onNavigate();
 }
+
+function updatedLocation() {
+	return {
+		pathname: globalThis.location.pathname,
+		search: globalThis.location.search,
+		state: globalThis.history.state,
+		hash: globalThis.location.hash,
+	};
+}

package/src/gen/config.js

@@ -1,6 +1,7 @@
 /**
  * @type {{
  * 	routesPath: string;
+ * 	routesInJs: boolean;
  * 	readonly genCodeDirPath: string;
  * 	readonly routerPath: string;
  * 	readonly tsconfigPath: string;
@@ -9,8 +10,11 @@
  */
 export const genConfig = {
 	routesPath: 'src/routes',
+	routesInJs: false,
 	genCodeDirPath: '.router',
-	routerPath: '.router/router.ts',
+	get routerPath() {
+		return '.router/router.' + (this.routesInJs ? 'js' : 'ts');
+	},
 	tsconfigPath: '.router/tsconfig.json',
 	genCodeAlias: 'sv-router/generated',
 };

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

@@ -28,16 +28,41 @@ export function generateRouterCode(routesPath) {
 export function buildFileTree(routesPath) {
 	const entries = fs.readdirSync(routesPath);
 	/** @type {FileTree} */
-	const result = [];
+	const tree = [];
 	for (const entry of entries) {
 		const stat = fs.lstatSync(path.join(routesPath, entry));
 		if (stat.isDirectory()) {
-			result.push({ name: entry, tree: buildFileTree(path.join(routesPath, entry)) });
-		} else if (entry.endsWith('.svelte')) {
-			result.push(entry);
+			tree.push({ name: entry, tree: buildFileTree(path.join(routesPath, entry)) });
+			continue;
 		}
+		if (!entry.endsWith('.svelte')) continue;
+		handleFlatFilename(tree, entry);
 	}
-	return result;
+	return tree;
+}
+
+/**
+ * @param {FileTree} tree
+ * @param {string} path
+ */
+function handleFlatFilename(tree, path) {
+	// 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;
+	}
+	const first = /** @type {string} */ (splited.shift());
+	for (const item of tree) {
+		if (typeof item === 'object' && item.name === first) {
+			handleFlatFilename(item.tree, splited.join('.'));
+			return;
+		}
+	}
+	/** @type {FileTree} */
+	const branch = [];
+	handleFlatFilename(branch, splited.join('.'));
+	tree.push({ name: first, tree: branch });
 }
 
 /**
@@ -50,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: {
@@ -97,6 +123,6 @@ export function createRouterCode(routes, routesPath) {
 	return [
 		'import { createRouter } from "sv-router";',
 		'\n\n',
-		`export const { path, goto, params } = 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

@@ -21,8 +21,8 @@ export function matchRoute(pathname, routes) {
 	if (pathname.length > 1 && pathname.endsWith('/')) {
 		pathname = pathname.slice(0, -1);
 	}
-	const pathParts = pathname.split('/');
-	const allRouteParts = sortRoutes(Object.keys(routes)).map((route) => route.split('/'));
+	const pathParts = pathname.split('/').slice(1);
+	const allRoutes = sortRoutes(Object.keys(routes));
 
 	/** @type {RouteComponent | undefined} */
 	let match;
@@ -35,8 +35,11 @@ export function matchRoute(pathname, routes) {
 
 	let breakFromLayouts = false;
 
-	outer: for (const routeParts of allRouteParts) {
-		for (let [index, routePart] of sortRoutes(routeParts).entries()) {
+	outer: for (const route of allRoutes) {
+		const routeParts = route.split('/');
+		if (routeParts[0] === '') routeParts.shift();
+
+		for (let [index, routePart] of routeParts.entries()) {
 			breakFromLayouts = routePart.startsWith('(') && routePart.endsWith(')');
 			if (breakFromLayouts) {
 				routePart = routePart.slice(1, -1);
@@ -45,10 +48,15 @@ export function matchRoute(pathname, routes) {
 			const pathPart = pathParts[index];
 			if (routePart.startsWith(':')) {
 				params[routePart.slice(1)] = pathPart;
-			} else if (routePart === '*') {
-				match = /** @type {RouteComponent} */ (
-					routes[/** @type {keyof Routes} */ (routeParts.join('/'))]
+			} 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('/')
 				);
+				match = /** @type {RouteComponent} */ (routes[resolvedPath]);
 				break outer;
 			} else if (routePart !== pathPart) {
 				break;
@@ -58,31 +66,31 @@ export function matchRoute(pathname, routes) {
 				continue;
 			}
 
+			const routeMatch = /** @type {RouteComponent} */ (
+				routes[/** @type {keyof Routes} */ ('/' + routeParts.join('/'))]
+			);
+
 			if (!breakFromLayouts && 'layout' in routes && routes.layout) {
 				layouts.push(routes.layout);
 			}
 
-			const routeMatch = /** @type {RouteComponent} */ (
-				routes[/** @type {keyof Routes} */ (routeParts.join('/'))]
-			);
-
 			if (typeof routeMatch === 'function') {
 				if (routeParts.length === pathParts.length) {
 					match = routeMatch;
-				} else {
-					continue;
+					break outer;
 				}
-			} else if (routeMatch) {
-				const nestedPathname = '/' + pathParts.slice(index + 1).join('/');
-				const result = matchRoute(nestedPathname, routeMatch);
-				if (result) {
-					match = result.match;
-					params = { ...params, ...result.params };
-					if (result.breakFromLayouts) {
-						layouts = [];
-					} else {
-						layouts.push(...result.layouts);
-					}
+				continue;
+			}
+
+			const nestedPathname = '/' + pathParts.slice(index + 1).join('/');
+			const result = matchRoute(nestedPathname, routeMatch);
+			if (result) {
+				match = result.match;
+				params = { ...params, ...result.params };
+				if (result.breakFromLayouts) {
+					layouts = [];
+				} else {
+					layouts.push(...result.layouts);
 				}
 			}
 			break outer;
@@ -106,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/helpers/preload-on-hover.js

@@ -0,0 +1,28 @@
+import { matchRoute } from './match-route.js';
+import { resolveRouteComponents } from './utils.js';
+
+const linkSet = new Set();
+
+/** @param {import('../index.d.ts').Routes} routes */
+export function preloadOnHover(routes) {
+	const observer = new MutationObserver(() => {
+		const links = document.querySelectorAll('a[data-preload]');
+		for (const link of links) {
+			if (linkSet.has(link)) continue;
+			linkSet.add(link);
+
+			link.addEventListener('mouseenter', function callback() {
+				link.removeEventListener('mouseenter', callback);
+				const href = link.getAttribute('href');
+				if (!href) return;
+				const { match, layouts } = matchRoute(href, routes);
+				resolveRouteComponents(match ? [...layouts, match] : layouts);
+			});
+		}
+	});
+
+	observer.observe(document.body, {
+		subtree: true,
+		childList: true,
+	});
+}

package/src/index.d.ts

@@ -1,18 +1,35 @@
 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.
  *
  * ```js
- * export const { path, goto, params } = createRouter({
+ * export const { p, navigate, route } = createRouter({
  *   '/': Home,
  *   '/about': About,
  *   ...
  * });
  * ```
  */
-export function createRouter<T extends Routes>(r: T): RouterMethods<T>;
+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,14 +45,78 @@ export type LayoutComponent = RouteComponent<{ children: Snippet }>;
 
 export type Routes = {
 	[_: `/${string}`]: RouteComponent | Routes;
-	'*'?: RouteComponent;
+	[_: `*${string}`]: RouteComponent | undefined;
 	layout?: LayoutComponent;
 };
 
-export type RouterMethods<T extends Routes> = {
-	path<U extends Path<T>>(...args: ConstructPathArgs<U>): string;
-	goto<U extends Path<T>>(...args: ConstructPathArgs<U>): void;
-	params(): AllParams<T>;
+export type IsActiveLink = Action<HTMLAnchorElement, { className?: string } | undefined>;
+
+export type RouterApi<T extends Routes> = {
+	/**
+	 * Construct a path while ensuring type safety.
+	 *
+	 * ```js
+	 * p('/users');
+	 * // With parameters
+	 * p('/users/:id', { id: 1 });
+	 * ```
+	 *
+	 * @param route The route to navigate to.
+	 * @param params The parameters to replace in the route.
+	 */
+	p<U extends Path<T>>(...args: ConstructPathArgs<U>): string;
+	/**
+	 * Navigate programatically to a route.
+	 *
+	 * ```js
+	 * navigate('/users');
+	 * // With parameters
+	 * navigate('/users/:id', {
+	 * 	params: {
+	 * 		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;
+		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.
+		 *
+		 * For example, given the route `/posts/:slug/comments/:commentId` and the URL
+		 * `http://localhost:5173/posts/hello-world/comments/123`, the `params` object would be `{ slug:
+		 * 'hello-world', commentId: '123' }`.
+		 */
+		params: AllParams<T>;
+		/** The reactive pathname of the URL. */
+		pathname: string;
+		/** The reactive query string part of the URL. */
+		search: string;
+		/** The reactive history state that can be passed to the `navigate` function. */
+		state: unknown;
+		/** The reactive hash part of the URL. */
+		hash: string;
+	};
 };
 
 export type Path<T extends Routes> = RemoveParenthesis<
@@ -45,15 +126,34 @@ 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>;
 
 export type AllParams<T extends Routes> = Partial<Record<ExtractParams<RecursiveKeys<T>>, string>>;
 
+export type NavigateOptions =
+	| {
+			replace?: boolean;
+			search?: string;
+			state?: string;
+			hash?: `#${string}`;
+	  }
+	| undefined;
+
+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 = ''> = {
@@ -74,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);
+}

package/src/vite-plugin/index.d.ts

@@ -7,6 +7,12 @@ export type RouterOptions = {
 	 * @default 'src/routes'
 	 */
 	path?: string;
+	/**
+	 * If true, generates the routes in a .js file instead of a .ts file.
+	 *
+	 * @default false
+	 */
+	js?: boolean;
 };
 
 export const router: (options?: RouterOptions) => Plugin;

package/src/vite-plugin/plugin.js

@@ -7,9 +7,8 @@ import { writeRouterCode } from '../gen/write-router-code.js';
  * @returns {import('vite').Plugin}
  */
 export function router(options) {
-	if (options?.path) {
-		genConfig.routesPath = options.path;
-	}
+	if (options?.path) genConfig.routesPath = options.path;
+	if (options?.js) genConfig.routesInJs = options.js;
 
 	return {
 		name: 'sv-router',