clear-react-router 1.9.7 → 2.0.0

package/README.md

@@ -572,6 +572,8 @@ const UserProfile = () => {
   staleTime: 60000, // 1 minute — cache is fresh for 60 seconds
 }
 ```
+ - Stale cache entries are cleaned up incrementally on every navigation, keeping the loader cache from growing unbounded over long sessions.
+
 
 ### `useInvalidate()`
 
@@ -773,11 +775,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/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
@@ -113,13 +113,12 @@ var createCommitNavigation = (navigationExecutor, routeItemDataState) => (nextLo
 };
 //#endregion
 //#region utils/isCacheItemFresh.ts
-var createIsCacheItemFresh = (loaderMap) => ({ routeItem, pathname }) => {
-	if (!routeItem) return true;
-	const item = loaderMap.get(pathname);
+var createIsCacheItemFresh = (loaderMap) => (pathname, search) => {
+	const item = loaderMap.get(`${pathname}${search}`);
 	if (item === void 0) return false;
-	const staleTime = routeItem.staleTime ?? routerConfig.defaultStaleTime;
-	if (staleTime === void 0) return true;
-	return Date.now() - item.timestamp <= staleTime;
+	const resolvedStaleTime = item.staleTime ?? routerConfig.defaultStaleTime;
+	if (resolvedStaleTime === void 0) return true;
+	return Date.now() - item.timestamp <= resolvedStaleTime;
 };
 //#endregion
 //#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
@@ -162,7 +161,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, {})
@@ -173,12 +172,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,
@@ -278,17 +280,14 @@ var createNavigate = (routerState, revalidateCache) => {
 			const currentLoaderState = loaderMap.get(location.pathname)?.state;
 			if (currentLoaderState) loaderStateRef.set(currentLoaderState);
 		} else {
-			const pendingShouldExist = routeItem?.loader && !isCacheItemFresh({
-				routeItem,
-				pathname: location.pathname
-			});
+			const pendingShouldExist = routeItem?.loader && !isCacheItemFresh(location.pathname, location.search);
 			pendingState.setState(pendingShouldExist ? {
 				routeItem,
 				location
 			} : void 0);
 		}
 	};
-	const afterEachLoad = (routeItem) => {
+	const afterEachLoad = (routeItem, location) => {
 		if (!routeItem?.pollingInterval) return;
 		interval = window.setInterval(() => revalidateCache({
 			routeItem,
@@ -303,7 +302,7 @@ var createNavigate = (routerState, revalidateCache) => {
 			pathname: location.pathname,
 			search: location.search
 		});
-		afterEachLoad(routeItem);
+		afterEachLoad(routeItem, location);
 	};
 	const afterLoad = async (routeItem, params) => {
 		const { defaultAfterLoad } = routerConfig;
@@ -420,15 +419,20 @@ var getRetry = (routeItem) => {
 var sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var createRevalidateCache = (routerState) => {
 	const { loaderStateRef, contextState, loaderMap } = routerState;
+	const removeFirstStaleItem = () => {
+		const deletedItem = [...loaderMap.entries()].find(([, item]) => {
+			const staleTime = item.staleTime ?? routerConfig.defaultStaleTime;
+			return staleTime && staleTime + item.timestamp < Date.now();
+		});
+		if (deletedItem) loaderMap.delete(deletedItem[0]);
+	};
 	const revalidateCache = async ({ routeItem, pathname, search = "" }, retried = 0) => {
 		if (!routeItem?.loader) return;
 		const isCacheItemFresh = createIsCacheItemFresh(loaderMap);
-		if (loadingPromises.has(pathname)) return loadingPromises.get(pathname);
-		if (isCacheItemFresh({
-			routeItem,
-			pathname
-		})) {
-			const item = loaderMap.get(pathname);
+		removeFirstStaleItem();
+		if (loadingPromises.has(pathname)) return loadingPromises.get(`${pathname}${search}`);
+		if (isCacheItemFresh(pathname, search)) {
+			const item = loaderMap.get(`${pathname}${search}`);
 			if (item?.state) loaderStateRef.set(item.state);
 			return;
 		}
@@ -452,7 +456,8 @@ var createRevalidateCache = (routerState) => {
 				}));
 				loaderMap.set(`${pathname}${search}`, {
 					state: loaderStateRef.value,
-					timestamp: Date.now()
+					timestamp: Date.now(),
+					staleTime: routeItem.staleTime
 				});
 				return {
 					data: result,
@@ -465,7 +470,8 @@ var createRevalidateCache = (routerState) => {
 					if (retry.delay) await sleep(retry.delay);
 					await revalidateCache({
 						routeItem,
-						pathname
+						pathname,
+						search
 					}, retried + 1);
 					return {
 						data: null,
@@ -709,7 +715,8 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
-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 }) => {
+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();
@@ -1006,4 +1013,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>;
@@ -98,6 +102,7 @@ export type RouterProps = {
 export type LoaderStateItem = {
     state: LoaderState;
     timestamp: number;
+    staleTime: number | undefined;
 };
 export type RouterState = {
     routeItemDataState: Store<RouteItemData>;

package/dist/utils/isCacheItemFresh.d.ts

@@ -1,5 +1,2 @@
-import { LoaderStateItem, RouteItem } from '../types';
-export declare const createIsCacheItemFresh: (loaderMap: Map<string, LoaderStateItem>) => ({ routeItem, pathname }: {
-    routeItem?: RouteItem;
-    pathname: string;
-}) => boolean;
+import { LoaderStateItem } from '../types';
+export declare const createIsCacheItemFresh: (loaderMap: Map<string, LoaderStateItem>) => (pathname: string, search?: string) => boolean;

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/package.json

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