@funstack/router 0.0.10 → 1.1.0

package/dist/index.mjs

@@ -1,12 +1,9 @@
 "use client";
-
-import { n as routeState, t as route } from "./route-p_gr5yPI.mjs";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
+import { n as route, r as routeState, t as bindRoute } from "./bindRoute-CQ2-ruTp.mjs";
+import { createContext, useCallback, useContext, useEffect, useEffectEvent, useId, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/context/RouterContext.ts
 const RouterContext = createContext(null);
-
 //#endregion
 //#region src/context/BlockerContext.ts
 /**
@@ -29,7 +26,6 @@ function createBlockerRegistry() {
 	};
 }
 const BlockerContext = createContext(null);
-
 //#endregion
 //#region src/types.ts
 /**
@@ -42,7 +38,6 @@ const BlockerContext = createContext(null);
 function internalRoutes(routes) {
 	return routes;
 }
-
 //#endregion
 //#region src/core/matchRoutes.ts
 const SKIPPED = Symbol("skipped");
@@ -167,10 +162,42 @@ function matchPath(pattern, pathname, exact) {
 		consumedPathname
 	};
 }
-
+//#endregion
+//#region src/bypassInterception.ts
+const bypassInterceptionSymbol = Symbol("bypassInterception");
+/**
+* Check if the given info is a bypass interception marker.
+*/
+function isBypassInterception(info) {
+	return info === bypassInterceptionSymbol;
+}
+/**
+* Perform a full page reload, bypassing the router's interception.
+*/
+function hardReload() {
+	navigation.reload({ info: bypassInterceptionSymbol });
+}
+/**
+* Navigate to the given URL with a full page navigation,
+* bypassing the router's interception.
+*/
+function hardNavigate(url) {
+	navigation.navigate(url, { info: bypassInterceptionSymbol });
+}
 //#endregion
 //#region src/core/loaderCache.ts
 /**
+* Wrapper for synchronous errors thrown by loaders.
+* Cached instead of the raw error so the Router's useMemo doesn't throw.
+* RouteRenderer checks for this class and re-throws the original error
+* during rendering, where Error Boundaries can catch it.
+*/
+var LoaderError = class {
+	constructor(error) {
+		this.error = error;
+	}
+};
+/**
 * Cache for loader results.
 * Key format: `${entryId}:${matchIndex}`
 */
@@ -182,7 +209,11 @@ const loaderCache = /* @__PURE__ */ new Map();
 function getOrCreateLoaderResult(entryId, matchIndex, route, args) {
 	if (!route.loader) return;
 	const cacheKey = `${entryId}:${matchIndex}`;
-	if (!loaderCache.has(cacheKey)) loaderCache.set(cacheKey, route.loader(args));
+	if (!loaderCache.has(cacheKey)) try {
+		loaderCache.set(cacheKey, route.loader(args));
+	} catch (error) {
+		loaderCache.set(cacheKey, new LoaderError(error));
+	}
 	return loaderCache.get(cacheKey);
 }
 /**
@@ -227,7 +258,6 @@ function clearLoaderCacheForEntry(entryId) {
 	const prefix = `${entryId}:`;
 	for (const key of loaderCache.keys()) if (key.startsWith(prefix)) loaderCache.delete(key);
 }
-
 //#endregion
 //#region src/core/NavigationAPIAdapter.ts
 /**
@@ -244,6 +274,7 @@ var NavigationAPIAdapter = class {
 	#cachedSnapshot = null;
 	#cachedEntryId = null;
 	#currentNavigationInfo = void 0;
+	#reloadCounts = /* @__PURE__ */ new Map();
 	getSnapshot() {
 		const entry = navigation.currentEntry;
 		if (!entry?.url) return null;
@@ -251,7 +282,9 @@ var NavigationAPIAdapter = class {
 		this.#cachedEntryId = entry.id;
 		this.#cachedSnapshot = {
 			url: new URL(entry.url),
-			key: entry.id,
+			key: this.#effectiveKey(entry.id),
+			entryId: entry.id,
+			entryKey: entry.key,
 			state: entry.getState(),
 			info: this.#currentNavigationInfo
 		};
@@ -284,9 +317,19 @@ var NavigationAPIAdapter = class {
 			entry.addEventListener("dispose", () => {
 				clearLoaderCacheForEntry(entryId);
 				this.#subscribedEntryIds.delete(entryId);
+				this.#reloadCounts.delete(entryId);
 			}, { signal });
 		}
 	}
+	/**
+	* Compute the effective cache key for a given entry.
+	* Includes a reload suffix when the entry has been reloaded,
+	* so loaders get a fresh cache key and re-execute.
+	*/
+	#effectiveKey(entryId) {
+		const count = this.#reloadCounts.get(entryId) ?? 0;
+		return count > 0 ? `${entryId}:r${count}` : entryId;
+	}
 	navigate(to, options) {
 		navigation.navigate(to, {
 			history: options?.replace ? "replace" : "push",
@@ -301,8 +344,16 @@ var NavigationAPIAdapter = class {
 			info: options?.info
 		}).finished;
 	}
-	setupInterception(routes, onNavigate, checkBlockers) {
+	setupInterception(getRoutes, onNavigate, checkBlockers) {
 		const handleNavigate = (event) => {
+			if (isBypassInterception(event.info)) {
+				onNavigate?.(event, {
+					matches: [],
+					intercepting: false,
+					formData: event.formData
+				});
+				return;
+			}
 			this.#currentNavigationInfo = event.info;
 			this.#cachedSnapshot = null;
 			if (checkBlockers?.()) {
@@ -318,7 +369,7 @@ var NavigationAPIAdapter = class {
 				return;
 			}
 			const url = new URL(event.destination.url);
-			const matched = matchRoutes(routes, url.pathname);
+			const matched = matchRoutes(getRoutes(), url.pathname);
 			const isFormSubmission = event.formData !== null;
 			if (isFormSubmission && matched !== null) {
 				if (!matched.some((m) => m.route.action)) {
@@ -340,6 +391,13 @@ var NavigationAPIAdapter = class {
 				if (event.defaultPrevented) return;
 			}
 			if (!willIntercept) return;
+			if (event.navigationType === "reload") {
+				const entryId = navigation.currentEntry.id;
+				const oldCount = this.#reloadCounts.get(entryId) ?? 0;
+				if (oldCount >= 2) clearLoaderCacheForEntry(`${entryId}:r${oldCount - 1}`);
+				this.#reloadCounts.set(entryId, oldCount + 1);
+				this.#cachedSnapshot = null;
+			}
 			if (idleController) {
 				idleController.abort();
 				idleController = null;
@@ -347,6 +405,7 @@ var NavigationAPIAdapter = class {
 			event.intercept({ handler: async () => {
 				const currentEntry = navigation.currentEntry;
 				if (!currentEntry) throw new Error("Navigation currentEntry is null during navigation interception");
+				const effectiveKey = this.#effectiveKey(currentEntry.id);
 				let actionResult = void 0;
 				if (isFormSubmission) {
 					const actionRoute = findActionRoute(matched);
@@ -360,8 +419,7 @@ var NavigationAPIAdapter = class {
 					}
 					clearLoaderCacheForEntry(currentEntry.id);
 				}
-				const request = createLoaderRequest(url);
-				const results = executeLoaders(matched, currentEntry.id, request, event.signal, actionResult);
+				const results = executeLoaders(matched, effectiveKey, createLoaderRequest(url), event.signal, actionResult);
 				await Promise.all(results.map((r) => r.data));
 			} });
 		};
@@ -387,7 +445,6 @@ var NavigationAPIAdapter = class {
 function findActionRoute(matched) {
 	for (let i = matched.length - 1; i >= 0; i--) if (matched[i].route.action) return matched[i];
 }
-
 //#endregion
 //#region src/core/StaticAdapter.ts
 /**
@@ -403,6 +460,8 @@ var StaticAdapter = class {
 		if (!this.#cachedSnapshot) this.#cachedSnapshot = {
 			url: new URL(window.location.href),
 			key: "__static__",
+			entryId: null,
+			entryKey: null,
 			state: void 0,
 			info: void 0
 		};
@@ -417,14 +476,13 @@ var StaticAdapter = class {
 	async navigateAsync(to, options) {
 		this.navigate(to, options);
 	}
-	setupInterception(_routes, _onNavigate, _checkBlockers) {}
+	setupInterception(_getRoutes, _onNavigate, _checkBlockers) {}
 	getIdleAbortSignal() {
 		this.#idleController ??= new AbortController();
 		return this.#idleController.signal;
 	}
 	updateCurrentEntryState(_state) {}
 };
-
 //#endregion
 //#region src/core/NullAdapter.ts
 /**
@@ -445,14 +503,13 @@ var NullAdapter = class {
 	async navigateAsync(to, options) {
 		this.navigate(to, options);
 	}
-	setupInterception(_routes, _onNavigate, _checkBlockers) {}
+	setupInterception(_getRoutes, _onNavigate, _checkBlockers) {}
 	getIdleAbortSignal() {
 		this.#idleController ??= new AbortController();
 		return this.#idleController.signal;
 	}
 	updateCurrentEntryState(_state) {}
 };
-
 //#endregion
 //#region src/core/createAdapter.ts
 /**
@@ -473,7 +530,6 @@ function createAdapter(fallback) {
 	if (fallback === "static") return new StaticAdapter();
 	return new NullAdapter();
 }
-
 //#endregion
 //#region src/Router/ServerLocationSnapshot.ts
 /**
@@ -489,7 +545,6 @@ function isServerSnapshot(value) {
 	return value instanceof ServerLocationSnapshot;
 }
 const noopSubscribe = () => () => {};
-
 //#endregion
 //#region src/context/RouteContext.ts
 const RouteContext = createContext(null);
@@ -505,7 +560,6 @@ function findRouteContextById(context, id) {
 	}
 	return null;
 }
-
 //#endregion
 //#region src/Router/useRouteStateCallbacks.ts
 function useRouteStateCallbacks(index, internalState, url, navigateAsync, updateCurrentEntryState) {
@@ -567,7 +621,6 @@ function useRouteStateCallbacks(index, internalState, url, navigateAsync, update
 		resetStateSync
 	};
 }
-
 //#endregion
 //#region src/Router/RouteRenderer.tsx
 /**
@@ -575,12 +628,11 @@ function useRouteStateCallbacks(index, internalState, url, navigateAsync, update
 */
 function RouteRenderer({ matchedRoutes, index }) {
 	const parentRouteContext = useContext(RouteContext);
-	const match = matchedRoutes[index];
-	if (!match) return null;
-	const { route, params, pathname, data } = match;
 	const routerContext = useContext(RouterContext);
 	if (!routerContext) throw new Error("RouteRenderer must be used within RouterContext");
 	const { locationState, locationInfo, url, isPending, navigateAsync, updateCurrentEntryState } = routerContext;
+	const match = matchedRoutes[index];
+	const { route, params, pathname, data } = match ?? {};
 	const internalState = locationState;
 	const routeState = internalState?.__routeStates?.[index];
 	const { setState, setStateSync, resetState, resetStateSync } = useRouteStateCallbacks(index, internalState, url, navigateAsync, updateCurrentEntryState);
@@ -588,11 +640,11 @@ function RouteRenderer({ matchedRoutes, index }) {
 		matchedRoutes,
 		index: index + 1
 	}) : null, [matchedRoutes, index]);
-	const routeId = route.id;
+	const routeId = route?.id;
 	const routeContextValue = useMemo(() => ({
 		id: routeId,
-		params,
-		matchedPath: pathname,
+		params: params ?? {},
+		matchedPath: pathname ?? "",
 		state: routeState,
 		data,
 		outlet,
@@ -606,6 +658,7 @@ function RouteRenderer({ matchedRoutes, index }) {
 		outlet,
 		parentRouteContext
 	]);
+	if (!match) return null;
 	const renderComponent = () => {
 		const componentOrElement = route.component;
 		if (componentOrElement == null) return outlet;
@@ -619,6 +672,7 @@ function RouteRenderer({ matchedRoutes, index }) {
 			resetStateSync
 		};
 		const info = locationInfo;
+		if (data instanceof LoaderError) throw data.error;
 		if (route.loader) return /* @__PURE__ */ jsx(Component, {
 			data,
 			params,
@@ -638,7 +692,6 @@ function RouteRenderer({ matchedRoutes, index }) {
 		children: renderComponent()
 	});
 }
-
 //#endregion
 //#region src/Router/index.tsx
 function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
@@ -662,17 +715,11 @@ function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
 			else setLocationEntry(adapter.getSnapshot());
 		});
 	}, [adapter, startTransition]);
+	const getRoutes = useEffectEvent(() => routes);
+	const handleNavigate = useEffectEvent((...args) => onNavigate?.(...args));
 	useEffect(() => {
-		return adapter.setupInterception(routes, onNavigate, blockerRegistry.checkAll);
-	}, [
-		adapter,
-		routes,
-		onNavigate,
-		blockerRegistry
-	]);
-	const navigate = useCallback((to, options) => {
-		adapter.navigate(to, options);
-	}, [adapter]);
+		return adapter.setupInterception(getRoutes, handleNavigate, blockerRegistry.checkAll);
+	}, [adapter, blockerRegistry]);
 	const navigateAsync = useCallback((to, options) => {
 		return adapter.navigateAsync(to, options);
 	}, [adapter]);
@@ -724,20 +771,24 @@ function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
 	]);
 	const locationState = locationEntry?.state;
 	const locationInfo = locationEntry?.info;
+	const entryId = locationEntry?.entryId ?? (isServerSnapshot(locationEntryInternal) ? locationEntryInternal.actualLocationEntry?.entryId : null) ?? null;
+	const entryKey = locationEntry?.entryKey ?? (isServerSnapshot(locationEntryInternal) ? locationEntryInternal.actualLocationEntry?.entryKey : null) ?? null;
 	const routerContextValue = useMemo(() => ({
 		locationState,
 		locationInfo,
 		url: urlObject,
+		entryId,
+		entryKey,
 		isPending,
-		navigate,
 		navigateAsync,
 		updateCurrentEntryState
 	}), [
 		locationState,
 		locationInfo,
 		urlObject,
+		entryId,
+		entryKey,
 		isPending,
-		navigate,
 		navigateAsync,
 		updateCurrentEntryState
 	]);
@@ -759,7 +810,6 @@ function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
 		blockerRegistry
 	]);
 }
-
 //#endregion
 //#region src/Outlet.tsx
 /**
@@ -771,18 +821,6 @@ function Outlet() {
 	if (!routeContext) return null;
 	return routeContext.outlet;
 }
-
-//#endregion
-//#region src/hooks/useNavigate.ts
-/**
-* Returns a function for programmatic navigation.
-*/
-function useNavigate() {
-	const context = useContext(RouterContext);
-	if (!context) throw new Error("useNavigate must be used within a Router");
-	return context.navigate;
-}
-
 //#endregion
 //#region src/hooks/useLocation.ts
 /**
@@ -791,17 +829,22 @@ function useNavigate() {
 function useLocation() {
 	const context = useContext(RouterContext);
 	if (!context) throw new Error("useLocation must be used within a Router");
-	const { url } = context;
+	const { url, entryId, entryKey } = context;
 	if (url === null) throw new Error("useLocation: URL is not available during SSR.");
 	return useMemo(() => {
 		return {
 			pathname: url.pathname,
 			search: url.search,
-			hash: url.hash
+			hash: url.hash,
+			entryId,
+			entryKey
 		};
-	}, [url]);
+	}, [
+		url,
+		entryId,
+		entryKey
+	]);
 }
-
 //#endregion
 //#region src/hooks/useSearchParams.ts
 /**
@@ -812,7 +855,7 @@ function useSearchParams() {
 	if (!context) throw new Error("useSearchParams must be used within a Router");
 	if (context.url === null) throw new Error("useSearchParams: URL is not available during SSR.");
 	const currentUrl = context.url;
-	const { navigate } = context;
+	const { navigateAsync } = context;
 	return [currentUrl.searchParams, useCallback((params) => {
 		const url = new URL(currentUrl);
 		let newParams;
@@ -822,10 +865,9 @@ function useSearchParams() {
 		} else if (params instanceof URLSearchParams) newParams = params;
 		else newParams = new URLSearchParams(params);
 		url.search = newParams.toString();
-		navigate(url.pathname + url.search + url.hash, { replace: true });
-	}, [currentUrl, navigate])];
+		navigateAsync(url.pathname + url.search + url.hash, { replace: true });
+	}, [currentUrl, navigateAsync])];
 }
-
 //#endregion
 //#region src/hooks/useBlocker.ts
 /**
@@ -869,7 +911,6 @@ function useBlocker(options) {
 		registry
 	]);
 }
-
 //#endregion
 //#region src/hooks/useRouteContext.ts
 /**
@@ -891,7 +932,6 @@ function useRouteContext(hookName, routeId) {
 	if (!matchedContext) throw new Error(`${hookName}: Route ID "${routeId}" not found in current route hierarchy. Current route is "${context.id ?? "(no id)"}"`);
 	return matchedContext;
 }
-
 //#endregion
 //#region src/hooks/useRouteParams.ts
 /**
@@ -918,7 +958,6 @@ function useRouteParams(route) {
 	const routeId = route.id;
 	return useRouteContext("useRouteParams", routeId).params;
 }
-
 //#endregion
 //#region src/hooks/useRouteState.ts
 /**
@@ -946,7 +985,6 @@ function useRouteState(route) {
 	const routeId = route.id;
 	return useRouteContext("useRouteState", routeId).state;
 }
-
 //#endregion
 //#region src/hooks/useRouteData.ts
 /**
@@ -977,7 +1015,6 @@ function useRouteData(route) {
 	const routeId = route.id;
 	return useRouteContext("useRouteData", routeId).data;
 }
-
 //#endregion
 //#region src/hooks/useIsPending.ts
 /**
@@ -988,7 +1025,7 @@ function useIsPending() {
 	if (!context) throw new Error("useIsPending must be used within a Router");
 	return context.isPending;
 }
-
 //#endregion
-export { Outlet, Router, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
+export { Outlet, Router, bindRoute, hardNavigate, hardReload, route, routeState, useBlocker, useIsPending, useLocation, useRouteData, useRouteParams, useRouteState, useSearchParams };
+
 //# sourceMappingURL=index.mjs.map