clear-react-router 1.7.1 → 1.7.3

package/README.md

@@ -1,17 +1,23 @@
 [![npm version](https://badge.fury.io/js/clear-react-router.svg)](https://www.npmjs.com/package/clear-react-router)
 
-A lightweight, type-safe routing library for React applications with nested routes, data loading, navigation blocking, and prefetching.
+# Clear Router
+
+A lightweight, type-safe routing library for React applications with nested routes, data loading, navigation blocking, prefetching, and route actions.
 
 ## Why Clear Router?
 
-Most React routers focus on flexibility and ecosystem integrations.
-Clear Router focuses on predictable navigation with a small, explicit API.
+Most React routers focus on flexibility and ecosystem integrations. Clear Router focuses on predictable navigation with a small, explicit API and minimal setup.
+
+There is no `RouterProvider` or provider hierarchy to manage. Simply render `<Router />` once, and use router hooks anywhere in your application.
 
 It provides first-class support for:
 
-- Predictable routing
-- Built-in data loading
-- Small API
+* Predictable routing
+* Built-in data loading
+* Route actions and forms
+* Simple, provider-free architecture
+* Small, explicit API
+
 
 ## Features
 
@@ -44,43 +50,20 @@ Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic pa
 | `loader` | `({ params, context, setContext }) => Promise<unknown>` | Fetch data using route params and context. Can update context via `setContext` |
 | `afterLoad` | `({ params, context, setContext }) => Promise<void>` | Analytics, side effects after data is loaded. Can update context via `setContext` |
 | `fallback` | `ReactElement \| () => ReactElement` | Loading fallback (for lazy loading) |
-| `loaderFallback` | `ReactElement \| () => ReactElement` | Loading fallback (for loader) |
-| `errorElement` | `ReactElement \| () => ReactElement` | Error fallback |
+| `loaderFallback` | `ReactElement \| () => ReactElement` | Loading fallback for the route's `loader`. Overrides the global `defaultLoaderFallback` set in `Router` |
+| `errorElement` | `ReactElement \| () => ReactElement` | Error fallback for the route. Overrides the global `defaultErrorElement` set in `Router` |
 | `staleTime` | `number` | Time in ms before cached data is considered stale and re-fetched in the background. If not provided, data never expires (cached forever) |
 | `actions` | `({ params, context, invalidate, setContext }) => Record<string, (formData: FormData) => unknown \| Promise<unknown>>` | Defines route actions for data mutations. Actions receive `FormData`, can update context via `setContext`, and can refresh loader data using the router-provided `invalidate`. |
 
-
-### `RouterProvider`
-
-The root component that provides routing context to the application. Place static UI elements (like navbar or footer) outside `<Router />` to prevent unnecessary re-renders.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `routes` | `RouteItem[]` | required | Array of route configurations |
-| `children` | `ReactNode` | required | App content (must include `<Router />`) |
-
-```tsx
-function App() {
-  return (
-    <RouterProvider routeList={routes}>
-      <Navbar />          							   {/* Static */}
-      <main>
-        <Router isAnimated animationDuration={800} />  {/* Dynamic — renders current page */}
-      </main>
-      <Footer />         							   {/* Static */}
-    </RouterProvider>
-  );
-}
-```
-
 ### `Router`
 
-Renders the current route's component. Must be placed inside `<RouterProvider>`.
-
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `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) |
+| `defaultLoaderFallback` | `ReactElement \| () => ReactElement` | `optional` | Default loading fallback for every route loader |
+| `defaultErrorElement` | `ReactElement \| () => ReactElement` | `optional` | Default error fallback for every route |
 | `spinner` | `boolean \| undefined` | `true` | Show a small spinner in the corner while loading data (only when `isAnimated` is enabled) |
 | `preserveScroll` | `boolean \| undefined` | `true` | Save and restore scroll position when navigating between pages |
 | `showFallbackOnAnimation` | `boolean \| undefined` | `false` | Show `loaderFallback` even when `isAnimated` is `true` (instead of spinner) |
@@ -90,10 +73,10 @@ Renders the current route's component. Must be placed inside `<RouterProvider>`.
 | `errorBoundary` | `ComponentType<{ children: ReactNode }>` | `undefined` | Custom error boundary component for catching render errors in route components |
 
 ```tsx
-<RouterProvider routes={routes}>
+<div>
   <Navbar />
-  <Router spinner={false} isAnimated />  {/* disable the spinner */}
-</RouterProvider>
+  <Router routes={routes} spinner={false} isAnimated />  {/* disable the spinner */}
+</div>
 ```
 
 > **Note:** When `isAnimated` is enabled, `loaderFallback` is not shown. Instead, a small spinner appears (if `spinner={true}`). On the initial page load, however, the route's loaderFallback is rendered if available.
@@ -121,12 +104,10 @@ Component for client-side navigation with prefetch support.
 **Example:**
 
 ```tsx
-import { RouterProvider, Router, Link } from 'clear-react-router';
+import { Router, Link } from 'clear-react-router';
 
 // Global prefetch: hover with 100ms delay
-<RouterProvider routes={routes} prefetch="hover" hoverPrefetchDelay={100}>
-  <Router />
-</RouterProvider>
+<Router routes={routes} prefetch="hover" hoverPrefetchDelay={100} />
 
 // Override for a specific link
 <Link to="/heavy-page" prefetch="viewport">
@@ -334,15 +315,11 @@ This hook is useful when the mutation is triggered programmatically, such as fro
 You can provide a custom error boundary to catch rendering errors in route components. This is useful for preventing the entire app from crashing when a specific route fails to render.
 
 ```tsx
-import { RouterProvider, Router } from 'clear-react-router';
+import { Router } from 'clear-react-router';
 import { routes } from './routes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 
-const App = () => (
-    <RouterProvider routes={routes}>
-      <Router errorBoundary={ErrorBoundary} />
-    </RouterProvider>
-  );
+const App = () => <Router routes={routes} errorBoundary={ErrorBoundary} />
 ```
 **Note:** The `errorBoundary` prop only catches render-time errors in route components. It does not catch errors in `loader` or `beforeLoad` — those are handled by the router's `errorElement` mechanism.
 

package/dist/components/Router.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types/global';
-export declare const Router: ({ isAnimated, animationDuration, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Router: ({ routes, animationDuration, isAnimated, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -1,7 +1,5 @@
 import { RouterProps } from '../types/global';
 declare class RouterConfig {
-    isAnimated: boolean;
-    showFallbackOnAnimation: boolean;
     prefetch: RouterProps['prefetch'];
     hoverPrefetchDelay: number;
     configure(config: Partial<RouterConfig>): void;

package/dist/hooks/useNavigation.d.ts

@@ -8,6 +8,8 @@ type UseHandleNavigation = {
         pathname: string;
     }): boolean;
     loaderStateRef: RefObject<LoaderState>;
+    isAnimated: boolean;
+    showFallbackOnAnimation: boolean;
 };
-export declare const useNavigation: ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef }: UseHandleNavigation) => (nextLocation: Location) => Promise<void>;
+export declare const useNavigation: ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef, isAnimated, showFallbackOnAnimation: showFallback, }: UseHandleNavigation) => (nextLocation: Location) => Promise<void>;
 export {};

package/dist/hooks/useRuntime.d.ts

@@ -0,0 +1,5 @@
+export declare const useRuntime: () => {
+    updateLocation: (route: import("..").Location) => Promise<void>;
+    prefetchLoader: (arg: string) => Promise<void>;
+    invalidate: (path?: string) => Promise<void>;
+};

package/dist/hooks/useSetRouterConfig.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types/global';
-export declare const useSetRouterConfig: (routerProps: RouterProps) => void;
+export declare const useSetRouterConfig: (routerProps: Omit<RouterProps, "routes">) => void;

package/dist/hooks/useSetRuntime.d.ts

@@ -0,0 +1,7 @@
+type UseSetRuntime = {
+    updateLocation(arg: Location): Promise<void>;
+    prefetchLoader(arg: string): Promise<void>;
+    invalidate(arg?: string): Promise<void>;
+};
+export declare const useSetRouterRuntime: ({ updateLocation, prefetchLoader, invalidate }: UseSetRuntime) => void;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export { RouterProvider } from './components/RouterProvider';
 export { Router } from './components/Router';
 export { Link } from './components/Link';
 export { Form } from './components/Form';

package/dist/index.js

@@ -2,67 +2,6 @@ import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useM
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 //#endregion
-//#region context/RouterProviderContext.ts
-var ActionsContext = createContext({});
-//#endregion
-//#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
-/**
-* @license React
-* react-jsx-runtime.production.js
-*
-* Copyright (c) Meta Platforms, Inc. and affiliates.
-*
-* This source code is licensed under the MIT license found in the
-* 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"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-		var key = null;
-		void 0 !== maybeKey && (key = "" + maybeKey);
-		void 0 !== config.key && (key = "" + config.key);
-		if ("key" in config) {
-			maybeKey = {};
-			for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
-		} else maybeKey = config;
-		config = maybeKey.ref;
-		return {
-			$$typeof: REACT_ELEMENT_TYPE,
-			type,
-			key,
-			ref: void 0 !== config ? config : null,
-			props: maybeKey
-		};
-	}
-	exports.Fragment = REACT_FRAGMENT_TYPE;
-	exports.jsx = jsxProd;
-	exports.jsxs = jsxProd;
-}));
-//#endregion
-//#region provider/Provider.tsx
-var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
-	module.exports = require_react_jsx_runtime_production();
-})))();
-var Provider = ({ children, updateLocation, prefetchLoader, invalidate }) => {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
-		value: {
-			updateLocation,
-			prefetchLoader,
-			invalidate
-		},
-		children
-	});
-};
-//#endregion
-//#region hooks/useLatest.ts
-var useLatest = (value) => {
-	const ref = useRef(value);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref;
-};
-//#endregion
 //#region state/createState.ts
 var create = (initialState) => {
 	let state = initialState;
@@ -111,60 +50,55 @@ var useRouteItemData = createState({
 var useCurrentLoaderState = createState(emptyLoaderState);
 var useScrollMap = createState({});
 var useContextState = createState({});
+var useActionState = createState({});
 //#endregion
-//#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) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-//#endregion
-//#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];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-//#endregion
-//#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.133.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
+//#region hooks/useLatest.ts
+var useLatest = (value) => {
+	const ref = useRef(value);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref;
+};
 //#endregion
-//#region config/routerConfig.ts
-var RouterConfig = class {
-	constructor() {
-		_defineProperty(this, "isAnimated", false);
-		_defineProperty(this, "showFallbackOnAnimation", false);
-		_defineProperty(this, "prefetch", "hover");
-		_defineProperty(this, "hoverPrefetchDelay", 150);
-	}
-	configure(config) {
-		Object.assign(this, config);
+//#region ../../node_modules/react/cjs/react-jsx-runtime.production.js
+/**
+* @license React
+* react-jsx-runtime.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* 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"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+		var key = null;
+		void 0 !== maybeKey && (key = "" + maybeKey);
+		void 0 !== config.key && (key = "" + config.key);
+		if ("key" in config) {
+			maybeKey = {};
+			for (var propName in config) "key" !== propName && (maybeKey[propName] = config[propName]);
+		} else maybeKey = config;
+		config = maybeKey.ref;
+		return {
+			$$typeof: REACT_ELEMENT_TYPE,
+			type,
+			key,
+			ref: void 0 !== config ? config : null,
+			props: maybeKey
+		};
 	}
-};
-var routerConfig = new RouterConfig();
+	exports.Fragment = REACT_FRAGMENT_TYPE;
+	exports.jsx = jsxProd;
+	exports.jsxs = jsxProd;
+}));
 //#endregion
 //#region utils/createLazyComponent.tsx
+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, {
@@ -215,9 +149,125 @@ var comparePaths = (el, pathname) => {
 	return splitElementPath.every((item, index) => item === splitPathname[index + (index ? 1 : 0)]) && splitPathname.length === splitElementPath.length + paramsLength;
 };
 //#endregion
+//#region hooks/useLoader.ts
+var useLoader = (routes) => {
+	const [, setLoaderState] = useCurrentLoaderState();
+	const [routeItemData] = useRouteItemData();
+	const [context, setContext] = useContextState();
+	const loaderStateRef = useRef(emptyLoaderState);
+	const latestPathname = useLatest(routeItemData.location.pathname);
+	const timestampMapRef = useRef(/* @__PURE__ */ new Map());
+	const loaderMapRef = useRef({});
+	const loadingPromises = useRef(/* @__PURE__ */ new Map());
+	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
+		if (!routeItem) return true;
+		const currentCacheTimestamp = timestampMapRef.current.get(pathname);
+		if (!currentCacheTimestamp) return false;
+		if (!routeItem.staleTime) return true;
+		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
+	}, []);
+	const revalidateCache = useCallback(async ({ routeItem, pathname }) => {
+		if (!routeItem?.loader) return;
+		if (loadingPromises.current.has(pathname)) return loadingPromises.current.get(pathname);
+		if (isCacheItemFresh({
+			routeItem,
+			pathname
+		})) {
+			loaderStateRef.current = loaderMapRef.current[pathname];
+			return;
+		}
+		const promise = (async () => {
+			if (!routeItem?.loader) return;
+			try {
+				const params = getParamsObject({
+					params: routeItem.params,
+					pathname
+				});
+				const result = await routeItem?.loader({
+					params,
+					context,
+					setContext
+				});
+				timestampMapRef.current.set(pathname, Date.now());
+				loaderStateRef.current = {
+					...loaderStateRef?.current,
+					data: result,
+					loaderError: null
+				};
+				loaderMapRef.current[pathname] = loaderStateRef.current;
+			} catch (error) {
+				loaderStateRef.current = {
+					...loaderStateRef?.current,
+					data: null,
+					loaderError: error
+				};
+			} finally {
+				loadingPromises.current.delete(pathname);
+			}
+		})();
+		loadingPromises.current.set(pathname, promise);
+		return promise;
+	}, [
+		context,
+		isCacheItemFresh,
+		setContext
+	]);
+	return {
+		prefetchLoader: useCallback(async (pathname) => {
+			const item = routes.find((el) => comparePaths(el, pathname));
+			if (item) await revalidateCache({
+				routeItem: item,
+				pathname
+			});
+		}, [revalidateCache, routes]),
+		revalidateCache,
+		isCacheItemFresh,
+		loaderStateRef,
+		invalidate: useCallback(async (pathname = latestPathname.current) => {
+			if (typeof pathname !== "string") return;
+			const routeItem = routes.find((el) => comparePaths(el, pathname));
+			const resultParams = getParamsObject({
+				params: routeItem?.params,
+				pathname
+			});
+			timestampMapRef.current.delete(pathname);
+			try {
+				if (routeItem?.beforeLoad) await routeItem.beforeLoad({
+					context,
+					redirect: () => Promise.resolve(),
+					params: resultParams,
+					setContext
+				});
+				loaderStateRef.current = {
+					...loaderStateRef.current,
+					beforeLoadError: null
+				};
+			} catch (error) {
+				loaderStateRef.current = {
+					...loaderStateRef.current,
+					beforeLoadError: error
+				};
+			}
+			await revalidateCache({
+				routeItem,
+				pathname
+			});
+			if (pathname === latestPathname.current) setLoaderState(loaderStateRef.current);
+		}, [
+			context,
+			loaderStateRef,
+			revalidateCache,
+			latestPathname,
+			routes,
+			setContext,
+			setLoaderState
+		])
+	};
+};
+//#endregion
 //#region hooks/useNavigation.ts
 var ALL_LOCATIONS = "*";
-var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef }) => {
+var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef, isAnimated, showFallbackOnAnimation: showFallback }) => {
 	const [, setIsLoading] = useIsLoading();
 	const [, setScrollMap] = useScrollMap();
 	const [, setRouteItemData] = useRouteItemData();
@@ -225,7 +275,6 @@ var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef
 	const [, setCurrentLoaderFallback] = useLoaderFallback();
 	const [context, setContext] = useContextState();
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
 	const prevPathname = useRef("");
 	const navigationSeq = useRef(0);
 	const navigation = useCallback((nextLocation, routeItem) => {
@@ -248,7 +297,7 @@ var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef
 		setRouteItemData
 	]);
 	const transitionedNavigation = useCallback((nextLocation, routeItem) => {
-		if (!isAnimated) {
+		if (!isAnimated || !prevPathname.current) {
 			navigation(nextLocation, routeItem);
 			return;
 		}
@@ -357,136 +406,21 @@ var useNavigation = ({ routes, revalidateCache, isCacheItemFresh, loaderStateRef
 	return updateLocation;
 };
 //#endregion
-//#region hooks/useLoader.ts
-var useLoader = (routes) => {
-	const [, setLoaderState] = useCurrentLoaderState();
-	const [routeItemData] = useRouteItemData();
-	const [context, setContext] = useContextState();
-	const loaderStateRef = useRef(emptyLoaderState);
-	const latestPathname = useLatest(routeItemData.location.pathname);
-	const timestampMapRef = useRef(/* @__PURE__ */ new Map());
-	const loaderMapRef = useRef({});
-	const loadingPromises = useRef(/* @__PURE__ */ new Map());
-	const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
-		if (!routeItem) return true;
-		const currentCacheTimestamp = timestampMapRef.current.get(pathname);
-		if (!currentCacheTimestamp) return false;
-		if (!routeItem.staleTime) return true;
-		return Date.now() - currentCacheTimestamp < routeItem.staleTime;
-	}, []);
-	const revalidateCache = useCallback(async ({ routeItem, pathname }) => {
-		if (!routeItem?.loader) return;
-		if (loadingPromises.current.has(pathname)) return loadingPromises.current.get(pathname);
-		if (isCacheItemFresh({
-			routeItem,
-			pathname
-		})) {
-			loaderStateRef.current = loaderMapRef.current[pathname];
-			return;
-		}
-		const promise = (async () => {
-			if (!routeItem?.loader) return;
-			try {
-				const params = getParamsObject({
-					params: routeItem.params,
-					pathname
-				});
-				const result = await routeItem?.loader({
-					params,
-					context,
-					setContext
-				});
-				timestampMapRef.current.set(pathname, Date.now());
-				loaderStateRef.current = {
-					...loaderStateRef?.current,
-					data: result,
-					loaderError: null
-				};
-				loaderMapRef.current[pathname] = loaderStateRef.current;
-			} catch (error) {
-				loaderStateRef.current = {
-					...loaderStateRef?.current,
-					data: null,
-					loaderError: error
-				};
-			} finally {
-				loadingPromises.current.delete(pathname);
-			}
-		})();
-		loadingPromises.current.set(pathname, promise);
-		return promise;
+//#region hooks/useSetRuntime.ts
+var useSetRouterRuntime = ({ updateLocation, prefetchLoader, invalidate }) => {
+	const [, setCallbackState] = useActionState();
+	useEffect(() => {
+		setCallbackState({
+			updateLocation,
+			prefetchLoader,
+			invalidate
+		});
 	}, [
-		context,
-		isCacheItemFresh,
-		setContext
-	]);
-	return {
-		prefetchLoader: useCallback(async (pathname) => {
-			const item = routes.find((el) => comparePaths(el, pathname));
-			if (item) await revalidateCache({
-				routeItem: item,
-				pathname
-			});
-		}, [revalidateCache, routes]),
-		revalidateCache,
-		isCacheItemFresh,
-		loaderStateRef,
-		invalidate: useCallback(async (pathname = latestPathname.current) => {
-			if (typeof pathname !== "string") return;
-			const routeItem = routes.find((el) => comparePaths(el, pathname));
-			const resultParams = getParamsObject({
-				params: routeItem?.params,
-				pathname
-			});
-			timestampMapRef.current.delete(pathname);
-			try {
-				if (routeItem?.beforeLoad) await routeItem.beforeLoad({
-					context,
-					redirect: () => Promise.resolve(),
-					params: resultParams,
-					setContext
-				});
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: null
-				};
-			} catch (error) {
-				loaderStateRef.current = {
-					...loaderStateRef.current,
-					beforeLoadError: error
-				};
-			}
-			await revalidateCache({
-				routeItem,
-				pathname
-			});
-			if (pathname === latestPathname.current) setLoaderState(loaderStateRef.current);
-		}, [
-			context,
-			loaderStateRef,
-			revalidateCache,
-			latestPathname,
-			routes,
-			setContext,
-			setLoaderState
-		])
-	};
-};
-//#endregion
-//#region components/RouterProvider.tsx
-var RouterProvider = ({ children, routes }) => {
-	const { prefetchLoader, revalidateCache, isCacheItemFresh, loaderStateRef, invalidate } = useLoader(routes);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
-		updateLocation: useNavigation({
-			routes,
-			revalidateCache,
-			isCacheItemFresh,
-			loaderStateRef
-		}),
 		invalidate,
 		prefetchLoader,
-		children
-	});
+		setCallbackState,
+		updateLocation
+	]);
 };
 //#endregion
 //#region hooks/useApplyCustomAnimation.ts
@@ -549,6 +483,56 @@ var usePreserveScroll = (preserveScroll) => {
 	]);
 };
 //#endregion
+//#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) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#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];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#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.133.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region config/routerConfig.ts
+var RouterConfig = class {
+	constructor() {
+		_defineProperty(this, "prefetch", "hover");
+		_defineProperty(this, "hoverPrefetchDelay", 150);
+	}
+	configure(config) {
+		Object.assign(this, config);
+	}
+};
+var routerConfig = new RouterConfig();
+//#endregion
 //#region hooks/useSetRouterConfig.ts
 var useSetRouterConfig = (routerProps) => {
 	useEffect(() => routerConfig.configure(routerProps), [routerProps]);
@@ -573,41 +557,61 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
-var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext }) => {
+var Router = ({ routes, animationDuration, isAnimated = false, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement }) => {
 	const [isLoading] = useIsLoading();
 	const [currentLoaderFallback] = useLoaderFallback();
 	const [routeItemData] = useRouteItemData();
 	const [loaderState] = useCurrentLoaderState();
-	usePreserveScroll(preserveScroll);
-	useApplyCustomAnimation(animationDuration);
+	const { prefetchLoader, revalidateCache, isCacheItemFresh, loaderStateRef, invalidate } = useLoader(routes);
+	useSetRouterRuntime({
+		updateLocation: useNavigation({
+			routes,
+			revalidateCache,
+			isCacheItemFresh,
+			loaderStateRef,
+			isAnimated,
+			showFallbackOnAnimation
+		}),
+		prefetchLoader,
+		invalidate
+	});
 	useSetRouterConfig({
 		isAnimated,
 		showFallbackOnAnimation,
 		prefetch,
 		hoverPrefetchDelay
 	});
+	useApplyCustomAnimation(animationDuration);
 	useSetInitialContext(initialContext);
+	usePreserveScroll(preserveScroll);
 	const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
 	const showSpinner = spinner && isAnimated && isLoading;
 	const loadingContent = !showErrorElement && isLoading;
 	const { routeItem, location } = routeItemData;
-	if ((showFallbackOnAnimation || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback);
+	if ((showFallbackOnAnimation || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback || defaultLoaderFallback);
 	if (!showFallbackOnAnimation && isAnimated && loadingContent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {});
 	if (!routeItem) return null;
-	if (showErrorElement) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [renderElement(routeItem.errorElement), showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})] });
+	if (showErrorElement) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [renderElement(routeItem.errorElement || defaultErrorElement), showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})] });
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		style: { viewTransitionName: "page" },
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBoundary, { children: renderElement(routeItem.element) }, location.pathname), showSpinner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})]
 	});
 };
 //#endregion
-//#region hooks/useServiceContext.ts
-var useServiceState = (reactContext) => {
-	const context = useContext(reactContext);
-	if (!Object.keys(context).length) throw new Error("hooks and Router component must be used within RouterProvider");
-	return context;
+//#region hooks/useRuntime.ts
+var useRuntime = () => {
+	const [callbackState] = useActionState();
+	const { updateLocation, prefetchLoader, invalidate } = callbackState;
+	return useMemo(() => ({
+		updateLocation,
+		prefetchLoader,
+		invalidate
+	}), [
+		updateLocation,
+		prefetchLoader,
+		invalidate
+	]);
 };
-var useRouterActions = () => useServiceState(ActionsContext);
 //#endregion
 //#region hooks/useLocation.ts
 var useLocation = () => {
@@ -618,10 +622,11 @@ var useLocation = () => {
 //#region hooks/useNavigate.ts
 var useNavigate = () => {
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const { updateLocation } = useRouterActions();
+	const { updateLocation } = useRuntime();
 	const locationRef = useLatest(useLocation());
 	const blockedRouteRef = useLatest(blockedRoute);
 	return useCallback(async (arg) => {
+		if (!updateLocation) throw new Error("Router has not been initialized. Did you forget to render <Router />?");
 		if (arg !== -1 && blockedRouteRef.current.from) {
 			const to = typeof arg === "object" ? arg.pathname : arg;
 			setBlockedRoute((prevState) => ({
@@ -647,7 +652,7 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
 	const prefetch = prefetchLink || configPrefetch;
 	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
-	const { prefetchLoader } = useRouterActions();
+	const { prefetchLoader } = useRuntime();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
 	const ref = useRef(null);
@@ -715,7 +720,7 @@ var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_js
 //#endregion
 //#region hooks/useInvalidate.ts
 var useInvalidate = () => {
-	const { invalidate } = useRouterActions();
+	const { invalidate } = useRuntime();
 	return invalidate;
 };
 //#endregion
@@ -788,7 +793,7 @@ var useLoaderState = () => {
 //#region hooks/useBlocker.ts
 var useBlocker = (blockerFn) => {
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
-	const { updateLocation } = useRouterActions();
+	const { updateLocation } = useRuntime();
 	const [routeItemData] = useRouteItemData();
 	const { location: { pathname } } = routeItemData;
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -1009,4 +1014,4 @@ var adapter = {
 	})
 };
 //#endregion
-export { Form, Link, Router, RouterProvider, adapter, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };
+export { Form, Link, Router, adapter, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };

package/dist/state/state.d.ts

@@ -1,4 +1,9 @@
-import { LoaderState, RouteItemData } from '../types/global';
+import { LoaderState, Location, RouteItemData } from '../types/global';
+type Runtime = {
+    updateLocation(route: Location): Promise<void>;
+    prefetchLoader(arg: string): Promise<void>;
+    invalidate(path?: string): Promise<void>;
+};
 export declare const useIsLoading: () => readonly [boolean, (action: boolean | ((prevState: boolean) => boolean)) => void];
 export declare const useBlockedRoute: () => readonly [{
     from: string;
@@ -18,3 +23,5 @@ export declare const useRouteItemData: () => readonly [RouteItemData, (action: R
 export declare const useCurrentLoaderState: () => readonly [LoaderState, (action: LoaderState | ((prevState: LoaderState) => LoaderState)) => void];
 export declare const useScrollMap: () => readonly [Record<string, number>, (action: Record<string, number> | ((prevState: Record<string, number>) => Record<string, number>)) => void];
 export declare const useContextState: () => readonly [Record<string, unknown>, (action: Record<string, unknown> | ((prevState: Record<string, unknown>) => Record<string, unknown>)) => void];
+export declare const useActionState: () => readonly [Runtime, (action: Runtime | ((prevState: Runtime) => Runtime)) => void];
+export {};

package/dist/types/global.d.ts

@@ -66,10 +66,13 @@ export type RouteItemData = {
     routeItem: RouteItem | undefined;
 };
 export type RouterProps = {
+    routes: RouteItem[];
     isAnimated?: boolean;
     animationDuration?: number;
     spinner?: boolean;
     preserveScroll?: boolean;
+    defaultLoaderFallback?: Element;
+    defaultErrorElement?: Element;
     showFallbackOnAnimation?: boolean;
     prefetch?: 'hover' | 'render' | 'viewport' | 'none';
     hoverPrefetchDelay?: number;

package/package.json

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

package/dist/components/RouterProvider.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import { RouteItem } from '../types/global';
-type RouteProviderProps = {
-    children: ReactNode;
-    routes: RouteItem[];
-};
-export declare const RouterProvider: ({ children, routes }: RouteProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/context/RouterProviderContext.d.ts

@@ -1,7 +0,0 @@
-import { Location } from '../types/global';
-export type ActionsContextValue = {
-    updateLocation(route: Location): Promise<void>;
-    prefetchLoader(arg: string): Promise<void>;
-    invalidate(path?: string): Promise<void>;
-};
-export declare const ActionsContext: import("react").Context<ActionsContextValue>;

package/dist/hooks/useServiceContext.d.ts

@@ -1 +0,0 @@
-export declare const useRouterActions: () => import("../context/RouterProviderContext").ActionsContextValue;

package/dist/provider/Provider.d.ts

@@ -1,7 +0,0 @@
-import { type ReactNode } from 'react';
-import { type ActionsContextValue } from '../context/RouterProviderContext';
-type ProviderProps = ActionsContextValue & {
-    children: ReactNode;
-};
-export declare const Provider: ({ children, updateLocation, prefetchLoader, invalidate }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};