@funstack/router 0.0.8 → 0.0.10

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 { createContext, useCallback, useContext, useEffect, 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
 /**
@@ -61,6 +45,7 @@ function internalRoutes(routes) {
 
 //#endregion
 //#region src/core/matchRoutes.ts
+const SKIPPED = Symbol("skipped");
 /**
 * Match a pathname against a route tree, returning the matched route stack.
 * Returns null if no match is found.
@@ -68,6 +53,7 @@ function internalRoutes(routes) {
 function matchRoutes(routes, pathname, options) {
 	for (const route of routes) {
 		const matched = matchRoute(route, pathname, options);
+		if (matched === SKIPPED) return null;
 		if (matched) return matched;
 	}
 	return null;
@@ -78,7 +64,15 @@ function matchRoutes(routes, pathname, options) {
 function matchRoute(route, pathname, options) {
 	const hasChildren = Boolean(route.children?.length);
 	const skipLoaders = options?.skipLoaders ?? false;
-	if ((pathname === null || skipLoaders) && route.loader) return null;
+	if ((pathname === null || skipLoaders) && route.loader) {
+		if (skipLoaders && pathname !== null) {
+			if (route.path === void 0) return SKIPPED;
+			const isExact = route.exact ?? !hasChildren;
+			const { matched } = matchPath(route.path, pathname, isExact);
+			if (matched) return SKIPPED;
+		}
+		return null;
+	}
 	if (route.path === void 0) {
 		const result = {
 			route,
@@ -86,10 +80,19 @@ function matchRoute(route, pathname, options) {
 			pathname: ""
 		};
 		if (hasChildren) {
+			let anySkipped = false;
 			for (const child of route.children) {
 				const childMatch = matchRoute(child, pathname, options);
+				if (childMatch === SKIPPED) {
+					anySkipped = true;
+					break;
+				}
 				if (childMatch) return [result, ...childMatch];
 			}
+			if (anySkipped) {
+				if (route.component) return [result];
+				return SKIPPED;
+			}
 			if (route.component && route.requireChildren === false) return [result];
 			if ((pathname === null || skipLoaders) && route.component) return [result];
 			return null;
@@ -109,8 +112,13 @@ function matchRoute(route, pathname, options) {
 		let remainingPathname = pathname.slice(consumedPathname.length);
 		if (!remainingPathname.startsWith("/")) remainingPathname = "/" + remainingPathname;
 		if (remainingPathname === "") remainingPathname = "/";
+		let anyChildSkipped = false;
 		for (const child of route.children) {
 			const childMatch = matchRoute(child, remainingPathname, options);
+			if (childMatch === SKIPPED) {
+				anyChildSkipped = true;
+				break;
+			}
 			if (childMatch) return [result, ...childMatch.map((m) => ({
 				...m,
 				params: {
@@ -119,6 +127,10 @@ function matchRoute(route, pathname, options) {
 				}
 			}))];
 		}
+		if (anyChildSkipped) {
+			if (route.component) return [result];
+			return SKIPPED;
+		}
 		if (route.component && route.requireChildren === false) return [result];
 		if (skipLoaders && route.component) return [result];
 		return null;
@@ -463,121 +475,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", ssrPathname }) {
-	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) {
-				const matched = matchRoutes(routes, ssrPathname ?? null, { skipLoaders: true });
-				if (!matched) return null;
-				return matched.map((m) => ({
-					...m,
-					data: void 0
-				}));
-			}
-			const { url, key } = locationEntry;
-			const matched = matchRoutes(routes, url.pathname);
-			if (!matched) return null;
-			return executeLoaders(matched, key, createLoaderRequest(url), adapter.getIdleAbortSignal());
-		})();
-		const routerContextValue = {
-			locationEntry,
-			url: locationEntry?.url ?? 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,
-		ssrPathname
-	]);
+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];
@@ -587,39 +533,61 @@ 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 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 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;
+	}) : null, [matchedRoutes, index]);
 	const routeId = route.id;
 	const routeContextValue = useMemo(() => ({
 		id: routeId,
@@ -650,7 +618,7 @@ function RouteRenderer({ matchedRoutes, index }) {
 			resetState,
 			resetStateSync
 		};
-		const info = locationEntry?.info;
+		const info = locationInfo;
 		if (route.loader) return /* @__PURE__ */ jsx(Component, {
 			data,
 			params,
@@ -671,6 +639,127 @@ 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]);
+	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]);
+	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,
+		navigate,
+		navigateAsync,
+		updateCurrentEntryState
+	}), [
+		locationState,
+		locationInfo,
+		urlObject,
+		isPending,
+		navigate,
+		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
 /**
@@ -723,6 +812,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;
 	return [currentUrl.searchParams, useCallback((params) => {
 		const url = new URL(currentUrl);
 		let newParams;
@@ -732,8 +822,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])];
+		navigate(url.pathname + url.search + url.hash, { replace: true });
+	}, [currentUrl, navigate])];
 }
 
 //#endregion