clear-react-router 1.9.6 → 1.9.8

package/README.md

@@ -45,21 +45,22 @@ It provides first-class support for:
 | `routes` | `RouteItem[]` | required | Array of route configurations |
 | `isAnimated` | `boolean \| undefined` | `false` | Enable smooth page fade transitions |
 | `animationDuration` | `number` | `optional` | Animation duration in milliseconds (browser default is used if not set) |
+| `spinner` | `boolean \| undefined` | `true` | Show a small spinner in the corner while loading data (only when `isAnimated` is enabled) |
+| `context` | `object` | `{}` | Initial context (user, theme, etc.) |
+| `errorBoundary` | `ComponentType<{ children: ReactNode }>` | `undefined` | Custom error boundary component for catching render errors in route components |
+| `showFallbackOnAnimation` | `boolean \| undefined` | `false` | Show `loaderFallback` even when `isAnimated` is `true` (instead of spinner) |
 | `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) |
+| `defaultBeforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | `undefined` | Runs before every navigation. Useful for authentication, analytics, or updating shared context.            |
+| `defaultAfterLoad`  | `({ params, context, setContext }) => Promise<void>`  | `undefined` | Runs after every successful navigation. Useful for analytics, page tracking, or other global side effects. |
 | `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) |
-| `context` | `object` | `{}` | Initial context (user, theme, etc.) |
-| `errorBoundary` | `ComponentType<{ children: ReactNode }>` | `undefined` | Custom error boundary component for catching render errors in route components |
+| `defaultPrefetch` | `'hover' \| 'render' \| 'viewport' \| 'none'` | `'hover'` for desktop, `'viewport'` for mobile | Default prefetch strategy for all `<Link>` components |
+| `defaultHoverPrefetchDelay` | `number` | `150` | Default delay in milliseconds before prefetching on hover (only for `'hover'` strategy) |
 
-> **Note:** Global lifecycle hooks wrap every route navigation. The global beforeLoad runs **before** the route-specific beforeLoad, while the global afterLoad runs **after** the route-specific afterLoad.
+
+> **Note:** Global lifecycle hooks wrap every route navigation. The global `defaultBeforeLoad` runs **before** the route-specific beforeLoad, while the global `defaultAfterLoad` runs **after** the route-specific afterLoad.
 
 ```tsx
 <div>
@@ -772,11 +773,13 @@ function ProductFilter() {
 
 ## Lazy Loading
 
-Clear Router supports code-splitting out of the box. Simply pass a function that returns a dynamic import:
+Clear Router supports code-splitting out of the box. Simply wrap dynamic import into a library's `lazy` function:
 ```tsx
+import { lazy } from 'clear-react-router';
+
 {
   path: '/heavy-page',
-  element: () => import('./pages/HeavyComponent'),
+  element: lazy(() => import('./pages/HeavyComponent')),
   fallback: () => <div>Loading...</div>,
 }
 ```

package/dist/components/Link.d.ts

@@ -8,7 +8,7 @@ type LinkProps<T extends HTMLElement = HTMLAnchorElement> = {
     to: string;
     children?: ReactNode;
     as?: (props: ElementProps<T>, state: ElementState) => ReactElement;
-    prefetch?: RouterProps['prefetch'];
+    prefetch?: RouterProps['defaultPrefetch'];
     hoverPrefetchDelay?: number;
     className?: string | ((arg: ElementState) => string);
     activeClassName?: string;
@@ -17,5 +17,5 @@ type LinkProps<T extends HTMLElement = HTMLAnchorElement> = {
     style?: CSSProperties | ((arg: ElementState) => CSSProperties);
     exact?: boolean;
 };
-export declare const Link: <T extends HTMLElement = HTMLAnchorElement>({ children, to, as, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, exact, activeClassName, pendingClassName, }: LinkProps<T>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const Link: <T extends HTMLElement = HTMLAnchorElement>({ children, to, as, prefetch: linkPrefetch, hoverPrefetchDelay, className, style, beforeNavigate, exact, activeClassName, pendingClassName, }: LinkProps<T>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/components/Router.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types';
-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;
+export declare const Router: ({ routes, defaultBeforeLoad, defaultAfterLoad, animationDuration, defaultLoaderFallback, defaultErrorElement, defaultRetry, defaultStaleTime, context: initialContext, isAnimated, spinner, defaultPreserveScroll, showFallbackOnAnimation, defaultPrefetch, defaultHoverPrefetchDelay, errorBoundary: ErrorBoundary, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -1,11 +1,11 @@
 import { ClientRouteItem, RouterProps } from '../types';
 declare class RouterConfig {
     routes: RouterProps['routes'];
-    prefetch: RouterProps['prefetch'];
+    defaultPrefetch: RouterProps['defaultPrefetch'];
     isAnimated: RouterProps['isAnimated'];
-    hoverPrefetchDelay: number;
-    beforeLoad?: ClientRouteItem['beforeLoad'];
-    afterLoad?: ClientRouteItem['afterLoad'];
+    defaultHoverPrefetchDelay: number;
+    defaultBeforeLoad?: ClientRouteItem['beforeLoad'];
+    defaultAfterLoad?: ClientRouteItem['afterLoad'];
     defaultRetry?: RouterProps['defaultRetry'];
     defaultStaleTime?: RouterProps['defaultStaleTime'];
     defaultPreserveScroll?: RouterProps['defaultPreserveScroll'];

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export { useAction } from './hooks/useAction';
 export { useRouterContext } from './hooks/useRouterContext';
 export { useSearchParams } from './hooks/useSearchParams';
 export { useFormContext } from './hooks/useFormContext';
+export { lazy } from './utils/lazy';
 export { createRouter } from './utils/utils';
 export type { RouteItem, BlockerState, Location, RouterProps, ElementProps } from './types';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Suspense, createContext, lazy as lazy$1, 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
@@ -44,7 +44,7 @@ var createCommitState = ({ routeItemDataState, pendingState }) => (nextLocation,
 //#region constants.ts
 var emptyLoaderState = {};
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -54,7 +54,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -66,13 +66,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -86,11 +86,11 @@ function _defineProperty(e, r, t) {
 var RouterConfig = class {
 	constructor() {
 		_defineProperty(this, "routes", []);
-		_defineProperty(this, "prefetch", "hover");
+		_defineProperty(this, "defaultPrefetch", "hover");
 		_defineProperty(this, "isAnimated", false);
-		_defineProperty(this, "hoverPrefetchDelay", 150);
-		_defineProperty(this, "beforeLoad", void 0);
-		_defineProperty(this, "afterLoad", void 0);
+		_defineProperty(this, "defaultHoverPrefetchDelay", 150);
+		_defineProperty(this, "defaultBeforeLoad", void 0);
+		_defineProperty(this, "defaultAfterLoad", void 0);
 		_defineProperty(this, "defaultRetry", void 0);
 		_defineProperty(this, "defaultStaleTime", void 0);
 		_defineProperty(this, "defaultPreserveScroll", void 0);
@@ -133,8 +133,7 @@ var createIsCacheItemFresh = (loaderMap) => ({ routeItem, pathname }) => {
 * LICENSE file in the root directory of this source tree.
 */
 var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((exports) => {
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
-	var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
 	function jsxProd(type, config, maybeKey) {
 		var key = null;
 		void 0 !== maybeKey && (key = "" + maybeKey);
@@ -163,7 +162,7 @@ var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 })))();
 var createLazyComponent = (importFn, fallback) => {
 	const load = () => importFn().then((module) => ({ default: module.default || module }));
-	const LazyComp = lazy(load);
+	const LazyComp = lazy$1(load);
 	const Component = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Suspense, {
 		fallback: typeof fallback === "function" ? fallback() : fallback || null,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazyComp, {})
@@ -174,12 +173,15 @@ var createLazyComponent = (importFn, fallback) => {
 	};
 };
 //#endregion
+//#region types.ts
+var LAZY_MARKER = Symbol("clear-router-lazy");
+//#endregion
 //#region utils/utils.ts
-var isLazy = (el) => typeof el.element === "function" && el.element.toString().includes("import(");
+var isLazy = (el) => typeof el.element === "object" && el.element !== null && LAZY_MARKER in el.element;
 var parseClientRouteItem = (el, parentPattern = "") => {
 	const pattern = `${parentPattern}/${el.path}`.replace(/\/+/g, "/");
-	const preloadElement = isLazy(el) ? createLazyComponent(el.element, el.fallback).preloadElement : void 0;
-	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback).Component : el.element;
+	const preloadElement = isLazy(el) ? createLazyComponent(el.element.importFn, el.fallback).preloadElement : void 0;
+	const resolvedElement = isLazy(el) ? createLazyComponent(el.element.importFn, el.fallback).Component : el.element;
 	return [{
 		...el,
 		pattern,
@@ -208,6 +210,11 @@ var comparePaths = (route, pathname) => {
 	const current = pathname.split("/").filter(Boolean);
 	return pattern.length === current.length ? pattern.every((segment, index) => segment.startsWith(":") || segment === current[index]) : false;
 };
+var isMobile = () => {
+	const hasCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
+	const isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
+	return hasCoarsePointer && isSmallScreen;
+};
 var findRoute = (pathname, includeAll) => {
 	if (includeAll) return routerConfig.routes.find((el) => el.path === "*" || comparePaths(el, pathname));
 	return routerConfig.routes.find((el) => comparePaths(el, pathname));
@@ -233,7 +240,7 @@ var createNavigate = (routerState, revalidateCache) => {
 		};
 	};
 	const beforeLoad = async (routeItem, params) => {
-		const { beforeLoad } = routerConfig;
+		const { defaultBeforeLoad } = routerConfig;
 		const runBeforeLoad = async (loaderFn) => {
 			const redirect = async (redirected) => await navigate(typeof redirected === "string" ? { pathname: redirected } : redirected);
 			try {
@@ -253,7 +260,7 @@ var createNavigate = (routerState, revalidateCache) => {
 				}));
 			}
 		};
-		if (beforeLoad) await runBeforeLoad(beforeLoad);
+		if (defaultBeforeLoad) await runBeforeLoad(defaultBeforeLoad);
 		if (routeItem?.beforeLoad) await runBeforeLoad(routeItem?.beforeLoad);
 	};
 	const prepareNavigation = (routeItem, location) => {
@@ -284,7 +291,7 @@ var createNavigate = (routerState, revalidateCache) => {
 			} : void 0);
 		}
 	};
-	const afterEachLoad = (routeItem) => {
+	const afterEachLoad = (routeItem, location) => {
 		if (!routeItem?.pollingInterval) return;
 		interval = window.setInterval(() => revalidateCache({
 			routeItem,
@@ -299,15 +306,15 @@ var createNavigate = (routerState, revalidateCache) => {
 			pathname: location.pathname,
 			search: location.search
 		});
-		afterEachLoad(routeItem);
+		afterEachLoad(routeItem, location);
 	};
 	const afterLoad = async (routeItem, params) => {
-		const { afterLoad } = routerConfig;
+		const { defaultAfterLoad } = routerConfig;
 		if (routeItem?.afterLoad) await routeItem.afterLoad({
 			...getContext(),
 			params
 		});
-		if (afterLoad) await afterLoad({
+		if (defaultAfterLoad) await defaultAfterLoad({
 			...getContext(),
 			params
 		});
@@ -461,7 +468,8 @@ var createRevalidateCache = (routerState) => {
 					if (retry.delay) await sleep(retry.delay);
 					await revalidateCache({
 						routeItem,
-						pathname
+						pathname,
+						search
 					}, retried + 1);
 					return {
 						data: null,
@@ -705,7 +713,8 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
-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 }) => {
+var IS_MOBILE = isMobile();
+var Router = ({ routes, defaultBeforeLoad, defaultAfterLoad, animationDuration, defaultLoaderFallback, defaultErrorElement, defaultRetry, defaultStaleTime, context: initialContext, isAnimated = false, spinner = true, defaultPreserveScroll = true, showFallbackOnAnimation = false, defaultPrefetch = IS_MOBILE ? "viewport" : "hover", defaultHoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary }) => {
 	const { useRouteItemData, usePendingState } = router.hooks;
 	const [routeItemData] = useRouteItemData();
 	const [pendingState] = usePendingState();
@@ -715,10 +724,10 @@ var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = f
 	useSetRouterConfig({
 		routes,
 		isAnimated,
-		prefetch,
-		hoverPrefetchDelay,
-		beforeLoad,
-		afterLoad,
+		defaultPrefetch,
+		defaultHoverPrefetchDelay,
+		defaultBeforeLoad,
+		defaultAfterLoad,
 		defaultRetry,
 		defaultStaleTime,
 		defaultPreserveScroll
@@ -758,14 +767,14 @@ var useLocation = () => {
 //#endregion
 //#region components/Link.tsx
 var defaultAs = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props });
-var Link = ({ children, to, as = defaultAs, prefetch: prefetchLink, hoverPrefetchDelay, className, style, beforeNavigate, exact = false, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
+var Link = ({ children, to, as = defaultAs, prefetch: linkPrefetch, hoverPrefetchDelay, className, style, beforeNavigate, exact = false, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
 	const isPending = useIsRoutePending(to);
 	const { pathname } = useLocation();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
 	const elementRef = useRef(null);
-	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
-	const prefetch = prefetchLink || configPrefetch;
+	const { defaultPrefetch: configPrefetch, defaultHoverPrefetchDelay: configPrefetchDelay } = routerConfig;
+	const prefetch = linkPrefetch || configPrefetch;
 	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
 	const onMouseEnter = useCallback(() => {
 		if (prefetch !== "hover" || !prefetchDelay) return;
@@ -993,10 +1002,8 @@ var useSearchParams = () => {
 				currentParams.delete(param);
 				(Array.isArray(value) ? value : [value]).forEach((v) => currentParams.append(param, v));
 				navigateWithSearchParams(currentParams);
-			} else if (typeof param === "function") {
-				const newParams = param(currentParams);
-				navigateWithSearchParams(newParams);
-			} else throw new Error("useSearchParams first argument must be either function or string");
+			} else if (typeof param === "function") navigateWithSearchParams(param(currentParams));
+			else throw new Error("useSearchParams first argument must be either function or string");
 		}, [navigateWithSearchParams, search])
 	};
 };
@@ -1004,4 +1011,10 @@ var useSearchParams = () => {
 //#region hooks/useFormContext.ts
 var useFormContext = () => useContext(FormContext);
 //#endregion
-export { Form, Link, Router, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useRouterContext, useSearchParams };
+//#region utils/lazy.ts
+var lazy = (importFn) => ({
+	[LAZY_MARKER]: true,
+	importFn
+});
+//#endregion
+export { Form, Link, Router, createRouter, lazy, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useRouterContext, useSearchParams };

package/dist/types.d.ts

@@ -1,9 +1,13 @@
 import { ComponentType, type CSSProperties, Dispatch, MouseEvent, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import { Store, useGlobalState } from './create';
 import { Cell } from './cell';
-export type LazyComponent = () => Promise<{
-    default: ComponentType<unknown>;
-}>;
+export declare const LAZY_MARKER: unique symbol;
+export type LazyComponent = {
+    readonly [LAZY_MARKER]: true;
+    importFn: () => Promise<{
+        default: ComponentType<unknown>;
+    }>;
+};
 export type RenderElement = (() => ReactElement) | ReactElement;
 export type BeforeLoad = (arg: {
     context: Record<string, unknown>;
@@ -86,13 +90,13 @@ export type RouterProps = {
     defaultLoaderFallback?: RenderElement;
     defaultErrorElement?: RenderElement;
     showFallbackOnAnimation?: boolean;
-    prefetch?: 'hover' | 'render' | 'viewport' | 'none';
-    hoverPrefetchDelay?: number;
+    defaultPrefetch?: 'hover' | 'render' | 'viewport' | 'none';
+    defaultHoverPrefetchDelay?: number;
     errorBoundary?: ComponentType<{
         children: ReactNode;
     }>;
-    beforeLoad?: ClientRouteItem['beforeLoad'];
-    afterLoad?: ClientRouteItem['afterLoad'];
+    defaultBeforeLoad?: ClientRouteItem['beforeLoad'];
+    defaultAfterLoad?: ClientRouteItem['afterLoad'];
     context?: Record<string, unknown>;
 };
 export type LoaderStateItem = {

package/dist/utils/lazy.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+import { LazyComponent } from '../types';
+export declare const lazy: (importFn: () => Promise<{
+    default: ComponentType<unknown>;
+}>) => LazyComponent;

package/dist/utils/utils.d.ts

@@ -3,3 +3,4 @@ export declare const createRouter: (clientList: ClientRouteItem[]) => RouteItem[
 export declare const getParamsObject: (nextItem?: RouteItem, nextPathname?: string) => Record<string, string>;
 export declare const parseWindowLocation: (location: typeof window.location) => Location;
 export declare const comparePaths: (route: RouteItem, pathname: string) => boolean;
+export declare const isMobile: () => boolean;

package/package.json

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