sv-router 0.0.6 → 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,7 +1,7 @@
 {
   "name": "sv-router",
-  "version": "0.0.6",
-  "description": "Modern Svelte routing",
+  "version": "0.0.8",
+  "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
     "router",
@@ -36,31 +36,34 @@
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.11",
-    "@eslint/js": "^9.18.0",
-    "@types/node": "^22.10.7",
-    "eslint-config-prettier": "^10.0.1",
+    "@changesets/cli": "^2.28.1",
+    "@eslint/js": "^9.21.0",
+    "@types/node": "^22.13.8",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^2.46.1",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "globals": "^15.14.0",
-    "prettier": "^3.4.2",
+    "eslint-plugin-svelte": "^3.0.2",
+    "eslint-plugin-unicorn": "^57.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.5.2",
     "prettier-plugin-jsdoc": "^1.3.2",
     "prettier-plugin-svelte": "^3.3.3",
+    "svelte-check": "^4.1.4",
     "type-testing": "^0.2.0",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.7",
-    "vitest": "^3.0.2"
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.25.0",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.7"
   },
   "peerDependencies": {
     "svelte": "^5"
   },
   "scripts": {
-    "ex:config-based": "pnpm --filter config-based-example",
-    "ex:file-based": "pnpm --filter file-based-example",
+    "docs:dev": "pnpm --filter docs dev",
+    "docs:build": "pnpm --filter docs build",
+    "docs:preview": "pnpm --filter docs preview",
     "test": "vitest",
-    "check": "tsc --noEmit && pnpm -r check",
+    "check": "svelte-check && pnpm -r check",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier . --check",

package/src/Router.svelte

@@ -6,7 +6,7 @@
 	onNavigate();
 
 	$effect(() => {
-		const off1 = on(globalThis, 'popstate', onNavigate);
+		const off1 = on(globalThis, 'popstate', () => onNavigate());
 		const off2 = on(globalThis, 'click', onGlobalClick);
 
 		return () => {

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/create-router.svelte.js

@@ -57,40 +57,65 @@ export function createRouter(r) {
 }
 
 /**
- * @param {string} path
+ * @param {string | number} path
  * @param {import('./index.d.ts').NavigateOptions & { params?: Record<string, string> }} options
  */
 function navigate(path, options = {}) {
+	if (typeof path === 'number') {
+		globalThis.history.go(path);
+		return;
+	}
 	if (options.params) {
 		path = constructPath(path, options.params);
 	}
-	if (options.search) {
-		path += (options.search.startsWith('?') ? '' : '?') + options.search;
+	if (options.search && !options.search.startsWith('?')) {
+		options.search = '?' + options.search;
 	}
-	if (options.hash) {
-		path += options.hash;
+	if (options.hash && !options.hash.startsWith('#')) {
+		options.hash = '#' + options.hash;
 	}
-	const historyMethod = options.replace ? 'replaceState' : 'pushState';
-	globalThis.history[historyMethod](options.state || {}, '', path);
-	onNavigate();
+	onNavigate(path, options);
 }
-navigate.back = () => globalThis.history.back();
-navigate.forward = () => globalThis.history.forward();
 
-export function onNavigate() {
+/**
+ * @param {string} [path]
+ * @param {import('./index.d.ts').NavigateOptions} options
+ */
+export async function onNavigate(path, options = {}) {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
+	const {
+		match,
+		layouts,
+		hooks,
+		params: newParams,
+	} = matchRoute(path || globalThis.location.pathname, routes);
+
+	for (const { beforeLoad } of hooks) {
+		try {
+			await beforeLoad?.();
+		} catch {
+			return;
+		}
+	}
 
-	syncSearchParams();
+	componentTree.value = await resolveRouteComponents(match ? [...layouts, match] : layouts);
+	params.value = newParams || {};
 
+	if (path) {
+		if (options.search) path += options.search;
+		if (options.hash) path += options.hash;
+		const historyMethod = options.replace ? 'replaceState' : 'pushState';
+		globalThis.history[historyMethod](options.state || {}, '', path);
+	}
+
+	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) => {
-		componentTree.value = components;
-	});
+	for (const { afterLoad } of hooks) {
+		afterLoad?.();
+	}
 }
 
 /** @param {Event} event */
@@ -106,9 +131,12 @@ export function onGlobalClick(event) {
 
 	event.preventDefault();
 	const { replace, state } = anchor.dataset;
-	const historyMethod = replace === undefined || replace === 'false' ? 'pushState' : 'replaceState';
-	globalThis.history[historyMethod](state || {}, '', anchor.href);
-	onNavigate();
+	onNavigate(url.pathname, {
+		replace: replace === '' || replace === 'true',
+		search: url.search,
+		state,
+		hash: url.hash,
+	});
 }
 
 function updatedLocation() {

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

@@ -9,16 +9,24 @@ import path from 'node:path';
  * }} GeneratedRoutes
  */
 
-const PARAM_FILENAME_REGEX = /\[(.*)\].svelte/g;
+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
 
 /**
  * @param {string} routesPath
  * @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));
 }
 
 /**
@@ -35,34 +43,12 @@ export function buildFileTree(routesPath) {
 			tree.push({ name: entry, tree: buildFileTree(path.join(routesPath, entry)) });
 			continue;
 		}
-		if (!entry.endsWith('.svelte')) continue;
-		handleFlatFilename(tree, entry);
-	}
-	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;
+		if (!entry.endsWith('.svelte') && !HOOKS_FILENAME_REGEX.test(entry)) {
+			continue;
 		}
+		tree.push(entry);
 	}
-	/** @type {FileTree} */
-	const branch = [];
-	handleFlatFilename(branch, splited.join('.'));
-	tree.push({ name: first, tree: branch });
+	return tree;
 }
 
 /**
@@ -75,36 +61,61 @@ export function createRouteMap(fileTree, prefix = '') {
 	const result = {};
 	for (const entry of fileTree) {
 		if (typeof entry === 'string') {
-			const catchAll = /\[\.\.\.(.*)\]\.svelte/g.exec(entry); // Match [...slug].svelte
-			switch (true) {
-				case entry === 'index.svelte': {
-					result['/'] = prefix + entry;
-					break;
-				}
-				case entry === 'layout.svelte': {
-					result['layout'] = prefix + entry;
-					break;
+			if (!entry.endsWith('.svelte')) {
+				if (HOOKS_FILENAME_REGEX.test(entry)) {
+					result['hooks'] = prefix + entry;
+					continue;
 				}
-				case !!catchAll: {
-					result['*' + catchAll[1]] = prefix + entry;
-					break;
-				}
-				default: {
-					if (PARAM_FILENAME_REGEX.test(entry)) {
-						result['/' + entry.replaceAll(PARAM_FILENAME_REGEX, ':$1')] = prefix + entry;
-						break;
-					}
-					result['/' + entry.replace('.svelte', '')] = prefix + entry;
-					break;
+				continue;
+			}
+
+			if (entry.endsWith('index.svelte') || entry.endsWith('index.lazy.svelte')) {
+				const indexEntry = entry.replace(/\.?index(\.lazy)?\.svelte/, '');
+				result['/' + (indexEntry ? filePathToRoute(indexEntry) : '')] = prefix + entry;
+				continue;
+			}
+
+			if (entry === 'layout.svelte' || entry === 'layout.lazy.svelte') {
+				result['layout'] = prefix + entry;
+				continue;
+			}
+
+			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;
+			}
+
+			if (PARAM_FILENAME_REGEX.test(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;
 			}
+
+			result['/' + filePathToRoute(entry.replace('.svelte', ''))] = prefix + entry;
 		} else {
-			result['/' + entry.name] = createRouteMap(entry.tree, prefix + entry.name + '/');
+			const entryName = filePathToRoute(entry.name);
+			result['/' + entryName] = createRouteMap(entry.tree, prefix + entryName + '/');
 		}
 	}
 	return result;
 }
 
+/**
+ * Replace `.` with `/`, but not `...`
+ *
+ * @param {string} filename
+ * @returns {string}
+ */
+function filePathToRoute(filename) {
+	return filename.replaceAll(/\.(?!\.\.)/g, '/');
+}
+
 /**
  * @param {GeneratedRoutes} routes
  * @param {string} routesPath
@@ -115,14 +126,76 @@ export function createRouterCode(routes, routesPath) {
 		routesPath += '/';
 	}
 
-	const jsonRoutes = JSON.stringify(routes, undefined, 2);
-	const withImports = jsonRoutes.replaceAll(
-		/"(.*)": "(.*)",?/g,
-		`"$1": () => import("${routesPath}$2"),`,
-	);
+	/** @type {Map<string, string>} */
+	const importsMap = new Map();
+
+	const withImports = (function handleImports(routes, routesPath) {
+		/** @type {GeneratedRoutes} */
+		const result = {};
+		for (const [key, value] of Object.entries(routes)) {
+			if (typeof value === 'object') {
+				result[key] = handleImports(value, routesPath);
+			} else if (key === 'hooks' || !value.endsWith('.lazy.svelte')) {
+				const variableName = pathToCorrectCasing(value);
+				importsMap.set(variableName, routesPath + value);
+				result[key] = variableName;
+			} else {
+				result[key] = `() => import('${routesPath}${value}')`;
+			}
+		}
+		return result;
+	})(routes, routesPath);
+
+	const imports = [...importsMap.entries()].map(([key, value]) => {
+		if (value.endsWith('.ts')) {
+			value = value.replace('.ts', '');
+		}
+		return `import ${key} from '${value}';`;
+	});
+
+	const stringifiedRoutes = JSON.stringify(withImports, undefined, 2)
+		.replaceAll(/"(.*)": /g, `'$1': `)
+		.replaceAll(/: "(.*)"/g, ': $1');
+
 	return [
-		'import { createRouter } from "sv-router";',
-		'\n\n',
-		`export const { p, navigate, isActive, route } = createRouter(${withImports});`,
-	].join('');
+		`import { createRouter } from 'sv-router';`,
+		...imports,
+		'',
+		`export const { p, navigate, isActive, route } = createRouter(${stringifiedRoutes});`,
+	].join('\n');
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+export function pathToCorrectCasing(value) {
+	const parts = /** @type {string[]} */ ([]);
+
+	/** @param {RegExp} regex */
+	function extractLastPart(regex) {
+		if (!regex.test(value)) return;
+		const exec = /** @type {RegExpExecArray} */ (regex.exec(value));
+		if (exec.index > 0) {
+			const before = value.slice(0, exec.index - 1);
+			parts.push(...before.split(/\/|-|\./));
+		}
+		return exec[1];
+	}
+
+	const lastPart =
+		extractLastPart(CATCH_ALL_FILENAME_REGEX) ||
+		extractLastPart(PARAM_FILENAME_REGEX) ||
+		extractLastPart(HOOKS_FILENAME_REGEX) ||
+		extractLastPart(FILENAME_REGEX);
+	if (!lastPart) {
+		throw new Error(`Invalid filename: ${value}`);
+	}
+	parts.push(...lastPart.split('-'));
+
+	const uppercased = parts.map((part, index) => {
+		if (index === 0 && lastPart === 'hooks') return part;
+		return part.charAt(0).toUpperCase() + part.slice(1);
+	});
+	return uppercased.join('');
 }

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

@@ -3,6 +3,8 @@
  *
  * @typedef {import('../index.d.ts').RouteComponent} RouteComponent
  *
+ * @typedef {import('../index.d.ts').Hooks} Hooks
+ *
  * @typedef {import('../index.d.ts').Routes} Routes
  */
 
@@ -12,6 +14,7 @@
  * @returns {{
  * 	match: RouteComponent | undefined;
  * 	layouts: LayoutComponent[];
+ * 	hooks: Hooks[];
  * 	params: Record<string, string>;
  * 	breakFromLayouts: boolean;
  * }}
@@ -30,6 +33,9 @@ export function matchRoute(pathname, routes) {
 	/** @type {LayoutComponent[]} */
 	let layouts = [];
 
+	/** @type {Hooks[]} */
+	let hooks = [];
+
 	/** @type {Record<string, string>} */
 	let params = {};
 
@@ -53,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('/')
 				);
@@ -74,6 +83,10 @@ export function matchRoute(pathname, routes) {
 				layouts.push(routes.layout);
 			}
 
+			if ('hooks' in routes && routes.hooks) {
+				hooks.push(routes.hooks);
+			}
+
 			if (typeof routeMatch === 'function') {
 				if (routeParts.length === pathParts.length) {
 					match = routeMatch;
@@ -87,6 +100,7 @@ export function matchRoute(pathname, routes) {
 			if (result) {
 				match = result.match;
 				params = { ...params, ...result.params };
+				hooks.push(...result.hooks);
 				if (result.breakFromLayouts) {
 					layouts = [];
 				} else {
@@ -97,7 +111,7 @@ export function matchRoute(pathname, routes) {
 		}
 	}
 
-	return { match, layouts, params, breakFromLayouts };
+	return { match, layouts, hooks, params, breakFromLayouts };
 }
 
 /**

package/src/helpers/utils.js

@@ -42,5 +42,5 @@ export function resolveRouteComponent(input) {
  * @returns {input is import('../index.d.ts').LazyRouteComponent}
  */
 export function isLazyImport(input) {
-	return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/g.test(String(input));
+	return typeof input === 'function' && !!/\(\)\s?=>\s?import\(.*\)/.test(String(input));
 }

package/src/index.d.ts

@@ -15,7 +15,7 @@ export const isActiveLink: IsActiveLink;
  * Setup a new router instance with the given routes.
  *
  * ```js
- * export const { p, navigate, route } = createRouter({
+ * export const { p, navigate, isActive, route } = createRouter({
  *   '/': Home,
  *   '/about': About,
  *   ...
@@ -42,14 +42,36 @@ export type RouteComponent<Props extends BaseProps = any> =
 	| Component<Props>
 	| LazyRouteComponent<Props>;
 export type LayoutComponent = RouteComponent<{ children: Snippet }>;
+export type Hooks = {
+	/**
+	 * A function that will be called before the route is loaded. If it returns a promise, the route
+	 * will wait for it to resolve before loading.
+	 *
+	 * You can throw a `navigate` call to redirect to another route.
+	 *
+	 * ```js
+	 * async beforeLoad() {
+	 *   await ...
+	 *   throw navigate('/home');
+	 * }
+	 * ```
+	 */
+	beforeLoad?(): void | Promise<void>;
+	/** A function that will be called after the route is loaded. */
+	afterLoad?(): void;
+};
 
 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> = {
 	/**
@@ -77,18 +99,15 @@ export type RouterApi<T extends Routes> = {
 	 * 	},
 	 * });
 	 * // Back and forward
-	 * navigate.back();
-	 * navigate.forward();
+	 * navigate(-1);
+	 * navigate(2);
 	 * ```
 	 *
 	 * @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;
-	};
+	navigate<U extends Path<T>>(...args: NavigateArgs<U>): void;
+
 	/**
 	 * Will return `true` if the given path is active.
 	 *
@@ -98,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.
@@ -139,21 +161,26 @@ export type NavigateOptions =
 			replace?: boolean;
 			search?: string;
 			state?: string;
-			hash?: `#${string}`;
+			hash?: string;
 	  }
 	| undefined;
 
 type NavigateArgs<T extends string> =
-	PathParams<T> extends never
-		? [T, NavigateOptions]
-		: [T, NavigateOptions & { params: PathParams<T> }];
+	| (PathParams<T> extends never
+			? [T] | [T, NavigateOptions]
+			: [T, NavigateOptions & { params: PathParams<T> }])
+	| [number];
 
 type StripNonRoutes<T extends Routes> = {
 	[K in keyof T as K extends `*${string}`
 		? never
-		: K extends 'layout'
+		: K extends `(*${string})`
 			? never
-			: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
+			: K extends 'layout'
+				? never
+				: K extends 'hooks'
+					? never
+					: K]: T[K] extends Routes ? StripNonRoutes<T[K]> : T[K];
 };
 
 type RecursiveKeys<T extends Routes, Prefix extends string = ''> = {
@@ -172,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;