sv-router 0.9.0 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -36,28 +36,28 @@
     "esm-env": "^1.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
-    "@eslint/js": "^9.32.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@changesets/cli": "^2.29.7",
+    "@eslint/js": "^9.36.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.2.0",
-    "eslint": "^9.32.0",
+    "@types/node": "^24.6.0",
+    "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-svelte": "^3.11.0",
-    "eslint-plugin-unicorn": "^60.0.0",
-    "globals": "^16.3.0",
-    "happy-dom": "^18.0.1",
+    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-unicorn": "^61.0.2",
+    "globals": "^16.4.0",
+    "happy-dom": "^19.0.2",
     "prettier": "^3.6.2",
     "prettier-plugin-jsdoc": "^1.3.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "svelte-check": "^4.3.1",
+    "svelte-check": "^4.3.2",
     "type-testing": "^0.2.0",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.0",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {

package/src/create-router.svelte.js

@@ -242,7 +242,12 @@ export function onGlobalClick(event) {
 	const anchor = /** @type {HTMLElement} */ (event.target).closest('a');
 	if (!anchor) return;
 
-	if (anchor.hasAttribute('target') || anchor.hasAttribute('download')) return;
+	if (
+		anchor.hasAttribute('target') ||
+		anchor.hasAttribute('download') ||
+		!anchor.hasAttribute('href')
+	)
+		return;
 
 	const url = new URL(anchor.href);
 	const currentOrigin = globalThis.location.origin;

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

@@ -110,8 +110,15 @@ export function createRouteMap(fileTree, prefix = '') {
 			result['/' + filePathToRoute(entry.replace('.svelte', ''))] = prefix + entry;
 		} else {
 			const entryName = filePathToRoute(entry.name);
-			const paramFolder = entryName.replace(/^\[(.*)\]$/, ':$1');
-			result['/' + paramFolder] = createRouteMap(entry.tree, prefix + entryName + '/');
+			const isRouteGroup = /^_[^_[]/.test(entry.name);
+
+			if (isRouteGroup) {
+				const childMap = createRouteMap(entry.tree, prefix + entryName + '/');
+				mergeRouteGroup(result, childMap);
+			} else {
+				const paramFolder = entryName.replace(/^\[(.*)\]$/, ':$1');
+				result['/' + paramFolder] = createRouteMap(entry.tree, prefix + entryName + '/');
+			}
 		}
 	}
 	return result;
@@ -127,6 +134,38 @@ function filePathToRoute(filename) {
 	return filename.replaceAll(/\.(?!\.\.)/g, '/');
 }
 
+/**
+ * @param {GeneratedRoutes} result
+ * @param {GeneratedRoutes} childMap
+ */
+function mergeRouteGroup(result, childMap) {
+	const layout = childMap.layout;
+	const hooks = childMap.hooks;
+	const meta = childMap.meta;
+
+	for (const [key, val] of Object.entries(childMap)) {
+		if (key === 'layout' || key === 'hooks' || key === 'meta') {
+			continue;
+		}
+
+		/** @type {GeneratedRoutes} */
+		let routeWithGroupFiles = {};
+		if (typeof val === 'string') {
+			routeWithGroupFiles = { '/': val };
+		} else {
+			routeWithGroupFiles = { ...val };
+		}
+		if (layout) routeWithGroupFiles.layout = layout;
+		if (hooks) routeWithGroupFiles.hooks = hooks;
+		if (meta) routeWithGroupFiles.meta = meta;
+		if (result[key]) {
+			throw new Error(`Route conflict at \`${key}\``);
+		}
+
+		result[key] = routeWithGroupFiles;
+	}
+}
+
 /**
  * @param {GeneratedRoutes} routes
  * @param {string} routesPath
@@ -177,7 +216,7 @@ export function createRouterCode(routes, routesPath, { allLazy = false, js = fal
 		`import { createRouter } from 'sv-router';`,
 		...imports,
 		'',
-		`const routes = ${stringifiedRoutes};`,
+		`export const routes = ${stringifiedRoutes};`,
 		...(js ? [] : ['export type Routes = typeof routes;']),
 		'export const { p, navigate, isActive, preload, route } = createRouter(routes);',
 		'',
@@ -214,6 +253,7 @@ export function pathToCorrectCasing(value) {
 	parts.push(...lastPart.split('-'));
 
 	const uppercased = parts.map((part, index) => {
+		part = part.replace(/^_+/, '');
 		if (index === 0 && (lastPart === 'hooks' || lastPart === 'meta')) return part;
 		part = part.replace(/^\[(.*)\]$/, '$1');
 		return part.charAt(0).toUpperCase() + part.slice(1);

package/src/helpers/preload.js

@@ -1,5 +1,9 @@
 import { matchRoute } from './match-route.js';
-import { parseSearch, resolveRouteComponents } from './utils.js';
+import { parseSearch, resolveRouteComponents, stripBase } from './utils.js';
+
+const PREDICT_CONE_LENGTH = 200;
+const PREDICT_CONE_ANGLE = Math.PI / 6;
+const PREDICT_TIMEOUT = 50;
 
 /**
  * @param {import('../index.js').Routes} routes
@@ -19,30 +23,171 @@ export async function preload(routes, path, options) {
 	await resolveRouteComponents(match ? [...layouts, match] : layouts);
 }
 
+/** @type {Set<HTMLAnchorElement>} */
 const linkSet = new Set();
+/** @type {Set<HTMLAnchorElement>} */
+const predictedLinks = new Set();
 
 /** @param {import('../index.js').Routes} routes */
 export function preloadOnHover(routes) {
+	/** @param {HTMLAnchorElement} link */
+	function anchorPreload(link) {
+		const href = link.getAttribute('href');
+		if (!href) return;
+		const url = new URL(link.href);
+		const pathname = stripBase(url.pathname);
+		const { replace, state } = link.dataset;
+		preload(routes, pathname, {
+			replace: replace === '' || replace === 'true',
+			search: url.search,
+			state,
+			hash: url.hash,
+		});
+	}
+
+	/** @type {ReturnType<typeof setTimeout> | null} */
+	let throttleTimer = null;
+	function pointerMoveListener(/** @type {PointerEvent} */ event) {
+		if (!event.getPredictedEvents || throttleTimer) return;
+		throttleTimer = setTimeout(() => {
+			throttleTimer = null;
+		}, PREDICT_TIMEOUT);
+
+		if (predictedLinks.size === 0) {
+			document.removeEventListener('pointermove', pointerMoveListener);
+			return;
+		}
+
+		const predictedEvents = event.getPredictedEvents();
+		const lastPredicted = predictedEvents.at(-1);
+		if (!lastPredicted) return;
+
+		const currentX = event.clientX;
+		const currentY = event.clientY;
+		const dx = lastPredicted.clientX - currentX;
+		const dy = lastPredicted.clientY - currentY;
+
+		const distance = Math.hypot(dx, dy);
+		if (distance < 2) return;
+		const dirX = dx / distance;
+		const dirY = dy / distance;
+
+		// Visualize the cone (comment out when not debugging)
+		/*
+		const canvas = document.createElement('canvas');
+		canvas.style.position = 'fixed';
+		canvas.style.left = '0';
+		canvas.style.top = '0';
+		canvas.style.width = '100%';
+		canvas.style.height = '100%';
+		canvas.style.pointerEvents = 'none';
+		canvas.style.zIndex = '99999';
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		document.body.append(canvas);
+		const ctx = canvas.getContext('2d');
+		ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
+		ctx.strokeStyle = 'rgba(255, 0, 0, 0.6)';
+		ctx.lineWidth = 2;
+		ctx.beginPath();
+		ctx.moveTo(currentX, currentY);
+		const leftAngle = Math.atan2(dirY, dirX) - PREDICT_CONE_ANGLE;
+		const rightAngle = Math.atan2(dirY, dirX) + PREDICT_CONE_ANGLE;
+		const leftX = currentX + Math.cos(leftAngle) * PREDICT_CONE_LENGTH;
+		const leftY = currentY + Math.sin(leftAngle) * PREDICT_CONE_LENGTH;
+		ctx.lineTo(leftX, leftY);
+		ctx.arc(currentX, currentY, PREDICT_CONE_LENGTH, leftAngle, rightAngle, false);
+		ctx.lineTo(currentX, currentY);
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+		setTimeout(() => canvas.remove(), PREDICT_TIMEOUT);
+		*/
+
+		outer: for (const link of predictedLinks) {
+			if (!link.isConnected) {
+				predictedLinks.delete(link);
+			}
+			const rect = link.getBoundingClientRect();
+			const points = [
+				{ x: rect.left, y: rect.top },
+				{ x: rect.right, y: rect.top },
+				{ x: rect.left, y: rect.bottom },
+				{ x: rect.right, y: rect.bottom },
+				{ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+			];
+
+			for (const point of points) {
+				const toPointX = point.x - currentX;
+				const toPointY = point.y - currentY;
+				const distToPoint = Math.hypot(toPointX, toPointY);
+				if (distToPoint > PREDICT_CONE_LENGTH || distToPoint < 0.001) continue;
+
+				const toPointDirX = toPointX / distToPoint;
+				const toPointDirY = toPointY / distToPoint;
+				const dotProduct = dirX * toPointDirX + dirY * toPointDirY;
+				const angle = Math.acos(Math.max(-1, Math.min(1, dotProduct)));
+
+				if (angle <= PREDICT_CONE_ANGLE) {
+					anchorPreload(link);
+					predictedLinks.delete(link);
+					continue outer;
+				}
+			}
+		}
+	}
+
+	const intersectionObserver = new IntersectionObserver((entries) => {
+		for (const entry of entries) {
+			if (entry.isIntersecting) {
+				intersectionObserver.unobserve(entry.target);
+				anchorPreload(/** @type {HTMLAnchorElement} */ (entry.target));
+			}
+		}
+	});
+
 	const observer = new MutationObserver(() => {
 		const links = /** @type {NodeListOf<HTMLAnchorElement>} */ (
 			document.querySelectorAll('a[data-preload]')
 		);
+
 		for (const link of links) {
 			if (linkSet.has(link)) continue;
 			linkSet.add(link);
 
-			link.addEventListener('mouseenter', function callback() {
-				link.removeEventListener('mouseenter', callback);
-				const href = link.getAttribute('href');
-				if (!href) return;
-				const url = new URL(link.href);
-				const { replace, state } = link.dataset;
-				preload(routes, href, {
-					replace: replace === '' || replace === 'true',
-					search: url.search,
-					state,
-					hash: url.hash,
-				});
+			switch (link.dataset.preload) {
+				case '':
+				case 'hover': {
+					link.addEventListener('mouseenter', function callback() {
+						link.removeEventListener('mouseenter', callback);
+						anchorPreload(link);
+					});
+					break;
+				}
+				case 'predict': {
+					if (predictedLinks.size === 0) {
+						document.addEventListener('pointermove', pointerMoveListener);
+					}
+					predictedLinks.add(link);
+					break;
+				}
+				case 'viewport': {
+					intersectionObserver.observe(link);
+					break;
+				}
+				default: {
+					console.warn(
+						`Unknown preload strategy \`${link.dataset.preload}\` on`,
+						link,
+						'\nAvailable strategies are: hover, viewport, predict',
+					);
+					break;
+				}
+			}
+
+			link.addEventListener('focus', function callback() {
+				link.removeEventListener('focus', callback);
+				anchorPreload(link);
 			});
 		}
 	});

package/src/helpers/utils.js

@@ -133,6 +133,9 @@ export function serializeSearch(value) {
 	const stringValues = Object.fromEntries(
 		Object.entries(value).map(([key, value]) => [key, String(value)]),
 	);
+	if (Object.keys(stringValues).length === 0) {
+		return;
+	}
 	const urlSearchParams = new URLSearchParams(stringValues);
 	return '?' + urlSearchParams.toString();
 }

package/src/index.d.ts

@@ -12,6 +12,9 @@ import type { Action } from 'svelte/action';
  */
 export const isActiveLink: IsActiveLink;
 
+/** Create a search string from the search object that is provided in hooks. */
+export function serializeSearch(search: Search): string | undefined;
+
 /**
  * Setup a new router instance with the given routes.
  *

package/src/index.js

@@ -1,4 +1,5 @@
 export { isActiveLink } from './actions.svelte.js';
 export { createRouter } from './create-router.svelte.js';
+export { serializeSearch } from './helpers/utils.js';
 export { default as Router } from './Router.svelte';
 export { searchParams } from './search-params.svelte.js';