clear-react-router 1.7.3 → 1.7.4

package/README.md

@@ -2,7 +2,7 @@
 
 # Clear Router
 
-A lightweight, type-safe routing library for React applications with nested routes, data loading, navigation blocking, prefetching, and route actions.
+A lightweight, type-safe routing library for client side React applications with nested routes, data loading, navigation blocking, prefetching, and route actions.
 
 ## Why Clear Router?
 
@@ -418,6 +418,8 @@ You can also invalidate any registered route by passing its pathname:
 const invalidate = useInvalidate();
 
 await invalidate('/posts');
+await invalidate('/posts/[id]');
+await invalidate('/posts/[id]/comment/[id]');
 ```
 
 The route does not need to be currently active. Its cache will be marked as stale, and the next time it is visited, `beforeLoad` and `loader` will run again.

package/dist/cell.d.ts

@@ -0,0 +1,10 @@
+declare class Cell<T> {
+    private _value;
+    constructor(_value: T);
+    get value(): T;
+    set(action: T | ((prev: T) => T)): void;
+}
+export declare const loaderStateRef: Cell<import("./types/global").LoaderState>;
+export declare const prevPathnameRef: Cell<string>;
+export declare const timestampMap: Map<string, number>;
+export {};

package/dist/config/routerConfig.d.ts

@@ -1,6 +1,9 @@
 import { RouterProps } from '../types/global';
 declare class RouterConfig {
+    routes: RouterProps['routes'];
     prefetch: RouterProps['prefetch'];
+    isAnimated: RouterProps['isAnimated'];
+    showFallbackOnAnimation: RouterProps['showFallbackOnAnimation'];
     hoverPrefetchDelay: number;
     configure(config: Partial<RouterConfig>): void;
 }

package/dist/hooks/useNavigation.d.ts

@@ -1,15 +1 @@
-import { RefObject } from 'react';
-import { LoaderState, Location, RevalidateCacheArgs, RouteItem } from '../types/global';
-type UseHandleNavigation = {
-    routes: RouteItem[];
-    revalidateCache(arg: RevalidateCacheArgs): Promise<unknown>;
-    isCacheItemFresh(arg: {
-        routeItem?: RouteItem;
-        pathname: string;
-    }): boolean;
-    loaderStateRef: RefObject<LoaderState>;
-    isAnimated: boolean;
-    showFallbackOnAnimation: boolean;
-};
-export declare const useNavigation: ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef, isAnimated, showFallbackOnAnimation: showFallback, }: UseHandleNavigation) => (nextLocation: Location) => Promise<void>;
-export {};
+export declare const useNavigation: () => void;

package/dist/hooks/useSetRouterConfig.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types/global';
-export declare const useSetRouterConfig: (routerProps: Omit<RouterProps, "routes">) => void;
+export declare const useSetRouterConfig: (routerProps: RouterProps) => void;

package/dist/index.js

@@ -37,28 +37,88 @@ var createState = (initialState) => {
 var emptyLoaderState = {};
 //#endregion
 //#region state/state.ts
-var useIsLoading = createState(false);
+var isLoadingState = create(false);
+var useIsLoading = () => useGlobalState(isLoadingState);
 var useBlockedRoute = createState({
 	from: "",
 	to: ""
 });
-var useLoaderFallback = createState(void 0);
-var useRouteItemData = createState({
+var loaderFallbackState = create(void 0);
+var useLoaderFallback = () => useGlobalState(loaderFallbackState);
+var routeItemDataState = create({
 	routeItem: void 0,
 	location: {}
 });
-var useCurrentLoaderState = createState(emptyLoaderState);
-var useScrollMap = createState({});
-var useContextState = createState({});
-var useActionState = createState({});
+var useRouteItemData = () => useGlobalState(routeItemDataState);
+var currentLoaderState = create(emptyLoaderState);
+var useCurrentLoaderState = () => useGlobalState(currentLoaderState);
+var scrollMapState = create({});
+var useScrollMap = () => useGlobalState(scrollMapState);
+var contextState = create({});
+var useContextState = () => useGlobalState(contextState);
 //#endregion
-//#region hooks/useLatest.ts
-var useLatest = (value) => {
-	const ref = useRef(value);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref;
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region cell.ts
+var Cell = class {
+	constructor(_value) {
+		_defineProperty(this, "_value", void 0);
+		this._value = _value;
+	}
+	get value() {
+		return this._value;
+	}
+	set(action) {
+		this._value = typeof action === "function" ? action(this._value) : action;
+	}
+};
+var loaderStateRef = new Cell(emptyLoaderState);
+var prevPathnameRef = new Cell("");
+var timestampMap = /* @__PURE__ */ new Map();
+//#endregion
+//#region utils/isCacheItemFresh.ts
+var isCacheItemFresh = ({ routeItem, pathname }) => {
+	if (!routeItem) return true;
+	const currentCacheTimestamp = timestampMap.get(pathname);
+	if (!currentCacheTimestamp) return false;
+	if (!routeItem.staleTime) return true;
+	return Date.now() - currentCacheTimestamp < routeItem.staleTime;
 };
 //#endregion
 //#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
@@ -149,278 +209,194 @@ var comparePaths = (el, pathname) => {
 	return splitElementPath.every((item, index) => item === splitPathname[index + (index ? 1 : 0)]) && splitPathname.length === splitElementPath.length + paramsLength;
 };
 //#endregion
-//#region hooks/useLoader.ts
-var useLoader = (routes) => {
-	const [, setLoaderState] = useCurrentLoaderState();
-	const [routeItemData] = useRouteItemData();
-	const [context, setContext] = useContextState();
-	const loaderStateRef = useRef(emptyLoaderState);
-	const latestPathname = useLatest(routeItemData.location.pathname);
-	const timestampMapRef = useRef(/* @__PURE__ */ new Map());
-	const loaderMapRef = useRef({});
-	const loadingPromises = useRef(/* @__PURE__ */ new Map());
-	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
-		if (!routeItem) return true;
-		const currentCacheTimestamp = timestampMapRef.current.get(pathname);
-		if (!currentCacheTimestamp) return false;
-		if (!routeItem.staleTime) return true;
-		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
-	}, []);
-	const revalidateCache = useCallback(async ({ routeItem, pathname }) => {
-		if (!routeItem?.loader) return;
-		if (loadingPromises.current.has(pathname)) return loadingPromises.current.get(pathname);
-		if (isCacheItemFresh({
-			routeItem,
-			pathname
-		})) {
-			loaderStateRef.current = loaderMapRef.current[pathname];
-			return;
-		}
-		const promise = (async () => {
-			if (!routeItem?.loader) return;
-			try {
-				const params = getParamsObject({
-					params: routeItem.params,
-					pathname
-				});
-				const result = await routeItem?.loader({
-					params,
-					context,
-					setContext
-				});
-				timestampMapRef.current.set(pathname, Date.now());
-				loaderStateRef.current = {
-					...loaderStateRef?.current,
-					data: result,
-					loaderError: null
-				};
-				loaderMapRef.current[pathname] = loaderStateRef.current;
-			} catch (error) {
-				loaderStateRef.current = {
-					...loaderStateRef?.current,
-					data: null,
-					loaderError: error
-				};
-			} finally {
-				loadingPromises.current.delete(pathname);
-			}
-		})();
-		loadingPromises.current.set(pathname, promise);
-		return promise;
-	}, [
-		context,
-		isCacheItemFresh,
-		setContext
-	]);
+//#region utils/getContext.ts
+var getContext = () => {
 	return {
-		prefetchLoader: useCallback(async (pathname) => {
-			const item = routes.find((el) => comparePaths(el, pathname));
-			if (item) await revalidateCache({
-				routeItem: item,
-				pathname
-			});
-		}, [revalidateCache, routes]),
-		revalidateCache,
-		isCacheItemFresh,
-		loaderStateRef,
-		invalidate: useCallback(async (pathname = latestPathname.current) => {
-			if (typeof pathname !== "string") return;
-			const routeItem = routes.find((el) => comparePaths(el, pathname));
-			const resultParams = getParamsObject({
-				params: routeItem?.params,
+		context: contextState.getState(),
+		setContext: contextState.setState
+	};
+};
+//#endregion
+//#region utils/revalidateCache.ts
+var loaderMapRef = {};
+var loadingPromises = /* @__PURE__ */ new Map();
+var revalidateCache = ({ routeItem, pathname }) => {
+	if (!routeItem?.loader) return;
+	if (loadingPromises.has(pathname)) return loadingPromises.get(pathname);
+	if (isCacheItemFresh({
+		routeItem,
+		pathname
+	})) {
+		loaderStateRef.set(loaderMapRef[pathname]);
+		return;
+	}
+	const promise = (async () => {
+		if (!routeItem?.loader) return;
+		try {
+			const { context, setContext } = getContext();
+			const params = getParamsObject({
+				params: routeItem.params,
 				pathname
 			});
-			timestampMapRef.current.delete(pathname);
-			try {
-				if (routeItem?.beforeLoad) await routeItem.beforeLoad({
-					context,
-					redirect: () => Promise.resolve(),
-					params: resultParams,
-					setContext
-				});
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: null
-				};
-			} catch (error) {
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: error
-				};
-			}
-			await revalidateCache({
-				routeItem,
-				pathname
+			const result = await routeItem?.loader({
+				params,
+				context,
+				setContext
 			});
-			if (pathname === latestPathname.current) setLoaderState(loaderStateRef.current);
-		}, [
-			context,
-			loaderStateRef,
-			revalidateCache,
-			latestPathname,
-			routes,
-			setContext,
-			setLoaderState
-		])
-	};
+			timestampMap.set(pathname, Date.now());
+			loaderStateRef.set((prev) => ({
+				...prev,
+				data: result,
+				loaderError: null
+			}));
+			loaderMapRef[pathname] = loaderStateRef.value;
+		} catch (error) {
+			loaderStateRef.set((prev) => ({
+				...prev,
+				data: null,
+				loaderError: error
+			}));
+		} finally {
+			loadingPromises.delete(pathname);
+		}
+	})();
+	loadingPromises.set(pathname, promise);
+	return promise;
 };
 //#endregion
-//#region hooks/useNavigation.ts
-var ALL_LOCATIONS = "*";
-var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef, isAnimated, showFallbackOnAnimation: showFallback }) => {
-	const [, setIsLoading] = useIsLoading();
-	const [, setScrollMap] = useScrollMap();
-	const [, setRouteItemData] = useRouteItemData();
-	const [, setLoaderState] = useCurrentLoaderState();
-	const [, setCurrentLoaderFallback] = useLoaderFallback();
-	const [context, setContext] = useContextState();
-	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const prevPathname = useRef("");
-	const navigationSeq = useRef(0);
-	const navigation = useCallback((nextLocation, routeItem) => {
-		setRouteItemData({
-			routeItem,
-			location: nextLocation
-		});
-		setLoaderState(loaderStateRef.current);
-		setIsLoading(false);
-		setCurrentLoaderFallback(void 0);
-		prevPathname.current = nextLocation.pathname;
-		const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
-		if (fullPath === window.location.pathname + window.location.search) return;
-		history.pushState(null, "", fullPath);
-	}, [
-		loaderStateRef,
-		setCurrentLoaderFallback,
-		setIsLoading,
-		setLoaderState,
-		setRouteItemData
-	]);
-	const transitionedNavigation = useCallback((nextLocation, routeItem) => {
-		if (!isAnimated || !prevPathname.current) {
-			navigation(nextLocation, routeItem);
-			return;
-		}
+//#region utils/navigationExecutor.ts
+var navigationExecutor = (nextLocation, routeItem) => {
+	routeItemDataState.setState({
+		routeItem,
+		location: nextLocation
+	});
+	currentLoaderState.setState(loaderStateRef.value);
+	isLoadingState.setState(false);
+	loaderFallbackState.setState(void 0);
+	prevPathnameRef.set(nextLocation.pathname);
+	const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
+	if (fullPath === window.location.pathname + window.location.search) return;
+	history.pushState(null, "", fullPath);
+};
+//#endregion
+//#region config/routerConfig.ts
+var RouterConfig = class {
+	constructor() {
+		_defineProperty(this, "routes", []);
+		_defineProperty(this, "prefetch", "hover");
+		_defineProperty(this, "isAnimated", false);
+		_defineProperty(this, "showFallbackOnAnimation", false);
+		_defineProperty(this, "hoverPrefetchDelay", 150);
+	}
+	configure(config) {
+		Object.assign(this, config);
+	}
+};
+var routerConfig = new RouterConfig();
+//#endregion
+//#region utils/transitionedNavigation.ts
+var transitionedNavigation = (nextLocation, routeItem) => {
+	const { isAnimated } = routerConfig;
+	if (!isAnimated || !prevPathnameRef.value) {
+		navigationExecutor(nextLocation, routeItem);
+		return;
+	}
+	try {
+		document.startViewTransition(() => navigationExecutor(nextLocation, routeItem));
+	} catch {
+		navigationExecutor(nextLocation, routeItem);
+	}
+};
+var findRoute = (pathname, includeAll) => {
+	if (includeAll) return routerConfig.routes.find((el) => el.path === "*" || comparePaths(el, pathname));
+	return routerConfig.routes.find((el) => el.path === "*" || comparePaths(el, pathname));
+};
+//#endregion
+//#region runtime/navigate.ts
+var navigationSeq = 0;
+var navigate = async (nextLocation) => {
+	navigationSeq = navigationSeq + 1;
+	const seq = navigationSeq;
+	loaderStateRef.set(emptyLoaderState);
+	const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
+	const nextItem = findRoute(nextLocation.pathname, true);
+	const params = getParamsObject({
+		params: nextItem?.params,
+		pathname: nextLocation.pathname
+	});
+	const { context, setContext } = getContext();
+	if (nextItem?.beforeLoad) {
+		const redirect = async (location) => await navigate(typeof location === "string" ? { pathname: location } : location);
 		try {
-			document.startViewTransition(() => navigation(nextLocation, routeItem));
-		} catch {
-			navigation(nextLocation, routeItem);
-		}
-	}, [navigation, isAnimated]);
-	const navigationHandler = useCallback(async (nextLocation) => {
-		navigationSeq.current = navigationSeq.current + 1;
-		const seq = navigationSeq.current;
-		loaderStateRef.current = emptyLoaderState;
-		const nextItem = routes.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, nextLocation.pathname));
-		const params = getParamsObject({
-			params: nextItem?.params,
-			pathname: nextLocation.pathname
-		});
-		if (nextItem?.beforeLoad) {
-			const redirect = async (location) => await navigationHandler(typeof location === "string" ? { pathname: location } : location);
-			try {
-				await nextItem.beforeLoad({
-					context,
-					redirect,
-					params,
-					setContext
-				});
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: null
-				};
-			} catch (error) {
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: error
-				};
-				return transitionedNavigation(nextLocation, nextItem);
-			}
+			await nextItem.beforeLoad({
+				context,
+				redirect,
+				params,
+				setContext
+			});
+			loaderStateRef.set((prev) => ({
+				...prev,
+				beforeLoadError: null
+			}));
+		} catch (error) {
+			loaderStateRef.set((prev) => ({
+				...prev,
+				beforeLoadError: error
+			}));
+			return transitionedNavigation(nextLocation, nextItem);
 		}
-		if (seq !== navigationSeq.current) return;
-		setScrollMap((prevState) => {
-			const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
-			if (!scrollPosition || prevState[prevPathname.current] === scrollPosition) return prevState;
-			return {
-				...prevState,
-				[prevPathname.current]: scrollPosition
-			};
-		});
-		setCurrentLoaderFallback(isCacheItemFresh({
+	}
+	if (seq !== navigationSeq) return;
+	scrollMapState.setState((prevState) => {
+		const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
+		if (!scrollPosition || prevState[prevPathnameRef.value] === scrollPosition) return prevState;
+		return {
+			...prevState,
+			[prevPathnameRef.value]: scrollPosition
+		};
+	});
+	loaderFallbackState.setState(isCacheItemFresh({
+		routeItem: nextItem,
+		pathname: nextLocation.pathname
+	}) || isAnimated && !showFallback ? void 0 : nextItem?.loaderFallback);
+	if (nextItem?.loader) {
+		isLoadingState.setState(true);
+		await revalidateCache({
 			routeItem: nextItem,
 			pathname: nextLocation.pathname
-		}) || isAnimated && !showFallback ? void 0 : nextItem?.loaderFallback);
-		if (nextItem?.loader) {
-			setIsLoading(true);
-			await revalidateCache({
-				routeItem: nextItem,
-				pathname: nextLocation.pathname
-			});
-		}
-		if (seq !== navigationSeq.current) return;
-		transitionedNavigation(nextLocation, nextItem);
-		if (nextItem?.afterLoad) await nextItem.afterLoad({
-			context,
-			params,
-			setContext
 		});
-	}, [
+	}
+	if (seq !== navigationSeq) return;
+	transitionedNavigation(nextLocation, nextItem);
+	if (nextItem?.afterLoad) await nextItem.afterLoad({
 		context,
-		isAnimated,
-		isCacheItemFresh,
-		loaderStateRef,
-		revalidateCache,
-		routes,
-		setContext,
-		setCurrentLoaderFallback,
-		setIsLoading,
-		setScrollMap,
-		showFallback,
-		transitionedNavigation
-	]);
-	const setNextLocationRef = useLatest(navigationHandler);
-	const updateLocation = useCallback(async (nextLocation) => await setNextLocationRef.current(nextLocation), [setNextLocationRef]);
+		params,
+		setContext
+	});
+};
+//#endregion
+//#region hooks/useNavigation.ts
+var useNavigation = () => {
+	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
 	useEffect(() => {
 		const handler = async (event) => {
 			const newLocation = parseWindowLocation(event.target.location);
-			if (prevPathname.current === blockedRoute.from) {
+			if (prevPathnameRef.value === blockedRoute.from) {
 				setBlockedRoute({
-					from: prevPathname.current,
+					from: prevPathnameRef.value,
 					to: newLocation.pathname
 				});
-				history.pushState(null, "", prevPathname.current);
-			} else setNextLocationRef.current(newLocation);
+				history.pushState(null, "", prevPathnameRef.value);
+			} else navigate(newLocation);
 		};
 		window.addEventListener("popstate", handler);
 		return () => window.removeEventListener("popstate", handler);
-	}, [
-		blockedRoute.from,
-		setBlockedRoute,
-		setNextLocationRef
-	]);
+	}, [blockedRoute.from, setBlockedRoute]);
 	useEffect(() => {
 		const currentLocation = parseWindowLocation(window.location);
-		setNextLocationRef.current(currentLocation);
-		prevPathname.current = currentLocation.pathname;
-	}, [setNextLocationRef]);
-	return updateLocation;
-};
-//#endregion
-//#region hooks/useSetRuntime.ts
-var useSetRouterRuntime = ({ updateLocation, prefetchLoader, invalidate }) => {
-	const [, setCallbackState] = useActionState();
-	useEffect(() => {
-		setCallbackState({
-			updateLocation,
-			prefetchLoader,
-			invalidate
-		});
-	}, [
-		invalidate,
-		prefetchLoader,
-		setCallbackState,
-		updateLocation
-	]);
+		navigate(currentLocation);
+		prevPathnameRef.set(currentLocation.pathname);
+	}, []);
 };
 //#endregion
 //#region hooks/useApplyCustomAnimation.ts
@@ -483,56 +459,6 @@ var usePreserveScroll = (preserveScroll) => {
 	]);
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == _typeof(i) ? i : i + "";
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-//#endregion
-//#region config/routerConfig.ts
-var RouterConfig = class {
-	constructor() {
-		_defineProperty(this, "prefetch", "hover");
-		_defineProperty(this, "hoverPrefetchDelay", 150);
-	}
-	configure(config) {
-		Object.assign(this, config);
-	}
-};
-var routerConfig = new RouterConfig();
-//#endregion
 //#region hooks/useSetRouterConfig.ts
 var useSetRouterConfig = (routerProps) => {
 	useEffect(() => routerConfig.configure(routerProps), [routerProps]);
@@ -562,24 +488,13 @@ var Router = ({ routes, animationDuration, isAnimated = false, spinner = true, p
 	const [currentLoaderFallback] = useLoaderFallback();
 	const [routeItemData] = useRouteItemData();
 	const [loaderState] = useCurrentLoaderState();
-	const { prefetchLoader, revalidateCache, isCacheItemFresh, loaderStateRef, invalidate } = useLoader(routes);
-	useSetRouterRuntime({
-		updateLocation: useNavigation({
-			routes,
-			revalidateCache,
-			isCacheItemFresh,
-			loaderStateRef,
-			isAnimated,
-			showFallbackOnAnimation
-		}),
-		prefetchLoader,
-		invalidate
-	});
+	useNavigation();
 	useSetRouterConfig({
+		routes,
 		isAnimated,
-		showFallbackOnAnimation,
 		prefetch,
-		hoverPrefetchDelay
+		hoverPrefetchDelay,
+		showFallbackOnAnimation
 	});
 	useApplyCustomAnimation(animationDuration);
 	useSetInitialContext(initialContext);
@@ -598,19 +513,13 @@ var Router = ({ routes, animationDuration, isAnimated = false, spinner = true, p
 	});
 };
 //#endregion
-//#region hooks/useRuntime.ts
-var useRuntime = () => {
-	const [callbackState] = useActionState();
-	const { updateLocation, prefetchLoader, invalidate } = callbackState;
-	return useMemo(() => ({
-		updateLocation,
-		prefetchLoader,
-		invalidate
-	}), [
-		updateLocation,
-		prefetchLoader,
-		invalidate
-	]);
+//#region runtime/prefetch.ts
+var prefetch = async (pathname) => {
+	const item = findRoute(pathname);
+	if (item) await revalidateCache({
+		routeItem: item,
+		pathname
+	});
 };
 //#endregion
 //#region hooks/useLocation.ts
@@ -619,14 +528,22 @@ var useLocation = () => {
 	return routeItemData.location;
 };
 //#endregion
+//#region hooks/useLatest.ts
+var useLatest = (value) => {
+	const ref = useRef(value);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref;
+};
+//#endregion
 //#region hooks/useNavigate.ts
 var useNavigate = () => {
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const { updateLocation } = useRuntime();
 	const locationRef = useLatest(useLocation());
 	const blockedRouteRef = useLatest(blockedRoute);
 	return useCallback(async (arg) => {
-		if (!updateLocation) throw new Error("Router has not been initialized. Did you forget to render <Router />?");
+		if (!navigate) throw new Error("Router has not been initialized. Did you forget to render <Router />?");
 		if (arg !== -1 && blockedRouteRef.current.from) {
 			const to = typeof arg === "object" ? arg.pathname : arg;
 			setBlockedRoute((prevState) => ({
@@ -637,68 +554,57 @@ var useNavigate = () => {
 		}
 		if (arg === -1) return history.go(arg);
 		if (typeof arg === "string") {
-			if (arg !== locationRef.current.pathname) await updateLocation({ pathname: arg });
-		} else if (JSON.stringify(arg) !== JSON.stringify(locationRef.current)) await updateLocation(arg);
+			if (arg !== locationRef.current.pathname) await navigate({ pathname: arg });
+		} else if (JSON.stringify(arg) !== JSON.stringify(locationRef.current)) await navigate(arg);
 	}, [
 		blockedRouteRef,
 		locationRef,
-		setBlockedRoute,
-		updateLocation
+		setBlockedRoute
 	]);
 };
 //#endregion
 //#region components/Link.tsx
 var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
-	const prefetch = prefetchLink || configPrefetch;
+	const prefetch$1 = prefetchLink || configPrefetch;
 	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
-	const { prefetchLoader } = useRuntime();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
 	const ref = useRef(null);
 	const onMouseEnter = useCallback(() => {
-		if (prefetch !== "hover" || !prefetchDelay) return;
+		if (prefetch$1 !== "hover" || !prefetchDelay) return;
 		if (timeout.current) clearTimeout(timeout.current);
-		timeout.current = window.setTimeout(() => prefetchLoader(to), prefetchDelay);
+		timeout.current = window.setTimeout(() => prefetch(to), prefetchDelay);
 	}, [
-		prefetch,
+		prefetch$1,
 		prefetchDelay,
-		prefetchLoader,
 		to
 	]);
 	const onMouseLeave = useCallback(() => {
-		if (prefetch !== "hover" || !prefetchDelay) return;
+		if (prefetch$1 !== "hover" || !prefetchDelay) return;
 		if (timeout.current) {
 			clearTimeout(timeout.current);
 			timeout.current = 0;
 		}
-	}, [prefetch, prefetchDelay]);
+	}, [prefetch$1, prefetchDelay]);
 	useEffect(() => {
-		if (prefetch !== "render") return;
+		if (prefetch$1 !== "render") return;
 		(async () => {
-			await prefetchLoader(to);
+			await prefetch(to);
 		})();
-	}, [
-		prefetch,
-		prefetchLoader,
-		to
-	]);
+	}, [prefetch$1, to]);
 	useEffect(() => {
-		if (prefetch !== "viewport") return;
+		if (prefetch$1 !== "viewport") return;
 		const element = ref.current;
 		const observer = new IntersectionObserver(async () => {
-			await prefetchLoader(to);
+			await prefetch(to);
 			observer.disconnect();
 		});
 		if (element) observer.observe(element);
 		return () => {
 			if (element) observer.disconnect();
 		};
-	}, [
-		prefetch,
-		prefetchLoader,
-		to
-	]);
+	}, [prefetch$1, to]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		ref,
 		style: { cursor: "pointer" },
@@ -718,12 +624,46 @@ var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_js
 	children
 });
 //#endregion
-//#region hooks/useInvalidate.ts
-var useInvalidate = () => {
-	const { invalidate } = useRuntime();
-	return invalidate;
+//#region runtime/invalidate.ts
+var invalidate = async (path) => {
+	const routePathname = routeItemDataState.getState().location.pathname;
+	const pathname = path || routePathname;
+	const routeItem = findRoute(pathname);
+	const resultParams = getParamsObject({
+		params: routeItem?.params,
+		pathname
+	});
+	timestampMap.delete(pathname);
+	try {
+		if (routeItem?.beforeLoad) {
+			const { context, setContext } = getContext();
+			await routeItem.beforeLoad({
+				context,
+				redirect: () => Promise.resolve(),
+				params: resultParams,
+				setContext
+			});
+		}
+		loaderStateRef.set((prev) => ({
+			...prev,
+			beforeLoadError: null
+		}));
+	} catch (error) {
+		loaderStateRef.set((prev) => ({
+			...prev,
+			beforeLoadError: error
+		}));
+	}
+	await revalidateCache({
+		routeItem,
+		pathname
+	});
+	if (pathname === routePathname) currentLoaderState.setState(loaderStateRef.value);
 };
 //#endregion
+//#region hooks/useInvalidate.ts
+var useInvalidate = () => invalidate;
+//#endregion
 //#region hooks/useParams.ts
 var useParams = () => {
 	const [routeItemData] = useRouteItemData();
@@ -793,7 +733,6 @@ var useLoaderState = () => {
 //#region hooks/useBlocker.ts
 var useBlocker = (blockerFn) => {
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const { updateLocation } = useRuntime();
 	const [routeItemData] = useRouteItemData();
 	const { location: { pathname } } = routeItemData;
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -806,13 +745,13 @@ var useBlocker = (blockerFn) => {
 			...prevState,
 			to: ""
 		};
-		if (type === "process") updateLocation({ pathname: prevState.to });
+		if (type === "process") navigate({ pathname: prevState.to });
 		if (!prevState.from && !prevState.to) return prevState;
 		return {
 			from: "",
 			to: ""
 		};
-	}), [setBlockedRoute, updateLocation]);
+	}), [setBlockedRoute]);
 	const blockerState = useMemo(() => {
 		if (blockedRoute.from && blockedRoute.to) return "blocked";
 		if (blockedRoute.from) return "charged";

package/dist/runtime/invalidate.d.ts

@@ -0,0 +1 @@
+export declare const invalidate: (path?: string) => Promise<void>;

package/dist/runtime/navigate.d.ts

@@ -0,0 +1,2 @@
+import { Location } from '../types/global';
+export declare const navigate: (nextLocation: Location) => Promise<void>;

package/dist/runtime/prefetch.d.ts

@@ -0,0 +1 @@
+export declare const prefetch: (pathname: string) => Promise<void>;

package/dist/state/createState.d.ts

@@ -1,3 +1,11 @@
 type SetStateAction<T> = ((prevState: T) => T) | T;
+type Listener<T> = (state: T, prevState: T) => void;
+type Store<T> = {
+    subscribe: (listener: Listener<T>) => () => void;
+    getState: () => T;
+    setState: (action: SetStateAction<T>) => void;
+};
+export declare const create: <T>(initialState: T) => Store<T>;
+export declare const useGlobalState: <T>({ subscribe, getState, setState }: Store<T>) => readonly [T, (action: SetStateAction<T>) => void];
 export declare const createState: <T>(initialState: T) => () => readonly [T, (action: SetStateAction<T>) => void];
 export {};

package/dist/state/state.d.ts

@@ -1,8 +1,8 @@
-import { LoaderState, Location, RouteItemData } from '../types/global';
-type Runtime = {
-    updateLocation(route: Location): Promise<void>;
-    prefetchLoader(arg: string): Promise<void>;
-    invalidate(path?: string): Promise<void>;
+import { LoaderState, RouteItemData } from '../types/global';
+export declare const isLoadingState: {
+    subscribe: (listener: (state: boolean, prevState: boolean) => void) => () => void;
+    getState: () => boolean;
+    setState: (action: boolean | ((prevState: boolean) => boolean)) => void;
 };
 export declare const useIsLoading: () => readonly [boolean, (action: boolean | ((prevState: boolean) => boolean)) => void];
 export declare const useBlockedRoute: () => readonly [{
@@ -18,10 +18,33 @@ export declare const useBlockedRoute: () => readonly [{
     from: string;
     to: string;
 })) => void];
-export declare const useLoaderFallback: () => readonly [(import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement)) | undefined, (action: (import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement)) | ((prevState: (import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement)) | undefined) => (import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement)) | undefined) | undefined) => void];
+export declare const loaderFallbackState: {
+    subscribe: (listener: (state: import("../types/global").RenderElement | undefined, prevState: import("../types/global").RenderElement | undefined) => void) => () => void;
+    getState: () => import("../types/global").RenderElement | undefined;
+    setState: (action: import("../types/global").RenderElement | ((prevState: import("../types/global").RenderElement | undefined) => import("../types/global").RenderElement | undefined) | undefined) => void;
+};
+export declare const useLoaderFallback: () => readonly [import("../types/global").RenderElement | undefined, (action: import("../types/global").RenderElement | ((prevState: import("../types/global").RenderElement | undefined) => import("../types/global").RenderElement | undefined) | undefined) => void];
+export declare const routeItemDataState: {
+    subscribe: (listener: (state: RouteItemData, prevState: RouteItemData) => void) => () => void;
+    getState: () => RouteItemData;
+    setState: (action: RouteItemData | ((prevState: RouteItemData) => RouteItemData)) => void;
+};
 export declare const useRouteItemData: () => readonly [RouteItemData, (action: RouteItemData | ((prevState: RouteItemData) => RouteItemData)) => void];
+export declare const currentLoaderState: {
+    subscribe: (listener: (state: LoaderState, prevState: LoaderState) => void) => () => void;
+    getState: () => LoaderState;
+    setState: (action: LoaderState | ((prevState: LoaderState) => LoaderState)) => void;
+};
 export declare const useCurrentLoaderState: () => readonly [LoaderState, (action: LoaderState | ((prevState: LoaderState) => LoaderState)) => void];
+export declare const scrollMapState: {
+    subscribe: (listener: (state: Record<string, number>, prevState: Record<string, number>) => void) => () => void;
+    getState: () => Record<string, number>;
+    setState: (action: Record<string, number> | ((prevState: Record<string, number>) => Record<string, number>)) => void;
+};
 export declare const useScrollMap: () => readonly [Record<string, number>, (action: Record<string, number> | ((prevState: Record<string, number>) => Record<string, number>)) => void];
+export declare const contextState: {
+    subscribe: (listener: (state: Record<string, unknown>, prevState: Record<string, unknown>) => void) => () => void;
+    getState: () => Record<string, unknown>;
+    setState: (action: Record<string, unknown> | ((prevState: Record<string, unknown>) => Record<string, unknown>)) => void;
+};
 export declare const useContextState: () => readonly [Record<string, unknown>, (action: Record<string, unknown> | ((prevState: Record<string, unknown>) => Record<string, unknown>)) => void];
-export declare const useActionState: () => readonly [Runtime, (action: Runtime | ((prevState: Runtime) => Runtime)) => void];
-export {};

package/dist/types/global.d.ts

@@ -2,18 +2,18 @@ import type { ComponentType, Dispatch, ReactElement, ReactNode, SetStateAction }
 export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
-type Element = (() => ReactElement) | ReactElement;
+export type RenderElement = (() => ReactElement) | ReactElement;
 export type ClientRouteItem = {
     path: string;
-    element: Element | LazyComponent;
+    element: RenderElement | LazyComponent;
     loader?(arg: {
         params: Record<string, string>;
         context: Record<string, unknown>;
         setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
     }): Promise<unknown>;
-    loaderFallback?: Element;
-    errorElement?: Element;
-    fallback?: Element;
+    loaderFallback?: RenderElement;
+    errorElement?: RenderElement;
+    fallback?: RenderElement;
     children?: ClientRouteItem[];
     staleTime?: number;
     beforeLoad?: (arg: {
@@ -35,7 +35,7 @@ export type ClientRouteItem = {
     }) => Record<string, (arg: FormData) => Promise<unknown> | Promise<void> | void | unknown>;
 };
 export type RouteItem = ClientRouteItem & {
-    element: Element;
+    element: RenderElement;
     params?: {
         key: string;
         value: string;
@@ -71,8 +71,8 @@ export type RouterProps = {
     animationDuration?: number;
     spinner?: boolean;
     preserveScroll?: boolean;
-    defaultLoaderFallback?: Element;
-    defaultErrorElement?: Element;
+    defaultLoaderFallback?: RenderElement;
+    defaultErrorElement?: RenderElement;
     showFallbackOnAnimation?: boolean;
     prefetch?: 'hover' | 'render' | 'viewport' | 'none';
     hoverPrefetchDelay?: number;
@@ -81,4 +81,3 @@ export type RouterProps = {
     }>;
     context?: Record<string, unknown>;
 };
-export {};

package/dist/utils/findRoute.d.ts

@@ -0,0 +1,2 @@
+export declare const ALL_LOCATIONS = "*";
+export declare const findRoute: (pathname: string, includeAll?: boolean) => import("..").RouteItem | undefined;

package/dist/utils/getContext.d.ts

@@ -0,0 +1,4 @@
+export declare const getContext: () => {
+    context: Record<string, unknown>;
+    setContext: (action: Record<string, unknown> | ((prevState: Record<string, unknown>) => Record<string, unknown>)) => void;
+};

package/dist/utils/isCacheItemFresh.d.ts

@@ -0,0 +1,5 @@
+import type { RouteItem } from '../types/global';
+export declare const isCacheItemFresh: ({ routeItem, pathname }: {
+    routeItem?: RouteItem;
+    pathname: string;
+}) => boolean;

package/dist/utils/navigationExecutor.d.ts

@@ -0,0 +1,2 @@
+import { Location, RouteItem } from '../types/global';
+export declare const navigationExecutor: (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/renderElement.d.ts

@@ -1,2 +1,2 @@
-import { type ReactElement } from 'react';
-export declare const renderElement: (Component?: (() => ReactElement) | ReactElement) => import("react/jsx-runtime").JSX.Element | null;
+import { RenderElement } from '../types/global';
+export declare const renderElement: (Component?: RenderElement) => import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/revalidateCache.d.ts

@@ -0,0 +1,3 @@
+import type { RevalidateCacheArgs } from '../types/global';
+declare const revalidateCache: ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown> | undefined;
+export { revalidateCache };

package/dist/utils/transitionedNavigation.d.ts

@@ -0,0 +1,2 @@
+import { Location, RouteItem } from '../types/global';
+export declare const transitionedNavigation: (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-react-router",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {

package/dist/hooks/useLoader.d.ts

@@ -1,11 +0,0 @@
-import type { LoaderState, RevalidateCacheArgs, RouteItem } from '../types/global';
-export declare const useLoader: (routes: RouteItem[]) => {
-    prefetchLoader: (pathname: string) => Promise<void>;
-    revalidateCache: ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown>;
-    isCacheItemFresh: ({ routeItem, pathname }: {
-        routeItem?: RouteItem;
-        pathname: string;
-    }) => boolean;
-    loaderStateRef: import("react").RefObject<LoaderState>;
-    invalidate: (pathname?: string) => Promise<void>;
-};

package/dist/hooks/useRuntime.d.ts

@@ -1,5 +0,0 @@
-export declare const useRuntime: () => {
-    updateLocation: (route: import("..").Location) => Promise<void>;
-    prefetchLoader: (arg: string) => Promise<void>;
-    invalidate: (path?: string) => Promise<void>;
-};

package/dist/hooks/useSetRuntime.d.ts

@@ -1,7 +0,0 @@
-type UseSetRuntime = {
-    updateLocation(arg: Location): Promise<void>;
-    prefetchLoader(arg: string): Promise<void>;
-    invalidate(arg?: string): Promise<void>;
-};
-export declare const useSetRouterRuntime: ({ updateLocation, prefetchLoader, invalidate }: UseSetRuntime) => void;
-export {};