clear-react-router 1.8.5 → 1.8.7

package/README.md

@@ -88,7 +88,7 @@ Normalizes route configuration. Extracts dynamic params, builds nested paths.
 
 ### `Link`
 
-Component for client-side navigation with prefetch support, active state detection, and pending state styling.
+Component for client-side navigation with prefetch support, active state detection, and pending state styling. Prefetch includes lazy route component preload.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
@@ -584,6 +584,14 @@ await invalidate('/posts', { withBeforeLoad: true });
 await invalidate(['/posts', '/users'], { withBeforeLoad: true });
 ```
 
+#### Returns
+
+An array of objects with the following structure:
+```ts
+{ path: string; data: unknown; error: unknown }
+```
+Each object represents a revalidated route, where `path` is the route pathname, `data` is the revalidated loader result, and `error` is the loader error, if any.
+
 #### Notes
 
 * **Only routes that already have cached data are revalidated.**

package/dist/components/Link.d.ts

@@ -1,18 +1,16 @@
-import { type CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, ReactNode, ComponentPropsWithoutRef } from 'react';
 import { RouterProps } from '../types';
-type LinkProps = {
+type States = {
+    isActive: boolean;
+    isPending: boolean;
+};
+type LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'className' | 'style'> & {
     to: string;
     children: ReactNode;
     prefetch?: RouterProps['prefetch'];
     hoverPrefetchDelay?: number;
-    style?: CSSProperties | (({ isActive }: {
-        isActive: boolean;
-        isPending: boolean;
-    }) => CSSProperties);
-    className?: string | (({ isActive }: {
-        isActive: boolean;
-        isPending: boolean;
-    }) => string);
+    style?: CSSProperties | ((arg: States) => CSSProperties);
+    className?: string | ((arg: States) => string);
     activeClassName?: string;
     pendingClassName?: string;
     onClick?(): void;

package/dist/hooks/useInvalidate.d.ts

@@ -1 +1 @@
-export declare const useInvalidate: () => (pathList?: string | string[], options?: import("../types").InvalidateOptions) => Promise<void>;
+export declare const useInvalidate: () => (pathList?: string | string[], options?: import("../types").InvalidateOptions) => Promise<import("../types").InvalidateResult[]>;

package/dist/index.js

@@ -165,22 +165,29 @@ var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = require_react_jsx_runtime_production();
 })))();
 var createLazyComponent = (importFn, fallback) => {
-	const LazyComp = lazy(() => importFn().then((module) => ({ default: module.default || module })));
-	return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Suspense, {
+	const load = () => importFn().then((module) => ({ default: module.default || module }));
+	const LazyComp = lazy(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, {})
 	});
+	return {
+		Component,
+		preloadElement: load
+	};
 };
 //#endregion
 //#region utils/utils.ts
 var isLazy = (el) => typeof el.element === "function" && el.element.toString().includes("import(");
 var parseClientRouteItem = (el, parentPattern = "") => {
 	const pattern = `${parentPattern}/${el.path}`.replace(/\/+/g, "/");
-	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback) : el.element;
+	const preloadElement = isLazy(el) ? createLazyComponent(el.element, el.fallback).preloadElement : void 0;
+	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback).Component : el.element;
 	return [{
 		...el,
 		pattern,
-		element: resolvedElement
+		element: resolvedElement,
+		preloadElement
 	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, pattern)) ?? []];
 };
 var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el));
@@ -330,37 +337,43 @@ var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, curr
 				beforeLoadError: error
 			}));
 		}
-		await revalidateCache({
+		const result = await revalidateCache({
 			routeItem,
 			pathname
 		});
 		if (pathname === routePathname) currentLoaderState.setState(loaderStateRef.value);
+		return {
+			path: pathname,
+			...result
+		};
 	};
 	const invalidateItem = async (pathname, options) => {
 		const routeItem = findRoute(pathname);
-		if (!routeItem) return;
+		if (!routeItem) return [];
 		const pathnameArray = [];
 		for (const [key] of timestampMap) if (comparePaths(routeItem, key)) pathnameArray.push(key);
-		await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname, options)));
-		if (options?.withChildren && routeItem.children?.length) {
-			const childPathList = routeItem.children.map((el) => el.path);
-			await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, options)));
-		}
+		const currentResults = await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname, options)));
+		if (!options?.withChildren || !routeItem.children?.length) return currentResults;
+		const childResults = await Promise.all(routeItem.children.map((child) => invalidateItem(`${pathname}${child.path}`, options)));
+		return [...currentResults, ...childResults.flat()];
 	};
 	return async (pathList, options) => {
 		const routePathname = routeItemDataState.getState().location.pathname;
 		const pathnameList = Array.isArray(pathList) ? pathList : pathList ? [pathList] : [routePathname];
-		await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options)));
+		return (await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options)))).flat();
 	};
 };
 //#endregion
 //#region runtime/prefetch.ts
 var createPrefetch = (revalidateCache) => async (pathname) => {
 	const item = findRoute(pathname);
-	if (item) await revalidateCache({
-		routeItem: item,
-		pathname
-	});
+	if (item) {
+		await item.preloadElement?.();
+		await revalidateCache({
+			routeItem: item,
+			pathname
+		});
+	}
 };
 //#endregion
 //#region utils/revalidateCache.ts
@@ -393,10 +406,7 @@ var createRevalidateCache = (routerState) => {
 		if (isCacheItemFresh({
 			routeItem,
 			pathname
-		})) {
-			loaderStateRef.set(loaderMapRef[pathname]);
-			return;
-		}
+		})) loaderStateRef.set(loaderMapRef[pathname]);
 		const promise = (async () => {
 			if (!routeItem?.loader) return;
 			try {
@@ -415,6 +425,10 @@ var createRevalidateCache = (routerState) => {
 					loaderError: null
 				}));
 				loaderMapRef[pathname] = loaderStateRef.value;
+				return {
+					data: result,
+					error: null
+				};
 			} catch (error) {
 				const retry = getRetry(routeItem);
 				if (retry && retry.count > retried) {
@@ -424,11 +438,21 @@ var createRevalidateCache = (routerState) => {
 						routeItem,
 						pathname
 					}, retried + 1);
-				} else loaderStateRef.set((prev) => ({
-					...prev,
-					data: null,
-					loaderError: error
-				}));
+					return {
+						data: null,
+						error
+					};
+				} else {
+					loaderStateRef.set((prev) => ({
+						...prev,
+						data: null,
+						loaderError: error
+					}));
+					return {
+						data: null,
+						error
+					};
+				}
 			} finally {
 				loadingPromises.delete(pathname);
 			}

package/dist/runtime/invalidate.d.ts

@@ -1,2 +1,2 @@
-import { type InvalidateOptions, RevalidateCache, RouterState } from '../types';
-export declare const createInvalidate: ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }: RouterState, revalidateCache: RevalidateCache) => (pathList?: string | string[], options?: InvalidateOptions) => Promise<void>;
+import { type InvalidateOptions, InvalidateResult, RevalidateCache, RouterState } from '../types';
+export declare const createInvalidate: ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }: RouterState, revalidateCache: RevalidateCache) => (pathList?: string | string[], options?: InvalidateOptions) => Promise<InvalidateResult[]>;

package/dist/types.d.ts

@@ -34,7 +34,7 @@ export type ClientRouteItem = {
     actions?: (arg: {
         context: Record<string, unknown>;
         params: Record<string, string>;
-        invalidate: (path?: string) => Promise<void>;
+        invalidate: (path?: string) => Promise<InvalidateResult[]>;
         setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
     }) => Record<string, (arg: FormData) => Promise<unknown> | Promise<void> | void | unknown>;
 };
@@ -42,6 +42,9 @@ export type RouteItem = ClientRouteItem & {
     element: RenderElement;
     pattern: string;
     cacheTimestamp?: number;
+    preloadElement?(): Promise<{
+        default: ComponentType<unknown>;
+    }>;
 };
 export type Location = {
     pathname: string;
@@ -110,7 +113,7 @@ export type RouterType = {
     state: Omit<RouterState, 'loaderStateRef' | 'timestampMap'>;
     runtime: {
         navigate(arg: Location): Promise<void>;
-        invalidate(pathList?: string | string[], options?: InvalidateOptions): Promise<void>;
+        invalidate(pathList?: string | string[], options?: InvalidateOptions): Promise<InvalidateResult[]>;
         prefetch(pathname: string): Promise<void>;
     };
     hooks: {
@@ -128,7 +131,7 @@ export type RouterType = {
         useNavigate: () => (arg: Location | string | -1) => Promise<void>;
         useGetAction: (actionKey: string) => {
             currentAction: (arg: FormData) => Promise<unknown> | Promise<void> | void | unknown;
-            invalidate: (pathList?: string | string[], options?: InvalidateOptions) => Promise<void>;
+            invalidate: (pathList?: string | string[], options?: InvalidateOptions) => Promise<InvalidateResult[]>;
         };
         useRestoreScroll: () => () => void;
         useAction: (action: string, options?: Options) => (arg: FormData) => Promise<void>;
@@ -138,9 +141,16 @@ export type InvalidateOptions = {
     withChildren?: boolean;
     withBeforeLoad?: boolean;
 };
-export type RevalidateCache = ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown> | undefined;
+export type RevalidateCache = ({ routeItem, pathname, }: RevalidateCacheArgs) => Promise<{
+    data: unknown;
+    error: unknown;
+}>;
 export type Options = Partial<{
     onSuccess: (args: unknown) => void;
     onError: (args: unknown) => void;
 }> | undefined;
+export type InvalidateResult = {
+    path: string;
+    data: unknown;
+};
 export {};

package/dist/utils/createLazyComponent.d.ts

@@ -1,4 +1,9 @@
 import { type ComponentType, type ReactElement } from 'react';
 export declare const createLazyComponent: (importFn: () => Promise<{
     default: ComponentType<unknown>;
-}>, fallback?: ReactElement | (() => ReactElement)) => (() => ReactElement);
+}>, fallback?: ReactElement | (() => ReactElement)) => {
+    Component: () => import("react/jsx-runtime").JSX.Element;
+    preloadElement: () => Promise<{
+        default: ComponentType<unknown>;
+    }>;
+};

package/package.json

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