sv-router 0.16.2 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Type-safe routing for Svelte SPAs",
   "keywords": [
     "router",
@@ -41,22 +41,22 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.12.3",
-    "@vitest/coverage-v8": "^4.1.5",
-    "eslint": "^10.3.0",
+    "@types/node": "^24.12.4",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-simple-import-sort": "^13.0.0",
-    "eslint-plugin-svelte": "^3.17.1",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-svelte": "^3.18.0",
+    "eslint-plugin-unicorn": "^65.0.1",
     "globals": "^17.6.0",
     "happy-dom": "^20.9.0",
-    "oxfmt": "^0.49.0",
+    "oxfmt": "^0.52.0",
     "svelte-check": "^4.4.8",
     "type-testing": "^0.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.11",
-    "vitest": "^4.1.5"
+    "typescript-eslint": "^8.60.0",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "svelte": "^5"

package/src/cli/index.js

@@ -23,6 +23,7 @@ function parseViteConfig() {
 	if (!routerConfig) return;
 	console.log('ℹ️ Using router plugin options from Vite config');
 	if (routerConfig.allLazy) genConfig.allLazy = routerConfig.allLazy;
+	if (routerConfig.base) genConfig.base = routerConfig.base;
 	if (routerConfig.js) genConfig.routesInJs = routerConfig.js;
 	if (routerConfig.path) genConfig.routesPath = routerConfig.path;
 	if (routerConfig.ignore) genConfig.ignore = routerConfig.ignore;
@@ -58,6 +59,9 @@ function parseArgs() {
 	const allLazyArg = arg('allLazy');
 	if (allLazyArg) genConfig.allLazy = true;
 
+	const baseArg = arg('base');
+	if (baseArg) genConfig.base = baseArg;
+
 	const jsArg = arg('js');
 	if (jsArg) genConfig.routesInJs = true;
 

package/src/create-router.svelte.js

@@ -62,30 +62,42 @@ let pendingController = /** @type {AbortController | null} */ (null);
 /** @type {Promise<void | null> | null} */
 let currentNavigationPromise = null;
 
+/** @param {string} basename */
+function setBase(basename) {
+	const url = new URL(globalThis.location.toString());
+	if (basename === '#') {
+		base.name = '#';
+		if (!globalThis.location.href.includes('#')) {
+			url.hash = '/';
+			history.replaceState(
+				{ _routerIndex: historyIndex, _userState: history.state ?? null },
+				'',
+				url.toString(),
+			);
+		}
+	} else {
+		base.name = (basename.startsWith('/') ? '' : '/') + basename;
+		if (!url.pathname.startsWith(base.name)) {
+			url.pathname = join(base.name, url.pathname);
+			history.replaceState(
+				{ _routerIndex: historyIndex, _userState: history.state ?? null },
+				'',
+				url.toString(),
+			);
+		}
+	}
+	Object.assign(location, updatedLocation());
+}
+
 /** @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(
-					{ _routerIndex: historyIndex, _userState: history.state ?? null },
-					'',
-					url.toString(),
-				);
-			}
-		} else {
-			base.name = (basename.startsWith('/') ? '' : '/') + basename;
-			if (!url.pathname.startsWith(base.name)) {
-				url.pathname = join(base.name, url.pathname);
-				history.replaceState(
-					{ _routerIndex: historyIndex, _userState: history.state ?? null },
-					'',
-					url.toString(),
-				);
-			}
+		if (base.name === undefined) {
+			setBase(basename);
+		} else if (DEV && base.name !== basename && `/${basename}` !== base.name) {
+			console.warn(
+				'sv-router: the `base` prop on `<Router>` is ignored because a base was already set in `createRouter`.',
+			);
 		}
 	}
 	if (history.state?._routerIndex === undefined) {
@@ -103,11 +115,16 @@ export function init(basename) {
 /**
  * @template {import('./index.d.ts').Routes} T
  * @param {T} r
+ * @param {import('./index.d.ts').CreateRouterOptions} [options]
  * @returns {import('./index.d.ts').RouterApi<T>}
  */
-export function createRouter(r) {
+export function createRouter(r, options = {}) {
 	routes = r;
 
+	if (BROWSER && options.base) {
+		setBase(options.base);
+	}
+
 	if (DEV && BROWSER) {
 		import('./helpers/validate-routes.js').then(({ validateRoutes }) => {
 			validateRoutes(routes);
@@ -229,8 +246,9 @@ export async function onNavigate(path, options = {}) {
 	const matchPath = getMatchPath(path);
 	const { match, layouts, hooks, meta: newMeta, params: newParams } = matchRoute(matchPath, routes);
 
-	const search = parseSearch(options.search);
-	const hooksContext = { pathname: matchPath, meta: newMeta, ...options, search };
+	const navContext = path ? options : { ...options, ...updatedLocation() };
+	const search = parseSearch(navContext.search);
+	const hooksContext = { ...navContext, pathname: matchPath, meta: newMeta, search };
 
 	let errorHooks = [];
 	for (const hook of hooks) {

package/src/gen/config.js

@@ -1,6 +1,7 @@
 /**
  * @type {{
  * 	allLazy: boolean;
+ * 	base: string | undefined;
  * 	ignore: RegExp[];
  * 	readonly genCodeAlias: string;
  * 	readonly genCodeDirPath: string;
@@ -12,6 +13,7 @@
  */
 export const genConfig = {
 	allLazy: false,
+	base: undefined,
 	genCodeAlias: 'sv-router/generated',
 	genCodeDirPath: '.router',
 	ignore: [],

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

@@ -19,7 +19,7 @@ const META_FILENAME_REGEX = /(?<=[/.]|^)(meta)(\.svelte)?\.(js|ts)$/; // meta.js
 
 /**
  * @param {string} routesPath
- * @param {{ allLazy?: boolean; js?: boolean; ignore?: RegExp[] }} [options]
+ * @param {{ allLazy?: boolean; base?: string; js?: boolean; ignore?: RegExp[] }} [options]
  * @returns {string}
  */
 export function generateRouterCode(routesPath, options) {
@@ -149,7 +149,7 @@ function mergeRouteGroup(result, childMap) {
 	const hasRootRoute = '/' in childMap;
 
 	for (const [key, val] of Object.entries(childMap)) {
-		if (key === 'layout' || key === 'hooks' || key === 'meta') {
+		if (['layout', 'hooks', 'meta'].includes(key)) {
 			continue;
 		}
 
@@ -185,10 +185,10 @@ function mergeRouteGroup(result, childMap) {
 /**
  * @param {GeneratedRoutes} routes
  * @param {string} routesPath
- * @param {{ allLazy?: boolean; js?: boolean }} [options]
+ * @param {{ allLazy?: boolean; base?: string; js?: boolean }} [options]
  * @returns {string}
  */
-export function createRouterCode(routes, routesPath, { allLazy = false, js = false } = {}) {
+export function createRouterCode(routes, routesPath, { allLazy = false, base, js = false } = {}) {
 	if (!routesPath.endsWith('/')) {
 		routesPath += '/';
 	}
@@ -240,7 +240,9 @@ export function createRouterCode(routes, routesPath, { allLazy = false, js = fal
 		'',
 		`export const routes = ${stringifiedRoutes};`,
 		...(js ? [] : ['export type Routes = typeof routes;']),
-		'export const { p, navigate, isActive, preload, route } = createRouter(routes);',
+		`export const { p, navigate, isActive, preload, route } = createRouter(routes${
+			base === undefined ? '' : `, { base: '${base}' }`
+		});`,
 		'',
 	].join('\n');
 }

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

@@ -39,6 +39,7 @@ export function writeRouterCode() {
 		// Write `.router/router.ts` file
 		const routerCode = generateRouterCode(genConfig.routesPath, {
 			allLazy: genConfig.allLazy,
+			base: genConfig.base,
 			js: genConfig.routesInJs,
 			ignore: genConfig.ignore,
 		});
@@ -73,7 +74,7 @@ function getTypeScriptMajorVersion() {
 		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]);
+		return Number(tsPackage.version.split('.', 1)[0]);
 	} catch {
 		return;
 	}

package/src/helpers/utils.js

@@ -8,7 +8,7 @@ import { base } from '../create-router.svelte.js';
 export function constructPath(path, params) {
 	if (params) {
 		for (const key in params) {
-			path = path.replace(`:${key}`, String(params[key]));
+			path = path.replace(`:${key}`, encodeURIComponent(params[key]));
 		}
 	}
 
@@ -68,7 +68,7 @@ function resolveRouteComponent(input) {
 
 /**
  * @param {unknown} input
- * @returns {input is import("../index.d.ts").LazyRouteComponent}
+ * @returns {input is import('../index.d.ts').LazyRouteComponent}
  */
 export function isLazyImport(input) {
 	return (

package/src/index.d.ts

@@ -26,8 +26,19 @@ export function serializeSearch(search: Search): string | undefined;
  *   ...
  * });
  * ```
+ *
+ * A base path can be provided as an option:
+ *
+ * ```js
+ * export const { p, ... } = createRouter({ ... }, { base: 'my-app' });
+ * ```
  */
-export function createRouter<T extends Routes>(r: T): RouterApi<T>;
+export function createRouter<T extends Routes>(r: T, options?: CreateRouterOptions): RouterApi<T>;
+
+export type CreateRouterOptions = {
+	/** The base path that is prepended to every URL. Use `'#'` to enable hash-based routing. */
+	base?: string;
+};
 
 /**
  * Blocks navigation as long as the callback returns `false`.
@@ -66,11 +77,16 @@ export function blockNavigation(
 		| { beforeUnload?(): boolean; onNavigate(): boolean | Promise<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.
- */
-export const Router: Component<{ base?: string }>;
+/** The component that will render the current route. */
+export const Router: Component<{
+	/**
+	 * The base path that is prepended to every URL.
+	 *
+	 * @deprecated Use the `base` option of `createRouter` (or of the Vite plugin for file-based
+	 *   routing) instead.
+	 */
+	base?: string;
+}>;
 
 /**
  * The reactive search params of the URL. It is just a wrapper around `SvelteURLSearchParam` that

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

@@ -7,6 +7,12 @@ export type RouterOptions = {
 	 * @default false
 	 */
 	allLazy?: boolean;
+	/**
+	 * The base path that is prepended to every URL. Use `'#'` to enable hash-based routing.
+	 *
+	 * @default undefined
+	 */
+	base?: string;
 	/**
 	 * If true, generates the routes in a .js file instead of a .ts file.
 	 *

package/src/vite-plugin/plugin.js

@@ -8,6 +8,7 @@ import { writeRouterCode } from '../gen/write-router-code.js';
  */
 export function router(options) {
 	genConfig.allLazy = options?.allLazy || false;
+	genConfig.base = options?.base;
 	genConfig.ignore = options?.ignore || [];
 	genConfig.routesInJs = options?.js || false;
 	genConfig.routesPath = options?.path || 'src/routes';