fix: pass parameters into onNavigate in Router.svelte

Author: richardjelinek-fastest

.changeset/hot-pugs-worry.md

@@ -0,0 +1,5 @@
+---
+'sv-router': patch
+---
+
+pass initial page pathname, search, hash to onNavigate, correctly handle cancellation of navigations, return Error in navigate

src/Router.svelte

@@ -7,19 +7,27 @@
 	/** @type {{ base?: string }} */
 	let { base: basename } = $props();
 
+	const url = new URL(globalThis.location.href);
 	if (basename) {
 		base.name = (basename.startsWith('/') ? '' : '/') + basename;
-		const url = new URL(globalThis.location.href);
 		if (!url.pathname.startsWith(base.name)) {
 			url.pathname = join(base.name, url.pathname);
 			history.replaceState(history.state || {}, '', url.href);
 		}
 	}
 
-	onNavigate();
+	onNavigate(url.pathname, {
+		search: url.search,
+		hash: url.hash,
+	});
 
 	$effect(() => {
-		const off1 = on(globalThis, 'popstate', () => onNavigate());
+		const off1 = on(globalThis, 'popstate', () =>
+			onNavigate(url.pathname, {
+				search: url.search,
+				hash: url.hash,
+			}),
+		);
 		const off2 = on(globalThis, 'click', onGlobalClick);
 
 		return () => {

src/create-router.svelte.js

@@ -81,11 +81,12 @@ export function createRouter(r) {
 /**
  * @param {string | number} path
  * @param {import('./index.d.ts').NavigateOptions & { params?: Record<string, string> }} options
+ * @returns Promise<Error>
  */
 function navigate(path, options = {}) {
 	if (typeof path === 'number') {
 		globalThis.history.go(path);
-		return;
+		return new Error(`Navigating to history entry: ${path}`);
 	}
 	if (options.params) {
 		path = constructPath(path, options.params);
@@ -97,10 +98,11 @@ function navigate(path, options = {}) {
 		options.hash = '#' + options.hash;
 	}
 	onNavigate(path, options);
+	return new Error(`Navigating to: ${path}${options?.search ?? ''}${options?.hash ?? ''}`);
 }
 
 /**
- * @param {string} [path]
+ * @param {string} path
  * @param {import('./index.d.ts').NavigateOptions} options
  */
 export async function onNavigate(path, options = {}) {
@@ -111,7 +113,7 @@ export async function onNavigate(path, options = {}) {
 	navigationIndex++;
 	const currentNavigationIndex = navigationIndex;
 
-	let matchPath = path || globalThis.location.pathname;
+	let matchPath = path;
 	if (base.name && matchPath.startsWith(base.name)) {
 		matchPath = matchPath.slice(base.name.length) || '/';
 	}
@@ -178,7 +180,7 @@ export function onGlobalClick(event) {
 
 	event.preventDefault();
 	const { replace, state, scrollToTop, viewTransition } = anchor.dataset;
-	onNavigate(url.pathname, {
+	void onNavigate(url.pathname, {
 		replace: replace === '' || replace === 'true',
 		search: url.search,
 		state,

src/index.d.ts

@@ -129,8 +129,10 @@ export type RouterApi<T extends Routes> = {
 	 *
 	 * @param route The route to navigate to.
 	 * @param options The navigation options.
+	 *
+	 *   Returns an Error for use with `throw navigate(...)` inside hooks.
 	 */
-	navigate<U extends Path<T>>(...args: NavigateArgs<U>): void;
+	navigate<U extends Path<T>>(...args: NavigateArgs<U>): Error;
 
 	/**
 	 * Will return `true` if the given path is active.