sv-router 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sv-router",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Modern Svelte Routing",
   "keywords": [
     "svelte",
@@ -38,6 +38,9 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@eslint/js": "^9.28.0",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.8",
     "@types/node": "^22.15.30",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
@@ -45,6 +48,7 @@
     "eslint-plugin-svelte": "^3.9.1",
     "eslint-plugin-unicorn": "^59.0.1",
     "globals": "^16.2.0",
+    "jsdom": "^26.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-jsdoc": "^1.3.2",
     "prettier-plugin-svelte": "^3.4.0",
@@ -52,7 +56,7 @@
     "type-testing": "^0.2.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.33.1",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vitest": "^3.2.2"
   },
   "peerDependencies": {

package/src/actions.svelte.js

@@ -1,4 +1,5 @@
-import { location } from './create-router.svelte.js';
+import { base, location } from './create-router.svelte.js';
+import { join } from './helpers/utils.js';
 
 /** @type {import('./index.d.ts').IsActiveLink} */
 export function isActiveLink(node, { className = 'is-active', startsWith = false } = {}) {
@@ -7,7 +8,10 @@ export function isActiveLink(node, { className = 'is-active', startsWith = false
 	}
 
 	$effect(() => {
-		const pathname = new URL(node.href).pathname;
+		let pathname = new URL(node.href).pathname;
+		if (base.name) {
+			pathname = join(base.name, pathname);
+		}
 		if (startsWith ? location.pathname.startsWith(pathname) : location.pathname === pathname) {
 			node.classList.add(className);
 		} else {

package/src/create-router.svelte.js

@@ -2,7 +2,7 @@ import { BROWSER, DEV } from 'esm-env';
 import { isActive } from './helpers/is-active.js';
 import { matchRoute } from './helpers/match-route.js';
 import { preload, preloadOnHover } from './helpers/preload.js';
-import { constructPath, join, resolveRouteComponents } from './helpers/utils.js';
+import { constructPath, join, resolveRouteComponents, updatedLocation } from './helpers/utils.js';
 import { syncSearchParams } from './search-params.svelte.js';
 
 /** @type {import('./index.d.ts').Routes} */
@@ -120,7 +120,7 @@ export async function onNavigate(path, options = {}) {
 	for (const { beforeLoad } of hooks) {
 		try {
 			pendingNavigationIndex = currentNavigationIndex;
-			await beforeLoad?.();
+			await beforeLoad?.({ pathname: matchPath, ...options });
 		} catch {
 			return;
 		}
@@ -161,7 +161,7 @@ export async function onNavigate(path, options = {}) {
 	}
 
 	for (const { afterLoad } of hooks) {
-		afterLoad?.();
+		afterLoad?.({ pathname: matchPath, ...options });
 	}
 }
 
@@ -187,12 +187,3 @@ export function onGlobalClick(event) {
 		viewTransition: viewTransition === '' || viewTransition === 'true',
 	});
 }
-
-function updatedLocation() {
-	return {
-		pathname: globalThis.location.pathname,
-		search: globalThis.location.search,
-		state: history.state,
-		hash: globalThis.location.hash,
-	};
-}

package/src/helpers/is-active.js

@@ -1,5 +1,5 @@
-import { location } from '../create-router.svelte.js';
-import { constructPath } from './utils.js';
+import { base, location } from '../create-router.svelte.js';
+import { constructPath, join } from './utils.js';
 
 /**
  * @param {string} pathname
@@ -7,7 +7,8 @@ import { constructPath } from './utils.js';
  * @returns {boolean}
  */
 export function isActive(pathname, params) {
-	return compare((a, b) => a === b, pathname, params);
+	const p = base.name ? join(base.name, pathname) : pathname;
+	return compare((a, b) => a === b, p, params);
 }
 
 /**
@@ -16,7 +17,8 @@ export function isActive(pathname, params) {
  * @returns {boolean}
  */
 isActive.startsWith = (pathname, params) => {
-	return compare((a, b) => a.startsWith(b), pathname, params);
+	const p = base.name ? join(base.name, pathname) : pathname;
+	return compare((a, b) => a.startsWith(b), p, params);
 };
 
 /**
@@ -36,6 +38,9 @@ function compare(compareFn, pathname, params) {
 
 	const pathParts = pathname.split('/').slice(1);
 	const routeParts = location.pathname.split('/').slice(1);
+	if (pathParts.length > routeParts.length) {
+		return false;
+	}
 	for (const [index, pathPart] of pathParts.entries()) {
 		const routePart = routeParts[index];
 		if (pathPart.startsWith(':')) {

package/src/helpers/preload.js

@@ -4,11 +4,12 @@ import { resolveRouteComponents } from './utils.js';
 /**
  * @param {import('../index.js').Routes} routes
  * @param {string} path
+ * @param {import('../index.d.ts').NavigateOptions} [options]
  */
-export async function preload(routes, path) {
+export async function preload(routes, path, options) {
 	const { match, layouts, hooks } = matchRoute(path, routes);
 	for (const { onPreload } of hooks) {
-		onPreload?.();
+		onPreload?.({ pathname: path, ...options });
 	}
 	await resolveRouteComponents(match ? [...layouts, match] : layouts);
 }
@@ -18,7 +19,9 @@ const linkSet = new Set();
 /** @param {import('../index.js').Routes} routes */
 export function preloadOnHover(routes) {
 	const observer = new MutationObserver(() => {
-		const links = document.querySelectorAll('a[data-preload]');
+		const links = /** @type {NodeListOf<HTMLAnchorElement>} */ (
+			document.querySelectorAll('a[data-preload]')
+		);
 		for (const link of links) {
 			if (linkSet.has(link)) continue;
 			linkSet.add(link);
@@ -27,7 +30,14 @@ export function preloadOnHover(routes) {
 				link.removeEventListener('mouseenter', callback);
 				const href = link.getAttribute('href');
 				if (!href) return;
-				preload(routes, href);
+				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,
+				});
 			});
 		}
 	});

package/src/helpers/utils.js

@@ -59,3 +59,12 @@ export function join(...parts) {
 	}
 	return result;
 }
+
+export function updatedLocation() {
+	return {
+		pathname: globalThis.location.pathname,
+		search: globalThis.location.search,
+		state: history.state,
+		hash: globalThis.location.hash,
+	};
+}

package/src/index.d.ts

@@ -56,17 +56,17 @@ export type Hooks = {
 	 * You can throw a `navigate` call to redirect to another route.
 	 *
 	 * ```js
-	 * async beforeLoad() {
+	 * async beforeLoad({ pathname }) {
 	 *   await ...
 	 *   throw navigate('/home');
 	 * }
 	 * ```
 	 */
-	beforeLoad?(): void | Promise<void>;
+	beforeLoad?(context: HooksContext): void | Promise<void>;
 	/** A function that will be called after the route is loaded. */
-	afterLoad?(): void;
+	afterLoad?(context: HooksContext): void;
 	/** A function that will be called when the route is preloaded. */
-	onPreload?(): void;
+	onPreload?(context: HooksContext): void;
 };
 
 export type Routes = {
@@ -205,6 +205,14 @@ export type AllParams<T extends Routes> = Partial<
 	Record<ExtractParams<RemoveParenthesis<RecursiveKeys<T>>>, string>
 >;
 
+export type HooksContext = {
+	pathname: string;
+	replace?: boolean;
+	search?: string;
+	state?: string;
+	hash?: string;
+};
+
 export type NavigateOptions =
 	| {
 			replace?: boolean;