clear-react-router 1.9.7 → 1.9.8

package/README.md

@@ -773,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/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
@@ -162,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, {})
@@ -173,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,
@@ -288,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,
@@ -303,7 +306,7 @@ var createNavigate = (routerState, revalidateCache) => {
 			pathname: location.pathname,
 			search: location.search
 		});
-		afterEachLoad(routeItem);
+		afterEachLoad(routeItem, location);
 	};
 	const afterLoad = async (routeItem, params) => {
 		const { defaultAfterLoad } = routerConfig;
@@ -465,7 +468,8 @@ var createRevalidateCache = (routerState) => {
 					if (retry.delay) await sleep(retry.delay);
 					await revalidateCache({
 						routeItem,
-						pathname
+						pathname,
+						search
 					}, retried + 1);
 					return {
 						data: null,
@@ -709,7 +713,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 +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>;

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": "1.9.8",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {