clear-react-router 1.8.8 → 1.9.1

package/README.md

@@ -48,10 +48,11 @@ It provides first-class support for:
 | `defaultLoaderFallback` | `ReactElement \| () => ReactElement` | `optional` | Default loading fallback for every route loader |
 | `defaultErrorElement` | `ReactElement \| () => ReactElement` | `optional` | Default error fallback for every route |
 | `defaultRetry` | `number \| { count: number; delay: number }` | `optional` | Default cache revalidation retry policy for all routes |
+| `defaultStaleTime` | `number` | `optional` | Default time in milliseconds before cached loader data is considered stale |
 | `beforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | `undefined` | Runs before every navigation. Useful for authentication, analytics, or updating shared context.            |
 | `afterLoad`  | `({ params, context, setContext }) => Promise<void>`  | `undefined` | Runs after every successful navigation. Useful for analytics, page tracking, or other global side effects. |
 | `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 |
+| `defaultPreserveScroll` | `boolean \| undefined` | `true` | Default value for save and restore scroll position when navigating between pages |
 | `showFallbackOnAnimation` | `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) |
@@ -76,15 +77,27 @@ Normalizes route configuration. Extracts dynamic params, builds nested paths.
 |----------|------|-------------|
 | `path` | `string` | Route path, e.g., `/user/:userId` |
 | `element` | `ReactElement \| () => ReactElement \| LazyComponent` | Component to render |
-| `beforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | Auth checks and redirects. Can update context via `setContext`. `redirect` is provided by the router |
-| `loader` | `({ params, context, setContext }) => Promise<unknown>` | Fetch data using route params and context. Can update context via `setContext` |
-| `afterLoad` | `({ params, context, setContext }) => Promise<void>` | Analytics, side effects after data is loaded. Can update context via `setContext` |
+| `beforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | Runs before every route navigation. Auth checks and redirects. Can update context via `setContext`. `redirect` is provided by the router |
+| `loader` | `({ params, context, setContext, searchParams }) => Promise<unknown>` | Fetch data using route params, search params, and context. Can update context via `setContext` |
+| `afterLoad` | `({ params, context, setContext }) => Promise<void>` | Runs after a successful navigation once the route has finished loading. Analytics, side effects after data is loaded. Can update context via `setContext` |
 | `fallback` | `ReactElement \| () => ReactElement` | Loading fallback (for lazy loading) |
 | `loaderFallback` | `ReactElement \| () => ReactElement` | Loading fallback for the route's `loader`. Overrides the global `defaultLoaderFallback` set in `Router` |
-| `retry` | `number \| { count: number; delay: number }` | `optional` | Overrides the global cache revalidation retry policy for this route |
+| `retry` | `number \| { count: number; delay: number }` | `undefined` | Overrides the global cache revalidation retry policy for this route |
 | `errorElement` | `ReactElement \| () => ReactElement` | Error fallback for the route. Overrides the global `defaultErrorElement` set in `Router` |
-| `staleTime` | `number` | Time in ms before cached data is considered stale and re-fetched in the background. If not provided, data never expires (cached forever) |
-| `actions` | `({ params, context, invalidate, setContext }) => Record<string, (formData: FormData) => unknown \| Promise<unknown>>` | Defines route actions for data mutations. Actions receive `FormData`, can update context via `setContext`, and can refresh loader data using the router-provided `invalidate`. |
+| `staleTime` | `number` | Time in milliseconds before cached loader data is considered stale. Overrides Router.defaultStaleTime. If neither value is provided, cached data never expires |
+| `actions` | `({ params, context, invalidate, setContext }) => Record<string, (formData: FormData) => unknown \| Promise<unknown>>` | Defines route actions for data mutations. Actions receive `FormData`, can update context via `setContext`, and can invalidate cached loader data using the router-provided `invalidate` |
+| `pollingInterval` | `number \| undefined` | `undefined` | Polling interval (in milliseconds) for automatically revalidating data while the route is active |
+| `preserveScroll` | `boolean \| undefined` | `undefined` | Save and restore route scroll position when navigating between pages |
+
+Loader arguments:
+```ts
+{
+  params: Record<string, string>;                                   // Route parameters
+  context: Record<string, unknown>;                                 // Router context
+  setContext: Dispatch<SetStateAction<Record<string, unknown>>>;    // Updates the router context
+  searchParams: Record<string, string>;                             // URL search parameters
+}
+```
 
 ### `Link`
 
@@ -632,122 +645,6 @@ useEffect(() => {
 }, [state, process, reset]);
 ```
 
-### `useQueryParam()`
-
-A flexible hook for working with typed query parameters. You provide an adapter object with `parse` and `serialize` functions, and it returns the parsed value and a setter.
-
-```tsx
-import { useQueryParam, adapter } from 'clear-react-router';
-
-const ProductPage = () => {
-  // String parameter
-  const [brand, setBrand] = useQueryParam('brand', adapter.string, 'nike');
-
-  // Number parameter
-  const [page, setPage] = useQueryParam('page', adapter.integer, 1);
-
-  // Date parameter
-  const [date, setDate] = useQueryParam('date', adapter.date, new Date());
-
-  // Array of numbers
-  const [prices, setPrices] = useQueryParam('prices', adapter.floatArray);
-
-  return (
-    <div>
-      <p>Brand: {brand}</p>
-      <p>Page: {page}</p>
-      <button onClick={() => setPage(page + 1)}>Next</button>
-    </div>
-  );
-}
-```
-type Adapter<T> = {
-	parse: (params: string[]) => T;
-	serialize?: (params: T) => string | string[];
-}
-
-**Signature:** `useQueryParam<T>(field: string, adapter: Adapter<T>, defaultValue?: T): [T, (arg: T | null) => void]`
-
-| Argument | Type | Description |
-|----------|------|-------------|
-| `field` | `string` | The query parameter key (e.g., `'page'`, `'brand'`) |
-| `adapter` | `Adapter<T>` | Parser and optional serializer for params (serializer String is used in case of serializer not passed) |
-| `defaultValue` | `T` (optional) | Default value returned when the parameter is missing or empty |
-
-**Returns:**
-
-| Element | Type | Description |
-|---------|------|-------------|
-| `value` | `T` | The parsed value from the query parameter |
-| `setValue` | `(arg: T \| null) => void` | Function to update the query parameter. Null is passed to remove the parameter. |
-
-### Built-in Adapters
-
-| Adapter | Input | Output | Description |
-|---------|-------|--------|-------------|
-| `adapter.string` | `string[]` | `string` | First value or empty string |
-| `adapter.stringArray` | `string[]` | `string[]` | All values as array |
-| `adapter.integer` | `string[]` | `number` | First value parsed as integer (default: `0`) |
-| `adapter.integerArray` | `string[]` | `number[]` | All values parsed as integers |
-| `adapter.float` | `string[]` | `number` | First value parsed as float (default: `0`) |
-| `adapter.floatArray` | `string[]` | `number[]` | All values parsed as floats |
-| `adapter.boolean` | `string[]` | `boolean` | First value parsed as boolean (`'true'` → `true`) |
-| `adapter.booleanArray` | `string[]` | `boolean[]` | All values parsed as booleans |
-| `adapter.date` | `string[]` | `Date` | First value parsed as Date from timestamp |
-| `adapter.dateArray` | `string[]` | `Date[]` | All values parsed as Dates from timestamps |
-| `adapter.zodSchema` | `string[]` | `T` | Validates JSON string against Zod schema |
-
-### Using Zod Schemas
-`useQueryParam` works seamlessly with Zod for complex validation:
-
-```tsx
-import { z } from 'zod';
-import { useQueryParam, adapter } from 'clear-react-router';
-
-const filterSchema = z.object({
-  name: z.string(),
-  age: z.number().min(0),
-  active: z.boolean().optional(),
-});
-
-function ProductFilter() {
-  const [filter, setFilter] = useQueryParam(
-    'filter',
-    adapter.zodSchema(filterSchema),
-    { name: '', age: 0 }
-  );
-
-  return (
-    <div>
-      <p>Name: {filter.name}</p>
-      <p>Age: {filter.age}</p>
-      <button onClick={() => setFilter({ ...filter, age: filter.age + 1 })}>
-        Increment Age
-      </button>
-    </div>
-  );
-}
-```
-
-### Custom Adapters
-You can write your own adapter for any format:
-
-```tsx
-// Custom adapter for comma-separated values
-const csvAdapter = {
-  parse: (params: string[]): string[] => {
-    const value = params[0] || '';
-    return value ? value.split(',').map(v => v.trim()) : [];
-  },
-  serialize: (value: string[]): string[] => value
-}
-
-const TagsFilter() {
-  const [tags, setTags] = useQueryParam('tags', csvAdapter, []);
-  // tags: string[]
-}
-```
-
 ### `useRouterContext()`
 
 Returns the router context object and a function to update it. Useful for accessing or modifying global state (like user authentication, theme, etc.) from anywhere in your app.

package/dist/cell.d.ts

@@ -4,6 +4,3 @@ export declare class Cell<T> {
     get value(): T;
     set(action: T | ((prev: T) => T)): void;
 }
-export declare const loaderStateRef: Cell<import("./types").LoaderState>;
-export declare const prevPathnameRef: Cell<string>;
-export declare const timestampMap: Map<string, number>;

package/dist/components/Router.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types';
-export declare const Router: ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, defaultRetry, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Router: ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated, spinner, defaultPreserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, defaultRetry, defaultStaleTime, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -3,11 +3,12 @@ declare class RouterConfig {
     routes: RouterProps['routes'];
     prefetch: RouterProps['prefetch'];
     isAnimated: RouterProps['isAnimated'];
-    showFallbackOnAnimation: RouterProps['showFallbackOnAnimation'];
     hoverPrefetchDelay: number;
     beforeLoad?: ClientRouteItem['beforeLoad'];
     afterLoad?: ClientRouteItem['afterLoad'];
     defaultRetry?: RouterProps['defaultRetry'];
+    defaultStaleTime?: RouterProps['defaultStaleTime'];
+    defaultPreserveScroll?: RouterProps['defaultPreserveScroll'];
     configure(config: Partial<RouterConfig>): void;
 }
 export declare const routerConfig: RouterConfig;

package/dist/hooks/usePreserveScroll.d.ts

@@ -1 +1,2 @@
-export declare const usePreserveScroll: (preserveScroll: boolean) => void;
+import { RouteItemData } from '../types';
+export declare const usePreserveScroll: ({ routeItem, location: { pathname } }: RouteItemData) => void;

package/dist/index.d.ts

@@ -9,9 +9,7 @@ export { useInvalidate } from './hooks/useInvalidate';
 export { useBlocker } from './hooks/useBlocker';
 export { useAction } from './hooks/useAction';
 export { useRouterContext } from './hooks/useRouterContext';
-export { useQueryParam } from './hooks/useQueryParam';
 export { useSearchParams } from './hooks/useSearchParams';
 export { useFormContext } from './hooks/useFormContext';
-export { adapter } from './utils/adapter';
 export { createRouter } from './utils/utils';
-export type { RouteItem, BlockerState, Location, Adapter, RouterProps } from './types';
+export type { RouteItem, BlockerState, Location, RouterProps } from './types';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useLayoutEffect, 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
@@ -30,15 +30,12 @@ var useGlobalState = ({ subscribe, getState, setState }) => {
 };
 //#endregion
 //#region utils/commitState.ts
-var createCommitState = ({ isLoadingState, routeItemDataState, loaderFallbackState, currentLoaderState, prevPathnameRef, loaderStateRef }) => (nextLocation, routeItem) => {
+var createCommitState = ({ routeItemDataState, pendingState }) => (nextLocation, routeItem) => {
 	routeItemDataState.setState({
 		routeItem,
 		location: nextLocation
 	});
-	currentLoaderState.setState(loaderStateRef.value);
-	isLoadingState.setState(false);
-	loaderFallbackState.setState(void 0);
-	prevPathnameRef.set(nextLocation.pathname);
+	pendingState.setState(void 0);
 	const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
 	if (fullPath === window.location.pathname + window.location.search) return;
 	history.pushState(null, "", fullPath);
@@ -91,11 +88,12 @@ var RouterConfig = class {
 		_defineProperty(this, "routes", []);
 		_defineProperty(this, "prefetch", "hover");
 		_defineProperty(this, "isAnimated", false);
-		_defineProperty(this, "showFallbackOnAnimation", false);
 		_defineProperty(this, "hoverPrefetchDelay", 150);
 		_defineProperty(this, "beforeLoad", void 0);
 		_defineProperty(this, "afterLoad", void 0);
 		_defineProperty(this, "defaultRetry", void 0);
+		_defineProperty(this, "defaultStaleTime", void 0);
+		_defineProperty(this, "defaultPreserveScroll", void 0);
 	}
 	configure(config) {
 		Object.assign(this, config);
@@ -104,12 +102,9 @@ var RouterConfig = class {
 var routerConfig = new RouterConfig();
 //#endregion
 //#region utils/commitNavigation.ts
-var createCommitNavigation = (navigationExecutor, prevPathnameRef) => (nextLocation, routeItem) => {
-	const { isAnimated } = routerConfig;
-	if (!isAnimated || !prevPathnameRef.value) {
-		navigationExecutor(nextLocation, routeItem);
-		return;
-	}
+var createCommitNavigation = (navigationExecutor, routeItemDataState) => (nextLocation, routeItem) => {
+	const isFirstLoad = !routeItemDataState.getState().location.pathname;
+	if (!routerConfig.isAnimated || isFirstLoad) return navigationExecutor(nextLocation, routeItem);
 	try {
 		document.startViewTransition(() => navigationExecutor(nextLocation, routeItem));
 	} catch {
@@ -120,10 +115,11 @@ var createCommitNavigation = (navigationExecutor, prevPathnameRef) => (nextLocat
 //#region utils/isCacheItemFresh.ts
 var createIsCacheItemFresh = (timestampMap) => ({ routeItem, pathname }) => {
 	if (!routeItem) return true;
-	const currentCacheTimestamp = timestampMap.get(pathname);
-	if (!currentCacheTimestamp) return false;
-	if (!routeItem.staleTime) return true;
-	return Date.now() - currentCacheTimestamp < routeItem.staleTime;
+	const timestamp = timestampMap.get(pathname);
+	if (timestamp === void 0) return false;
+	const staleTime = routeItem.staleTime ?? routerConfig.defaultStaleTime;
+	if (staleTime === void 0) return true;
+	return Date.now() - timestamp <= staleTime;
 };
 //#endregion
 //#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
@@ -218,9 +214,10 @@ var findRoute = (pathname, includeAll) => {
 //#endregion
 //#region runtime/navigate.ts
 var navigationSeq = 0;
+var interval = 0;
 var createNavigate = (routerState, revalidateCache) => {
-	const { loaderStateRef, scrollMapState, prevPathnameRef, loaderFallbackState, isLoadingState, contextState, timestampMap, pendingPathRef } = routerState;
-	const commitNavigation = createCommitNavigation(createCommitState(routerState), prevPathnameRef);
+	const { loaderStateRef, scrollMapState, pendingState, contextState, timestampMap, routeItemDataState } = routerState;
+	const commitNavigation = createCommitNavigation(createCommitState(routerState), routeItemDataState);
 	const isCacheItemFresh = createIsCacheItemFresh(timestampMap);
 	const getContext = () => ({
 		context: contextState.getState(),
@@ -259,29 +256,40 @@ var createNavigate = (routerState, revalidateCache) => {
 		if (routeItem?.beforeLoad) await runBeforeLoad(routeItem?.beforeLoad);
 	};
 	const prepareNavigation = (routeItem, location) => {
-		const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
 		scrollMapState.setState((prevState) => {
 			const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
-			if (!scrollPosition || prevState[prevPathnameRef.value] === scrollPosition) return prevState;
+			const prevPathname = routeItemDataState.getState().location.pathname;
+			if (!scrollPosition || prevState[prevPathname] === scrollPosition) return prevState;
 			return {
 				...prevState,
-				[prevPathnameRef.value]: scrollPosition
+				[prevPathname]: scrollPosition
 			};
 		});
-		loaderFallbackState.setState(isCacheItemFresh({
+		const pendingShouldExist = routeItem?.loader && !isCacheItemFresh({
 			routeItem,
 			pathname: location.pathname
-		}) || isAnimated && !showFallback ? void 0 : routeItem?.loaderFallback);
+		});
+		pendingState.setState(pendingShouldExist ? {
+			routeItem,
+			location
+		} : void 0);
+	};
+	const afterEachLoad = (routeItem) => {
+		if (!routeItem?.pollingInterval) return;
+		interval = window.setInterval(() => revalidateCache({
+			routeItem,
+			pathname: location.pathname
+		}), routeItem.pollingInterval);
 	};
 	const loader = async (routeItem, location) => {
 		if (!routeItem?.loader) return;
-		isLoadingState.setState(true);
-		pendingPathRef.set(location.pathname);
+		window.clearInterval(interval);
 		await revalidateCache({
 			routeItem,
-			pathname: location.pathname
+			pathname: location.pathname,
+			search: location.search
 		});
-		pendingPathRef.set("");
+		afterEachLoad(routeItem);
 	};
 	const afterLoad = async (routeItem, params) => {
 		const { afterLoad } = routerConfig;
@@ -399,7 +407,7 @@ var getRetry = (routeItem) => {
 var sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var createRevalidateCache = (routerState) => {
 	const { loaderStateRef, timestampMap, contextState } = routerState;
-	const revalidateCache = async ({ routeItem, pathname }, retried = 0) => {
+	const revalidateCache = async ({ routeItem, pathname, search = "" }, retried = 0) => {
 		if (!routeItem?.loader) return;
 		const isCacheItemFresh = createIsCacheItemFresh(timestampMap);
 		if (loadingPromises.has(pathname)) return loadingPromises.get(pathname);
@@ -416,18 +424,20 @@ var createRevalidateCache = (routerState) => {
 				const context = contextState.getState();
 				const setContext = contextState.setState;
 				const params = getParamsObject(routeItem, pathname);
+				const searchParams = Object.fromEntries(new URLSearchParams(search).entries());
 				const result = await routeItem?.loader({
 					params,
 					context,
-					setContext
+					setContext,
+					searchParams
 				});
-				timestampMap.set(pathname, Date.now());
+				timestampMap.set(`${pathname}${search}`, Date.now());
 				loaderStateRef.set((prev) => ({
 					...prev,
 					data: result,
 					loaderError: null
 				}));
-				loaderMapRef[pathname] = loaderStateRef.value;
+				loaderMapRef[`${pathname}${search}`] = loaderStateRef.value;
 				return {
 					data: result,
 					error: null
@@ -435,7 +445,7 @@ var createRevalidateCache = (routerState) => {
 			} catch (error) {
 				const retry = getRetry(routeItem);
 				if (retry && retry.count > retried) {
-					loadingPromises.delete(pathname);
+					loadingPromises.delete(`${pathname}${search}`);
 					if (retry.delay) await sleep(retry.delay);
 					await revalidateCache({
 						routeItem,
@@ -457,10 +467,10 @@ var createRevalidateCache = (routerState) => {
 					};
 				}
 			} finally {
-				loadingPromises.delete(pathname);
+				loadingPromises.delete(`${pathname}${search}`);
 			}
 		})();
-		loadingPromises.set(pathname, promise);
+		loadingPromises.set(`${pathname}${search}`, promise);
 		return promise;
 	};
 	return revalidateCache;
@@ -479,18 +489,15 @@ var Cell = class {
 		this._value = typeof action === "function" ? action(this._value) : action;
 	}
 };
-new Cell(emptyLoaderState);
-new Cell("");
 //#endregion
 //#region utils/createRouterInstance.ts
 var createRouterInstance = () => {
 	const routerState = {
-		isLoadingState: create(false),
-		loaderFallbackState: create(void 0),
 		routeItemDataState: create({
 			routeItem: void 0,
 			location: {}
 		}),
+		pendingState: create(void 0),
 		currentLoaderState: create(emptyLoaderState),
 		scrollMapState: create({}),
 		contextState: create({}),
@@ -499,13 +506,11 @@ var createRouterInstance = () => {
 			to: ""
 		}),
 		loaderStateRef: new Cell(emptyLoaderState),
-		prevPathnameRef: new Cell(""),
-		pendingPathRef: new Cell(""),
 		timestampMap: /* @__PURE__ */ new Map()
 	};
 	const revalidateCache = createRevalidateCache(routerState);
-	const navigate = createNavigate(routerState, revalidateCache);
 	const invalidate = createInvalidate(routerState, revalidateCache);
+	const navigate = createNavigate(routerState, revalidateCache);
 	const prefetch = createPrefetch(revalidateCache);
 	const useGetAction = (actionKey) => {
 		const { routeItem } = routerState.routeItemDataState.getState();
@@ -527,29 +532,17 @@ var createRouterInstance = () => {
 		};
 	};
 	return {
-		state: {
-			isLoadingState: routerState.isLoadingState,
-			loaderFallbackState: routerState.loaderFallbackState,
-			routeItemDataState: routerState.routeItemDataState,
-			currentLoaderState: routerState.currentLoaderState,
-			scrollMapState: routerState.scrollMapState,
-			contextState: routerState.contextState,
-			blockedRouteState: routerState.blockedRouteState,
-			prevPathnameRef: routerState.prevPathnameRef,
-			pendingPathRef: routerState.pendingPathRef
-		},
+		state: routerState,
 		runtime: {
 			navigate,
 			invalidate,
 			prefetch
 		},
 		hooks: {
-			useIsLoading: () => useGlobalState(routerState.isLoadingState),
 			useBlockedRoute: () => useGlobalState(routerState.blockedRouteState),
-			useLoaderFallback: () => useGlobalState(routerState.loaderFallbackState),
 			useRouteItemData: () => useGlobalState(routerState.routeItemDataState),
-			useCurrentLoaderState: () => useGlobalState(routerState.currentLoaderState),
 			useScrollMap: () => useGlobalState(routerState.scrollMapState),
+			usePendingState: () => useGlobalState(routerState.pendingState),
 			useContextState: () => useGlobalState(routerState.contextState),
 			useParams: () => getParamsObject(),
 			useNavigate: () => {
@@ -602,16 +595,16 @@ var router = createRouterInstance();
 //#endregion
 //#region hooks/useNavigation.ts
 var useNavigation = () => {
-	const { state: { prevPathnameRef, blockedRouteState }, runtime: { navigate } } = router;
+	const { state: { routeItemDataState, blockedRouteState }, runtime: { navigate } } = router;
 	useEffect(() => {
 		const handler = async (event) => {
 			const newLocation = parseWindowLocation(event.target.location);
-			if (prevPathnameRef.value === blockedRouteState.getState().from) {
+			if (routeItemDataState.getState().location.pathname === blockedRouteState.getState().from) {
 				blockedRouteState.setState({
-					from: prevPathnameRef.value,
+					from: routeItemDataState.getState().location.pathname,
 					to: newLocation.pathname
 				});
-				history.pushState(null, "", prevPathnameRef.value);
+				history.pushState(null, "", routeItemDataState.getState().location.pathname);
 			} else navigate(newLocation);
 		};
 		window.addEventListener("popstate", handler);
@@ -619,13 +612,11 @@ var useNavigation = () => {
 	}, [
 		blockedRouteState,
 		navigate,
-		prevPathnameRef.value
+		routeItemDataState
 	]);
 	useEffect(() => {
-		const currentLocation = parseWindowLocation(window.location);
-		navigate(currentLocation);
-		prevPathnameRef.set(currentLocation.pathname);
-	}, [navigate, prevPathnameRef]);
+		navigate(parseWindowLocation(window.location));
+	}, [navigate]);
 };
 //#endregion
 //#region hooks/useApplyCustomAnimation.ts
@@ -665,16 +656,10 @@ var useApplyCustomAnimation = (animationDuration) => {
 	}, [animationDuration]);
 };
 //#endregion
-//#region hooks/useLocation.ts
-var useLocation = () => {
-	const [routeItemData] = router.hooks.useRouteItemData();
-	return routeItemData.location;
-};
-//#endregion
 //#region hooks/usePreserveScroll.ts
-var usePreserveScroll = (preserveScroll) => {
+var usePreserveScroll = ({ routeItem, location: { pathname } }) => {
+	const preserveScroll = routeItem?.preserveScroll === void 0 ? routerConfig.defaultPreserveScroll : routeItem.preserveScroll;
 	const restoreScroll = router.hooks.useRestoreScroll();
-	const { pathname } = useLocation();
 	useEffect(() => {
 		if (preserveScroll) restoreScroll();
 	}, [
@@ -686,7 +671,7 @@ var usePreserveScroll = (preserveScroll) => {
 //#endregion
 //#region hooks/useSetRouterConfig.ts
 var useSetRouterConfig = (routerProps) => {
-	useEffect(() => routerConfig.configure(routerProps), [routerProps]);
+	useLayoutEffect(() => routerConfig.configure(routerProps), [routerProps]);
 };
 //#endregion
 //#region hooks/useSetInitialContext.ts
@@ -708,31 +693,32 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
-var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = false, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, defaultRetry }) => {
-	const { useIsLoading, useLoaderFallback, useRouteItemData, useCurrentLoaderState } = router.hooks;
-	const [isLoading] = useIsLoading();
-	const [currentLoaderFallback] = useLoaderFallback();
+var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = false, spinner = true, defaultPreserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, defaultRetry, defaultStaleTime }) => {
+	const { useRouteItemData, usePendingState } = router.hooks;
 	const [routeItemData] = useRouteItemData();
-	const [loaderState] = useCurrentLoaderState();
+	const [pendingState] = usePendingState();
+	const loaderState = router.state.loaderStateRef.value;
+	const isLoading = Boolean(pendingState);
 	useNavigation();
 	useSetRouterConfig({
 		routes,
 		isAnimated,
 		prefetch,
 		hoverPrefetchDelay,
-		showFallbackOnAnimation,
 		beforeLoad,
 		afterLoad,
-		defaultRetry
+		defaultRetry,
+		defaultStaleTime,
+		defaultPreserveScroll
 	});
 	useApplyCustomAnimation(animationDuration);
 	useSetInitialContext(initialContext);
-	usePreserveScroll(preserveScroll);
+	usePreserveScroll(routeItemData);
+	const { routeItem, location } = routeItemData;
 	const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
 	const showSpinner = spinner && isAnimated && isLoading;
 	const loadingContent = !showErrorElement && isLoading;
-	const { routeItem, location } = routeItemData;
-	if ((showFallbackOnAnimation || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback || defaultLoaderFallback);
+	if ((showFallbackOnAnimation || !isAnimated) && loadingContent) return renderElement(pendingState?.routeItem?.loaderFallback || defaultLoaderFallback);
 	if (!showFallbackOnAnimation && isAnimated && loadingContent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
 	if (!routeItem) return null;
 	if (showErrorElement) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [renderElement(routeItem.errorElement || defaultErrorElement), showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})] });
@@ -744,14 +730,20 @@ var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = f
 //#endregion
 //#region hooks/useIsRoutePending.ts
 var useIsRoutePending = (routePath) => {
-	const { hooks: { useIsLoading }, state: { pendingPathRef } } = router;
-	const [isPending] = useIsLoading();
-	return isPending && pendingPathRef.value === routePath;
+	const { usePendingState } = router.hooks;
+	const [pendingState] = usePendingState();
+	return pendingState?.location.pathname === routePath;
 };
 //#endregion
 //#region hooks/useNavigate.ts
 var useNavigate = router.hooks.useNavigate;
 //#endregion
+//#region hooks/useLocation.ts
+var useLocation = () => {
+	const [routeItemData] = router.hooks.useRouteItemData();
+	return routeItemData.location;
+};
+//#endregion
 //#region components/Link.tsx
 var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, className, style, onClick, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
 	const isPending = useIsRoutePending(to);
@@ -867,10 +859,7 @@ var Form = ({ children, action, onSuccess, onError, autoReset = true }) => {
 var useParams = router.hooks.useParams;
 //#endregion
 //#region hooks/useLoaderState.ts
-var useLoaderState = () => {
-	const [loaderState] = router.hooks.useCurrentLoaderState();
-	return loaderState;
-};
+var useLoaderState = () => router.state.loaderStateRef.value;
 //#endregion
 //#region hooks/useInvalidate.ts
 var useInvalidate = () => router.runtime.invalidate;
@@ -960,19 +949,9 @@ var useSearch = () => {
 	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };
 //#endregion
-//#region hooks/useLatest.ts
-var useLatest = (value) => {
-	const ref = useRef(value);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref;
-};
-//#endregion
 //#region hooks/useSearchParams.ts
 var useSearchParams = () => {
 	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) => {
@@ -989,105 +968,18 @@ var useSearchParams = () => {
 		searchParams,
 		getSearchParams,
 		setSearchParams: useCallback((param, value) => {
-			const currentParams = new URLSearchParams(searchRef.current);
+			const currentParams = new URLSearchParams(search);
 			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");
-		}, [navigateWithSearchParams, searchRef])
+		}, [navigateWithSearchParams, search])
 	};
 };
 //#endregion
-//#region hooks/useQueryParam.ts
-function useQueryParam(field, adapter, defaultValue) {
-	const { searchParams, setSearchParams } = useSearchParams();
-	return [useMemo(() => {
-		const params = searchParams.getAll(field);
-		const result = adapter.parse(params);
-		const isValid = !(result instanceof Date) || result instanceof Date && !isNaN(result.getTime());
-		if (result !== void 0 && result !== null && result !== "" && isValid) return result;
-		if (defaultValue !== void 0) return defaultValue;
-		return result;
-	}, [
-		field,
-		adapter,
-		searchParams,
-		defaultValue
-	]), useCallback((value) => {
-		if (!value) return setSearchParams(field, []);
-		setSearchParams(field, (adapter.serialize || String)(value));
-	}, [
-		field,
-		adapter.serialize,
-		setSearchParams
-	])];
-}
-//#endregion
 //#region hooks/useFormContext.ts
 var useFormContext = () => useContext(FormContext);
 //#endregion
-//#region utils/adapter.ts
-var adapter = {
-	string: { parse: (params) => params[0] || "" },
-	stringArray: {
-		parse: (params) => params,
-		serialize: (value) => value
-	},
-	integer: { parse: (params) => {
-		const result = parseInt(params[0] || "");
-		return isNaN(result) ? 0 : result;
-	} },
-	integerArray: {
-		parse: (params) => params.map((el) => {
-			const result = parseInt(el);
-			return isNaN(result) ? 0 : result;
-		}),
-		serialize: (value) => value.map(String)
-	},
-	float: { parse: (params) => {
-		const result = parseFloat(params[0] || "");
-		return isNaN(result) ? 0 : result;
-	} },
-	floatArray: {
-		parse: (params) => params.map((el) => {
-			const result = parseFloat(el);
-			return isNaN(result) ? 0 : result;
-		}),
-		serialize: (value) => value.map(String)
-	},
-	boolean: {
-		parse: (params) => params[0]?.toLowerCase() === "true",
-		serialize: String
-	},
-	booleanArray: {
-		parse: (params) => params.map((el) => el.toLowerCase() === "true"),
-		serialize: (value) => value.map(String)
-	},
-	date: {
-		parse: (params) => new Date(Number(params[0])),
-		serialize: (arg) => String(arg.getTime())
-	},
-	dateArray: {
-		parse: (params) => params.map((param) => new Date(Number(param))),
-		serialize: (args) => args.map((arg) => String(arg.getTime()))
-	},
-	zodSchema: (schema) => ({
-		parse: (params) => {
-			let parsed;
-			try {
-				parsed = params[0] ? JSON.parse(params[0]) : void 0;
-			} catch {
-				throw new Error("Invalid JSON");
-			}
-			if (parsed === void 0) return void 0;
-			const result = schema.safeParse(parsed);
-			if (!result.success) throw new Error("Invalid schema");
-			return result.data;
-		},
-		serialize: JSON.stringify
-	})
-};
-//#endregion
-export { Form, Link, Router, adapter, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };
+export { Form, Link, Router, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useRouterContext, useSearchParams };

package/dist/types.d.ts

@@ -18,13 +18,16 @@ export type ClientRouteItem = {
         params: Record<string, string>;
         context: Record<string, unknown>;
         setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
+        searchParams: Record<string, string>;
     }): Promise<unknown>;
     loaderFallback?: RenderElement;
     errorElement?: RenderElement;
     fallback?: RenderElement;
     children?: ClientRouteItem[];
     staleTime?: number;
+    pollingInterval?: number;
     retry?: Retry;
+    preserveScroll?: boolean;
     beforeLoad?: BeforeLoad;
     afterLoad?: (arg: {
         context: Record<string, unknown>;
@@ -55,16 +58,13 @@ export type BlockerState = 'blocked' | 'unblocked' | 'charged';
 export type RevalidateCacheArgs = {
     pathname: string;
     routeItem?: RouteItem;
+    search?: string;
 };
 export type LoaderState<T = unknown> = {
     data: T;
     loaderError: Error | null;
     beforeLoadError: Error | null;
 };
-export type Adapter<T> = {
-    parse: (params: string[]) => T;
-    serialize?: (params: T) => string | string[];
-};
 export type RouteItemData = {
     location: Location;
     routeItem: RouteItem | undefined;
@@ -79,8 +79,9 @@ export type RouterProps = {
     isAnimated?: boolean;
     animationDuration?: number;
     spinner?: boolean;
-    preserveScroll?: boolean;
+    defaultPreserveScroll?: boolean;
     defaultRetry?: Retry;
+    defaultStaleTime?: number;
     defaultLoaderFallback?: RenderElement;
     defaultErrorElement?: RenderElement;
     showFallbackOnAnimation?: boolean;
@@ -94,9 +95,8 @@ export type RouterProps = {
     context?: Record<string, unknown>;
 };
 export type RouterState = {
-    isLoadingState: Store<boolean>;
-    loaderFallbackState: Store<RouteItem['loaderFallback']>;
     routeItemDataState: Store<RouteItemData>;
+    pendingState: Store<RouteItemData | undefined>;
     currentLoaderState: Store<LoaderState>;
     scrollMapState: Store<Record<string, number>>;
     contextState: Store<Record<string, unknown>>;
@@ -105,27 +105,23 @@ export type RouterState = {
         to: string;
     }>;
     loaderStateRef: Cell<LoaderState>;
-    prevPathnameRef: Cell<string>;
-    pendingPathRef: Cell<string>;
     timestampMap: Map<string, number>;
 };
 export type RouterType = {
-    state: Omit<RouterState, 'loaderStateRef' | 'timestampMap'>;
+    state: Omit<RouterState, 'timestampMap'>;
     runtime: {
         navigate(arg: Location): Promise<void>;
         invalidate(pathList?: string | string[], options?: InvalidateOptions): Promise<InvalidateResult[]>;
         prefetch(pathname: string): Promise<void>;
     };
     hooks: {
-        useIsLoading: () => ReturnType<typeof useGlobalState<boolean>>;
         useBlockedRoute: () => ReturnType<typeof useGlobalState<{
             from: string;
             to: string;
         }>>;
-        useLoaderFallback: () => ReturnType<typeof useGlobalState<RenderElement | undefined>>;
         useRouteItemData: () => ReturnType<typeof useGlobalState<RouteItemData>>;
-        useCurrentLoaderState: () => ReturnType<typeof useGlobalState<LoaderState>>;
         useScrollMap: () => ReturnType<typeof useGlobalState<Record<string, number>>>;
+        usePendingState: () => ReturnType<typeof useGlobalState<RouteItemData | undefined>>;
         useContextState: () => ReturnType<typeof useGlobalState<Record<string, unknown>>>;
         useParams: <T>() => T;
         useNavigate: () => (arg: Location | string | -1) => Promise<void>;

package/dist/utils/commitNavigation.d.ts

@@ -1,3 +1,3 @@
-import { Cell } from '../cell';
-import { Location, RouteItem } from '../types';
-export declare const createCommitNavigation: (navigationExecutor: (arg: Location, routeItem: RouteItem | undefined) => void, prevPathnameRef: Cell<string>) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;
+import { Store } from '../create';
+import { Location, RouteItem, RouteItemData } from '../types';
+export declare const createCommitNavigation: (navigationExecutor: (arg: Location, routeItem: RouteItem | undefined) => void, routeItemDataState: Store<RouteItemData>) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/commitState.d.ts

@@ -1,2 +1,2 @@
 import { Location, RouteItem, RouterState } from '../types';
-export declare const createCommitState: ({ isLoadingState, routeItemDataState, loaderFallbackState, currentLoaderState, prevPathnameRef, loaderStateRef, }: RouterState) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;
+export declare const createCommitState: ({ routeItemDataState, pendingState }: RouterState) => (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/revalidateCache.d.ts

@@ -1,2 +1,2 @@
 import { RevalidateCacheArgs, RouterState } from '../types';
-export declare const createRevalidateCache: (routerState: RouterState) => ({ routeItem, pathname }: RevalidateCacheArgs, retried?: number) => Promise<any>;
+export declare const createRevalidateCache: (routerState: RouterState) => ({ routeItem, pathname, search }: RevalidateCacheArgs, retried?: number) => Promise<any>;

package/package.json

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

package/dist/hooks/useLatest.d.ts

@@ -1 +0,0 @@
-export declare const useLatest: <T>(value: T) => import("react").RefObject<T>;

package/dist/hooks/useQueryParam.d.ts

@@ -1,2 +0,0 @@
-import { Adapter } from '../types';
-export declare function useQueryParam<T>(field: string, adapter: Adapter<T>, defaultValue?: T): [T, (arg: T | null) => void];

package/dist/utils/adapter.d.ts

@@ -1,51 +0,0 @@
-import { Adapter } from '../types';
-type ZodInterface<T> = {
-    safeParse(input: unknown): {
-        success: true;
-        data: T;
-    } | {
-        success: false;
-        error: unknown;
-    };
-};
-export declare const adapter: {
-    string: {
-        parse: (params: string[]) => string;
-    };
-    stringArray: {
-        parse: (params: string[]) => string[];
-        serialize: (value: string[]) => string[];
-    };
-    integer: {
-        parse: (params: string[]) => number;
-    };
-    integerArray: {
-        parse: (params: string[]) => number[];
-        serialize: (value: number[]) => string[];
-    };
-    float: {
-        parse: (params: string[]) => number;
-    };
-    floatArray: {
-        parse: (params: string[]) => number[];
-        serialize: (value: number[]) => string[];
-    };
-    boolean: {
-        parse: (params: string[]) => boolean;
-        serialize: StringConstructor;
-    };
-    booleanArray: {
-        parse: (params: string[]) => boolean[];
-        serialize: (value: boolean[]) => string[];
-    };
-    date: {
-        parse: (params: string[]) => Date;
-        serialize: (arg: Date) => string;
-    };
-    dateArray: {
-        parse: (params: string[]) => Date[];
-        serialize: (args: Date[]) => string[];
-    };
-    zodSchema: <T>(schema: ZodInterface<T>) => Adapter<T>;
-};
-export {};