clear-react-router 1.7.9 → 1.8.0

package/README.md

@@ -456,10 +456,11 @@ await invalidate('/post/[id]/comment/[id]');
 
 #### Including child routes
 
-To revalidate a single route together with its cached child routes, pass the `withChildren` option:
+To revalidate routes together with their cached child routes, pass the `withChildren` option:
 
 ```tsx
-await invalidate('/posts', { withChildren: true }); // a route, not a route list
+await invalidate('/posts', { withChildren: true });
+await invalidate(['/posts', '/users'], { withChildren: true });
 ```
 
 This will recursively revalidate cached routes inside the route tree.

package/dist/cell.d.ts

@@ -1,10 +1,9 @@
-declare class Cell<T> {
+export 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 loaderStateRef: Cell<import("./types").LoaderState>;
 export declare const prevPathnameRef: Cell<string>;
 export declare const timestampMap: Map<string, number>;
-export {};

package/dist/components/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type MouseEvent, type CSSProperties } from 'react';
-import { RouterProps } from '../types/global';
+import { RouterProps } from '../types';
 type LinkProps = {
     to: string;
     children: ReactElement<{

package/dist/components/Router.d.ts

@@ -1,2 +1,2 @@
-import { RouterProps } from '../types/global';
+import { RouterProps } from '../types';
 export declare const Router: ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -1,4 +1,4 @@
-import { ClientRouteItem, RouterProps } from '../types/global';
+import { ClientRouteItem, RouterProps } from '../types';
 declare class RouterConfig {
     routes: RouterProps['routes'];
     prefetch: RouterProps['prefetch'];

package/dist/constants.d.ts

@@ -1,3 +1,3 @@
-import type { LoaderState } from './types/global.ts';
+import type { LoaderState } from './types';
 export declare const emptyLoaderState: LoaderState;
 export declare const STANDARD_PREFETCH_DELAY = 150;

package/dist/{state/createState.d.ts → create.d.ts}

@@ -1,11 +1,10 @@
 type SetStateAction<T> = ((prevState: T) => T) | T;
 type Listener<T> = (state: T, prevState: T) => void;
-type Store<T> = {
+export 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/hooks/useBlocker.d.ts

@@ -1,4 +1,4 @@
-import { BlockerState } from '../types/global';
+import { BlockerState } from '../types';
 type UseBlockerReturnValue = {
     state: BlockerState;
     process(): void;

package/dist/hooks/useGetAction.d.ts

@@ -1,4 +1,4 @@
 export declare const useGetAction: (actionKey: string) => {
     currentAction: (arg: FormData) => Promise<unknown> | Promise<void> | void | unknown;
-    invalidate: typeof import("../runtime/invalidate").invalidate;
+    invalidate: (pathList?: string | string[], options?: import("../types").InvalidateOptions) => Promise<void>;
 };

package/dist/hooks/useInvalidate.d.ts

@@ -1,2 +1 @@
-import { invalidate } from '../runtime/invalidate';
-export declare const useInvalidate: () => typeof invalidate;
+export declare const useInvalidate: () => (pathList?: string | string[], options?: import("../types").InvalidateOptions) => Promise<void>;

package/dist/hooks/useLoaderState.d.ts

@@ -1,2 +1,2 @@
-import { LoaderState } from '../types/global';
+import { LoaderState } from '../types';
 export declare const useLoaderState: <T>() => LoaderState<T>;

package/dist/hooks/useNavigate.d.ts

@@ -1,2 +1,2 @@
-import type { Location } from '../types/global';
+import type { Location } from '../types';
 export declare const useNavigate: () => (arg: Location | string | -1) => Promise<void>;

package/dist/hooks/useQueryParam.d.ts

@@ -1,2 +1,2 @@
-import { AdapterType } from '../types/global';
-export declare function useQueryParam<T>(field: string, adapter: AdapterType<T>, defaultValue?: T): [T, (arg: T | null) => void];
+import { Adapter } from '../types';
+export declare function useQueryParam<T>(field: string, adapter: Adapter<T>, defaultValue?: T): [T, (arg: T | null) => void];

package/dist/hooks/useSetInitialContext.d.ts

@@ -1 +1,2 @@
-export declare const useSetInitialContext: (initialContext?: Record<string, unknown>) => void;
+import { RouterProps } from '../types';
+export declare const useSetInitialContext: (initialContext?: RouterProps["context"]) => void;

package/dist/hooks/useSetRouterConfig.d.ts

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

package/dist/index.d.ts

@@ -14,4 +14,4 @@ export { useSearchParams } from './hooks/useSearchParams';
 export { useFormContext } from './hooks/useFormContext';
 export { adapter } from './utils/adapter';
 export { createRouter } from './utils/utils';
-export type { RouteItem, BlockerState, Location, AdapterType, RouterProps } from './types/global';
+export type { RouteItem, BlockerState, Location, Adapter, RouterProps } from './types';

package/dist/index.js

@@ -2,7 +2,7 @@ import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useM
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
-//#region state/createState.ts
+//#region create.ts
 var create = (initialState) => {
 	let state = initialState;
 	const subscribers = /* @__PURE__ */ new Set();
@@ -28,35 +28,25 @@ var create = (initialState) => {
 var useGlobalState = ({ subscribe, getState, setState }) => {
 	return [useSyncExternalStore(subscribe, getState), setState];
 };
-var createState = (initialState) => {
-	const store = create(initialState);
-	return () => useGlobalState(store);
+//#endregion
+//#region utils/commitState.ts
+var createCommitState = ({ isLoadingState, routeItemDataState, loaderFallbackState, currentLoaderState, prevPathnameRef, loaderStateRef }) => (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 constants.ts
 var emptyLoaderState = {};
 //#endregion
-//#region state/state.ts
-var isLoadingState = create(false);
-var useIsLoading = () => useGlobalState(isLoadingState);
-var useBlockedRoute = createState({
-	from: "",
-	to: ""
-});
-var loaderFallbackState = create(void 0);
-var useLoaderFallback = () => useGlobalState(loaderFallbackState);
-var routeItemDataState = create({
-	routeItem: void 0,
-	location: {}
-});
-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 \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
@@ -95,25 +85,39 @@ function _defineProperty(e, r, t) {
 	}) : e[r] = t, e;
 }
 //#endregion
-//#region cell.ts
-var Cell = class {
-	constructor(_value) {
-		_defineProperty(this, "_value", void 0);
-		this._value = _value;
+//#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);
+		_defineProperty(this, "beforeLoad", void 0);
+		_defineProperty(this, "afterLoad", void 0);
 	}
-	get value() {
-		return this._value;
+	configure(config) {
+		Object.assign(this, config);
 	}
-	set(action) {
-		this._value = typeof action === "function" ? action(this._value) : action;
+};
+var routerConfig = new RouterConfig();
+//#endregion
+//#region utils/commitNavigation.ts
+var createCommitNavigation = (navigationExecutor, prevPathnameRef) => (nextLocation, routeItem) => {
+	const { isAnimated } = routerConfig;
+	if (!isAnimated || !prevPathnameRef.value) {
+		navigationExecutor(nextLocation, routeItem);
+		return;
+	}
+	try {
+		document.startViewTransition(() => navigationExecutor(nextLocation, routeItem));
+	} catch {
+		navigationExecutor(nextLocation, routeItem);
 	}
 };
-var loaderStateRef = new Cell(emptyLoaderState);
-var prevPathnameRef = new Cell("");
-var timestampMap = /* @__PURE__ */ new Map();
 //#endregion
 //#region utils/isCacheItemFresh.ts
-var isCacheItemFresh = ({ routeItem, pathname }) => {
+var createIsCacheItemFresh = (timestampMap) => ({ routeItem, pathname }) => {
 	if (!routeItem) return true;
 	const currentCacheTimestamp = timestampMap.get(pathname);
 	if (!currentCacheTimestamp) return false;
@@ -216,20 +220,177 @@ var comparePaths = (el, pathname) => {
 	const splitPathname = pathname.split("/").filter(Boolean);
 	return splitElementPath.every((item, index) => item === splitPathname[2 * index]) && splitPathname.length === splitElementPath.length + paramsLength;
 };
+var findRoute = (pathname, includeAll) => {
+	if (includeAll) return routerConfig.routes.find((el) => el.path === "/*" || comparePaths(el, pathname));
+	return routerConfig.routes.find((el) => comparePaths(el, pathname));
+};
 //#endregion
-//#region utils/getContext.ts
-var getContext = () => {
-	return {
+//#region runtime/navigate.ts
+var navigationSeq = 0;
+var createNavigate = (routerSta, revalidateCache) => {
+	const { loaderStateRef, scrollMapState, prevPathnameRef, loaderFallbackState, isLoadingState, contextState, timestampMap } = routerSta;
+	const commitNavigation = createCommitNavigation(createCommitState(routerSta), prevPathnameRef);
+	const isCacheItemFresh = createIsCacheItemFresh(timestampMap);
+	const getContext = () => ({
 		context: contextState.getState(),
 		setContext: contextState.setState
+	});
+	const routeResolve = (location) => {
+		loaderStateRef.set(emptyLoaderState);
+		const nextItem = findRoute(location.pathname, true);
+		return {
+			nextItem,
+			params: getParamsObject({
+				params: nextItem?.params,
+				pathname: location.pathname
+			})
+		};
 	};
+	const beforeLoad = async (routeItem, params) => {
+		const { beforeLoad } = routerConfig;
+		const runBeforeLoad = async (loaderFn) => {
+			const redirect = async (redirected) => await navigate(typeof redirected === "string" ? { pathname: redirected } : redirected);
+			try {
+				await loaderFn({
+					...getContext(),
+					redirect,
+					params
+				});
+				loaderStateRef.set((prev) => ({
+					...prev,
+					beforeLoadError: null
+				}));
+			} catch (error) {
+				loaderStateRef.set((prev) => ({
+					...prev,
+					beforeLoadError: error
+				}));
+			}
+		};
+		if (beforeLoad) await runBeforeLoad(beforeLoad);
+		if (routeItem?.beforeLoad) await runBeforeLoad(routeItem?.beforeLoad);
+	};
+	const prepareNavigation = (routeItem, location) => {
+		const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
+		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,
+			pathname: location.pathname
+		}) || isAnimated && !showFallback ? void 0 : routeItem?.loaderFallback);
+	};
+	const loader = async (routeItem, location) => {
+		if (!routeItem?.loader) return;
+		isLoadingState.setState(true);
+		await revalidateCache({
+			routeItem,
+			pathname: location.pathname
+		});
+	};
+	const afterLoad = async (routeItem, params) => {
+		const { afterLoad } = routerConfig;
+		if (routeItem?.afterLoad) await routeItem.afterLoad({
+			...getContext(),
+			params
+		});
+		if (afterLoad) await afterLoad({
+			...getContext(),
+			params
+		});
+	};
+	const navigate = async (nextLocation) => {
+		navigationSeq = navigationSeq + 1;
+		const seq = navigationSeq;
+		const { nextItem, params } = routeResolve(nextLocation);
+		await beforeLoad(nextItem, params);
+		if (seq !== navigationSeq) return;
+		prepareNavigation(nextItem, nextLocation);
+		await loader(nextItem, nextLocation);
+		if (seq !== navigationSeq) return;
+		commitNavigation(nextLocation, nextItem);
+		await afterLoad(nextItem, params);
+	};
+	return navigate;
+};
+//#endregion
+//#region runtime/invalidate.ts
+var redirect = () => Promise.resolve();
+var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }, revalidateCache) => {
+	const invalidatePath = async (routeItem, pathname) => {
+		const routePathname = routeItemDataState.getState().location.pathname;
+		timestampMap.delete(pathname);
+		const params = getParamsObject({
+			params: routeItem?.params,
+			pathname
+		});
+		try {
+			if (routeItem?.beforeLoad) {
+				const context = contextState.getState();
+				const setContext = contextState.setState;
+				await routeItem.beforeLoad({
+					context,
+					redirect,
+					params,
+					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);
+	};
+	const invalidateItem = async (pathname, withChildren) => {
+		const routeItem = findRoute(pathname);
+		if (!routeItem) return;
+		const pathnameArray = [];
+		for (const [key] of timestampMap) if (comparePaths(routeItem, key)) pathnameArray.push(key);
+		await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname)));
+		if (withChildren && routeItem.children?.length) {
+			const childPathList = routeItem.children.map((el) => el.path);
+			await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, true)));
+		}
+	};
+	async function invalidate(pathList, options) {
+		const routePathname = routeItemDataState.getState().location.pathname;
+		const pathnameList = Array.isArray(pathList) ? pathList : pathList ? [pathList] : [routePathname];
+		await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options?.withChildren)));
+	}
+	return invalidate;
+};
+//#endregion
+//#region runtime/prefetch.ts
+var createPrefetch = (revalidateCache) => async (pathname) => {
+	const item = findRoute(pathname);
+	if (item) await revalidateCache({
+		routeItem: item,
+		pathname
+	});
 };
 //#endregion
 //#region utils/revalidateCache.ts
 var loaderMapRef = {};
 var loadingPromises = /* @__PURE__ */ new Map();
-var revalidateCache = ({ routeItem, pathname }) => {
+var createRevalidateCache = (routerState) => ({ routeItem, pathname }) => {
 	if (!routeItem?.loader) return;
+	const isCacheItemFresh = createIsCacheItemFresh(routerState.timestampMap);
+	const { loaderStateRef, timestampMap, contextState } = routerState;
 	if (loadingPromises.has(pathname)) return loadingPromises.get(pathname);
 	if (isCacheItemFresh({
 		routeItem,
@@ -241,7 +402,8 @@ var revalidateCache = ({ routeItem, pathname }) => {
 	const promise = (async () => {
 		if (!routeItem?.loader) return;
 		try {
-			const { context, setContext } = getContext();
+			const context = contextState.getState();
+			const setContext = contextState.setState;
 			const params = getParamsObject({
 				params: routeItem.params,
 				pathname
@@ -272,148 +434,82 @@ var revalidateCache = ({ routeItem, pathname }) => {
 	return promise;
 };
 //#endregion
-//#region utils/commitState.ts
-var commitState = (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);
-		_defineProperty(this, "beforeLoad", void 0);
-		_defineProperty(this, "afterLoad", void 0);
-	}
-	configure(config) {
-		Object.assign(this, config);
+//#region cell.ts
+var Cell = class {
+	constructor(_value) {
+		_defineProperty(this, "_value", void 0);
+		this._value = _value;
 	}
-};
-var routerConfig = new RouterConfig();
-//#endregion
-//#region utils/commitNavigation.ts
-var commitNavigation = (nextLocation, routeItem) => {
-	const { isAnimated } = routerConfig;
-	if (!isAnimated || !prevPathnameRef.value) {
-		commitState(nextLocation, routeItem);
-		return;
+	get value() {
+		return this._value;
 	}
-	try {
-		document.startViewTransition(() => commitState(nextLocation, routeItem));
-	} catch {
-		commitState(nextLocation, routeItem);
+	set(action) {
+		this._value = typeof action === "function" ? action(this._value) : action;
 	}
 };
-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));
-};
+new Cell(emptyLoaderState);
+new Cell("");
 //#endregion
-//#region runtime/navigate.ts
-var navigationSeq = 0;
-var routeResolve = (location) => {
-	loaderStateRef.set(emptyLoaderState);
-	const nextItem = findRoute(location.pathname, true);
-	return {
-		nextItem,
-		params: getParamsObject({
-			params: nextItem?.params,
-			pathname: location.pathname
-		})
+//#region utils/createRouterInstance.ts
+var createRouterInstance = () => {
+	const routerState = {
+		isLoadingState: create(false),
+		loaderFallbackState: create(void 0),
+		routeItemDataState: create({
+			routeItem: void 0,
+			location: {}
+		}),
+		currentLoaderState: create(emptyLoaderState),
+		scrollMapState: create({}),
+		contextState: create({}),
+		blockedRouteState: create({
+			from: "",
+			to: ""
+		}),
+		loaderStateRef: new Cell(emptyLoaderState),
+		prevPathnameRef: new Cell(""),
+		timestampMap: /* @__PURE__ */ new Map()
 	};
-};
-var beforeLoad = async (routeItem, params) => {
-	const { beforeLoad } = routerConfig;
-	const runBeforeLoad = async (loaderFn) => {
-		const redirect = async (redirected) => await navigate(typeof redirected === "string" ? { pathname: redirected } : redirected);
-		try {
-			await loaderFn({
-				...getContext(),
-				redirect,
-				params
-			});
-			loaderStateRef.set((prev) => ({
-				...prev,
-				beforeLoadError: null
-			}));
-		} catch (error) {
-			loaderStateRef.set((prev) => ({
-				...prev,
-				beforeLoadError: error
-			}));
+	const revalidateCache = createRevalidateCache(routerState);
+	return {
+		state: {
+			isLoadingState: routerState.isLoadingState,
+			loaderFallbackState: routerState.loaderFallbackState,
+			routeItemDataState: routerState.routeItemDataState,
+			currentLoaderState: routerState.currentLoaderState,
+			scrollMapState: routerState.scrollMapState,
+			contextState: routerState.contextState,
+			blockedRouteState: routerState.blockedRouteState,
+			prevPathnameRef: routerState.prevPathnameRef
+		},
+		runtime: {
+			navigate: createNavigate(routerState, revalidateCache),
+			invalidate: createInvalidate(routerState, revalidateCache),
+			prefetch: createPrefetch(revalidateCache)
+		},
+		hooks: {
+			useIsLoading: () => useGlobalState(routerState.isLoadingState),
+			useBlockedRoute: () => useGlobalState(routerState.blockedRouteState),
+			useLoaderFallback: () => useGlobalState(routerState.loaderFallbackState),
+			useRouteItemData: () => useGlobalState(routerState.routeItemDataState),
+			useCurrentLoaderState: () => useGlobalState(routerState.currentLoaderState),
+			useScrollMap: () => useGlobalState(routerState.scrollMapState),
+			useContextState: () => useGlobalState(routerState.contextState)
 		}
 	};
-	if (beforeLoad) await runBeforeLoad(beforeLoad);
-	if (routeItem?.beforeLoad) await runBeforeLoad(routeItem?.beforeLoad);
-};
-var prepareNavigation = (routeItem, location) => {
-	const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
-	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,
-		pathname: location.pathname
-	}) || isAnimated && !showFallback ? void 0 : routeItem?.loaderFallback);
-};
-var loader = async (routeItem, location) => {
-	if (!routeItem?.loader) return;
-	isLoadingState.setState(true);
-	await revalidateCache({
-		routeItem,
-		pathname: location.pathname
-	});
-};
-var afterLoad = async (routeItem, params) => {
-	const { afterLoad } = routerConfig;
-	if (routeItem?.afterLoad) await routeItem.afterLoad({
-		...getContext(),
-		params
-	});
-	if (afterLoad) await afterLoad({
-		...getContext(),
-		params
-	});
-};
-var navigate = async (nextLocation) => {
-	navigationSeq = navigationSeq + 1;
-	const seq = navigationSeq;
-	const { nextItem, params } = routeResolve(nextLocation);
-	await beforeLoad(nextItem, params);
-	if (seq !== navigationSeq) return;
-	prepareNavigation(nextItem, nextLocation);
-	await loader(nextItem, nextLocation);
-	if (seq !== navigationSeq) return;
-	commitNavigation(nextLocation, nextItem);
-	await afterLoad(nextItem, params);
 };
 //#endregion
+//#region instance.ts
+var router = createRouterInstance();
+//#endregion
 //#region hooks/useNavigation.ts
 var useNavigation = () => {
-	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
+	const { state: { prevPathnameRef, blockedRouteState }, runtime: { navigate } } = router;
 	useEffect(() => {
 		const handler = async (event) => {
 			const newLocation = parseWindowLocation(event.target.location);
-			if (prevPathnameRef.value === blockedRoute.from) {
-				setBlockedRoute({
+			if (prevPathnameRef.value === blockedRouteState.getState().from) {
+				blockedRouteState.setState({
 					from: prevPathnameRef.value,
 					to: newLocation.pathname
 				});
@@ -422,12 +518,16 @@ var useNavigation = () => {
 		};
 		window.addEventListener("popstate", handler);
 		return () => window.removeEventListener("popstate", handler);
-	}, [blockedRoute.from, setBlockedRoute]);
+	}, [
+		blockedRouteState,
+		navigate,
+		prevPathnameRef.value
+	]);
 	useEffect(() => {
 		const currentLocation = parseWindowLocation(window.location);
 		navigate(currentLocation);
 		prevPathnameRef.set(currentLocation.pathname);
-	}, []);
+	}, [navigate, prevPathnameRef]);
 };
 //#endregion
 //#region hooks/useApplyCustomAnimation.ts
@@ -469,6 +569,7 @@ var useApplyCustomAnimation = (animationDuration) => {
 //#endregion
 //#region hooks/usePreserveScroll.ts
 var usePreserveScroll = (preserveScroll) => {
+	const { useRouteItemData, useScrollMap } = router.hooks;
 	const [routeItemData] = useRouteItemData();
 	const [scrollMap] = useScrollMap();
 	const { pathname } = routeItemData.location;
@@ -497,7 +598,7 @@ var useSetRouterConfig = (routerProps) => {
 //#endregion
 //#region hooks/useSetInitialContext.ts
 var useSetInitialContext = (initialContext) => {
-	const [, setContext] = useContextState();
+	const [, setContext] = router.hooks.useContextState();
 	useEffect(() => {
 		if (initialContext) setContext(initialContext);
 	}, [initialContext, setContext]);
@@ -515,6 +616,7 @@ var renderElement = (Component) => {
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
 var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = false, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement }) => {
+	const { useIsLoading, useLoaderFallback, useRouteItemData, useCurrentLoaderState } = router.hooks;
 	const [isLoading] = useIsLoading();
 	const [currentLoaderFallback] = useLoaderFallback();
 	const [routeItemData] = useRouteItemData();
@@ -546,18 +648,9 @@ var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = f
 	});
 };
 //#endregion
-//#region runtime/prefetch.ts
-var prefetch = async (pathname) => {
-	const item = findRoute(pathname);
-	if (item) await revalidateCache({
-		routeItem: item,
-		pathname
-	});
-};
-//#endregion
 //#region hooks/useLocation.ts
 var useLocation = () => {
-	const [routeItemData] = useRouteItemData();
+	const [routeItemData] = router.hooks.useRouteItemData();
 	return routeItemData.location;
 };
 //#endregion
@@ -572,11 +665,10 @@ var useLatest = (value) => {
 //#endregion
 //#region hooks/useNavigate.ts
 var useNavigate = () => {
-	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
+	const [blockedRoute, setBlockedRoute] = router.hooks.useBlockedRoute();
 	const locationRef = useLatest(useLocation());
 	const blockedRouteRef = useLatest(blockedRoute);
 	return useCallback(async (arg) => {
-		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) => ({
@@ -587,8 +679,8 @@ var useNavigate = () => {
 		}
 		if (arg === -1) return history.go(arg);
 		if (typeof arg === "string") {
-			if (arg !== locationRef.current.pathname) await navigate({ pathname: arg });
-		} else if (JSON.stringify(arg) !== JSON.stringify(locationRef.current)) await navigate(arg);
+			if (arg !== locationRef.current.pathname) await router.runtime.navigate({ pathname: arg });
+		} else if (JSON.stringify(arg) !== JSON.stringify(locationRef.current)) await router.runtime.navigate(arg);
 	}, [
 		blockedRouteRef,
 		locationRef,
@@ -599,45 +691,45 @@ var useNavigate = () => {
 //#region components/Link.tsx
 var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
-	const prefetch$1 = prefetchLink || configPrefetch;
+	const prefetch = prefetchLink || configPrefetch;
 	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
 	const navigate = useNavigate();
 	const timeout = useRef(0);
 	const ref = useRef(null);
 	const onMouseEnter = useCallback(() => {
-		if (prefetch$1 !== "hover" || !prefetchDelay) return;
+		if (prefetch !== "hover" || !prefetchDelay) return;
 		if (timeout.current) clearTimeout(timeout.current);
-		timeout.current = window.setTimeout(() => prefetch(to), prefetchDelay);
+		timeout.current = window.setTimeout(() => router.runtime.prefetch(to), prefetchDelay);
 	}, [
-		prefetch$1,
+		prefetch,
 		prefetchDelay,
 		to
 	]);
 	const onMouseLeave = useCallback(() => {
-		if (prefetch$1 !== "hover" || !prefetchDelay) return;
+		if (prefetch !== "hover" || !prefetchDelay) return;
 		if (timeout.current) {
 			clearTimeout(timeout.current);
 			timeout.current = 0;
 		}
-	}, [prefetch$1, prefetchDelay]);
+	}, [prefetch, prefetchDelay]);
 	useEffect(() => {
-		if (prefetch$1 !== "render") return;
+		if (prefetch !== "render") return;
 		(async () => {
-			await prefetch(to);
+			await router.runtime.prefetch(to);
 		})();
-	}, [prefetch$1, to]);
+	}, [prefetch, to]);
 	useEffect(() => {
-		if (prefetch$1 !== "viewport") return;
+		if (prefetch !== "viewport") return;
 		const element = ref.current;
 		const observer = new IntersectionObserver(async () => {
-			await prefetch(to);
+			await router.runtime.prefetch(to);
 			observer.disconnect();
 		});
 		if (element) observer.observe(element);
 		return () => {
 			if (element) observer.disconnect();
 		};
-	}, [prefetch$1, to]);
+	}, [prefetch, to]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		ref,
 		style: { cursor: "pointer" },
@@ -657,64 +749,12 @@ var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_js
 	children
 });
 //#endregion
-//#region runtime/invalidate.ts
-var redirect = () => Promise.resolve();
-var invalidatePath = async (routeItem, pathname) => {
-	const routePathname = routeItemDataState.getState().location.pathname;
-	timestampMap.delete(pathname);
-	const params = getParamsObject({
-		params: routeItem?.params,
-		pathname
-	});
-	try {
-		if (routeItem?.beforeLoad) {
-			const { context, setContext } = getContext();
-			await routeItem.beforeLoad({
-				context,
-				redirect,
-				params,
-				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);
-};
-var invalidateItem = async (pathname, withChildren) => {
-	const routeItem = findRoute(pathname);
-	if (!routeItem) return;
-	const pathnameArray = [];
-	for (const [key] of timestampMap) if (comparePaths(routeItem, key)) pathnameArray.push(key);
-	await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname)));
-	if (withChildren && routeItem.children?.length) {
-		const childPathList = routeItem.children.map((el) => el.path);
-		await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, withChildren)));
-	}
-};
-async function invalidate(pathList, options) {
-	const routePathname = routeItemDataState.getState().location.pathname;
-	const pathnameList = Array.isArray(pathList) ? pathList : pathList ? [pathList] : [routePathname];
-	await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options?.withChildren)));
-}
-//#endregion
 //#region hooks/useInvalidate.ts
-var useInvalidate = () => invalidate;
+var useInvalidate = () => router.runtime.invalidate;
 //#endregion
 //#region hooks/useParams.ts
 var useParams = () => {
-	const [routeItemData] = useRouteItemData();
+	const [routeItemData] = router.hooks.useRouteItemData();
 	const { routeItem, location: { pathname } } = routeItemData;
 	return useMemo(() => routeItem ? getParamsObject({
 		params: routeItem?.params,
@@ -724,6 +764,7 @@ var useParams = () => {
 //#endregion
 //#region hooks/useGetAction.ts
 var useGetAction = (actionKey) => {
+	const { useRouteItemData, useContextState } = router.hooks;
 	const invalidate = useInvalidate();
 	const [routeItemData] = useRouteItemData();
 	const [context, setContext] = useContextState();
@@ -774,12 +815,13 @@ var Form = ({ children, action, onSuccess, onError, autoReset = true }) => {
 //#endregion
 //#region hooks/useLoaderState.ts
 var useLoaderState = () => {
-	const [loaderState] = useCurrentLoaderState();
+	const [loaderState] = router.hooks.useCurrentLoaderState();
 	return loaderState;
 };
 //#endregion
 //#region hooks/useBlocker.ts
 var useBlocker = (blockerFn) => {
+	const { hooks: { useBlockedRoute, useRouteItemData }, runtime: { navigate } } = router;
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
 	const [routeItemData] = useRouteItemData();
 	const { location: { pathname } } = routeItemData;
@@ -799,7 +841,7 @@ var useBlocker = (blockerFn) => {
 			from: "",
 			to: ""
 		};
-	}), [setBlockedRoute]);
+	}), [navigate, setBlockedRoute]);
 	const blockerState = useMemo(() => {
 		if (blockedRoute.from && blockedRoute.to) return "blocked";
 		if (blockedRoute.from) return "charged";
@@ -844,7 +886,7 @@ var useAction = (action, options = {}) => {
 //#endregion
 //#region hooks/useRouterContext.ts
 var useRouterContext = () => {
-	const [context, setContext] = useContextState();
+	const [context, setContext] = router.hooks.useContextState();
 	return {
 		context,
 		setContext

package/dist/instance.d.ts

@@ -0,0 +1 @@
+export declare const router: import("./types").RouterType;

package/dist/runtime/invalidate.d.ts

@@ -1,6 +1,5 @@
-type Options = {
-    withChildren?: boolean;
+import { type InvalidateOptions, RevalidateCache, RouterState } from '../types';
+export declare const createInvalidate: ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }: RouterState, revalidateCache: RevalidateCache) => {
+    (pathList?: string[]): Promise<void>;
+    (path?: string, options?: InvalidateOptions): Promise<void>;
 };
-export declare function invalidate(path?: string[]): Promise<void>;
-export declare function invalidate(path?: string, options?: Options): Promise<void>;
-export {};

package/dist/runtime/navigate.d.ts

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

package/dist/runtime/prefetch.d.ts

@@ -1 +1,2 @@
-export declare const prefetch: (pathname: string) => Promise<void>;
+import { RevalidateCache } from '../types';
+export declare const createPrefetch: (revalidateCache: RevalidateCache) => (pathname: string) => Promise<void>;

package/dist/{types/global.d.ts → types.d.ts}

@@ -1,4 +1,6 @@
 import type { ComponentType, Dispatch, ReactElement, ReactNode, SetStateAction } from 'react';
+import { Store, useGlobalState } from './create';
+import { Cell } from './cell';
 export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
@@ -9,11 +11,6 @@ export type BeforeLoad = (arg: {
     params: Record<string, string>;
     setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
 }) => Promise<unknown> | undefined | void;
-export type AfterLoad = (arg: {
-    context: Record<string, unknown>;
-    params: Record<string, string>;
-    setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
-}) => Promise<void>;
 export type ClientRouteItem = {
     path: string;
     element: RenderElement | LazyComponent;
@@ -63,7 +60,7 @@ export type LoaderState<T = unknown> = {
     loaderError: Error | null;
     beforeLoadError: Error | null;
 };
-export type AdapterType<T> = {
+export type Adapter<T> = {
     parse: (params: string[]) => T;
     serialize?: (params: T) => string | string[];
 };
@@ -89,3 +86,42 @@ export type RouterProps = {
     afterLoad?: ClientRouteItem['afterLoad'];
     context?: Record<string, unknown>;
 };
+export type RouterState = {
+    isLoadingState: Store<boolean>;
+    loaderFallbackState: Store<RouteItem['loaderFallback']>;
+    routeItemDataState: Store<RouteItemData>;
+    currentLoaderState: Store<LoaderState>;
+    scrollMapState: Store<Record<string, number>>;
+    contextState: Store<Record<string, unknown>>;
+    blockedRouteState: Store<{
+        from: string;
+        to: string;
+    }>;
+    loaderStateRef: Cell<LoaderState>;
+    prevPathnameRef: Cell<string>;
+    timestampMap: Map<string, number>;
+};
+export type RouterType = {
+    state: Omit<RouterState, 'loaderStateRef' | 'timestampMap'>;
+    runtime: {
+        navigate(arg: Location): Promise<void>;
+        invalidate(pathList?: string | string[], options?: InvalidateOptions): Promise<void>;
+        prefetch(pathname: string): Promise<void>;
+    };
+    hooks: {
+        useIsLoading: () => ReturnType<typeof useGlobalState<boolean>>;
+        useBlockedRoute: () => ReturnType<typeof useGlobalState<{
+            from: string;
+            to: string;
+        }>>;
+        useLoaderFallback: () => ReturnType<typeof useGlobalState<RenderElement | undefined>>;
+        useRouteItemData: () => ReturnType<typeof useGlobalState<RouteItemData>>;
+        useCurrentLoaderState: () => ReturnType<typeof useGlobalState<LoaderState<unknown>>>;
+        useScrollMap: () => ReturnType<typeof useGlobalState<Record<string, number>>>;
+        useContextState: () => ReturnType<typeof useGlobalState<Record<string, unknown>>>;
+    };
+};
+export type InvalidateOptions = {
+    withChildren?: boolean;
+};
+export type RevalidateCache = ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown> | undefined;

package/dist/utils/adapter.d.ts

@@ -1,4 +1,4 @@
-import { AdapterType } from '../types/global';
+import { Adapter } from '../types';
 type ZodInterface<T> = {
     safeParse(input: unknown): {
         success: true;
@@ -46,6 +46,6 @@ export declare const adapter: {
         parse: (params: string[]) => Date[];
         serialize: (args: Date[]) => string[];
     };
-    zodSchema: <T>(schema: ZodInterface<T>) => AdapterType<T>;
+    zodSchema: <T>(schema: ZodInterface<T>) => Adapter<T>;
 };
 export {};

package/dist/utils/commitNavigation.d.ts

@@ -1,2 +1,3 @@
-import { Location, RouteItem } from '../types/global';
-export declare const commitNavigation: (nextLocation: Location, routeItem: RouteItem | undefined) => void;
+import { Cell } from '../cell';
+import { Location, RouteItem } from '../types';
+export declare const createCommitNavigation: (navigationExecutor: (arg: Location, routeItem: RouteItem | undefined) => void, prevPathnameRef: Cell<string>) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/commitState.d.ts

@@ -1,2 +1,2 @@
-import { Location, RouteItem } from '../types/global';
-export declare const commitState: (nextLocation: Location, routeItem: RouteItem | undefined) => void;
+import { Location, RouteItem, RouterState } from '../types';
+export declare const createCommitState: ({ isLoadingState, routeItemDataState, loaderFallbackState, currentLoaderState, prevPathnameRef, loaderStateRef, }: RouterState) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/createRouterInstance.d.ts

@@ -0,0 +1,2 @@
+import { RouterType } from '../types';
+export declare const createRouterInstance: () => RouterType;

package/dist/utils/findRoute.d.ts

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

package/dist/utils/isCacheItemFresh.d.ts

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

package/dist/utils/renderElement.d.ts

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

package/dist/utils/revalidateCache.d.ts

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

package/dist/utils/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ClientRouteItem, Location, RouteItem } from '../types/global';
+import { ClientRouteItem, Location, RouteItem } from '../types';
 export declare const createRouter: (clientList: ClientRouteItem[]) => RouteItem[];
 export declare const getParamsObject: ({ params, pathname }: {
     params?: RouteItem["params"];

package/package.json

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

package/dist/state/state.d.ts

@@ -1,50 +0,0 @@
-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 [{
-    from: string;
-    to: string;
-}, (action: {
-    from: string;
-    to: string;
-} | ((prevState: {
-    from: string;
-    to: string;
-}) => {
-    from: string;
-    to: string;
-})) => 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];

package/dist/utils/getContext.d.ts

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