clear-react-router 1.9.6 → 1.9.7

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>

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.js

@@ -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);
@@ -208,6 +207,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 +237,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 +257,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) => {
@@ -302,12 +306,12 @@ var createNavigate = (routerState, revalidateCache) => {
 		afterEachLoad(routeItem);
 	};
 	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
 		});
@@ -705,7 +709,7 @@ 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 Router = ({ routes, defaultBeforeLoad, defaultAfterLoad, animationDuration, defaultLoaderFallback, defaultErrorElement, defaultRetry, defaultStaleTime, context: initialContext, isAnimated = false, spinner = true, defaultPreserveScroll = true, showFallbackOnAnimation = false, defaultPrefetch = isMobile() ? "viewport" : "hover", defaultHoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary }) => {
 	const { useRouteItemData, usePendingState } = router.hooks;
 	const [routeItemData] = useRouteItemData();
 	const [pendingState] = usePendingState();
@@ -715,10 +719,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 +762,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 +997,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])
 	};
 };

package/dist/types.d.ts

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