sv-router 0.11.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -48,7 +48,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-svelte": "^3.13.1",
     "eslint-plugin-unicorn": "^62.0.0",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "happy-dom": "^20.0.11",
     "prettier": "^3.7.4",
     "prettier-plugin-jsdoc": "^1.8.0",

package/src/cli/index.js

@@ -1,13 +1,76 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
 import { genConfig } from '../gen/config.js';
 import { writeRouterCode } from '../gen/write-router-code.js';
 
 const args = process.argv.slice(2).flatMap((arg) => arg.split('='));
 
+if (args.length > 0) {
+	parseArgs();
+} else {
+	parseViteConfig();
+}
+
+writeRouterCode();
+
+function parseViteConfig() {
+	const viteConfig = readViteConfig('ts') || readViteConfig('js');
+	if (!viteConfig) return;
+	const routerConfig = extractRouterConfig(viteConfig);
+	if (!routerConfig) return;
+	console.log('ℹ️ Using router plugin options from Vite config');
+	if (routerConfig.allLazy) genConfig.allLazy = routerConfig.allLazy;
+	if (routerConfig.js) genConfig.routesInJs = routerConfig.js;
+	if (routerConfig.path) genConfig.routesPath = routerConfig.path;
+	if (routerConfig.ignore) genConfig.ignore = routerConfig.ignore;
+}
+
+/**
+ * @param {'js' | 'ts'} extension
+ * @returns {string | undefined}
+ */
+function readViteConfig(extension) {
+	const vitePath = path.join(process.cwd(), 'vite.config.' + extension);
+	if (existsSync(vitePath)) {
+		return readFileSync(vitePath, 'utf8');
+	}
+}
+
+/**
+ * @param {string} viteConfig
+ * @returns {import('../vite-plugin/index.d.ts').RouterOptions | undefined}
+ */
+function extractRouterConfig(viteConfig) {
+	const regex = /router\(\s*([^)]+)\)/;
+	const match = viteConfig.match(regex);
+	if (!match) return;
+	try {
+		return new Function(`return ${match[1]}`)();
+	} catch (error) {
+		console.error('⚠️ Error parsing router config:', error);
+	}
+}
+
+function parseArgs() {
+	const allLazyArg = arg('allLazy');
+	if (allLazyArg) genConfig.allLazy = true;
+
+	const jsArg = arg('js');
+	if (jsArg) genConfig.routesInJs = true;
+
+	const pathArg = arg('path');
+	if (pathArg) genConfig.routesPath = pathArg;
+
+	const ignoreArg = arg('ignore');
+	if (ignoreArg) genConfig.ignore = ignoreArg.split(',').map((ignore) => new RegExp(ignore, 'gu'));
+}
+
 /**
  * @param {keyof import('../vite-plugin/index.d.ts').RouterOptions} option
- * @returns
+ * @returns {string | undefined}
  */
 function arg(option) {
 	const pathArgIndex = args.indexOf('--' + option);
@@ -17,17 +80,3 @@ function arg(option) {
 	}
 	return args[pathArgIndex];
 }
-
-const allLazyArg = arg('allLazy');
-if (allLazyArg) genConfig.allLazy = true;
-
-const jsArg = arg('js');
-if (jsArg) genConfig.routesInJs = true;
-
-const pathArg = arg('path');
-if (pathArg) genConfig.routesPath = pathArg;
-
-const ignoreArg = arg('ignore');
-if (ignoreArg) genConfig.ignore = ignoreArg.split(',').map((ignore) => new RegExp(ignore, 'gu'));
-
-writeRouterCode();

package/src/create-router.svelte.js

@@ -43,6 +43,9 @@ let params = $state({ value: {} });
 
 let meta = $state({ value: {} });
 
+/** @type {(() => boolean) | null} */
+let navigationBlocker = null;
+
 let navigationIndex = 0;
 let pendingNavigationIndex = 0;
 
@@ -151,6 +154,22 @@ export async function onNavigate(path, options = {}) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
 
+	if (navigationBlocker) {
+		if (!navigationBlocker()) {
+			const url = new URL(globalThis.location.toString());
+			url.search = location.search;
+			url.hash = location.hash;
+			if (base.name === '#') {
+				url.hash = location.pathname;
+			} else {
+				url.pathname = location.pathname;
+			}
+			globalThis.history.replaceState($state.snapshot(location.state) || {}, '', url.toString());
+			return;
+		}
+		navigationBlocker = null;
+	}
+
 	navigationIndex++;
 	const currentNavigationIndex = navigationIndex;
 
@@ -292,3 +311,8 @@ export function onGlobalClick(event) {
 		viewTransition: viewTransition === '' || viewTransition === 'true',
 	});
 }
+
+/** @param {() => boolean} callback */
+export function blockNavigation(callback) {
+	navigationBlocker = callback;
+}

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

@@ -10,6 +10,7 @@ import path from 'node:path';
  */
 
 const FILENAME_REGEX = /(?<=[/.]|^)\(?([\w-]+)\)?(\.lazy)?\.svelte$/; // any.svelte, any.lazy.svelte, (any).svelte
+const INDEX_FILENAME_REGEX = /(?<=[/.]|^)\(?index\)?(\.lazy)?\.svelte$/; // index.svelte, index.lazy.svelte, (index).svelte
 const PARAM_FILENAME_REGEX = /(?<=[/.]|^)\(?\[([\w-]+)\]\)?(\.lazy)?\.svelte$/; // [any].svelte, [any].lazy.svelte, ([any]).svelte
 const CATCH_ALL_FILENAME_REGEX = /(?<=[/.]|^)\(?\[\.\.\.([\w-]+)\]\)?(\.lazy)?\.svelte$/; // [...any].svelte, [...any].lazy.svelte, ([...any]).svelte
 const OUT_OF_LAYOUT_FILENAME_REGEX = /(?<=[/.]|^)\(\[\.?\.?\.?([\w-]+)\]\)(\.lazy)?\.svelte$/; // ([any]).svelte, ([...any]).lazy.svelte
@@ -81,8 +82,9 @@ export function createRouteMap(fileTree, prefix = '') {
 				continue;
 			}
 
-			if (entry.endsWith('index.svelte') || entry.endsWith('index.lazy.svelte')) {
-				const indexEntry = entry.replace(/\.?index(\.lazy)?\.svelte/, '');
+			if (INDEX_FILENAME_REGEX.test(entry)) {
+				const replacement = /\.?\(index\)(\.lazy)?\.svelte/.test(entry) ? '()' : '';
+				const indexEntry = entry.replace(/\.?\(?index\)?(\.lazy)?\.svelte/, replacement);
 				result['/' + (indexEntry ? filePathToRoute(indexEntry) : '')] = prefix + entry;
 				continue;
 			}

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

@@ -40,13 +40,13 @@ export function writeRouterCode() {
 		const written = writeFileIfDifferent(genConfig.routerPath, routerCode);
 
 		if (written) {
-			console.log('✅️ Routes generated');
+			console.log('❇️ Routes generated');
 		} else {
 			console.log('✅️ Routes already up to date');
 		}
 	} catch (error) {
 		console.error(
-			'Error during routes generation:',
+			'⚠️ Error during routes generation:',
 			error instanceof Error ? error.message : String(error),
 		);
 	}

package/src/helpers/match-route.js

@@ -64,11 +64,11 @@ export function matchRoute(pathname, routes) {
 
 			const pathPart = pathParts[index];
 			if (routePart.startsWith(':')) {
-				params[routePart.slice(1)] = pathPart;
+				params[routePart.slice(1)] = decodeURIComponent(pathPart);
 			} else if (routePart.startsWith('*')) {
 				const param = routePart.slice(1);
 				if (param) {
-					params[param] = pathParts.slice(index).join('/');
+					params[param] = pathParts.slice(index).map(decodeURIComponent).join('/');
 				}
 				if (breakFromLayouts) {
 					routePart = `(${routePart})`;
@@ -81,7 +81,7 @@ export function matchRoute(pathname, routes) {
 				);
 				match = /** @type {RouteComponent} */ (routes[resolvedPath]);
 				break outer;
-			} else if (routePart !== pathPart?.toLowerCase()) {
+			} else if (routePart.toLowerCase() !== pathPart?.toLowerCase()) {
 				break;
 			}
 
@@ -93,6 +93,10 @@ export function matchRoute(pathname, routes) {
 				routes[/** @type {keyof Routes} */ ('/' + routeParts.join('/'))]
 			);
 
+			if (typeof routeMatch === 'function' && routeParts.length !== pathParts.length) {
+				continue;
+			}
+
 			if (!breakFromLayouts && 'layout' in routes && routes.layout) {
 				layouts.push(routes.layout);
 			}

package/src/index.d.ts

@@ -28,6 +28,15 @@ export function serializeSearch(search: Search): string | undefined;
  */
 export function createRouter<T extends Routes>(r: T): RouterApi<T>;
 
+/**
+ * Block navigation until the callback returns `false`.
+ *
+ * ```js
+ * blockNavigation(() => confirm('Are you sure you want to leave?'));
+ * ```
+ */
+export function blockNavigation(callback: () => 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.

package/src/index.js

@@ -1,5 +1,5 @@
 export { isActiveLink } from './actions.svelte.js';
-export { createRouter } from './create-router.svelte.js';
+export { blockNavigation, createRouter } from './create-router.svelte.js';
 export { serializeSearch } from './helpers/utils.js';
 export { Navigation } from './navigation.js';
 export { default as Router } from './Router.svelte';