clear-react-router 1.3.8 → 1.4.0

package/README.md

@@ -224,13 +224,21 @@ const { pathname, search, state } = useLocation();
 
 ### `useLoaderState()`
 
-Returns the cached data loaded by the current route's `loader`. Data is automatically cached and reused when navigating back to the same route.
+Returns the cached data loaded by the current route's `loader`, along with any errors from `loader` or `beforeLoad`. Data is automatically cached and reused when navigating back to the same route.
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `data` | `unknown` | The data returned from the route's `loader` |
+| `loaderError` | `Error \| null` | Error from the `loader` (if any) |
+| `beforeLoadError` | `Error \| null` | Error from the `beforeLoad` hook (if any) |
+
 ```
-const UserProfile = () => {
-  const user = useLoaderState();
-  return <div>{user.name}</div>;
-}
+function UserProfile() {
+  const { data, loaderError, beforeLoadError } = useLoaderState();
 ```
+
 ### Caching behavior:
 - The loader result is cached and reused when navigating back to the same route (e.g., from /user/123 back to /user/456 it will be a new request because different params, but from /user/456 to /user/456 — cache hit).
 - Use staleTime in route config to control how long cache is considered fresh:

package/dist/context/RouterProviderContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { BlockerState, Location, RouteItem, UpdateBlockedRouteProps } from '../types/global';
+import { BlockerState, LoaderState, Location, RouteItem, UpdateBlockedRouteProps } from '../types/global';
 export type PropsContextValue = {
     routeList: RouteItem[];
     isAnimated: boolean;
@@ -8,7 +8,6 @@ export type NavigationContextValue = {
     location: Location;
     blockerState: BlockerState;
     isLoading: boolean;
-    shouldErrorElementShown: boolean;
 };
 export type ActionsContextValue = {
     setLocation: Dispatch<SetStateAction<Location>>;
@@ -18,7 +17,7 @@ export type ActionsContextValue = {
     setContext(arg: object): void;
 };
 export type DataContextValue = {
-    loaderCache: unknown;
+    loaderState: LoaderState;
     context: Record<string, unknown>;
 };
 export declare const PropsContext: import("react").Context<PropsContextValue>;

package/dist/hooks/useHandleNavigation.d.ts

@@ -1,5 +1,5 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import type { BlockerState, Location, RevalidateCacheArgs, RouteItem, UpdateBlockedRouteProps } from '../types/global';
+import type { BlockerState, LoaderState, Location, RevalidateCacheArgs, RouteItem, UpdateBlockedRouteProps } from '../types/global';
 type UseHandleNavigation = {
     routeList: RouteItem[];
     setLocation: (arg: Location) => void;
@@ -8,11 +8,11 @@ type UseHandleNavigation = {
     isAnimated: boolean;
     setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
     setScrollMap: Dispatch<SetStateAction<Record<string, number>>>;
+    setLoaderState: Dispatch<SetStateAction<LoaderState>>;
 };
-export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, setScrollMap, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, setScrollMap, setLoaderState, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
-    beforeLoadError: boolean;
 };
 export {};

package/dist/hooks/useLoader.d.ts

@@ -1,13 +1,12 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import type { RevalidateCacheArgs, RouteItem } from '../types/global';
+import type { LoaderState, 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 }: UseLoaderParams) => {
-    loaderCache: unknown;
-    loaderError: boolean;
+export declare const useLoader: ({ routeList, context, setContext, setLoaderState }: UseLoaderParams) => {
     prefetchLoader: (pathname: string) => Promise<void>;
     revalidateCache: ({ routeItem, isCurrentRoute, pathname }: RevalidateCacheArgs) => Promise<void>;
     isLoading: boolean;

package/dist/index.js

@@ -45,7 +45,7 @@ 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, loaderCache, blockerState, routeList, shouldErrorElementShown, isLoading, isAnimated }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, isAnimated }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PropsContext.Provider, {
 		value: {
 			routeList,
@@ -62,13 +62,12 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataContext.Provider, {
 				value: {
 					context,
-					loaderCache
+					loaderState
 				},
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
 					value: {
 						blockerState,
 						location,
-						shouldErrorElementShown,
 						isLoading
 					},
 					children
@@ -139,12 +138,11 @@ var comparePaths = (el, pathname) => {
 };
 //#endregion
 //#region hooks/useHandleNavigation.ts
-var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, setScrollMap }) => {
+var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, setScrollMap, setLoaderState }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
 	});
-	const [beforeLoadError, setBeforeLoadError] = useState(false);
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
 	const updateScrollMap = useCallback(() => setScrollMap((prevState) => {
@@ -187,15 +185,27 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 				params,
 				setContext
 			});
-		} catch {
-			setBeforeLoadError(true);
+			setLoaderState((prevState) => ({
+				...prevState,
+				[nextLocation.pathname]: {
+					...prevState[nextLocation.pathname],
+					beforeLoadError: null
+				}
+			}));
+		} catch (error) {
+			setLoaderState((prevState) => ({
+				...prevState,
+				[nextLocation.pathname]: {
+					...prevState[nextLocation.pathname],
+					beforeLoadError: error
+				}
+			}));
 			transitionedNavigation({
 				nextLocation,
 				isAnimated: false
 			});
 			return;
 		}
-		else setBeforeLoadError(false);
 		if (seq !== navigationSeq.current) return;
 		await revalidateCache({
 			routeItem: nextItem,
@@ -208,7 +218,6 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 			isFirstCall,
 			isAnimated
 		});
-		setBeforeLoadError(false);
 		if (nextItem?.afterLoad) await nextItem.afterLoad({
 			context,
 			params,
@@ -221,7 +230,8 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 		transitionedNavigation,
 		isAnimated,
 		setContext,
-		updateScrollMap
+		updateScrollMap,
+		setLoaderState
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -274,18 +284,14 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 			return "unblocked";
 		}, [blockedRoute]),
 		updateLocation,
-		updateBlockedRoute,
-		beforeLoadError
+		updateBlockedRoute
 	};
 };
 //#endregion
 //#region hooks/useLoader.ts
-var useLoader = ({ routeList, context, setContext }) => {
-	const [loaderCache, setLoaderCache] = useState();
-	const [loaderError, setLoaderError] = useState(false);
+var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 	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];
@@ -294,28 +300,13 @@ var useLoader = ({ routeList, context, setContext }) => {
 		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
 	}, []);
 	const revalidateCache = useCallback(async ({ routeItem, isCurrentRoute, pathname }) => {
-		if (!routeItem?.loader) {
-			setLoaderError(false);
-			return;
-		}
-		if (isCacheItemFresh({
-			routeItem,
-			pathname
-		}) && isCurrentRoute) {
-			setLoaderCache(loaderCacheRef.current[pathname]);
-			setLoaderError(false);
-		}
+		if (!routeItem?.loader) return;
 		if (isCacheItemFresh({
 			routeItem,
 			pathname
 		})) return;
 		if (isCurrentRoute) setIsLoading(true);
-		loaderCacheRef.current = Object.keys(loaderCacheRef.current).filter((el) => el !== routeItem.path).reduce((acc, cur) => ({
-			...acc,
-			[cur]: loaderCacheRef.current[cur]
-		}), {});
 		try {
-			if (isCurrentRoute) setLoaderError(false);
 			const params = getParamsObject({
 				routeItem,
 				pathname
@@ -329,13 +320,23 @@ var useLoader = ({ routeList, context, setContext }) => {
 				...cacheTimestampsRef.current,
 				[pathname]: Date.now()
 			};
-			loaderCacheRef.current = {
-				...loaderCacheRef.current,
-				[pathname]: result
-			};
-			if (isCurrentRoute) setLoaderCache(result);
-		} catch {
-			if (isCurrentRoute) setLoaderError(true);
+			if (isCurrentRoute) setLoaderState((prevState) => ({
+				...prevState,
+				[pathname]: {
+					...prevState[pathname],
+					data: result,
+					loaderError: null
+				}
+			}));
+		} catch (error) {
+			if (isCurrentRoute) setLoaderState((prevState) => ({
+				...prevState,
+				[pathname]: {
+					...prevState[pathname],
+					data: null,
+					loaderError: error
+				}
+			}));
 		} finally {
 			if (isCurrentRoute) setIsLoading(false);
 		}
@@ -345,8 +346,6 @@ var useLoader = ({ routeList, context, setContext }) => {
 		setContext
 	]);
 	return {
-		loaderCache,
-		loaderError,
 		prefetchLoader: useCallback(async (pathname) => {
 			const item = routeList.find((el) => comparePaths(el, pathname));
 			if (item) await revalidateCache({
@@ -417,31 +416,34 @@ var useApplyCustomAnimation = (animationDuration) => {
 var RouterProvider = ({ children, routeList, context: initialContext = {}, isAnimated = false, animationDuration, preserveScroll = true }) => {
 	const [location, setLocation] = useState({});
 	const [context, setContext] = useState(initialContext);
+	const [loaderState, setLoaderState] = useState({});
 	useApplyCustomAnimation(animationDuration);
 	const setScrollMap = usePreserveScroll({
 		pathname: location.pathname,
 		preserveScroll
 	});
-	const { loaderError, loaderCache, prefetchLoader, revalidateCache, isLoading } = useLoader({
+	const { prefetchLoader, revalidateCache, isLoading } = useLoader({
 		routeList,
 		context,
-		setContext
+		setContext,
+		setLoaderState
 	});
-	const { blockerState, updateLocation, updateBlockedRoute, beforeLoadError } = useHandleNavigation({
+	const { blockerState, updateLocation, updateBlockedRoute } = useHandleNavigation({
 		setLocation,
 		routeList,
 		context,
 		setContext,
 		revalidateCache,
 		isAnimated,
-		setScrollMap
+		setScrollMap,
+		setLoaderState
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
 		...useMemo(() => ({
 			location,
 			setLocation,
 			updateLocation,
-			loaderCache,
+			loaderState,
 			prefetchLoader,
 			updateBlockedRoute,
 			blockerState,
@@ -449,15 +451,12 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 			setContext,
 			routeList,
 			isLoading,
-			shouldErrorElementShown: loaderError || beforeLoadError,
 			isAnimated
 		}), [
-			beforeLoadError,
 			blockerState,
 			context,
 			isLoading,
-			loaderCache,
-			loaderError,
+			loaderState,
 			location,
 			prefetchLoader,
 			routeList,
@@ -469,15 +468,6 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 	});
 };
 //#endregion
-//#region components/Spinner.tsx
-var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cr-spinner" });
-//#endregion
-//#region utils/renderElement.tsx
-var renderElement = (Component) => {
-	if (!Component) return null;
-	return typeof Component === "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) : Component;
-};
-//#endregion
 //#region hooks/useServiceContext.ts
 var useServiceState = (reactContext) => {
 	const context = useContext(reactContext);
@@ -500,12 +490,22 @@ var ViewProvider = ({ children, params }) => {
 	});
 };
 //#endregion
+//#region components/Spinner.tsx
+var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cr-spinner" });
+//#endregion
+//#region utils/renderElement.tsx
+var renderElement = (Component) => {
+	if (!Component) return null;
+	return typeof Component === "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) : Component;
+};
+//#endregion
 //#region components/Router.tsx
 var PAGE_NOT_FOUND = "error 404. Page not found";
 var ALL_LOCATIONS = "*";
 var Router = ({ spinner = true }) => {
-	const { location, isLoading, shouldErrorElementShown } = useNavigationState();
+	const { location, isLoading } = useNavigationState();
 	const { routeList, isAnimated } = usePropsData();
+	const { loaderState } = useRouterData();
 	const routeItem = useMemo(() => {
 		if (!location.pathname) return void 0;
 		return routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, location.pathname));
@@ -514,6 +514,7 @@ var Router = ({ spinner = true }) => {
 		routeItem,
 		pathname: window.location.pathname
 	}), [routeItem]);
+	const shouldErrorElementShown = useMemo(() => Boolean(loaderState[location.pathname]?.loaderError || loaderState[location.pathname]?.beforeLoadError), [loaderState, location.pathname]);
 	if (spinner && !routeItem && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
 	if (!routeItem && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
 	if (!routeItem) return null;
@@ -588,8 +589,9 @@ var useParams = () => {
 //#endregion
 //#region hooks/useLoaderState.ts
 var useLoaderState = () => {
-	const { loaderCache } = useRouterData();
-	return loaderCache;
+	const { pathname } = useLocation();
+	const { loaderState } = useRouterData();
+	return loaderState[pathname];
 };
 //#endregion
 //#region hooks/useBlocker.ts

package/dist/provider/Provider.d.ts

@@ -3,5 +3,5 @@ import { type ActionsContextValue, type DataContextValue, type NavigationContext
 type ProviderProps = PropsContextValue & NavigationContextValue & ActionsContextValue & DataContextValue & {
     children: ReactNode;
 };
-export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderCache, blockerState, routeList, shouldErrorElementShown, isLoading, isAnimated, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, isAnimated, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/global.d.ts

@@ -50,3 +50,8 @@ export type RevalidateCacheArgs = {
     routeItem?: RouteItem;
     isCurrentRoute?: boolean;
 };
+export type LoaderState = Record<string, {
+    data: unknown;
+    loaderError: Error | null;
+    beforeLoadError: Error | null;
+}>;

package/package.json

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