clear-react-router 1.5.7 → 1.6.0

package/README.md

@@ -72,6 +72,8 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 | `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) |
+| `prefetch` | `'hover' \| 'render' \| 'viewport' \| 'none'` | `'hover'` | Default prefetch strategy for all `<Link>` components |
+| `hoverPrefetchDelay` | `number` | `150` | Delay in milliseconds before prefetching on hover (only for `'hover'` strategy) |
 
 ```
 <RouterProvider routeList={routes} isAnimated>
@@ -89,20 +91,40 @@ Component for client-side navigation with prefetch support.
 | Prop | Type | Default |
 |------|------|---------|
 | `to` | `string` | required |
-| `prefetch` | `boolean` optional | `true` |
-| `prefetchDelay` | `number` optional | `150` | Delay in ms before prefetch starts (prevents unnecessary requests on quick mouse passes) |
-| `children` | `ReactElement` | required |
+| `prefetch` | `'hover' \| 'render' \| 'viewport' \| 'none'` | `Router` config | Override the global prefetch strategy |
+| `hoverPrefetchDelay` | `number` | `Router` config | Override the global hover delay |
+| `children` | `ReactElement` | required | Content to render inside the link |
+
+### Prefetch Strategies
+
+| Strategy | Behavior |
+|----------|----------|
+| `'hover'` | Prefetches when the user hovers over the link (with configurable delay) |
+| `'render'` | Prefetches immediately when the link is rendered |
+| `'viewport'` | Prefetches when the link enters the viewport (using Intersection Observer) |
+| `'none'` | No prefetching |
+
+**Example:**
 
 ```
-// Default — prefetch after 150ms hover
-<Link to="/dashboard">Dashboard</Link>
+import { RouterProvider, Router, Link } from 'clear-react-router';
+
+// Global prefetch: hover with 100ms delay
+<RouterProvider routeList={routes} prefetch="hover" hoverPrefetchDelay={100}>
+  <Router />
+</RouterProvider>
 
-// Custom prefetch delay (300ms)
-<Link to="/heavy-page" prefetchDelay={300}>Heavy Page</Link>
+// Override for a specific link
+<Link to="/heavy-page" prefetch="viewport">
+  Heavy Page
+</Link>
 
-// Disable prefetch
-<Link to="/about" prefetch={false}>About</Link>
+// Disable prefetch for a specific link
+<Link to="/admin" prefetch="none">
+  Admin Panel
+</Link>
 ```
+**Important**: prefetch="render" should be used sparingly, as it preloads data immediately when the link is rendered, which may cause unnecessary network requests.
 
 ### `redirect`
 

package/dist/components/Link.d.ts

@@ -1,12 +1,13 @@
 import { type ReactElement, type MouseEvent, type CSSProperties } from 'react';
+import { RouterProps } from '../types/global';
 type LinkProps = {
     to: string;
     children: ReactElement<{
         onClick: (e: MouseEvent) => void;
         style: CSSProperties;
     }>;
-    prefetch?: boolean;
-    prefetchDelay?: number;
+    prefetch?: RouterProps['prefetch'];
+    hoverPrefetchDelay?: number;
 };
-export declare const Link: ({ children, to, prefetch, prefetchDelay }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Router.d.ts

@@ -1,9 +1,2 @@
-type RouterProps = {
-    isAnimated?: boolean;
-    animationDuration?: number;
-    spinner?: boolean;
-    preserveScroll?: boolean;
-    showFallbackIfAnimated?: boolean;
-};
-export declare const Router: ({ isAnimated, animationDuration, spinner, preserveScroll, showFallbackIfAnimated, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
+import { RouterProps } from '../types/global';
+export declare const Router: ({ isAnimated, animationDuration, spinner, preserveScroll, showFallbackIfAnimated, prefetch, hoverPrefetchDelay, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -1,6 +1,9 @@
+import { RouterProps } from '../types/global';
 declare class RouterConfig {
     isAnimated: boolean;
     showFallbackIfAnimated: boolean;
+    prefetch: RouterProps['prefetch'];
+    hoverPrefetchDelay: number;
     configure(config: Partial<RouterConfig>): void;
 }
 export declare const routerConfig: RouterConfig;

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+import type { LoaderState } from './types/global.ts';
+export declare const emptyLoaderState: LoaderState;
+export declare const STANDARD_PREFETCH_DELAY = 150;

package/dist/context/RouterProviderContext.d.ts

@@ -1,12 +1,12 @@
-import { BlockerState, Location, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
+import { BlockerState, LoaderState, Location, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
 export type NavigationContextValue = {
     blockerState: BlockerState;
     routeItemData: RouteItemData;
     currentLoaderFallback: RouteItem['loaderFallback'];
     isLoading: boolean;
+    loaderState: LoaderState;
 };
 export type ActionsContextValue = {
-    setSearch(arg: string): void;
     updateLocation(route: Location): Promise<void>;
     updateBlockedRoute(arg: UpdateBlockedRouteProps): void;
     prefetchLoader(arg: string): Promise<void>;

package/dist/hooks/useHandleNavigation.d.ts

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

package/dist/hooks/useLoader.d.ts

@@ -1,5 +1,5 @@
 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>;
@@ -7,12 +7,11 @@ type UseLoaderParams = {
 };
 export declare const useLoader: ({ routeList, context, setContext }: UseLoaderParams) => {
     prefetchLoader: (pathname: string) => Promise<void>;
-    revalidateCache: ({ routeItem, loaderState, pathname }: RevalidateCacheArgs) => Promise<void>;
+    revalidateCache: ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown>;
     isCacheItemFresh: ({ routeItem, pathname }: {
         routeItem?: RouteItem;
         pathname: string;
     }) => boolean;
-    isLoading: boolean;
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    loaderStateRef: import("react").RefObject<LoaderState>;
 };
 export {};

package/dist/hooks/useSearch.d.ts

@@ -0,0 +1 @@
+export declare const useSearch: () => string;

package/dist/hooks/useSetRouterConfig.d.ts

@@ -0,0 +1,2 @@
+import { RouterProps } from '../types/global';
+export declare const useSetRouterConfig: (routerProps: RouterProps) => void;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
@@ -45,10 +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, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback, isLoading }) => {
+var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback, isLoading, loaderState }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
 		value: {
-			setSearch,
 			updateLocation,
 			updateBlockedRoute,
 			prefetchLoader,
@@ -62,7 +61,8 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 					blockerState,
 					routeItemData,
 					currentLoaderFallback,
-					isLoading
+					isLoading,
+					loaderState
 				},
 				children
 			})
@@ -79,6 +79,9 @@ var useLatest = (value) => {
 	return ref;
 };
 //#endregion
+//#region constants.ts
+var emptyLoaderState = {};
+//#endregion
 //#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
@@ -122,6 +125,8 @@ var RouterConfig = class {
 	constructor() {
 		_defineProperty(this, "isAnimated", false);
 		_defineProperty(this, "showFallbackIfAnimated", false);
+		_defineProperty(this, "prefetch", "hover");
+		_defineProperty(this, "hoverPrefetchDelay", 150);
 	}
 	configure(config) {
 		Object.assign(this, config);
@@ -182,30 +187,23 @@ var comparePaths = (el, pathname) => {
 //#endregion
 //#region hooks/useHandleNavigation.ts
 var ALL_LOCATIONS = "*";
-var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh, setIsLoading }) => {
+var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh, loaderStateRef }) => {
 	const { isAnimated, showFallbackIfAnimated: showFallback } = routerConfig;
+	const [isLoading, setIsLoading] = useState(false);
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
 	});
 	const [routeItemData, setRouteItemData] = useState({
-		location: {},
 		routeItem: void 0,
-		loaderState: {}
+		location: {}
 	});
 	const [scrollMap, setScrollMap] = useState({});
 	const [currentLoaderFallback, setCurrentLoaderFallback] = useState();
-	const loaderState = useRef({});
+	const [loaderState, setLoaderState] = useState(emptyLoaderState);
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
 	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(() => {
@@ -217,17 +215,17 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 	}, [scrollMapRef]);
 	const navigation = useCallback((nextLocation, routeItem) => {
 		setRouteItemData({
-			location: nextLocation,
 			routeItem,
-			loaderState: loaderState.current
+			location: nextLocation
 		});
+		setLoaderState(loaderStateRef.current);
 		setIsLoading(false);
 		setCurrentLoaderFallback(void 0);
 		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);
-	}, []);
+	}, [loaderStateRef]);
 	const transitionedNavigation = useCallback((nextLocation, routeItem) => {
 		if (!isAnimated) {
 			navigation(nextLocation, routeItem);
@@ -242,7 +240,7 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 	const navigationHandler = useCallback(async (nextLocation) => {
 		navigationSeq.current = navigationSeq.current + 1;
 		const seq = navigationSeq.current;
-		loaderState.current = {};
+		loaderStateRef.current = emptyLoaderState;
 		const nextItem = routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, nextLocation.pathname));
 		const params = getParamsObject({
 			params: nextItem?.params,
@@ -256,13 +254,13 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 				params,
 				setContext
 			});
-			loaderState.current = {
-				...loaderState.current,
+			loaderStateRef.current = {
+				...loaderStateRef.current,
 				beforeLoadError: null
 			};
 		} catch (error) {
-			loaderState.current = {
-				...loaderState.current,
+			loaderStateRef.current = {
+				...loaderStateRef.current,
 				beforeLoadError: error
 			};
 			return transitionedNavigation(nextLocation, nextItem);
@@ -280,11 +278,13 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 			routeItem: nextItem,
 			pathname: nextLocation.pathname
 		}) || isAnimated && !showFallback ? void 0 : nextItem?.loaderFallback);
-		await revalidateCache({
-			routeItem: nextItem,
-			loaderState,
-			pathname: nextLocation.pathname
-		});
+		if (nextItem?.loader) {
+			setIsLoading(true);
+			await revalidateCache({
+				routeItem: nextItem,
+				pathname: nextLocation.pathname
+			});
+		}
 		if (seq !== navigationSeq.current) return;
 		transitionedNavigation(nextLocation, nextItem);
 		if (nextItem?.afterLoad) await nextItem.afterLoad({
@@ -300,7 +300,8 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 		setContext,
 		isCacheItemFresh,
 		isAnimated,
-		showFallback
+		showFallback,
+		loaderStateRef
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -355,69 +356,74 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
 		updateLocation,
 		updateBlockedRoute,
 		routeItemData,
-		setSearch,
 		restoreScroll,
-		currentLoaderFallback
+		currentLoaderFallback,
+		isLoading,
+		loaderState
 	};
 };
 //#endregion
 //#region hooks/useLoader.ts
 var useLoader = ({ routeList, context, setContext }) => {
-	const [isLoading, setIsLoading] = useState(false);
-	const cacheTimestampsRef = useRef({});
-	const loaderCacheRef = useRef({});
+	const timestampMapRef = useRef({});
+	const loaderMapRef = useRef({});
+	const loaderStateRef = useRef(emptyLoaderState);
+	const loadingPromises = useRef(/* @__PURE__ */ new Map());
 	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
 		if (!routeItem) return true;
-		const currentCacheTimestamp = cacheTimestampsRef.current[pathname];
+		const currentCacheTimestamp = timestampMapRef.current[pathname];
 		if (!currentCacheTimestamp) return false;
 		if (!routeItem.staleTime) return true;
 		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
 	}, []);
-	const revalidateCache = useCallback(async ({ routeItem, loaderState, pathname }) => {
-		if (!routeItem?.loader) {
-			if (!loaderState) return;
-			if (!routeItem?.beforeLoad) loaderState.current = {};
-			return;
-		}
+	const revalidateCache = useCallback(async ({ routeItem, pathname }) => {
+		if (!routeItem?.loader) return;
+		if (loadingPromises.current.has(pathname)) return loadingPromises.current.get(pathname);
 		if (isCacheItemFresh({
 			routeItem,
 			pathname
 		})) {
-			if (loaderState) loaderState.current = loaderCacheRef.current[pathname];
+			loaderStateRef.current = loaderMapRef.current[pathname];
 			return;
 		}
-		if (loaderState) setIsLoading(true);
-		try {
-			const params = getParamsObject({
-				params: routeItem.params,
-				pathname
-			});
-			const result = await routeItem?.loader({
-				params,
-				context,
-				setContext
-			});
-			cacheTimestampsRef.current = {
-				...cacheTimestampsRef.current,
-				[pathname]: Date.now()
-			};
-			loaderCacheRef.current[pathname] = {
-				data: result,
-				loaderError: null,
-				beforeLoadError: null
-			};
-			if (loaderState) loaderState.current = {
-				...loaderState?.current,
-				data: result,
-				loaderError: null
-			};
-		} catch (error) {
-			if (loaderState) loaderState.current = {
-				...loaderState?.current,
-				data: null,
-				loaderError: error
-			};
-		}
+		const promise = (async () => {
+			if (!routeItem?.loader) return;
+			try {
+				const params = getParamsObject({
+					params: routeItem.params,
+					pathname
+				});
+				const result = await routeItem?.loader({
+					params,
+					context,
+					setContext
+				});
+				timestampMapRef.current = {
+					...timestampMapRef.current,
+					[pathname]: Date.now()
+				};
+				loaderMapRef.current[pathname] = {
+					data: result,
+					loaderError: null,
+					beforeLoadError: null
+				};
+				loaderStateRef.current = {
+					...loaderStateRef?.current,
+					data: result,
+					loaderError: null
+				};
+			} catch (error) {
+				loaderStateRef.current = {
+					...loaderStateRef?.current,
+					data: null,
+					loaderError: error
+				};
+			} finally {
+				loadingPromises.current.delete(pathname);
+			}
+		})();
+		loadingPromises.current.set(pathname, promise);
+		return promise;
 	}, [
 		context,
 		isCacheItemFresh,
@@ -433,30 +439,28 @@ var useLoader = ({ routeList, context, setContext }) => {
 		}, [revalidateCache, routeList]),
 		revalidateCache,
 		isCacheItemFresh,
-		isLoading,
-		setIsLoading
+		loaderStateRef
 	};
 };
 //#endregion
 //#region components/RouterProvider.tsx
 var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
 	const [context, setContext] = useState(initialContext);
-	const { prefetchLoader, revalidateCache, isCacheItemFresh, setIsLoading, isLoading } = useLoader({
+	const { prefetchLoader, revalidateCache, isCacheItemFresh, loaderStateRef } = useLoader({
 		routeList,
 		context,
 		setContext
 	});
-	const { blockerState, updateLocation, updateBlockedRoute, routeItemData, setSearch, restoreScroll, currentLoaderFallback } = useHandleNavigation({
+	const { blockerState, updateLocation, updateBlockedRoute, routeItemData, restoreScroll, currentLoaderFallback, isLoading, loaderState } = useHandleNavigation({
 		routeList,
 		context,
 		setContext,
 		revalidateCache,
 		isCacheItemFresh,
-		setIsLoading
+		loaderStateRef
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
 		...useMemo(() => ({
-			setSearch,
 			updateLocation,
 			prefetchLoader,
 			updateBlockedRoute,
@@ -466,18 +470,19 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
 			routeItemData,
 			restoreScroll,
 			currentLoaderFallback,
-			isLoading
+			isLoading,
+			loaderState
 		}), [
 			blockerState,
 			context,
 			prefetchLoader,
 			routeItemData,
-			setSearch,
 			updateBlockedRoute,
 			updateLocation,
 			currentLoaderFallback,
 			restoreScroll,
-			isLoading
+			isLoading,
+			loaderState
 		]),
 		children
 	});
@@ -543,14 +548,6 @@ var usePreserveScroll = (preserveScroll) => {
 	]);
 };
 //#endregion
-//#region hooks/useSetIsAnimated.ts
-var useSetIsAnimated = (isAnimated = false, showFallbackIfAnimated) => {
-	useEffect(() => routerConfig.configure({
-		isAnimated,
-		showFallbackIfAnimated
-	}), [isAnimated]);
-};
-//#endregion
 //#region components/Spinner.tsx
 var Spinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cr-spinner" });
 //#endregion
@@ -560,12 +557,22 @@ var renderElement = (Component) => {
 	return typeof Component === "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) : Component;
 };
 //#endregion
+//#region hooks/useSetRouterConfig.ts
+var useSetRouterConfig = (routerProps) => {
+	useEffect(() => routerConfig.configure(routerProps), [routerProps]);
+};
+//#endregion
 //#region components/Router.tsx
-var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
-	const { routeItemData: { routeItem, loaderState }, currentLoaderFallback, isLoading } = useNavigationState();
+var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false, prefetch = "hover", hoverPrefetchDelay = 150 }) => {
+	const { routeItemData: { routeItem }, loaderState, currentLoaderFallback, isLoading } = useNavigationState();
 	usePreserveScroll(preserveScroll);
 	useApplyCustomAnimation(animationDuration);
-	useSetIsAnimated(isAnimated, showFallbackIfAnimated);
+	useSetRouterConfig({
+		isAnimated,
+		showFallbackIfAnimated,
+		prefetch,
+		hoverPrefetchDelay
+	});
 	const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
 	const showSpinner = spinner && isAnimated && isLoading;
 	const loadingContent = !showErrorElement && isLoading;
@@ -598,31 +605,63 @@ var useNavigate = () => {
 };
 //#endregion
 //#region components/Link.tsx
-var STANDARD_DELAY = 150;
-var Link = ({ children, to, prefetch = true, prefetchDelay = STANDARD_DELAY }) => {
+var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
+	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
+	const prefetch = prefetchLink || configPrefetch;
+	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
 	const { prefetchLoader } = useRouterActions();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
+	const ref = useRef(null);
+	const onMouseEnter = useCallback(() => {
+		if (prefetch !== "hover" || !prefetchDelay) return;
+		if (timeout.current) clearTimeout(timeout.current);
+		timeout.current = window.setTimeout(() => prefetchLoader(to), prefetchDelay);
+	}, [
+		prefetch,
+		prefetchDelay,
+		prefetchLoader,
+		to
+	]);
+	const onMouseLeave = useCallback(() => {
+		if (prefetch !== "hover" || !prefetchDelay) return;
+		if (timeout.current) {
+			clearTimeout(timeout.current);
+			timeout.current = 0;
+		}
+	}, [prefetch, prefetchDelay]);
+	useEffect(() => {
+		if (prefetch !== "render") return;
+		(async () => {
+			await prefetchLoader(to);
+		})();
+	}, [
+		prefetch,
+		prefetchLoader,
+		to
+	]);
+	useEffect(() => {
+		if (prefetch !== "viewport") return;
+		const element = ref.current;
+		const observer = new IntersectionObserver(async () => {
+			await prefetchLoader(to);
+			observer.disconnect();
+		});
+		if (element) observer.observe(element);
+		return () => {
+			if (element) observer.disconnect();
+		};
+	}, [
+		prefetch,
+		prefetchLoader,
+		to
+	]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+		ref,
 		style: { cursor: "pointer" },
 		onClick: () => navigate(to),
-		onMouseEnter: useCallback(() => {
-			if (!prefetch || !prefetchDelay) return;
-			if (timeout.current) clearTimeout(timeout.current);
-			timeout.current = window.setTimeout(() => prefetchLoader(to), prefetchDelay);
-		}, [
-			prefetch,
-			prefetchDelay,
-			prefetchLoader,
-			to
-		]),
-		onMouseLeave: useCallback(() => {
-			if (!prefetch || !prefetchDelay) return;
-			if (timeout.current) {
-				clearTimeout(timeout.current);
-				timeout.current = 0;
-			}
-		}, [prefetch, prefetchDelay]),
+		onMouseEnter,
+		onMouseLeave,
 		children
 	});
 };
@@ -639,7 +678,7 @@ var useParams = () => {
 //#endregion
 //#region hooks/useLoaderState.ts
 var useLoaderState = () => {
-	const { routeItemData: { loaderState } } = useNavigationState();
+	const { loaderState } = useNavigationState();
 	return loaderState;
 };
 //#endregion
@@ -687,12 +726,40 @@ var useRouterContext = () => {
 	};
 };
 //#endregion
+//#region hooks/useSearch.ts
+var notify = () => {
+	window.dispatchEvent(new Event("locationChange"));
+};
+var patchHistory = () => {
+	const push = history.pushState;
+	const replace = history.replaceState;
+	history.pushState = function(...args) {
+		const result = push.apply(this, args);
+		notify();
+		return result;
+	};
+	history.replaceState = function(...args) {
+		const result = replace.apply(this, args);
+		notify();
+		return result;
+	};
+	window.addEventListener("popstate", notify);
+};
+var subscribe = (onChange) => {
+	window.addEventListener("locationChange", onChange);
+	return () => window.removeEventListener("locationChange", onChange);
+};
+var getSnapshot = () => window.location.search;
+var useSearch = () => {
+	useEffect(patchHistory, []);
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+//#endregion
 //#region hooks/useSearchParams.ts
 var useSearchParams = () => {
-	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 search = useSearch();
+	const searchRef = useLatest(search);
+	const searchString = search ? search.replace("?", "") : window.location.pathname.split("?")?.[1] ?? "";
 	const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
 	const getSearchParams = useCallback((param) => {
 		const allValues = searchParams.getAll(param);
@@ -700,24 +767,22 @@ var useSearchParams = () => {
 	}, [searchParams]);
 	const navigateWithSearchParams = useCallback((params) => {
 		const newSearch = params.toString();
-		const { pathname } = locationRef.current;
+		const { pathname } = window.location;
 		const search = newSearch ? `?${newSearch}` : "";
-		setSearch(search);
 		history.replaceState(null, "", pathname + search);
-	}, [locationRef, setSearch]);
+	}, []);
 	return {
 		searchParams,
 		getSearchParams,
 		setSearchParams: useCallback((param, value) => {
-			const search = locationRef.current.search || "";
-			const currentParams = new URLSearchParams(search);
+			const currentParams = new URLSearchParams(searchRef.current);
 			if (typeof param === "string" && value !== void 0) {
 				currentParams.delete(param);
 				(Array.isArray(value) ? value : [value]).forEach((v) => currentParams.append(param, v));
 				navigateWithSearchParams(currentParams);
 			} else if (typeof param === "function") navigateWithSearchParams(param(currentParams));
 			else throw new Error("useSearchParams first argument must be either function or string");
-		}, [locationRef, navigateWithSearchParams])
+		}, [navigateWithSearchParams, searchRef])
 	};
 };
 //#endregion

package/dist/provider/Provider.d.ts

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

package/dist/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, Dispatch, ReactElement, RefObject, SetStateAction } from 'react';
+import type { ComponentType, Dispatch, ReactElement, SetStateAction } from 'react';
 export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
@@ -48,7 +48,6 @@ export type UpdateBlockedRouteProps = {
 export type RevalidateCacheArgs = {
     pathname: string;
     routeItem?: RouteItem;
-    loaderState?: RefObject<LoaderState>;
 };
 export type LoaderState = {
     data: unknown;
@@ -62,5 +61,13 @@ export type AdapterType<T> = {
 export type RouteItemData = {
     location: Location;
     routeItem: RouteItem | undefined;
-    loaderState: LoaderState;
+};
+export type RouterProps = {
+    isAnimated?: boolean;
+    animationDuration?: number;
+    spinner?: boolean;
+    preserveScroll?: boolean;
+    showFallbackIfAnimated?: boolean;
+    prefetch?: 'hover' | 'render' | 'viewport' | 'none';
+    hoverPrefetchDelay?: number;
 };

package/package.json

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

package/dist/hooks/useSetIsAnimated.d.ts

@@ -1 +0,0 @@
-export declare const useSetIsAnimated: (isAnimated: boolean | undefined, showFallbackIfAnimated: boolean) => void;