clear-react-router 1.4.5 → 1.4.6

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;
-    nextItem: RouteItem | undefined;
+    nextItemData: NextItemData;
 };
 export type ActionsContextValue = {
     setLocation: Dispatch<SetStateAction<Location>>;

package/dist/hooks/useHandleNavigation.d.ts

@@ -1,5 +1,5 @@
 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;
@@ -12,6 +12,6 @@ export declare const useHandleNavigation: ({ setLocation, routeList, context, re
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
-    nextItem: RouteItem | undefined;
+    nextItemData: NextItemData;
 };
 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, nextItem }) => {
+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,
-						nextItem
+						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) => ({
@@ -141,7 +141,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		from: "",
 		to: ""
 	});
-	const [nextItem, setNextItem] = useState();
+	const [nextItemData, setNextItemData] = useState({});
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
 	const navigation = useCallback((nextLocation) => {
@@ -162,9 +162,13 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		navigationSeq.current = navigationSeq.current + 1;
 		const seq = navigationSeq.current;
 		const nextItem = routeList.find((el) => comparePaths(el, nextLocation.pathname));
-		setNextItem(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 {
@@ -266,7 +270,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, s
 		}, [blockedRoute]),
 		updateLocation,
 		updateBlockedRoute,
-		nextItem
+		nextItemData
 	};
 };
 //#endregion
@@ -290,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({
@@ -352,7 +356,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 		setContext,
 		setLoaderState
 	});
-	const { blockerState, updateLocation, updateBlockedRoute, nextItem } = useHandleNavigation({
+	const { blockerState, updateLocation, updateBlockedRoute, nextItemData } = useHandleNavigation({
 		setLocation,
 		routeList,
 		context,
@@ -372,7 +376,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			context,
 			setContext,
 			routeList,
-			nextItem,
+			nextItemData,
 			isLoading
 		}), [
 			blockerState,
@@ -384,7 +388,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			routeList,
 			updateBlockedRoute,
 			updateLocation,
-			nextItem
+			nextItemData
 		]),
 		children
 	});
@@ -455,9 +459,11 @@ var usePreserveScroll = ({ pathname, preserveScroll, nextPathname }) => {
 	}, [pathname, nextPathname]);
 	useEffect(() => {
 		if (!preserveScroll || !pathname || !scrollMap[pathname]) return;
-		document.scrollingElement?.scrollTo({
-			top: scrollMap[pathname],
-			behavior: "smooth"
+		requestAnimationFrame(() => {
+			window.scrollTo({
+				top: scrollMap[pathname],
+				behavior: "smooth"
+			});
 		});
 	}, [
 		pathname,
@@ -489,11 +495,11 @@ var renderElement = (Component) => {
 //#region components/Router.tsx
 var ALL_LOCATIONS = "*";
 var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true }) => {
-	const { location, isLoading, nextItem } = useNavigationState();
+	const { location, isLoading, nextItemData } = useNavigationState();
 	const { routeList } = usePropsData();
 	const { loaderState } = useRouterData();
 	usePreserveScroll({
-		nextPathname: nextItem?.path,
+		nextPathname: nextItemData.pathname,
 		pathname: location.pathname,
 		preserveScroll
 	});
@@ -502,25 +508,23 @@ var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll =
 		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
-		});
-	}, [
+	const params = useMemo(() => getParamsObject({
+		params: nextItemData.params,
+		pathname: nextItemData.pathname || location.pathname
+	}), [
 		location.pathname,
-		routeItem,
-		nextItem
+		nextItemData.params,
+		nextItemData.pathname
 	]);
 	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, {
+	if (!routeItem && !nextItemData.loaderFallback) return null;
+	if (!routeItem && nextItemData.loaderFallback) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewProvider, {
 		params,
-		children: renderElement(nextItem?.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(nextItem?.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, nextItem, }: 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.5",
+  "version": "1.4.6",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {