sv-router 0.0.7 → 0.0.8

package/README.md

@@ -1,3 +1,37 @@
+<div align="center">
+
+<img src="./docs/public/logo.svg" alt="" height="128px">
+
 # sv-router
 
-https://www.npmjs.com/package/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)
+
+A feature-rich yet intuitive routing library for Svelte single-page apps.
+
+[Documentation](https://sv-router.vercel.app/) • [Getting Started](https://sv-router.vercel.app/guide/getting-started) • [Reference](https://sv-router.vercel.app/reference)
+
+</div>
+
+---
+
+## Features
+
+- 🔒 **Typesafe navigation**: Get autocomplete and type checking for your routes.
+- 🗂️ **File-based routing (optional)**: Enjoy the DX of a meta-framework-like approach.
+- 🌿 **Nested routes**: Create complex layouts with ease.
+- ⚡ **Performance**: Optimized for speed with built-in code splitting and preloading.
+- 🧩 **Familiar API**: Follows established conventions from popular meta frameworks
+- 🚀 **Made for Svelte 5**: Benefit from faster performance and smaller bundle size.
+
+## Installation
+
+Add it to an existing Svelte project:
+
+```bash
+npm install sv-router
+```
+
+## License
+
+[MIT](./LICENSE) © Colin Lienard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",

package/src/actions.svelte.js

@@ -1,14 +1,14 @@
 import { location } from './create-router.svelte.js';
 
 /** @type {import('./index.d.ts').IsActiveLink} */
-export function isActiveLink(node, { className = 'is-active' } = {}) {
+export function isActiveLink(node, { className = 'is-active', startsWith = false } = {}) {
 	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) {
+		if (startsWith ? location.pathname.startsWith(pathname) : location.pathname === pathname) {
 			node.classList.add(className);
 		} else {
 			node.classList.remove(className);

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

@@ -9,8 +9,10 @@ import path from 'node:path';
  * }} GeneratedRoutes
  */
 
-const PARAM_FILENAME_REGEX = /\[(.*)\](\.lazy)?\.svelte$/; // [any].svelte, [any].lazy.svelte
-const CATCH_ALL_FILENAME_REGEX = /\[\.\.\.(.*)\](\.lazy)?\.svelte$/; // [...any].svelte, [...any].lazy.svelte
+const FILENAME_REGEX = /\(?([\w-]+)\)?(\.lazy)?\.svelte$/; // any.svelte, any.lazy.svelte, (any).svelte
+const PARAM_FILENAME_REGEX = /\(?\[(.*)\]\)?(\.lazy)?\.svelte$/; // [any].svelte, [any].lazy.svelte, ([any]).svelte
+const CATCH_ALL_FILENAME_REGEX = /\(?\[\.\.\.(.*)\]\)?(\.lazy)?\.svelte$/; // [...any].svelte, [...any].lazy.svelte, ([...any]).svelte
+const OUT_OF_LAYOUT_FILENAME_REGEX = /\(\[\.?\.?\.?(.*)\]\)(\.lazy)?\.svelte$/; // ([any]).svelte, ([...any]).lazy.svelte
 const HOOKS_FILENAME_REGEX = /(hooks)(\.svelte)?\.(js|ts)$/; // hooks.js, hooks.svelte.js, hooks.ts, hooks.svelte.ts
 
 /**
@@ -18,9 +20,13 @@ const HOOKS_FILENAME_REGEX = /(hooks)(\.svelte)?\.(js|ts)$/; // hooks.js, hooks.
  * @returns {string}
  */
 export function generateRouterCode(routesPath) {
-	const fileTree = buildFileTree(path.join(process.cwd(), routesPath));
+	const absoluteRoutesPath = path.join(process.cwd(), routesPath);
+	if (!fs.existsSync(absoluteRoutesPath)) {
+		throw new Error(`Routes directory not found at \`${routesPath}\``);
+	}
+	const fileTree = buildFileTree(absoluteRoutesPath);
 	const routeMap = createRouteMap(fileTree);
-	return createRouterCode(routeMap, path.join('..', routesPath));
+	return createRouterCode(routeMap, path.posix.join('..', routesPath));
 }
 
 /**
@@ -74,15 +80,20 @@ export function createRouteMap(fileTree, prefix = '') {
 				continue;
 			}
 
-			const catchAll = CATCH_ALL_FILENAME_REGEX.exec(entry);
-			if (catchAll) {
-				result['*' + catchAll[1]] = prefix + entry;
+			if (CATCH_ALL_FILENAME_REGEX.test(entry)) {
+				const replacement = OUT_OF_LAYOUT_FILENAME_REGEX.test(entry) ? '(*$1)' : '*$1';
+				let key = filePathToRoute(entry.replace(CATCH_ALL_FILENAME_REGEX, replacement));
+				if (!key.startsWith('*') && !key.startsWith('(*')) {
+					key = '/' + key;
+				}
+				result[key] = prefix + entry;
 				continue;
 			}
 
-			// Match [id].svelte
 			if (PARAM_FILENAME_REGEX.test(entry)) {
-				result['/' + filePathToRoute(entry.replace(PARAM_FILENAME_REGEX, ':$1'))] = prefix + entry;
+				const replacement = OUT_OF_LAYOUT_FILENAME_REGEX.test(entry) ? '(:$1)' : ':$1';
+				const key = '/' + filePathToRoute(entry.replace(PARAM_FILENAME_REGEX, replacement));
+				result[key] = prefix + entry;
 				continue;
 			}
 
@@ -176,7 +187,7 @@ export function pathToCorrectCasing(value) {
 		extractLastPart(CATCH_ALL_FILENAME_REGEX) ||
 		extractLastPart(PARAM_FILENAME_REGEX) ||
 		extractLastPart(HOOKS_FILENAME_REGEX) ||
-		extractLastPart(/([\w-]+)(\.lazy)?\.svelte$/);
+		extractLastPart(FILENAME_REGEX);
 	if (!lastPart) {
 		throw new Error(`Invalid filename: ${value}`);
 	}

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

@@ -37,7 +37,10 @@ export function writeRouterCode() {
 
 		console.log('✅️ Routes generated');
 	} catch (error) {
-		console.error('Error during routes generation:', error);
+		console.error(
+			'Error during routes generation:',
+			error instanceof Error ? error.message : String(error),
+		);
 	}
 }
 

package/src/helpers/is-active.js

@@ -7,25 +7,41 @@ import { constructPath } from './utils.js';
  * @returns {boolean}
  */
 export function isActive(pathname, params) {
+	return compare((a, b) => a === b, pathname, params);
+}
+
+/**
+ * @param {string} pathname
+ * @param {Record<string, string>} [params]
+ * @returns {boolean}
+ */
+isActive.startsWith = (pathname, params) => {
+	return compare((a, b) => a.startsWith(b), pathname, params);
+};
+
+/**
+ * @param {function(string, string): boolean} compareFn
+ * @param {string} pathname
+ * @param {Record<string, string>} [params]
+ * @returns {boolean}
+ */
+function compare(compareFn, pathname, params) {
 	if (!pathname.includes(':')) {
-		return pathname === location.pathname;
+		return compareFn(location.pathname, pathname);
 	}
 
 	if (params) {
-		return constructPath(pathname, params) === location.pathname;
+		return compareFn(location.pathname, constructPath(pathname, params));
 	}
 
 	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 compareFn(pathPart, routePart);
 	}
 	return false;
 }

package/src/helpers/match-route.js

@@ -59,6 +59,9 @@ export function matchRoute(pathname, routes) {
 				if (param) {
 					params[param] = pathParts.slice(index).join('/');
 				}
+				if (breakFromLayouts) {
+					routePart = `(${routePart})`;
+				}
 				const resolvedPath = /** @type {keyof Routes} */ (
 					(index ? '/' : '') + routeParts.join('/')
 				);

package/src/index.d.ts

@@ -63,12 +63,15 @@ export type Hooks = {
 
 export type Routes = {
 	[_: `/${string}`]: RouteComponent | Routes;
-	[_: `*${string}`]: RouteComponent | undefined;
+	[_: `*${string}` | `(*${string})`]: RouteComponent | undefined;
 	layout?: LayoutComponent;
 	hooks?: Hooks;
 };
 
-export type IsActiveLink = Action<HTMLAnchorElement, { className?: string } | undefined>;
+export type IsActiveLink = Action<
+	HTMLAnchorElement,
+	{ className?: string; startsWith?: boolean } | undefined
+>;
 
 export type RouterApi<T extends Routes> = {
 	/**
@@ -114,7 +117,10 @@ export type RouterApi<T extends Routes> = {
 	 * @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;
+	isActive: {
+		<U extends Path<T>>(...args: IsActiveArgs<U>): boolean;
+		startsWith<U extends Path<T>>(...args: IsActiveArgs<U>): boolean;
+	};
 	route: {
 		/**
 		 * An object containing the parameters of the current route.
@@ -168,11 +174,13 @@ type NavigateArgs<T extends string> =
 type StripNonRoutes<T extends Routes> = {
 	[K in keyof T as K extends `*${string}`
 		? never
-		: K extends 'layout'
+		: K extends `(*${string})`
 			? never
-			: K extends 'hooks'
+			: K extends 'layout'
 				? never
-				: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
+				: K extends 'hooks'
+					? never
+					: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
 };
 
 type RecursiveKeys<T extends Routes, Prefix extends string = ''> = {
@@ -191,10 +199,14 @@ type RemoveParenthesis<T extends string> = T extends `${infer A}(${infer B})${in
 
 type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}`
 	? Param | ExtractParams<`/${Rest}`>
-	: T extends `${string}:${infer Param}`
+	: T extends `${string}(:${infer Param})`
 		? Param
-		: T extends `${string}*${infer Param}`
-			? Param extends ''
-				? never
-				: Param
-			: never;
+		: T extends `${string}:${infer Param}`
+			? Param
+			: T extends `${string}(*${infer Param})`
+				? Param
+				: T extends `${string}*${infer Param}`
+					? Param extends ''
+						? never
+						: Param
+					: never;