clear-react-router 1.4.4 → 1.4.6

package/dist/components/Router.d.ts

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

package/dist/components/RouterProvider.d.ts

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

package/dist/context/RouterProviderContext.d.ts

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

package/dist/hooks/useHandleNavigation.d.ts

@@ -1,18 +1,17 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import type { BlockerState, LoaderState, Location, RevalidateCacheArgs, RouteItem, UpdateBlockedRouteProps } from '../types/global';
+import { BlockerState, LoaderState, Location, NextItemData, RevalidateCacheArgs, RouteItem, 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>>>;
-    setScrollMap: Dispatch<SetStateAction<Record<string, number>>>;
     setLoaderState: Dispatch<SetStateAction<LoaderState>>;
 };
-export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, setContext, setScrollMap, setLoaderState, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, setContext, setLoaderState, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
-    nextRouteItem: RouteItem | undefined;
+    nextItemData: NextItemData;
 };
 export {};

package/dist/hooks/usePreserveScroll.d.ts

@@ -1,6 +1,7 @@
 type UsePreserveScrollParams = {
     pathname: string;
     preserveScroll: boolean;
+    nextPathname?: string;
 };
-export declare const usePreserveScroll: ({ pathname, preserveScroll }: UsePreserveScrollParams) => import("react").Dispatch<import("react").SetStateAction<Record<string, number>>>;
+export declare const usePreserveScroll: ({ pathname, preserveScroll, nextPathname }: UsePreserveScrollParams) => void;
 export {};

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, loaderState, blockerState, routeList, isLoading, nextRouteItem }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, nextItemData }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PropsContext.Provider, {
 		value: { routeList },
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
@@ -66,7 +66,7 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 						blockerState,
 						location,
 						isLoading,
-						nextRouteItem
+						nextItemData
 					},
 					children
 				})
@@ -113,10 +113,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,22 +136,14 @@ var comparePaths = (el, pathname) => {
 };
 //#endregion
 //#region hooks/useHandleNavigation.ts
-var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, setContext, setScrollMap, setLoaderState }) => {
+var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, setContext, setLoaderState }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
 	});
-	const [nextRouteItem, setNextRouteItem] = useState();
+	const [nextItemData, setNextItemData] = useState({});
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
-	const updateScrollMap = useCallback(() => setScrollMap((prevState) => {
-		const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
-		if (!scrollPosition || prevState[prevPathname.current] === scrollPosition) return prevState;
-		return {
-			...prevState,
-			[prevPathname.current]: scrollPosition
-		};
-	}), [setScrollMap]);
 	const navigation = useCallback((nextLocation) => {
 		setLocation(nextLocation);
 		prevPathname.current = nextLocation.pathname;
@@ -169,11 +161,14 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 	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);
+		setNextItemData({
+			loaderFallback: nextItem?.loaderFallback,
+			params: nextItem?.params,
+			pathname: nextLocation.pathname
+		});
 		const params = getParamsObject({
-			routeItem: nextItem,
+			params: nextItem?.params,
 			pathname: nextLocation.pathname
 		});
 		if (nextItem?.beforeLoad) try {
@@ -221,8 +216,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		routeList,
 		transitionedNavigation,
 		setContext,
-		setLoaderState,
-		updateScrollMap
+		setLoaderState
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -276,7 +270,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		}, [blockedRoute]),
 		updateLocation,
 		updateBlockedRoute,
-		nextRouteItem
+		nextItemData
 	};
 };
 //#endregion
@@ -300,7 +294,7 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 		if (isCurrentRoute) setIsLoading(true);
 		try {
 			const params = getParamsObject({
-				routeItem,
+				params: routeItem.params,
 				pathname
 			});
 			const result = await routeItem?.loader({
@@ -351,45 +345,23 @@ var useLoader = ({ routeList, context, setContext, setLoaderState }) => {
 	};
 };
 //#endregion
-//#region hooks/usePreserveScroll.ts
-var usePreserveScroll = ({ pathname, preserveScroll }) => {
-	const [scrollMap, setScrollMap] = useState({});
-	useEffect(() => {
-		if (!preserveScroll || !pathname || !scrollMap[pathname]) return;
-		document.scrollingElement?.scrollTo({
-			top: scrollMap[pathname],
-			behavior: "smooth"
-		});
-	}, [
-		pathname,
-		scrollMap,
-		preserveScroll
-	]);
-	return setScrollMap;
-};
-//#endregion
 //#region components/RouterProvider.tsx
-var RouterProvider = ({ children, routeList, context: initialContext = {}, preserveScroll = true }) => {
+var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
 	const [location, setLocation] = useState({});
 	const [context, setContext] = useState(initialContext);
 	const [loaderState, setLoaderState] = useState({});
-	const setScrollMap = usePreserveScroll({
-		pathname: location.pathname,
-		preserveScroll
-	});
 	const { prefetchLoader, revalidateCache, isLoading } = useLoader({
 		routeList,
 		context,
 		setContext,
 		setLoaderState
 	});
-	const { blockerState, updateLocation, updateBlockedRoute, nextRouteItem } = useHandleNavigation({
+	const { blockerState, updateLocation, updateBlockedRoute, nextItemData } = useHandleNavigation({
 		setLocation,
 		routeList,
 		context,
 		setContext,
 		revalidateCache,
-		setScrollMap,
 		setLoaderState
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
@@ -404,7 +376,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, prese
 			context,
 			setContext,
 			routeList,
-			nextRouteItem,
+			nextItemData,
 			isLoading
 		}), [
 			blockerState,
@@ -416,7 +388,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, prese
 			routeList,
 			updateBlockedRoute,
 			updateLocation,
-			nextRouteItem
+			nextItemData
 		]),
 		children
 	});
@@ -470,6 +442,36 @@ var useApplyCustomAnimation = (animationDuration) => {
 	}, [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]);
+	useEffect(() => {
+		if (!preserveScroll || !pathname || !scrollMap[pathname]) return;
+		requestAnimationFrame(() => {
+			window.scrollTo({
+				top: scrollMap[pathname],
+				behavior: "smooth"
+			});
+		});
+	}, [
+		pathname,
+		scrollMap,
+		preserveScroll
+	]);
+};
+//#endregion
 //#region context/RouterViewContext.ts
 var RouterViewContext = createContext({});
 //#endregion
@@ -492,34 +494,37 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var ALL_LOCATIONS = "*";
-var Router = ({ isAnimated, animationDuration, spinner = true }) => {
-	const { location, isLoading, nextRouteItem } = useNavigationState();
+var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true }) => {
+	const { location, isLoading, nextItemData } = useNavigationState();
 	const { routeList } = usePropsData();
 	const { loaderState } = useRouterData();
+	usePreserveScroll({
+		nextPathname: nextItemData.pathname,
+		pathname: location.pathname,
+		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 || nextRouteItem,
-			pathname: location.pathname || window.location.pathname
-		});
-	}, [
+	const params = useMemo(() => getParamsObject({
+		params: nextItemData.params,
+		pathname: nextItemData.pathname || location.pathname
+	}), [
 		location.pathname,
-		routeItem,
-		nextRouteItem
+		nextItemData.params,
+		nextItemData.pathname
 	]);
 	const shouldErrorElementShown = useMemo(() => Boolean(loaderState[location.pathname]?.loaderError || loaderState[location.pathname]?.beforeLoadError), [loaderState, location.pathname]);
-	if (!routeItem && !nextRouteItem) return null;
-	if (!routeItem && nextRouteItem) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
+	if (!routeItem && !nextItemData.loaderFallback) return null;
+	if (!routeItem && nextItemData.loaderFallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
-		children: renderElement(nextRouteItem?.loaderFallback)
+		children: renderElement(nextItemData.loaderFallback)
 	});
-	if (!isAnimated && !shouldErrorElementShown && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
+	if (!isAnimated && !shouldErrorElementShown && isLoading && nextItemData.loaderFallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
-		children: renderElement(nextRouteItem?.loaderFallback)
+		children: renderElement(nextItemData.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, nextRouteItem, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, location, setLocation, prefetchLoader, loaderState, blockerState, routeList, isLoading, nextItemData, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/global.d.ts

@@ -59,3 +59,8 @@ export type Adapter<T> = {
     parse: (params: string[]) => T;
     serialize?: (params: T) => string | string[];
 };
+export type NextItemData = {
+    loaderFallback: RouteItem['loaderFallback'];
+    params: RouteItem['params'];
+    pathname: string;
+};

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.4",
+  "version": "1.4.6",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {