sv-router 0.2.0 → 0.4.0

package/package.json

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

package/src/cli/index.js

@@ -18,10 +18,13 @@ function arg(option) {
 	return args[pathArgIndex];
 }
 
-const pathArg = arg('path');
-if (pathArg) genConfig.routesPath = pathArg;
+const allLazyArg = arg('allLazy');
+if (allLazyArg) genConfig.allLazy = true;
 
 const jsArg = arg('js');
 if (jsArg) genConfig.routesInJs = true;
 
+const pathArg = arg('path');
+if (pathArg) genConfig.routesPath = pathArg;
+
 writeRouterCode();

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,
@@ -46,7 +49,7 @@ export function createRouter(r) {
 				return params.value;
 			},
 			get pathname() {
-				return location.pathname;
+				return /** @type {import('./index.d.ts').Path<T>} */ (location.pathname);
 			},
 			get search() {
 				return location.search;
@@ -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/gen/config.js

@@ -1,7 +1,8 @@
 /**
  * @type {{
- * 	routesPath: string;
+ * 	allLazy: boolean;
  * 	routesInJs: boolean;
+ * 	routesPath: string;
  * 	readonly genCodeDirPath: string;
  * 	readonly routerPath: string;
  * 	readonly tsconfigPath: string;
@@ -9,8 +10,9 @@
  * }}
  */
 export const genConfig = {
-	routesPath: 'src/routes',
+	allLazy: false,
 	routesInJs: false,
+	routesPath: 'src/routes',
 	genCodeDirPath: '.router',
 	get routerPath() {
 		return '.router/router.' + (this.routesInJs ? 'js' : 'ts');

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

@@ -17,16 +17,17 @@ const HOOKS_FILENAME_REGEX = /(?<=[/.]|^)(hooks)(\.svelte)?\.(js|ts)$/; // hooks
 
 /**
  * @param {string} routesPath
+ * @param {{ allLazy?: boolean }} [options]
  * @returns {string}
  */
-export function generateRouterCode(routesPath) {
+export function generateRouterCode(routesPath, options) {
 	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.posix.join('..', routesPath));
+	return createRouterCode(routeMap, path.posix.join('..', routesPath), options);
 }
 
 /**
@@ -119,9 +120,10 @@ function filePathToRoute(filename) {
 /**
  * @param {GeneratedRoutes} routes
  * @param {string} routesPath
+ * @param {{ allLazy?: boolean }} [options]
  * @returns {string}
  */
-export function createRouterCode(routes, routesPath) {
+export function createRouterCode(routes, routesPath, { allLazy = false } = {}) {
 	if (!routesPath.endsWith('/')) {
 		routesPath += '/';
 	}
@@ -135,7 +137,7 @@ export function createRouterCode(routes, routesPath) {
 		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')) {
+			} else if (key === 'hooks' || (!value.endsWith('.lazy.svelte') && !allLazy)) {
 				const variableName = pathToCorrectCasing(value);
 				importsMap.set(variableName, routesPath + value);
 				result[key] = variableName;

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

@@ -32,7 +32,7 @@ export function writeRouterCode() {
 		writeFileIfDifferent(genConfig.tsconfigPath, JSON.stringify(tsConfig, undefined, 2));
 
 		// Write `.router/router.ts` file
-		const routerCode = generateRouterCode(genConfig.routesPath);
+		const routerCode = generateRouterCode(genConfig.routesPath, { allLazy: genConfig.allLazy });
 		const written = writeFileIfDifferent(genConfig.routerPath, routerCode);
 
 		if (written) {

package/src/helpers/match-route.js

@@ -61,6 +61,8 @@ export function matchRoute(pathname, routes) {
 				}
 				if (breakFromLayouts) {
 					routePart = `(${routePart})`;
+				} else if ('layout' in routes && routes.layout) {
+					layouts.push(routes.layout);
 				}
 				const resolvedPath = /** @type {keyof Routes} */ (
 					(index ? '/' : '') + routeParts.join('/')

package/src/index.d.ts

@@ -134,7 +134,7 @@ export type RouterApi<T extends Routes> = {
 		 */
 		params: AllParams<T>;
 		/** The reactive pathname of the URL. */
-		pathname: string;
+		pathname: Path<T>;
 		/** The reactive query string part of the URL. */
 		search: string;
 		/** The reactive history state that can be passed to the `navigate` function. */
@@ -166,6 +166,7 @@ export type NavigateOptions =
 			state?: string;
 			hash?: string;
 			scrollToTop?: ScrollBehavior | false;
+			viewTransition?: boolean;
 	  }
 	| undefined;
 

package/src/vite-plugin/index.d.ts

@@ -2,17 +2,23 @@ import type { Plugin } from 'vite';
 
 export type RouterOptions = {
 	/**
-	 * The path to the routes folder.
+	 * If true, all routes will be lazy loaded by default.
 	 *
-	 * @default 'src/routes'
+	 * @default false
 	 */
-	path?: string;
+	allLazy?: boolean;
 	/**
 	 * If true, generates the routes in a .js file instead of a .ts file.
 	 *
 	 * @default false
 	 */
 	js?: boolean;
+	/**
+	 * The path to the routes folder.
+	 *
+	 * @default 'src/routes'
+	 */
+	path?: string;
 };
 
 export const router: (options?: RouterOptions) => Plugin;

package/src/vite-plugin/plugin.js

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