@funstack/router 0.0.9 → 1.0.0

package/dist/index.mjs

@@ -1,28 +1,12 @@
 "use client";
 
-import { n as routeState, t as route } from "./route-p_gr5yPI.mjs";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, useSyncExternalStore, useTransition } from "react";
+import { n as route, r as routeState, t as bindRoute } from "./bindRoute-C7JBYje-.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/RouteContext.ts
-const RouteContext = createContext(null);
-/**
-* Find a route context by ID in the ancestor chain.
-* Returns the matching context or null if not found.
-*/
-function findRouteContextById(context, id) {
-	let current = context;
-	while (current !== null) {
-		if (current.id === id) return current;
-		current = current.parent;
-	}
-	return null;
-}
-
 //#endregion
 //#region src/context/BlockerContext.ts
 /**
@@ -184,6 +168,29 @@ function matchPath(pattern, pathname, exact) {
 	};
 }
 
+//#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
 /**
@@ -317,8 +324,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?.()) {
@@ -334,7 +349,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)) {
@@ -433,7 +448,7 @@ 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;
@@ -461,7 +476,7 @@ 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;
@@ -491,121 +506,55 @@ function createAdapter(fallback) {
 }
 
 //#endregion
-//#region src/Router.tsx
+//#region src/Router/ServerLocationSnapshot.ts
 /**
-* Special value returned as server snapshot during SSR/hydration.
+* Special class returned as server snapshot during SSR/hydration.
 */
-const serverSnapshotSymbol = Symbol();
-const noopSubscribe = () => () => {};
-const getServerSnapshot = () => serverSnapshotSymbol;
-function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
-	const routes = internalRoutes(inputRoutes);
-	const adapter = useMemo(() => createAdapter(fallback), [fallback]);
-	const [blockerRegistry] = useState(() => createBlockerRegistry());
-	const initialEntry = useSyncExternalStore(noopSubscribe, useCallback(() => adapter.getSnapshot(), [adapter]), getServerSnapshot);
-	const [isPending, startTransition] = useTransition();
-	const [locationEntryInternal, setLocationEntry] = useState(initialEntry);
-	const locationEntry = locationEntryInternal === serverSnapshotSymbol ? null : locationEntryInternal;
-	if (locationEntryInternal === serverSnapshotSymbol && initialEntry !== serverSnapshotSymbol) setLocationEntry(initialEntry);
-	useEffect(() => {
-		return adapter.subscribe((changeType) => {
-			if (changeType === "navigation") startTransition(() => {
-				setLocationEntry(adapter.getSnapshot());
-			});
-			else setLocationEntry(adapter.getSnapshot());
-		});
-	}, [adapter, startTransition]);
-	useEffect(() => {
-		return adapter.setupInterception(routes, onNavigate, blockerRegistry.checkAll);
-	}, [
-		adapter,
-		routes,
-		onNavigate,
-		blockerRegistry
-	]);
-	const navigate = useCallback((to, options) => {
-		adapter.navigate(to, options);
-	}, [adapter]);
-	const navigateAsync = useCallback((to, options) => {
-		return adapter.navigateAsync(to, options);
-	}, [adapter]);
-	const updateCurrentEntryState = useCallback((state) => {
-		adapter.updateCurrentEntryState(state);
-	}, [adapter]);
-	return useMemo(() => {
-		const matchedRoutesWithData = (() => {
-			if (locationEntry === null && !ssr?.runLoaders) {
-				const matched = matchRoutes(routes, ssr?.path ?? null, { skipLoaders: true });
-				if (!matched) return null;
-				return matched.map((m) => ({
-					...m,
-					data: void 0
-				}));
-			}
-			const url = locationEntry ? locationEntry.url : new URL(ssr.path, "http://localhost");
-			const matched = matchRoutes(routes, url.pathname);
-			if (!matched) return null;
-			return executeLoaders(matched, locationEntry?.key ?? "ssr", createLoaderRequest(url), locationEntry ? adapter.getIdleAbortSignal() : new AbortController().signal);
-		})();
-		const routerContextValue = {
-			locationEntry,
-			url: locationEntry?.url ?? (ssr ? new URL(ssr.path, "http://localhost") : null),
-			isPending,
-			navigate,
-			navigateAsync,
-			updateCurrentEntryState
-		};
-		const blockerContextValue = { registry: blockerRegistry };
-		return /* @__PURE__ */ jsx(BlockerContext.Provider, {
-			value: blockerContextValue,
-			children: /* @__PURE__ */ jsx(RouterContext.Provider, {
-				value: routerContextValue,
-				children: matchedRoutesWithData ? /* @__PURE__ */ jsx(RouteRenderer, {
-					matchedRoutes: matchedRoutesWithData,
-					index: 0
-				}) : null
-			})
-		});
-	}, [
-		navigate,
-		navigateAsync,
-		updateCurrentEntryState,
-		isPending,
-		locationEntry,
-		routes,
-		adapter,
-		blockerRegistry,
-		ssr
-	]);
+var ServerLocationSnapshot = class {
+	actualLocationEntry;
+	constructor(adapter) {
+		this.actualLocationEntry = adapter.getSnapshot();
+	}
+};
+function isServerSnapshot(value) {
+	return value instanceof ServerLocationSnapshot;
 }
+const noopSubscribe = () => () => {};
+
+//#endregion
+//#region src/context/RouteContext.ts
+const RouteContext = createContext(null);
 /**
-* Recursively render matched routes with proper context.
+* Find a route context by ID in the ancestor chain.
+* Returns the matching context or null if not found.
 */
-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 { locationEntry, url, isPending, navigateAsync, updateCurrentEntryState } = routerContext;
-	const routeState = (locationEntry?.state)?.__routeStates?.[index];
+function findRouteContextById(context, id) {
+	let current = context;
+	while (current !== null) {
+		if (current.id === id) return current;
+		current = current.parent;
+	}
+	return null;
+}
+
+//#endregion
+//#region src/Router/useRouteStateCallbacks.ts
+function useRouteStateCallbacks(index, internalState, url, navigateAsync, updateCurrentEntryState) {
 	const setStateSync = useCallback((stateOrUpdater) => {
-		if (locationEntry === null) return;
-		const currentStates = locationEntry.state?.__routeStates ?? [];
+		const currentStates = internalState?.__routeStates ?? [];
 		const currentRouteState = currentStates[index];
 		const newState = typeof stateOrUpdater === "function" ? stateOrUpdater(currentRouteState) : stateOrUpdater;
 		const newStates = [...currentStates];
 		newStates[index] = newState;
 		updateCurrentEntryState({ __routeStates: newStates });
 	}, [
-		locationEntry?.state,
+		internalState,
 		index,
 		updateCurrentEntryState
 	]);
 	const setState = useCallback(async (stateOrUpdater) => {
-		if (locationEntry === null || url === null) return;
-		const currentStates = locationEntry.state?.__routeStates ?? [];
+		if (url === null) return;
+		const currentStates = internalState?.__routeStates ?? [];
 		const currentRouteState = currentStates[index];
 		const newState = typeof stateOrUpdater === "function" ? stateOrUpdater(currentRouteState) : stateOrUpdater;
 		const newStates = [...currentStates];
@@ -615,44 +564,65 @@ function RouteRenderer({ matchedRoutes, index }) {
 			state: { __routeStates: newStates }
 		});
 	}, [
-		locationEntry?.state,
+		internalState,
 		index,
 		url,
 		navigateAsync
 	]);
 	const resetStateSync = useCallback(() => {
-		if (locationEntry === null) return;
-		const newStates = [...locationEntry.state?.__routeStates ?? []];
+		const newStates = [...internalState?.__routeStates ?? []];
 		newStates[index] = void 0;
 		updateCurrentEntryState({ __routeStates: newStates });
 	}, [
-		locationEntry?.state,
+		internalState,
 		index,
 		updateCurrentEntryState
 	]);
-	const resetState = useCallback(async () => {
-		if (locationEntry === null || url === null) return;
-		const newStates = [...locationEntry.state?.__routeStates ?? []];
-		newStates[index] = void 0;
-		await navigateAsync(url.href, {
-			replace: true,
-			state: { __routeStates: newStates }
-		});
-	}, [
-		locationEntry?.state,
-		index,
-		url,
-		navigateAsync
-	]);
-	const outlet = index < matchedRoutes.length - 1 ? /* @__PURE__ */ jsx(RouteRenderer, {
+	return {
+		setState,
+		setStateSync,
+		resetState: useCallback(async () => {
+			if (url === null) return;
+			const newStates = [...internalState?.__routeStates ?? []];
+			newStates[index] = void 0;
+			await navigateAsync(url.href, {
+				replace: true,
+				state: { __routeStates: newStates }
+			});
+		}, [
+			internalState,
+			index,
+			url,
+			navigateAsync
+		]),
+		resetStateSync
+	};
+}
+
+//#endregion
+//#region src/Router/RouteRenderer.tsx
+/**
+* Recursively render matched routes with proper context.
+*/
+function RouteRenderer({ matchedRoutes, index }) {
+	const parentRouteContext = useContext(RouteContext);
+	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);
+	const outlet = useMemo(() => index < matchedRoutes.length - 1 ? /* @__PURE__ */ jsx(RouteRenderer, {
 		matchedRoutes,
 		index: index + 1
-	}) : null;
-	const routeId = route.id;
+	}) : null, [matchedRoutes, index]);
+	const routeId = route?.id;
 	const routeContextValue = useMemo(() => ({
 		id: routeId,
-		params,
-		matchedPath: pathname,
+		params: params ?? {},
+		matchedPath: pathname ?? "",
 		state: routeState,
 		data,
 		outlet,
@@ -666,6 +636,7 @@ function RouteRenderer({ matchedRoutes, index }) {
 		outlet,
 		parentRouteContext
 	]);
+	if (!match) return null;
 	const renderComponent = () => {
 		const componentOrElement = route.component;
 		if (componentOrElement == null) return outlet;
@@ -678,7 +649,7 @@ function RouteRenderer({ matchedRoutes, index }) {
 			resetState,
 			resetStateSync
 		};
-		const info = locationEntry?.info;
+		const info = locationInfo;
 		if (route.loader) return /* @__PURE__ */ jsx(Component, {
 			data,
 			params,
@@ -699,6 +670,119 @@ function RouteRenderer({ matchedRoutes, index }) {
 	});
 }
 
+//#endregion
+//#region src/Router/index.tsx
+function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
+	const routes = internalRoutes(inputRoutes);
+	const adapter = useMemo(() => createAdapter(fallback), [fallback]);
+	const [blockerRegistry] = useState(() => createBlockerRegistry());
+	const getSnapshot = useCallback(() => adapter.getSnapshot(), [adapter]);
+	const serverSnapshotCacheRef = useRef(null);
+	const initialEntry = useSyncExternalStore(noopSubscribe, getSnapshot, useCallback(() => {
+		return serverSnapshotCacheRef.current ??= new ServerLocationSnapshot(adapter);
+	}, [adapter]));
+	const [isPending, startTransition] = useTransition();
+	const [locationEntryInternal, setLocationEntry] = useState(initialEntry);
+	const locationEntry = isServerSnapshot(locationEntryInternal) ? null : locationEntryInternal;
+	if (isServerSnapshot(locationEntryInternal) && !isServerSnapshot(initialEntry)) setLocationEntry(initialEntry);
+	useEffect(() => {
+		return adapter.subscribe((changeType) => {
+			if (changeType === "navigation") startTransition(() => {
+				setLocationEntry(adapter.getSnapshot());
+			});
+			else setLocationEntry(adapter.getSnapshot());
+		});
+	}, [adapter, startTransition]);
+	const getRoutes = useEffectEvent(() => routes);
+	const handleNavigate = useEffectEvent((...args) => onNavigate?.(...args));
+	useEffect(() => {
+		return adapter.setupInterception(getRoutes, handleNavigate, blockerRegistry.checkAll);
+	}, [adapter, blockerRegistry]);
+	const navigateAsync = useCallback((to, options) => {
+		return adapter.navigateAsync(to, options);
+	}, [adapter]);
+	const updateCurrentEntryState = useCallback((state) => {
+		adapter.updateCurrentEntryState(state);
+	}, [adapter]);
+	const url = useMemo(() => {
+		if (locationEntry) return locationEntry.url.toString();
+		if (ssr) {
+			const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+			return new URL(ssr.path, origin).toString();
+		}
+		return null;
+	}, [locationEntry, ssr]);
+	/**
+	* URL object. Non-null when client-side or during SSR with ssr.path provided.
+	* Null during SSR without ssr.path.
+	*/
+	const urlObject = useMemo(() => url ? new URL(url) : null, [url]);
+	/**
+	* Whether to run loaders.
+	* 1. Loaders are always run for rendering with URL available (client-side)
+	* 2. During SSR, loaders are only run if ssr.runLoaders is true and URL is available (ssr.path provided).
+	*/
+	const runLoaders = locationEntry !== null || !!ssr?.runLoaders && urlObject !== null;
+	/**
+	* Key of location. This is used as the cache key for loader data saved in navigation entry.
+	*/
+	const locationKey = locationEntry?.key ?? (isServerSnapshot(locationEntryInternal) ? locationEntryInternal.actualLocationEntry?.key : null) ?? "ssr";
+	const matchedRoutesWithData = useMemo(() => {
+		if (!runLoaders) {
+			const matched = matchRoutes(routes, urlObject?.pathname ?? null, { skipLoaders: true });
+			if (!matched) return null;
+			return matched.map((m) => ({
+				...m,
+				data: void 0
+			}));
+		}
+		if (urlObject === null) throw new Error("Invariant failure: loaders cannot run without URL.");
+		const matched = matchRoutes(routes, urlObject.pathname);
+		if (!matched) return null;
+		return executeLoaders(matched, locationKey, createLoaderRequest(urlObject), adapter.getIdleAbortSignal());
+	}, [
+		routes,
+		adapter,
+		urlObject,
+		runLoaders,
+		locationKey
+	]);
+	const locationState = locationEntry?.state;
+	const locationInfo = locationEntry?.info;
+	const routerContextValue = useMemo(() => ({
+		locationState,
+		locationInfo,
+		url: urlObject,
+		isPending,
+		navigateAsync,
+		updateCurrentEntryState
+	}), [
+		locationState,
+		locationInfo,
+		urlObject,
+		isPending,
+		navigateAsync,
+		updateCurrentEntryState
+	]);
+	return useMemo(() => {
+		const blockerContextValue = { registry: blockerRegistry };
+		return /* @__PURE__ */ jsx(BlockerContext.Provider, {
+			value: blockerContextValue,
+			children: /* @__PURE__ */ jsx(RouterContext.Provider, {
+				value: routerContextValue,
+				children: matchedRoutesWithData ? /* @__PURE__ */ jsx(RouteRenderer, {
+					matchedRoutes: matchedRoutesWithData,
+					index: 0
+				}) : null
+			})
+		});
+	}, [
+		routerContextValue,
+		matchedRoutesWithData,
+		blockerRegistry
+	]);
+}
+
 //#endregion
 //#region src/Outlet.tsx
 /**
@@ -711,17 +795,6 @@ function Outlet() {
 	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
 /**
@@ -751,6 +824,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 { navigateAsync } = context;
 	return [currentUrl.searchParams, useCallback((params) => {
 		const url = new URL(currentUrl);
 		let newParams;
@@ -760,8 +834,8 @@ function useSearchParams() {
 		} else if (params instanceof URLSearchParams) newParams = params;
 		else newParams = new URLSearchParams(params);
 		url.search = newParams.toString();
-		context.navigate(url.pathname + url.search + url.hash, { replace: true });
-	}, [currentUrl, context.navigate])];
+		navigateAsync(url.pathname + url.search + url.hash, { replace: true });
+	}, [currentUrl, navigateAsync])];
 }
 
 //#endregion
@@ -928,5 +1002,5 @@ function useIsPending() {
 }
 
 //#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