clear-react-router 1.4.5 → 1.4.7

package/README.md

@@ -45,7 +45,6 @@ The root component that provides routing context to the application. Place stati
 |------|------|---------|-------------|
 | `routeList` | `RouteItem[]` | required | Array of route configurations |
 | `context` | `object` | `{}` | Initial context (user, theme, etc.) |
-| `preserveScroll` | `boolean` | `true` | Save and restore scroll position when navigating between pages |
 | `children` | `ReactNode` | required | App content (must include `<Router />`) |
 
 ```
@@ -71,6 +70,8 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 | `isAnimated` | `boolean \| undefined` | `false` | Enable smooth page fade transitions |
 | `animationDuration` | `number` | `optional` | Animation duration in milliseconds (browser default is used if not set) |
 | `spinner` | `boolean \| undefined` | `true` | Show a small spinner in the corner while loading data (only when `isAnimated` is enabled) |
+| `preserveScroll` | `boolean \| undefined` | `true` | Save and restore scroll position when navigating between pages |
+| `showFallbackIfAnimated` | `boolean \| undefined` | `false` | Show `loaderFallback` even when `isAnimated` is `true` (instead of spinner) |
 
 ```
 <RouterProvider routeList={routes} isAnimated>

package/dist/components/Router.d.ts

@@ -3,6 +3,7 @@ type RouterProps = {
     animationDuration?: number;
     spinner?: boolean;
     preserveScroll?: boolean;
+    showFallbackIfAnimated?: boolean;
 };
-export declare const Router: ({ isAnimated, animationDuration, spinner, preserveScroll }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Router: ({ isAnimated, animationDuration, spinner, preserveScroll, showFallbackIfAnimated, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/context/RouterProviderContext.d.ts

@@ -1,26 +1,21 @@
-import { Dispatch, SetStateAction } from 'react';
-import { BlockerState, LoaderState, Location, RouteItem, UpdateBlockedRouteProps } from '../types/global';
-export type PropsContextValue = {
-    routeList: RouteItem[];
-};
+import { BlockerState, Location, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
 export type NavigationContextValue = {
-    location: Location;
     blockerState: BlockerState;
     isLoading: boolean;
-    nextItem: RouteItem | undefined;
+    routeItemData: RouteItemData;
+    currentLoaderFallback: RouteItem['loaderFallback'];
 };
 export type ActionsContextValue = {
-    setLocation: Dispatch<SetStateAction<Location>>;
+    setSearch(arg: string): void;
     updateLocation(route: Location): Promise<void>;
     updateBlockedRoute(arg: UpdateBlockedRouteProps): void;
     prefetchLoader(arg: string): Promise<void>;
     setContext(arg: object): void;
+    restoreScroll(): void;
 };
 export type DataContextValue = {
-    loaderState: LoaderState;
     context: Record<string, unknown>;
 };
-export declare const PropsContext: import("react").Context<PropsContextValue>;
 export declare const ActionsContext: import("react").Context<ActionsContextValue>;
 export declare const DataContext: import("react").Context<DataContextValue>;
 export declare const NavigationContext: import("react").Context<NavigationContextValue>;

package/dist/hooks/useHandleNavigation.d.ts

@@ -1,17 +1,19 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import type { BlockerState, LoaderState, Location, RevalidateCacheArgs, RouteItem, UpdateBlockedRouteProps } from '../types/global';
+import { BlockerState, Location, RevalidateCacheArgs, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
 type UseHandleNavigation = {
     routeList: RouteItem[];
-    setLocation: (arg: Location) => void;
     context: Record<string, unknown>;
     revalidateCache(arg: RevalidateCacheArgs): Promise<void>;
     setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
-    setLoaderState: Dispatch<SetStateAction<LoaderState>>;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
 };
-export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, setContext, setLoaderState, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ routeList, context, revalidateCache, setContext, setIsLoading, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
-    nextItem: RouteItem | undefined;
+    routeItemData: RouteItemData;
+    setSearch: (search: string) => void;
+    restoreScroll: () => void;
+    currentLoaderFallback: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement) | undefined;
 };
 export {};

package/dist/hooks/useLoader.d.ts

@@ -1,14 +1,14 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import type { LoaderState, RevalidateCacheArgs, RouteItem } from '../types/global';
+import type { RevalidateCacheArgs, RouteItem } from '../types/global';
 type UseLoaderParams = {
     routeList: RouteItem[];
     context: Record<string, unknown>;
     setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
-    setLoaderState: Dispatch<SetStateAction<LoaderState>>;
 };
-export declare const useLoader: ({ routeList, context, setContext, setLoaderState }: UseLoaderParams) => {
+export declare const useLoader: ({ routeList, context, setContext }: UseLoaderParams) => {
     prefetchLoader: (pathname: string) => Promise<void>;
-    revalidateCache: ({ routeItem, isCurrentRoute, pathname }: RevalidateCacheArgs) => Promise<void>;
+    revalidateCache: ({ routeItem, loaderState, pathname }: RevalidateCacheArgs) => Promise<void>;
     isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
 };
 export {};

package/dist/hooks/usePreserveScroll.d.ts

@@ -1,7 +1 @@
-type UsePreserveScrollParams = {
-    pathname: string;
-    preserveScroll: boolean;
-    nextPathname?: string;
-};
-export declare const usePreserveScroll: ({ pathname, preserveScroll, nextPathname }: UsePreserveScrollParams) => void;
-export {};
+export declare const usePreserveScroll: (preserveScroll: boolean) => void;

package/dist/hooks/useServiceContext.d.ts

@@ -1,4 +1,3 @@
 export declare const useNavigationState: () => import("../context/RouterProviderContext").NavigationContextValue;
 export declare const useRouterActions: () => import("../context/RouterProviderContext").ActionsContextValue;
 export declare const useRouterData: () => import("../context/RouterProviderContext").DataContextValue;
-export declare const usePropsData: () => import("../context/RouterProviderContext").PropsContextValue;

package/dist/index.js

@@ -3,7 +3,6 @@ import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useM
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
 //#region context/RouterProviderContext.ts
-var PropsContext = createContext({});
 var ActionsContext = createContext({});
 var DataContext = createContext({});
 var NavigationContext = createContext({});
@@ -19,7 +18,7 @@ var NavigationContext = createContext({});
 * LICENSE file in the root directory of this source tree.
 */
 var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((exports) => {
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
 	function jsxProd(type, config, maybeKey) {
 		var key = null;
 		void 0 !== maybeKey && (key = "" + maybeKey);
@@ -37,6 +36,7 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
 			props: maybeKey
 		};
 	}
+	exports.Fragment = REACT_FRAGMENT_TYPE;
 	exports.jsx = jsxProd;
 	exports.jsxs = jsxProd;
 }));
@@ -45,31 +45,26 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
 var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = require_react_jsx_runtime_production();
 })))();
-var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, nextItem }) => {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PropsContext.Provider, {
-		value: { routeList },
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
-			value: {
-				setLocation,
-				updateLocation,
-				updateBlockedRoute,
-				prefetchLoader,
-				setContext
-			},
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataContext.Provider, {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, isLoading, routeItemData, restoreScroll, currentLoaderFallback }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
+		value: {
+			setSearch,
+			updateLocation,
+			updateBlockedRoute,
+			prefetchLoader,
+			setContext,
+			restoreScroll
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataContext.Provider, {
+			value: { context },
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
 				value: {
-					context,
-					loaderState
+					blockerState,
+					isLoading,
+					routeItemData,
+					currentLoaderFallback
 				},
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
-					value: {
-						blockerState,
-						location,
-						isLoading,
-						nextItem
-					},
-					children
-				})
+				children
 			})
 		})
 	});
@@ -113,10 +108,10 @@ var parseClientRouteItem = (el, parentParams = [], parentPath = "") => {
 	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, currentParams, path)) || []];
 };
 var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el, []));
-var getParamsObject = ({ routeItem, pathname }) => {
-	if (!routeItem?.params) return {};
+var getParamsObject = ({ params, pathname }) => {
+	if (!params) return {};
 	const split = pathname.split("/");
-	return (routeItem.params || []).map((el) => ({
+	return (params || []).map((el) => ({
 		index: split.findIndex((item) => item === el.key),
 		value: el.value
 	})).reduce((acc, cur) => ({
@@ -136,71 +131,103 @@ var comparePaths = (el, pathname) => {
 };
 //#endregion
 //#region hooks/useHandleNavigation.ts
-var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, setContext, setLoaderState }) => {
+var ALL_LOCATIONS = "*";
+var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, setIsLoading }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
 	});
-	const [nextItem, setNextItem] = useState();
+	const [routeItemData, setRouteItemData] = useState({
+		location: {},
+		routeItem: void 0,
+		loaderState: {}
+	});
+	const [scrollMap, setScrollMap] = useState({});
+	const [currentLoaderFallback, setCurrentLoaderFallback] = useState();
+	const loaderState = useRef({});
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
-	const navigation = useCallback((nextLocation) => {
-		setLocation(nextLocation);
+	const scrollMapRef = useLatest(scrollMap);
+	const setSearch = useCallback((search) => setRouteItemData((prevState) => ({
+		...prevState,
+		location: {
+			...prevState.location,
+			search
+		}
+	})), []);
+	const restoreScroll = useCallback(() => {
+		if (!prevPathname.current || !scrollMapRef.current[prevPathname.current]) return;
+		requestAnimationFrame(() => {
+			window.scrollTo({
+				top: scrollMapRef.current[prevPathname.current],
+				behavior: "smooth"
+			});
+		});
+	}, [scrollMapRef]);
+	const navigation = useCallback((nextLocation, routeItem) => {
+		setRouteItemData({
+			location: nextLocation,
+			routeItem,
+			loaderState: loaderState.current
+		});
+		setIsLoading(false);
 		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);
-	}, [setLocation]);
-	const transitionedNavigation = useCallback((nextLocation) => {
+	}, [setIsLoading]);
+	const transitionedNavigation = useCallback((nextLocation, routeItem) => {
+		setScrollMap((prevState) => {
+			const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
+			if (!scrollPosition || prevState[prevPathname.current] === scrollPosition) return prevState;
+			return {
+				...prevState,
+				[prevPathname.current]: scrollPosition
+			};
+		});
 		try {
-			document.startViewTransition(() => navigation(nextLocation));
+			document.startViewTransition(() => navigation(nextLocation, routeItem));
 		} catch {
-			navigation(nextLocation);
+			navigation(nextLocation, routeItem);
 		}
 	}, [navigation]);
 	const navigationHandler = useCallback(async (nextLocation) => {
 		navigationSeq.current = navigationSeq.current + 1;
 		const seq = navigationSeq.current;
-		const nextItem = routeList.find((el) => comparePaths(el, nextLocation.pathname));
-		setNextItem(nextItem);
+		loaderState.current = {};
+		const nextItem = routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, nextLocation.pathname));
 		const params = getParamsObject({
-			routeItem: nextItem,
+			params: nextItem?.params,
 			pathname: nextLocation.pathname
 		});
 		if (nextItem?.beforeLoad) try {
-			const redirect = async (location) => typeof location === "string" ? await navigationHandler({ pathname: location }) : await navigationHandler(location);
+			const redirect = async (location) => await navigationHandler(typeof location === "string" ? { pathname: location } : location);
 			await nextItem.beforeLoad({
 				context,
 				redirect,
 				params,
 				setContext
 			});
-			setLoaderState((prevState) => ({
-				...prevState,
-				[nextLocation.pathname]: {
-					...prevState[nextLocation.pathname],
-					beforeLoadError: null
-				}
-			}));
+			loaderState.current = {
+				...loaderState.current,
+				beforeLoadError: null
+			};
 		} catch (error) {
-			setLoaderState((prevState) => ({
-				...prevState,
-				[nextLocation.pathname]: {
-					...prevState[nextLocation.pathname],
-					beforeLoadError: error
-				}
-			}));
-			transitionedNavigation(nextLocation);
-			return;
+			loaderState.current = {
+				...loaderState.current,
+				beforeLoadError: error
+			};
+			return transitionedNavigation(nextLocation, nextItem);
 		}
 		if (seq !== navigationSeq.current) return;
+		setCurrentLoaderFallback(nextItem?.loaderFallback);
 		await revalidateCache({
 			routeItem: nextItem,
-			isCurrentRoute: true,
+			loaderState,
 			pathname: nextLocation.pathname
 		});
 		if (seq !== navigationSeq.current) return;
-		transitionedNavigation(nextLocation);
+		transitionedNavigation(nextLocation, nextItem);
 		if (nextItem?.afterLoad) await nextItem.afterLoad({
 			context,
 			params,
@@ -211,8 +238,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		revalidateCache,
 		routeList,
 		transitionedNavigation,
-		setContext,
-		setLoaderState
+		setContext
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -266,14 +292,18 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		}, [blockedRoute]),
 		updateLocation,
 		updateBlockedRoute,
-		nextItem
+		routeItemData,
+		setSearch,
+		restoreScroll,
+		currentLoaderFallback
 	};
 };
 //#endregion
 //#region hooks/useLoader.ts
-var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
+var useLoader = ({ routeList, context, setContext }) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const cacheTimestampsRef = useRef({});
+	const loaderCacheRef = useRef({});
 	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
 		if (!routeItem) return true;
 		const currentCacheTimestamp = cacheTimestampsRef.current[pathname];
@@ -281,16 +311,22 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 		if (!routeItem.staleTime) return true;
 		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
 	}, []);
-	const revalidateCache = useCallback(async ({ routeItem, isCurrentRoute, pathname }) => {
-		if (!routeItem?.loader) return;
+	const revalidateCache = useCallback(async ({ routeItem, loaderState, pathname }) => {
+		if (!routeItem?.loader) {
+			if (loaderState) loaderState.current = {};
+			return;
+		}
 		if (isCacheItemFresh({
 			routeItem,
 			pathname
-		})) return;
-		if (isCurrentRoute) setIsLoading(true);
+		})) {
+			if (loaderState) loaderState.current = loaderCacheRef.current[pathname];
+			return;
+		}
+		if (loaderState) setIsLoading(true);
 		try {
 			const params = getParamsObject({
-				routeItem,
+				params: routeItem.params,
 				pathname
 			});
 			const result = await routeItem?.loader({
@@ -302,31 +338,27 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 				...cacheTimestampsRef.current,
 				[pathname]: Date.now()
 			};
-			if (isCurrentRoute) setLoaderState((prevState) => ({
-				...prevState,
-				[pathname]: {
-					...prevState[pathname],
-					data: result,
-					loaderError: null
-				}
-			}));
+			loaderCacheRef.current[pathname] = {
+				data: result,
+				loaderError: null,
+				beforeLoadError: null
+			};
+			if (loaderState) loaderState.current = {
+				...loaderState?.current,
+				data: result,
+				loaderError: null
+			};
 		} catch (error) {
-			if (isCurrentRoute) setLoaderState((prevState) => ({
-				...prevState,
-				[pathname]: {
-					...prevState[pathname],
-					data: null,
-					loaderError: error
-				}
-			}));
-		} finally {
-			setTimeout(() => setIsLoading(false), 10);
+			if (loaderState) loaderState.current = {
+				...loaderState?.current,
+				data: null,
+				loaderError: error
+			};
 		}
 	}, [
 		context,
 		isCacheItemFresh,
-		setContext,
-		setLoaderState
+		setContext
 	]);
 	return {
 		prefetchLoader: useCallback(async (pathname) => {
@@ -337,54 +369,52 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 			});
 		}, [revalidateCache, routeList]),
 		revalidateCache,
-		isLoading
+		isLoading,
+		setIsLoading
 	};
 };
 //#endregion
 //#region components/RouterProvider.tsx
 var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
-	const [location, setLocation] = useState({});
 	const [context, setContext] = useState(initialContext);
-	const [loaderState, setLoaderState] = useState({});
-	const { prefetchLoader, revalidateCache, isLoading } = useLoader({
+	const { prefetchLoader, revalidateCache, isLoading, setIsLoading } = useLoader({
 		routeList,
 		context,
-		setContext,
-		setLoaderState
+		setContext
 	});
-	const { blockerState, updateLocation, updateBlockedRoute, nextItem } = useHandleNavigation({
-		setLocation,
+	const { blockerState, updateLocation, updateBlockedRoute, routeItemData, setSearch, restoreScroll, currentLoaderFallback } = useHandleNavigation({
 		routeList,
 		context,
 		setContext,
 		revalidateCache,
-		setLoaderState
+		setIsLoading
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
 		...useMemo(() => ({
-			location,
-			setLocation,
+			setSearch,
 			updateLocation,
-			loaderState,
 			prefetchLoader,
 			updateBlockedRoute,
 			blockerState,
 			context,
 			setContext,
 			routeList,
-			nextItem,
+			routeItemData,
+			restoreScroll,
+			currentLoaderFallback,
 			isLoading
 		}), [
 			blockerState,
 			context,
 			isLoading,
-			loaderState,
-			location,
 			prefetchLoader,
+			routeItemData,
 			routeList,
+			setSearch,
 			updateBlockedRoute,
 			updateLocation,
-			nextItem
+			currentLoaderFallback,
+			restoreScroll
 		]),
 		children
 	});
@@ -399,7 +429,6 @@ var useServiceState = (reactContext) => {
 var useNavigationState = () => useServiceState(NavigationContext);
 var useRouterActions = () => useServiceState(ActionsContext);
 var useRouterData = () => useServiceState(DataContext);
-var usePropsData = () => useServiceState(PropsContext);
 //#endregion
 //#region hooks/useApplyCustomAnimation.ts
 var useApplyCustomAnimation = (animationDuration) => {
@@ -439,44 +468,18 @@ var useApplyCustomAnimation = (animationDuration) => {
 };
 //#endregion
 //#region hooks/usePreserveScroll.ts
-var usePreserveScroll = ({ pathname, preserveScroll, nextPathname }) => {
-	const [scrollMap, setScrollMap] = useState({});
-	const prevPathname = useRef("");
-	useEffect(() => {
-		setScrollMap((prevState) => {
-			const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
-			if (!scrollPosition || prevState[prevPathname.current] === scrollPosition) return prevState;
-			return {
-				...prevState,
-				[prevPathname.current]: scrollPosition
-			};
-		});
-		prevPathname.current = pathname;
-	}, [pathname, nextPathname]);
+var usePreserveScroll = (preserveScroll) => {
+	const { restoreScroll } = useRouterActions();
+	const { routeItemData: { location: { pathname } } } = useNavigationState();
 	useEffect(() => {
-		if (!preserveScroll || !pathname || !scrollMap[pathname]) return;
-		document.scrollingElement?.scrollTo({
-			top: scrollMap[pathname],
-			behavior: "smooth"
-		});
+		if (preserveScroll) restoreScroll();
 	}, [
-		pathname,
-		scrollMap,
-		preserveScroll
+		preserveScroll,
+		restoreScroll,
+		pathname
 	]);
 };
 //#endregion
-//#region context/RouterViewContext.ts
-var RouterViewContext = createContext({});
-//#endregion
-//#region provider/ViewProvider.tsx
-var ViewProvider = ({ children, params }) => {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterViewContext.Provider, {
-		value: params,
-		children
-	});
-};
-//#endregion
 //#region components/Spinner.tsx
 var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cr-spinner" });
 //#endregion
@@ -487,57 +490,27 @@ var renderElement = (Component) => {
 };
 //#endregion
 //#region components/Router.tsx
-var ALL_LOCATIONS = "*";
-var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true }) => {
-	const { location, isLoading, nextItem } = useNavigationState();
-	const { routeList } = usePropsData();
-	const { loaderState } = useRouterData();
-	usePreserveScroll({
-		nextPathname: nextItem?.path,
-		pathname: location.pathname,
-		preserveScroll
-	});
+var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
+	const { isLoading, routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
+	usePreserveScroll(preserveScroll);
 	useApplyCustomAnimation(animationDuration);
-	const routeItem = useMemo(() => {
-		if (!location.pathname) return void 0;
-		return routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, location.pathname));
-	}, [location.pathname, routeList]);
-	const params = useMemo(() => {
-		return getParamsObject({
-			routeItem: routeItem || nextItem,
-			pathname: location.pathname || window.location.pathname
-		});
-	}, [
-		location.pathname,
-		routeItem,
-		nextItem
-	]);
-	const shouldErrorElementShown = useMemo(() => Boolean(loaderState[location.pathname]?.loaderError || loaderState[location.pathname]?.beforeLoadError), [loaderState, location.pathname]);
-	if (!routeItem && !nextItem) return null;
-	if (!routeItem && nextItem) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
-		params,
-		children: renderElement(nextItem?.loaderFallback)
-	});
-	if (!isAnimated && !shouldErrorElementShown && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
-		params,
-		children: renderElement(nextItem?.loaderFallback)
-	});
-	if (shouldErrorElementShown) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ViewProvider, {
-		params,
-		children: [renderElement(routeItem?.errorElement), spinner && isAnimated && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
-	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	const showErrorElement = useMemo(() => Boolean(loaderState.loaderError || loaderState.beforeLoadError), [loaderState]);
+	const showSpinner = spinner && isAnimated && isLoading;
+	const loadingContent = !showErrorElement && isLoading;
+	if ((showFallbackIfAnimated || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback);
+	if (!showFallbackIfAnimated && isAnimated && loadingContent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
+	if (!routeItem) return null;
+	if (showErrorElement) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [renderElement(routeItem.errorElement), showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})] });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		style: { viewTransitionName: "page" },
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ViewProvider, {
-			params,
-			children: [renderElement(routeItem?.element) || null, spinner && isAnimated && isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
-		})
+		children: [renderElement(routeItem.element) || null, showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
 	});
 };
 //#endregion
 //#region hooks/useLocation.ts
 var useLocation = () => {
-	return useNavigationState().location;
+	const { routeItemData: { location } } = useNavigationState();
+	return location;
 };
 //#endregion
 //#region hooks/useNavigate.ts
@@ -584,19 +557,24 @@ var Link = ({ children, to, prefetch = true, prefetchDelay = STANDARD_DELAY }) =
 //#endregion
 //#region hooks/useParams.ts
 var useParams = () => {
-	return useContext(RouterViewContext);
+	const { routeItemData: { routeItem } } = useNavigationState();
+	if (!routeItem) return void 0;
+	return getParamsObject({
+		params: routeItem?.params,
+		pathname: location.pathname
+	});
 };
 //#endregion
 //#region hooks/useLoaderState.ts
 var useLoaderState = () => {
-	const { pathname } = useLocation();
-	const { loaderState } = useRouterData();
-	return loaderState[pathname];
+	const { routeItemData: { loaderState } } = useNavigationState();
+	return loaderState;
 };
 //#endregion
 //#region hooks/useBlocker.ts
 var useBlocker = (blockerFn) => {
-	const { location: { pathname }, blockerState } = useNavigationState();
+	const { blockerState } = useNavigationState();
+	const { routeItemData: { location: { pathname } } } = useNavigationState();
 	const { updateBlockedRoute } = useRouterActions();
 	const shouldBlock = blockerFn();
 	useEffect(() => updateBlockedRoute(shouldBlock ? {
@@ -639,8 +617,8 @@ var useRouterContext = () => {
 //#endregion
 //#region hooks/useSearchParams.ts
 var useSearchParams = () => {
-	const location = useLocation();
-	const { setLocation } = useRouterActions();
+	const { routeItemData: { location } } = useNavigationState();
+	const { setSearch } = useRouterActions();
 	const locationRef = useLatest(location);
 	const searchString = useMemo(() => location.search ? location.search.replace("?", "") : location.pathname.split("?")?.[1] ?? "", [location.pathname, location.search]);
 	const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
@@ -652,12 +630,9 @@ var useSearchParams = () => {
 		const newSearch = params.toString();
 		const { pathname } = locationRef.current;
 		const search = newSearch ? `?${newSearch}` : "";
-		setLocation((prevState) => ({
-			...prevState,
-			search
-		}));
+		setSearch(search);
 		history.replaceState(null, "", pathname + search);
-	}, [locationRef, setLocation]);
+	}, [locationRef, setSearch]);
 	return {
 		searchParams,
 		getSearchParams,

package/dist/provider/Provider.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
-import { type ActionsContextValue, type DataContextValue, type NavigationContextValue, PropsContextValue } from '../context/RouterProviderContext';
-type ProviderProps = PropsContextValue & NavigationContextValue & ActionsContextValue & DataContextValue & {
+import { type ActionsContextValue, type DataContextValue, type NavigationContextValue } from '../context/RouterProviderContext';
+type ProviderProps = NavigationContextValue & ActionsContextValue & DataContextValue & {
     children: ReactNode;
 };
-export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, nextItem, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, isLoading, routeItemData, restoreScroll, currentLoaderFallback, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, Dispatch, ReactElement, SetStateAction } from 'react';
+import type { ComponentType, Dispatch, ReactElement, RefObject, SetStateAction } from 'react';
 export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
@@ -48,14 +48,19 @@ export type UpdateBlockedRouteProps = {
 export type RevalidateCacheArgs = {
     pathname: string;
     routeItem?: RouteItem;
-    isCurrentRoute?: boolean;
+    loaderState?: RefObject<LoaderState>;
 };
-export type LoaderState = Record<string, {
+export type LoaderState = {
     data: unknown;
     loaderError: Error | null;
     beforeLoadError: Error | null;
-}>;
+};
 export type Adapter<T> = {
     parse: (params: string[]) => T;
     serialize?: (params: T) => string | string[];
 };
+export type RouteItemData = {
+    location: Location;
+    routeItem: RouteItem | undefined;
+    loaderState: LoaderState;
+};

package/dist/utils/utils.d.ts

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

package/package.json

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

package/dist/context/RouterViewContext.d.ts

@@ -1 +0,0 @@
-export declare const RouterViewContext: import("react").Context<Record<string, string>>;

package/dist/provider/ViewProvider.d.ts

@@ -1,7 +0,0 @@
-import { type ReactNode } from 'react';
-type ViewProviderProps = {
-    params: Record<string, string>;
-    children: ReactNode;
-};
-export declare const ViewProvider: ({ children, params }: ViewProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};