feat: cancel pending navigation if new one is started (#74)

Author: colinlienard

.changeset/wise-spiders-serve.md

@@ -0,0 +1,5 @@
+---
+'sv-router': minor
+---
+
+Cancel pending navigation if new one is started

eslint.config.js

@@ -36,6 +36,7 @@ export default [
 	eslintPluginUnicorn.configs['flat/recommended'],
 	{
 		rules: {
+			'unicorn/error-message': 'off',
 			'unicorn/filename-case': [
 				'error',
 				{

src/create-router.svelte.js

@@ -2,12 +2,7 @@ import { BROWSER, DEV } from 'esm-env';
 import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preloadOnHover } from './helpers/preload-on-hover.js';
-import {
-	constructPath,
-	join,
-	resolveRouteComponents,
-	wrapInViewTransition,
-} from './helpers/utils.js';
+import { constructPath, join, resolveRouteComponents } from './helpers/utils.js';
 import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
@@ -21,6 +16,9 @@ export let params = $state({ value: {} });
 
 export let location = $state(updatedLocation());
 
+let navigationIndex = 0;
+let pendingNavigationIndex = 0;
+
 /** @type {{ name?: string }} */
 export const base = {
 	name: undefined,
@@ -95,6 +93,10 @@ export async function onNavigate(path, options = {}) {
 	if (!routes) {
 		throw new Error('Router not initialized: `createRouter` was not called.');
 	}
+
+	navigationIndex++;
+	const currentNavigationIndex = navigationIndex;
+
 	let matchPath = path || globalThis.location.pathname;
 	if (base.name && matchPath.startsWith(base.name)) {
 		matchPath = matchPath.slice(base.name.length) || '/';
@@ -103,15 +105,22 @@ export async function onNavigate(path, options = {}) {
 
 	for (const { beforeLoad } of hooks) {
 		try {
+			pendingNavigationIndex = currentNavigationIndex;
 			await beforeLoad?.();
 		} catch {
 			return;
 		}
 	}
 
-	await wrapInViewTransition(async () => {
-		componentTree.value = await resolveRouteComponents(match ? [...layouts, match] : layouts);
-	}, options.viewTransition);
+	const fromBeforeLoadHook = new Error().stack?.includes('beforeLoad');
+
+	const routeComponents = await resolveRouteComponents(match ? [...layouts, match] : layouts);
+	if (
+		navigationIndex !== currentNavigationIndex ||
+		(fromBeforeLoadHook && pendingNavigationIndex + 1 !== currentNavigationIndex)
+	) {
+		return;
+	}
 
 	if (path) {
 		if (options.search) path += options.search;
@@ -121,6 +130,13 @@ export async function onNavigate(path, options = {}) {
 		globalThis.history[historyMethod](options.state || {}, '', to);
 	}
 
+	if (options.viewTransition && document.startViewTransition !== undefined) {
+		document.startViewTransition(() => {
+			componentTree.value = routeComponents;
+		});
+	} else {
+		componentTree.value = routeComponents;
+	}
 	params.value = newParams || {};
 	syncSearchParams();
 	Object.assign(location, updatedLocation());

src/helpers/utils.js

@@ -59,23 +59,3 @@ export function join(...parts) {
 	}
 	return result;
 }
-
-/**
- * @param {() => void | Promise<void>} callback
- * @param {boolean} [enable]
- * @returns
- */
-export function wrapInViewTransition(callback, enable) {
-	return /** @type {Promise<void>} */ (
-		new Promise((resolve) => {
-			if (enable && document.startViewTransition !== undefined) {
-				document.startViewTransition(async () => {
-					await callback();
-					resolve();
-				});
-			} else {
-				Promise.resolve(callback()).then(resolve);
-			}
-		})
-	);
-}