sv-router 0.3.0 → 0.4.0

package/package.json

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

package/src/create-router.svelte.js

@@ -16,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,
@@ -90,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) || '/';
@@ -98,14 +105,22 @@ export async function onNavigate(path, options = {}) {
 
 	for (const { beforeLoad } of hooks) {
 		try {
+			pendingNavigationIndex = currentNavigationIndex;
 			await beforeLoad?.();
 		} catch {
 			return;
 		}
 	}
 
-	componentTree.value = await resolveRouteComponents(match ? [...layouts, match] : layouts);
-	params.value = newParams || {};
+	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;
@@ -115,6 +130,14 @@ 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());
 
@@ -139,13 +162,14 @@ export function onGlobalClick(event) {
 	if (url.origin !== currentOrigin) return;
 
 	event.preventDefault();
-	const { replace, state, scrollToTop } = anchor.dataset;
+	const { replace, state, scrollToTop, viewTransition } = anchor.dataset;
 	onNavigate(url.pathname, {
 		replace: replace === '' || replace === 'true',
 		search: url.search,
 		state,
 		hash: url.hash,
 		scrollToTop: scrollToTop === 'false' ? false : /** @type ScrollBehavior */ (scrollToTop),
+		viewTransition: viewTransition === '' || viewTransition === 'true',
 	});
 }
 

package/src/index.d.ts

@@ -166,6 +166,7 @@ export type NavigateOptions =
 			state?: string;
 			hash?: string;
 			scrollToTop?: ScrollBehavior | false;
+			viewTransition?: boolean;
 	  }
 	| undefined;
 

package/src/vite-plugin/plugin.js

@@ -7,9 +7,9 @@ import { writeRouterCode } from '../gen/write-router-code.js';
  * @returns {import('vite').Plugin}
  */
 export function router(options) {
-	if (options?.allLazy) genConfig.allLazy = options.allLazy;
-	if (options?.js) genConfig.routesInJs = options.js;
-	if (options?.path) genConfig.routesPath = options.path;
+	genConfig.allLazy = options?.allLazy || false;
+	genConfig.routesInJs = options?.js || false;
+	genConfig.routesPath = options?.path || 'src/routes';
 
 	return {
 		name: 'sv-router',