clear-react-router 1.4.2 → 1.4.4

package/README.md

@@ -45,20 +45,18 @@ 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.) |
-| `isAnimated` | `boolean` | `false` | Enable smooth page transitions |
-| `animationDuration` | `number` | `optional` | Animation duration in milliseconds (browser default is used if not set) |
 | `preserveScroll` | `boolean` | `true` | Save and restore scroll position when navigating between pages |
 | `children` | `ReactNode` | required | App content (must include `<Router />`) |
 
 ```
 function App() {
   return (
-    <RouterProvider routeList={routes} isAnimated animationDuration={800}>
-      <Navbar />           {/* Static — won't re-render on route change */}
+    <RouterProvider routeList={routes}>
+      <Navbar />          							   {/* Static */}
       <main>
-        <Router />         {/* Dynamic — renders current page */}
+        <Router isAnimated animationDuration={800} />  {/* Dynamic — renders current page */}
       </main>
-      <Footer />           {/* Static — won't re-render on route change */}
+      <Footer />         							   {/* Static */}
     </RouterProvider>
   );
 }
@@ -70,7 +68,9 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `spinner` | `boolean /| undefined` | `true` | Show a small spinner in the corner while loading data (only when `isAnimated` is enabled) |
+| `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) |
 
 ```
 <RouterProvider routeList={routes} isAnimated>

package/dist/components/Router.d.ts

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

package/dist/components/RouterProvider.d.ts

@@ -4,9 +4,7 @@ type RouteProviderProps = {
     children: ReactNode;
     routeList: RouteItem[];
     context?: Record<string, unknown>;
-    isAnimated?: boolean;
-    animationDuration?: number;
     preserveScroll?: boolean;
 };
-export declare const RouterProvider: ({ children, routeList, context: initialContext, isAnimated, animationDuration, preserveScroll, }: RouteProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RouterProvider: ({ children, routeList, context: initialContext, preserveScroll, }: RouteProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/context/RouterProviderContext.d.ts

@@ -2,12 +2,12 @@ import { Dispatch, SetStateAction } from 'react';
 import { BlockerState, LoaderState, Location, RouteItem, UpdateBlockedRouteProps } from '../types/global';
 export type PropsContextValue = {
     routeList: RouteItem[];
-    isAnimated: boolean;
 };
 export type NavigationContextValue = {
     location: Location;
     blockerState: BlockerState;
     isLoading: boolean;
+    nextRouteItem: RouteItem | undefined;
 };
 export type ActionsContextValue = {
     setLocation: Dispatch<SetStateAction<Location>>;

package/dist/hooks/useHandleNavigation.d.ts

@@ -5,14 +5,14 @@ type UseHandleNavigation = {
     setLocation: (arg: Location) => void;
     context: Record<string, unknown>;
     revalidateCache(arg: RevalidateCacheArgs): Promise<void>;
-    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, setLoaderState, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, setContext, setScrollMap, setLoaderState, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
+    nextRouteItem: RouteItem | undefined;
 };
 export {};

package/dist/index.js

@@ -45,12 +45,9 @@ 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, isAnimated }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, nextRouteItem }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PropsContext.Provider, {
-		value: {
-			routeList,
-			isAnimated
-		},
+		value: { routeList },
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
 			value: {
 				setLocation,
@@ -68,7 +65,8 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 					value: {
 						blockerState,
 						location,
-						isLoading
+						isLoading,
+						nextRouteItem
 					},
 					children
 				})
@@ -138,11 +136,12 @@ var comparePaths = (el, pathname) => {
 };
 //#endregion
 //#region hooks/useHandleNavigation.ts
-var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, setScrollMap, setLoaderState }) => {
+var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, setContext, setScrollMap, setLoaderState }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
 	});
+	const [nextRouteItem, setNextRouteItem] = useState();
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
 	const updateScrollMap = useCallback(() => setScrollMap((prevState) => {
@@ -160,19 +159,19 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 		if (fullPath === window.location.pathname + window.location.search) return;
 		history.pushState(null, "", fullPath);
 	}, [setLocation]);
-	const transitionedNavigation = useCallback(({ nextLocation, isFirstCall, isAnimated }) => {
-		if (isAnimated && !isFirstCall) try {
+	const transitionedNavigation = useCallback((nextLocation) => {
+		try {
 			document.startViewTransition(() => navigation(nextLocation));
 		} catch {
 			navigation(nextLocation);
 		}
-		else navigation(nextLocation);
 	}, [navigation]);
-	const navigationHandler = useCallback(async (nextLocation, isFirstCall) => {
+	const navigationHandler = useCallback(async (nextLocation) => {
 		navigationSeq.current = navigationSeq.current + 1;
 		const seq = navigationSeq.current;
 		updateScrollMap();
 		const nextItem = routeList.find((el) => comparePaths(el, nextLocation.pathname));
+		setNextRouteItem(nextItem);
 		const params = getParamsObject({
 			routeItem: nextItem,
 			pathname: nextLocation.pathname
@@ -200,10 +199,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 					beforeLoadError: error
 				}
 			}));
-			transitionedNavigation({
-				nextLocation,
-				isAnimated: false
-			});
+			transitionedNavigation(nextLocation);
 			return;
 		}
 		if (seq !== navigationSeq.current) return;
@@ -213,11 +209,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 			pathname: nextLocation.pathname
 		});
 		if (seq !== navigationSeq.current) return;
-		transitionedNavigation({
-			nextLocation,
-			isFirstCall,
-			isAnimated
-		});
+		transitionedNavigation(nextLocation);
 		if (nextItem?.afterLoad) await nextItem.afterLoad({
 			context,
 			params,
@@ -228,10 +220,9 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 		revalidateCache,
 		routeList,
 		transitionedNavigation,
-		isAnimated,
 		setContext,
-		updateScrollMap,
-		setLoaderState
+		setLoaderState,
+		updateScrollMap
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -274,7 +265,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 	}, [blockedRoute.from, setNextLocationRef]);
 	useEffect(() => {
 		const currentLocation = parseWindowLocation(window.location);
-		setNextLocationRef.current(currentLocation, true);
+		setNextLocationRef.current(currentLocation);
 		prevPathname.current = currentLocation.pathname;
 	}, [setNextLocationRef]);
 	return {
@@ -284,7 +275,8 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 			return "unblocked";
 		}, [blockedRoute]),
 		updateLocation,
-		updateBlockedRoute
+		updateBlockedRoute,
+		nextRouteItem
 	};
 };
 //#endregion
@@ -338,12 +330,13 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 				}
 			}));
 		} finally {
-			if (isCurrentRoute) setIsLoading(false);
+			setTimeout(() => setIsLoading(false), 10);
 		}
 	}, [
 		context,
 		isCacheItemFresh,
-		setContext
+		setContext,
+		setLoaderState
 	]);
 	return {
 		prefetchLoader: useCallback(async (pathname) => {
@@ -375,49 +368,11 @@ var usePreserveScroll = ({ pathname, preserveScroll }) => {
 	return setScrollMap;
 };
 //#endregion
-//#region hooks/useApplyCustomAnimation.ts
-var useApplyCustomAnimation = (animationDuration) => {
-	useEffect(() => {
-		const style = document.createElement("style");
-		style.id = "spinner-style";
-		style.textContent = `
-	@keyframes cr-spin {
-	  0% { transform: rotate(0deg); }
-	  100% { transform: rotate(360deg); }
-	}
-	
-	.cr-spinner {
-	  position: fixed;
-	  top: 5px;
-	  left: 5px;
-	  z-index: 9999;
-	  width: 1rem;
-	  height: 1rem;
-	  border: 2px solid gray;
-	  border-bottom-color: transparent;
-	  border-radius: 50%;
-	  animation: cr-spin 1s linear infinite;
-	}
-	`;
-		document.head.appendChild(style);
-		return () => style.remove();
-	}, []);
-	useEffect(() => {
-		if (!animationDuration) return;
-		const style = document.createElement("style");
-		style.id = "dynamic-view-transition-duration-style";
-		style.textContent = `::view-transition-group(page) { animation-duration: ${animationDuration}ms; }`;
-		document.head.appendChild(style);
-		return () => style.remove();
-	}, [animationDuration]);
-};
-//#endregion
 //#region components/RouterProvider.tsx
-var RouterProvider = ({ children, routeList, context: initialContext = {}, isAnimated = false, animationDuration, preserveScroll = true }) => {
+var RouterProvider = ({ children, routeList, context: initialContext = {}, preserveScroll = true }) => {
 	const [location, setLocation] = useState({});
 	const [context, setContext] = useState(initialContext);
 	const [loaderState, setLoaderState] = useState({});
-	useApplyCustomAnimation(animationDuration);
 	const setScrollMap = usePreserveScroll({
 		pathname: location.pathname,
 		preserveScroll
@@ -428,13 +383,12 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 		setContext,
 		setLoaderState
 	});
-	const { blockerState, updateLocation, updateBlockedRoute } = useHandleNavigation({
+	const { blockerState, updateLocation, updateBlockedRoute, nextRouteItem } = useHandleNavigation({
 		setLocation,
 		routeList,
 		context,
 		setContext,
 		revalidateCache,
-		isAnimated,
 		setScrollMap,
 		setLoaderState
 	});
@@ -450,8 +404,8 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 			context,
 			setContext,
 			routeList,
-			isLoading,
-			isAnimated
+			nextRouteItem,
+			isLoading
 		}), [
 			blockerState,
 			context,
@@ -462,7 +416,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 			routeList,
 			updateBlockedRoute,
 			updateLocation,
-			isAnimated
+			nextRouteItem
 		]),
 		children
 	});
@@ -479,6 +433,43 @@ var useRouterActions = () => useServiceState(ActionsContext);
 var useRouterData = () => useServiceState(DataContext);
 var usePropsData = () => useServiceState(PropsContext);
 //#endregion
+//#region hooks/useApplyCustomAnimation.ts
+var useApplyCustomAnimation = (animationDuration) => {
+	useEffect(() => {
+		const style = document.createElement("style");
+		style.id = "spinner-style";
+		style.textContent = `
+	@keyframes cr-spin {
+	  0% { transform: rotate(0deg); }
+	  100% { transform: rotate(360deg); }
+	}
+	
+	.cr-spinner {
+	  position: fixed;
+	  top: 5px;
+	  left: 5px;
+	  z-index: 9999;
+	  width: 1rem;
+	  height: 1rem;
+	  border: 2px solid gray;
+	  border-bottom-color: transparent;
+	  border-radius: 50%;
+	  animation: cr-spin 1s linear infinite;
+	}
+	`;
+		document.head.appendChild(style);
+		return () => style.remove();
+	}, []);
+	useEffect(() => {
+		if (!animationDuration) return;
+		const style = document.createElement("style");
+		style.id = "dynamic-view-transition-duration-style";
+		style.textContent = `::view-transition-group(page) { animation-duration: ${animationDuration}ms; }`;
+		document.head.appendChild(style);
+		return () => style.remove();
+	}, [animationDuration]);
+};
+//#endregion
 //#region context/RouterViewContext.ts
 var RouterViewContext = createContext({});
 //#endregion
@@ -501,37 +492,34 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var ALL_LOCATIONS = "*";
-var Router = ({ spinner = true }) => {
-	const { location, isLoading } = useNavigationState();
-	const { routeList, isAnimated } = usePropsData();
+var Router = ({ isAnimated, animationDuration, spinner = true }) => {
+	const { location, isLoading, nextRouteItem } = useNavigationState();
+	const { routeList } = usePropsData();
 	const { loaderState } = useRouterData();
+	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 pendingRoute = useMemo(() => {
-		if (location.pathname) return void 0;
-		return routeList.find((el) => comparePaths(el, window.location.pathname));
-	}, [location.pathname, routeList]);
 	const params = useMemo(() => {
 		return getParamsObject({
-			routeItem: routeItem || pendingRoute,
+			routeItem: routeItem || nextRouteItem,
 			pathname: location.pathname || window.location.pathname
 		});
 	}, [
 		location.pathname,
 		routeItem,
-		pendingRoute
+		nextRouteItem
 	]);
 	const shouldErrorElementShown = useMemo(() => Boolean(loaderState[location.pathname]?.loaderError || loaderState[location.pathname]?.beforeLoadError), [loaderState, location.pathname]);
-	if (!routeItem && !pendingRoute) return null;
-	if (!routeItem && pendingRoute) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
+	if (!routeItem && !nextRouteItem) return null;
+	if (!routeItem && nextRouteItem) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
-		children: renderElement(pendingRoute?.loaderFallback)
+		children: renderElement(nextRouteItem?.loaderFallback)
 	});
 	if (!isAnimated && !shouldErrorElementShown && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
-		children: renderElement(routeItem?.loaderFallback)
+		children: renderElement(nextRouteItem?.loaderFallback)
 	});
 	if (shouldErrorElementShown) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ViewProvider, {
 		params,

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, loaderState, blockerState, routeList, 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, nextRouteItem, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

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