clear-react-router 1.0.16 → 1.0.18

package/dist/index.js

@@ -1,440 +1,438 @@
-import { Suspense as e, createContext as t, lazy as n, useCallback as r, useContext as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 //#region \0rolldown/runtime.js
-var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), d = t({}), f = t({}), p = t({}), m = /* @__PURE__ */ l(((e) => {
-	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-	function r(e, n, r) {
-		var i = null;
-		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
-		else r = n;
-		return n = r.ref, {
-			$$typeof: t,
-			type: e,
-			key: i,
-			ref: n === void 0 ? null : n,
-			props: r
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+//#endregion
+//#region context/RouterContext.ts
+var ActionsContext = createContext({});
+var DataContext = createContext({});
+var NavigationContext = 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");
+	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
 		};
 	}
-	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), h = /* @__PURE__ */ l(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e) {
-			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
-			if (typeof e == "string") return e;
-			switch (e) {
-				case v: return "Fragment";
-				case b: return "Profiler";
-				case y: return "StrictMode";
-				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case O: return "Activity";
-			}
-			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
-				case _: return "Portal";
-				case S: return e.displayName || "Context";
-				case x: return (e._context.displayName || "Context") + ".Consumer";
-				case C:
-					var n = e.render;
-					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
-					n = e._payload, e = e._init;
-					try {
-						return t(e(n));
-					} catch {}
-			}
-			return null;
-		}
-		function n(e) {
-			return "" + e;
-		}
-		function r(e) {
-			try {
-				n(e);
-				var t = !1;
-			} catch {
-				t = !0;
-			}
-			if (t) {
-				t = console;
-				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
-			}
-		}
-		function i(e) {
-			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
-			try {
-				var n = t(e);
-				return n ? "<" + n + ">" : "<...>";
-			} catch {
-				return "<...>";
-			}
-		}
-		function a() {
-			var e = A.A;
-			return e === null ? null : e.getOwner();
-		}
-		function o() {
-			return Error("react-stack-top-frame");
-		}
-		function s(e) {
-			if (j.call(e, "key")) {
-				var t = Object.getOwnPropertyDescriptor(e, "key").get;
-				if (t && t.isReactWarning) return !1;
-			}
-			return e.key !== void 0;
-		}
-		function c(e, t) {
-			function n() {
-				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
-			}
-			n.isReactWarning = !0, Object.defineProperty(e, "key", {
-				get: n,
-				configurable: !0
-			});
-		}
-		function l() {
-			var e = t(this.type);
-			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
-		}
-		function d(e, t, n, r, i, a) {
-			var o = n.ref;
-			return e = {
-				$$typeof: g,
-				type: e,
-				key: t,
-				props: n,
-				_owner: r
-			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				value: null
-			}) : Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				get: l
-			}), e._store = {}, Object.defineProperty(e._store, "validated", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: 0
-			}), Object.defineProperty(e, "_debugInfo", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: null
-			}), Object.defineProperty(e, "_debugStack", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: i
-			}), Object.defineProperty(e, "_debugTask", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: a
-			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-		}
-		function f(e, n, i, o, l, u) {
-			var f = n.children;
-			if (f !== void 0) if (o) if (M(f)) {
-				for (o = 0; o < f.length; o++) p(f[o]);
-				Object.freeze && Object.freeze(f);
-			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-			else p(f);
-			if (j.call(n, "key")) {
-				f = t(e);
-				var m = Object.keys(n).filter(function(e) {
-					return e !== "key";
-				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
-			}
-			if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
-			else i = n;
-			return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), l, u);
-		}
-		function p(e) {
-			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-		}
-		function m(e) {
-			return typeof e == "object" && !!e && e.$$typeof === g;
-		}
-		var h = u("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
-			return null;
-		};
-		h = { react_stack_bottom_frame: function(e) {
-			return e();
-		} };
-		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, o)(), L = N(i(o)), R = {};
-		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
-		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
-		};
-	})();
-})), g = (/* @__PURE__ */ l(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = m() : t.exports = h();
-})))(), _ = ({ children: e, setContext: t, context: n, updateBlockedRoute: r, updateLocation: i, location: a, params: o, prefetchLoader: s, loaderCache: c, blockerState: l }) => /* @__PURE__ */ (0, g.jsx)(d.Provider, {
-	value: {
-		updateLocation: i,
-		updateBlockedRoute: r,
-		prefetchLoader: s,
-		setContext: t
-	},
-	children: /* @__PURE__ */ (0, g.jsx)(f.Provider, {
+	exports.jsx = jsxProd;
+}));
+//#endregion
+//#region provider/RouterProvider.tsx
+var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = require_react_jsx_runtime_production();
+})))();
+var RouterProvider = ({ children, setContext, context, updateBlockedRoute, updateLocation, location, params, prefetchLoader, loaderCache, blockerState }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
 		value: {
-			context: n,
-			loaderCache: c
+			updateLocation,
+			updateBlockedRoute,
+			prefetchLoader,
+			setContext
 		},
-		children: /* @__PURE__ */ (0, g.jsx)(p.Provider, {
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataContext.Provider, {
 			value: {
-				blockerState: l,
-				params: o,
-				location: a
+				context,
+				loaderCache
 			},
-			children: e
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
+				value: {
+					blockerState,
+					params,
+					location
+				},
+				children
+			})
 		})
-	})
-}), v = (t, r) => {
-	let i = n(() => t().then((e) => ({ default: e.default || e })));
-	return () => /* @__PURE__ */ (0, g.jsx)(e, {
-		fallback: typeof r == "function" ? r() : r || null,
-		children: /* @__PURE__ */ (0, g.jsx)(i, {})
 	});
-}, y = (e) => typeof e.element == "function" && e.element.toString().includes("import("), b = (e, t = [], n = "") => {
-	let r = e.path.match(/:[^/]+/g), i = e.path.replaceAll(/:[^/]+(\/|$)/g, "").split("/").filter(Boolean), a = e.path.split("/"), o = r ? [...t, ...r.map((e, t) => ({
-		key: i[t],
-		value: e.slice(1)
-	}))] : t, s = o.length ? `${n}${a.slice(0, a.length - 1).join("/")}` : e.path, c = y(e) ? v(e.element, e.fallback) : e.element;
+};
+//#endregion
+//#region utils/createLazyComponent.tsx
+var createLazyComponent = (importFn, fallback) => {
+	const LazyComp = lazy(() => importFn().then((module) => ({ default: module.default || module })));
+	return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Suspense, {
+		fallback: typeof fallback === "function" ? fallback() : fallback || null,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazyComp, {})
+	});
+};
+//#endregion
+//#region utils/utils.ts
+var isLazy = (el) => typeof el.element === "function" && el.element.toString().includes("import(");
+var parseClientRouteItem = (el, parentParams = [], parentPath = "") => {
+	const currentParamsList = el.path.match(/:[^/]+/g);
+	const normalizedSplitPath = el.path.replaceAll(/:[^/]+(\/|$)/g, "").split("/").filter(Boolean);
+	const splitPath = el.path.split("/");
+	const currentParams = currentParamsList ? [...parentParams, ...currentParamsList.map((param, index) => ({
+		key: normalizedSplitPath[index],
+		value: param.slice(1)
+	}))] : parentParams;
+	const path = currentParams.length ? `${parentPath}${splitPath.slice(0, splitPath.length - 1).join("/")}` : el.path;
+	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback) : el.element;
 	return [{
-		...e,
-		path: s,
-		params: o,
-		element: c
-	}, ...e.children?.flatMap((e) => b(e, o, s)) || []];
-}, x = (e) => e.flatMap((e) => b(e, [])), S = (e) => {
-	let { pathname: t } = window.location, n = t.split("/");
-	return (e || []).map((e) => ({
-		index: n.findIndex((t) => t === e.key),
-		value: e.value
-	})).reduce((e, t) => ({
-		...e,
-		[t.value]: n[t.index + 1]
+		...el,
+		path,
+		params: currentParams,
+		element: resolvedElement
+	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, currentParams, path)) || []];
+};
+var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el, []));
+var getParamsObject = (params) => {
+	const { pathname } = window.location;
+	const split = pathname.split("/");
+	return (params || []).map((el) => ({
+		index: split.findIndex((item) => item === el.key),
+		value: el.value
+	})).reduce((acc, cur) => ({
+		...acc,
+		[cur.value]: split[cur.index + 1]
 	}), {});
-}, C = (e) => ({
-	pathname: e.pathname,
-	search: e.search
-}), w = (e, t) => {
-	let n = e.path.split("/").filter(Boolean), r = e.params ? Object.keys(e.params).length : 0, i = t.split("/").filter(Boolean);
-	return n.every((e, t) => e === i[t + +!!t]) && i.length === n.length + r;
-}, T = (e) => {
-	let t = s(e);
-	return a(() => {
-		t.current = e;
-	}, [e]), t;
-}, E = (e) => typeof e == "object" && !!e && e.cause === "redirect", D = ({ setLocation: e, routeList: t, context: n, revalidateCache: i }) => {
-	let [l, u] = c({
+};
+var parseWindowLocation = (location) => ({
+	pathname: location.pathname,
+	search: location.search
+});
+var comparePaths = (el, pathname) => {
+	const splitElementPath = el.path.split("/").filter(Boolean);
+	const paramsLength = el.params ? Object.keys(el.params).length : 0;
+	const splitPathname = pathname.split("/").filter(Boolean);
+	return splitElementPath.every((item, index) => item === splitPathname[index + (index ? 1 : 0)]) && splitPathname.length === splitElementPath.length + paramsLength;
+};
+//#endregion
+//#region hooks/useLatest.ts
+var useLatest = (value) => {
+	const ref = useRef(value);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref;
+};
+//#endregion
+//#region hooks/useHandleNavigation.ts
+var isRedirect = (error) => typeof error === "object" && error !== null && error.cause === "redirect";
+var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache }) => {
+	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
-	}), d = s(""), f = T(r(async (r) => {
+	});
+	const prevPathname = useRef("");
+	const setNextLocationRef = useLatest(useCallback(async (nextLocation) => {
 		try {
-			let a = t.find((e) => w(e, r.pathname));
-			console.log("before beforeLoad execution", a), a?.beforeLoad && await a?.beforeLoad(n), console.log("after beforeLoad execution", a), e(r), r.pathname !== window.location.pathname && (history.pushState(null, "", r.pathname), d.current = r.pathname), await i(a), a?.afterLoad && await a?.afterLoad(n);
-		} catch (t) {
-			console.log("redirect caught", t);
-			let n = t;
-			if (!E(n)) return n;
-			console.log("redirect after type guard"), history.replaceState(null, "", n.url), e({
-				pathname: n.url,
-				search: n.search
+			const nextItem = routeList.find((el) => comparePaths(el, nextLocation.pathname));
+			if (nextItem?.beforeLoad) await nextItem?.beforeLoad(context);
+			setLocation(nextLocation);
+			if (nextLocation.pathname !== window.location.pathname) {
+				history.pushState(null, "", nextLocation.pathname);
+				prevPathname.current = nextLocation.pathname;
+			}
+			await revalidateCache(nextItem);
+			if (nextItem?.afterLoad) await nextItem?.afterLoad(context);
+		} catch (error) {
+			const redirect = error;
+			if (!isRedirect(redirect)) return redirect;
+			history.replaceState(null, "", redirect.url);
+			setLocation({
+				pathname: redirect.url,
+				search: redirect.search
 			});
 		}
 	}, [
-		n,
-		i,
-		t,
-		e
-	])), p = r(({ type: e, payload: t = "" }) => u((n) => n.from === t && e === "charge" ? n : t && n.from !== t && e === "charge" ? {
-		...n,
-		from: t
-	} : e === "reset" ? {
-		...n,
-		to: ""
-	} : (e === "process" && f.current({ pathname: n.to }), !n.from && !n.to ? n : {
-		from: "",
-		to: ""
-	})), [f]), m = r(async (e) => {
-		l.from ? u((t) => ({
-			...t,
-			to: e.pathname
-		})) : await f.current(e);
-	}, [l.from, f]);
-	return a(() => {
-		let e = async (e) => {
-			let t = C(e.target.location);
-			d.current === l.from ? (u({
-				from: d.current,
-				to: t.pathname
-			}), history.replaceState(null, "", d.current)) : f.current(t);
+		context,
+		revalidateCache,
+		routeList,
+		setLocation
+	]));
+	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
+		if (prevState.from === payload && type === "charge") return prevState;
+		if (payload && prevState.from !== payload && type === "charge") return {
+			...prevState,
+			from: payload
 		};
-		return window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e);
-	}, [l.from, f]), a(() => {
-		let e = C(window.location);
-		f.current(e), d.current = e.pathname;
-	}, [f]), {
-		blockerState: o(() => l.from && l.to ? "blocked" : l.from ? "charged" : "unblocked", [l]),
-		updateLocation: m,
-		updateBlockedRoute: p
-	};
-}, O = (e) => {
-	let [t, n] = c({}), [i, a] = c(!1), [o, l] = c({}), u = s({}), d = r(({ key: e, value: t }) => n((n) => ({
-		...n,
-		[e]: t
-	})), []), f = r((e) => {
-		if (!e) return !0;
-		let t = u.current[e.path];
-		return !!(t && Date.now() - t < (e.staleTime || 0));
-	}, []), p = r(async (e) => {
-		if (e?.loader && !f(e)) {
-			l((t) => ({
-				...t,
-				[e.path]: !0
-			})), n((t) => Object.keys(t).filter((t) => t !== e.path).reduce((e, n) => ({
-				...e,
-				[n]: t[n]
-			}), {}));
-			try {
-				a(!1);
-				let t = await e?.loader();
-				u.current = {
-					...u.current,
-					[e.path]: Date.now()
-				}, d({
-					key: e.path,
-					value: t
+		if (type === "reset") return {
+			...prevState,
+			to: ""
+		};
+		if (type === "process") setNextLocationRef.current({ pathname: prevState.to });
+		if (!prevState.from && !prevState.to) return prevState;
+		return {
+			from: "",
+			to: ""
+		};
+	}), [setNextLocationRef]);
+	const updateLocation = useCallback(async (nextLocation) => {
+		if (blockedRoute.from) setBlockedRoute((prevState) => ({
+			...prevState,
+			to: nextLocation.pathname
+		}));
+		else await setNextLocationRef.current(nextLocation);
+	}, [blockedRoute.from, setNextLocationRef]);
+	useEffect(() => {
+		const handler = async (event) => {
+			const newLocation = parseWindowLocation(event.target.location);
+			if (prevPathname.current === blockedRoute.from) {
+				setBlockedRoute({
+					from: prevPathname.current,
+					to: newLocation.pathname
 				});
-			} catch {
-				a(!0);
-			} finally {
-				l((t) => ({
-					...t,
-					[e.path]: !1
-				}));
-			}
+				history.replaceState(null, "", prevPathname.current);
+			} else setNextLocationRef.current(newLocation);
+		};
+		window.addEventListener("popstate", handler);
+		return () => window.removeEventListener("popstate", handler);
+	}, [blockedRoute.from, setNextLocationRef]);
+	useEffect(() => {
+		const currentLocation = parseWindowLocation(window.location);
+		setNextLocationRef.current(currentLocation);
+		prevPathname.current = currentLocation.pathname;
+	}, [setNextLocationRef]);
+	return {
+		blockerState: useMemo(() => {
+			if (blockedRoute.from && blockedRoute.to) return "blocked";
+			if (blockedRoute.from) return "charged";
+			return "unblocked";
+		}, [blockedRoute]),
+		updateLocation,
+		updateBlockedRoute
+	};
+};
+//#endregion
+//#region hooks/useLoader.ts
+var useLoader = (routeList) => {
+	const [loaderCache, setLoaderCache] = useState({});
+	const [loaderError, setLoaderError] = useState(false);
+	const [isLoadingMap, setIsLoadingMap] = useState({});
+	const cacheTimestampsRef = useRef({});
+	const updateCache = useCallback(({ key, value }) => setLoaderCache((prevState) => ({
+		...prevState,
+		[key]: value
+	})), []);
+	const isCacheItemFresh = useCallback((routeItem) => {
+		if (!routeItem) return true;
+		const currentCacheTimestamp = cacheTimestampsRef.current[routeItem.path];
+		return Boolean(currentCacheTimestamp && Date.now() - currentCacheTimestamp < (routeItem.staleTime || 0));
+	}, []);
+	const revalidateCache = useCallback(async (routeItem) => {
+		if (!routeItem?.loader) return;
+		if (isCacheItemFresh(routeItem)) return;
+		setIsLoadingMap((prev) => ({
+			...prev,
+			[routeItem.path]: true
+		}));
+		setLoaderCache((prevState) => Object.keys(prevState).filter((el) => el !== routeItem.path).reduce((acc, cur) => ({
+			...acc,
+			[cur]: prevState[cur]
+		}), {}));
+		try {
+			setLoaderError(false);
+			const result = await routeItem?.loader();
+			cacheTimestampsRef.current = {
+				...cacheTimestampsRef.current,
+				[routeItem.path]: Date.now()
+			};
+			updateCache({
+				key: routeItem.path,
+				value: result
+			});
+		} catch {
+			setLoaderError(true);
+		} finally {
+			setIsLoadingMap((prev) => ({
+				...prev,
+				[routeItem.path]: false
+			}));
 		}
-	}, [f, d]), m = r(async (t) => {
-		let n = e.find((e) => w(e, t));
-		n && await p(n);
-	}, [p, e]);
+	}, [isCacheItemFresh, updateCache]);
+	const prefetchLoader = useCallback(async (pathname) => {
+		const item = routeList.find((el) => comparePaths(el, pathname));
+		if (item) await revalidateCache(item);
+	}, [revalidateCache, routeList]);
 	return {
-		loaderCache: t[window.location.pathname],
-		loaderError: i,
-		prefetchLoader: m,
-		revalidateCache: p,
-		isLoading: o[window.location.pathname]
+		loaderCache: loaderCache[window.location.pathname],
+		loaderError,
+		prefetchLoader,
+		revalidateCache,
+		isLoading: isLoadingMap[window.location.pathname]
 	};
-}, k = (e) => e ? typeof e == "function" ? /* @__PURE__ */ (0, g.jsx)(e, {}) : e : null, A = "error 404. Page not found", j = "*", M = ({ routeList: e, context: t = {} }) => {
-	let [n, r] = c(C(window.location)), [i, a] = c(t), s = o(() => e.find((e) => e.path === j || w(e, n.pathname)), [n.pathname, e]), { loaderError: l, loaderCache: u, prefetchLoader: d, revalidateCache: f, isLoading: p } = O(e), { blockerState: m, updateLocation: h, updateBlockedRoute: v } = D({
-		setLocation: r,
-		routeList: e,
-		context: i,
-		revalidateCache: f
-	}), y = o(() => s?.params ? S(s.params) : {}, [s]), b = o(() => ({
-		location: n,
-		updateLocation: h,
-		params: y,
-		loaderCache: u,
-		prefetchLoader: d,
-		updateBlockedRoute: v,
-		blockerState: m,
-		context: i,
-		setContext: a
+};
+//#endregion
+//#region utils/renderElement.tsx
+var renderElement = (Component) => {
+	if (!Component) return null;
+	return typeof Component === "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) : Component;
+};
+//#endregion
+//#region components/Router.tsx
+var PAGE_NOT_FOUND = "error 404. Page not found";
+var ALL_LOCATIONS = "*";
+var Router = ({ routeList, context: initialContext = {} }) => {
+	const [location, setLocation] = useState(parseWindowLocation(window.location));
+	const [context, setContext] = useState(initialContext);
+	const routeItem = useMemo(() => routeList.find((el) => el.path === ALL_LOCATIONS || comparePaths(el, location.pathname)), [location.pathname, routeList]);
+	const { loaderError, loaderCache, prefetchLoader, revalidateCache, isLoading } = useLoader(routeList);
+	const { blockerState, updateLocation, updateBlockedRoute } = useHandleNavigation({
+		setLocation,
+		routeList,
+		context,
+		revalidateCache
+	});
+	const params = useMemo(() => routeItem?.params ? getParamsObject(routeItem.params) : {}, [routeItem]);
+	const providerProps = useMemo(() => ({
+		location,
+		updateLocation,
+		params,
+		loaderCache,
+		prefetchLoader,
+		updateBlockedRoute,
+		blockerState,
+		context,
+		setContext
 	}), [
-		m,
-		u,
-		n,
-		y,
-		d,
-		i,
-		v,
-		h
+		blockerState,
+		loaderCache,
+		location,
+		params,
+		prefetchLoader,
+		context,
+		updateBlockedRoute,
+		updateLocation
 	]);
-	return s?.loader && !l && p ? /* @__PURE__ */ (0, g.jsx)(_, {
-		...b,
-		children: k(s?.loaderFallback)
-	}) : l ? /* @__PURE__ */ (0, g.jsx)(_, {
-		...b,
-		children: k(s?.errorElement)
-	}) : /* @__PURE__ */ (0, g.jsx)(_, {
-		...b,
-		children: k(s?.element) || A
+	if (routeItem?.loader && !loaderError && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, {
+		...providerProps,
+		children: renderElement(routeItem?.loaderFallback)
 	});
-}, N = () => {
-	let e = i(p);
-	if (!Object.keys(e).length) throw Error("useNavigationState must be used within Router component");
-	return e;
-}, P = () => {
-	let e = i(d);
-	if (!Object.keys(e).length) throw Error("useRouterActions must be used within Router component");
-	return e;
-}, F = () => {
-	let e = i(f);
-	if (!Object.keys(e).length) throw Error("useRouterData must be used within Router component");
-	return e;
-}, I = () => {
-	let { updateLocation: e } = P();
-	return r(async (t) => t === -1 ? history.go(-1) : await e(t), [e]);
-}, L = ({ children: e, to: t, prefetch: n = !0 }) => {
-	let { prefetchLoader: r } = P(), i = I();
-	return /* @__PURE__ */ (0, g.jsx)("a", {
+	if (loaderError) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, {
+		...providerProps,
+		children: renderElement(routeItem?.errorElement)
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, {
+		...providerProps,
+		children: renderElement(routeItem?.element) || PAGE_NOT_FOUND
+	});
+};
+//#endregion
+//#region hooks/useServiceContext.ts
+var useNavigationState = () => {
+	const context = useContext(NavigationContext);
+	if (!Object.keys(context).length) throw new Error("useNavigationState must be used within Router component");
+	return context;
+};
+var useRouterActions = () => {
+	const context = useContext(ActionsContext);
+	if (!Object.keys(context).length) throw new Error("useRouterActions must be used within Router component");
+	return context;
+};
+var useRouterData = () => {
+	const context = useContext(DataContext);
+	if (!Object.keys(context).length) throw new Error("useRouterData must be used within Router component");
+	return context;
+};
+//#endregion
+//#region hooks/useNavigate.ts
+var useNavigate = () => {
+	const { updateLocation } = useRouterActions();
+	return useCallback(async (arg) => arg === -1 ? history.go(-1) : await updateLocation(arg), [updateLocation]);
+};
+//#endregion
+//#region components/Link.tsx
+var Link = ({ children, to, prefetch = true }) => {
+	const { prefetchLoader } = useRouterActions();
+	const navigate = useNavigate();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		style: { cursor: "pointer" },
-		onClick: () => i({ pathname: t }),
-		onMouseOver: () => n && r(t),
-		children: e
+		onClick: () => navigate({ pathname: to }),
+		onMouseOver: () => prefetch && prefetchLoader(to),
+		children
 	});
-}, R = () => {
-	let { params: e } = N();
-	return e;
-}, z = () => N().location, B = () => {
-	let { loaderCache: e } = F();
-	return e;
-}, V = (e) => {
-	let { location: { pathname: t }, blockerState: n } = N(), { updateBlockedRoute: r } = P(), i = e();
-	return a(() => r(i ? {
+};
+//#endregion
+//#region hooks/useParams.ts
+var useParams = () => {
+	const { params } = useNavigationState();
+	return params;
+};
+//#endregion
+//#region hooks/useLocation.ts
+var useLocation = () => {
+	return useNavigationState().location;
+};
+//#endregion
+//#region hooks/useLoaderState.ts
+var useLoaderState = () => {
+	const { loaderCache } = useRouterData();
+	return loaderCache;
+};
+//#endregion
+//#region hooks/useBlocker.ts
+var useBlocker = (blockerFn) => {
+	const { location: { pathname }, blockerState } = useNavigationState();
+	const { updateBlockedRoute } = useRouterActions();
+	const shouldBlock = blockerFn();
+	useEffect(() => updateBlockedRoute(shouldBlock ? {
 		type: "charge",
-		payload: t
+		payload: pathname
 	} : { type: "unblock" }), [
-		i,
-		t,
-		r
-	]), {
-		state: n,
-		process: () => r({ type: "process" }),
-		reset: () => r({ type: "reset" })
+		shouldBlock,
+		pathname,
+		updateBlockedRoute
+	]);
+	return {
+		state: blockerState,
+		process: () => updateBlockedRoute({ type: "process" }),
+		reset: () => updateBlockedRoute({ type: "reset" })
 	};
-}, H = (e) => {
-	a(() => {
-		let t = (t) => {
-			e && (t.preventDefault(), e());
+};
+//#endregion
+//#region hooks/useBeforeUnload.ts
+var useBeforeUnload = (callback) => {
+	useEffect(() => {
+		const handler = (event) => {
+			if (!callback) return;
+			event.preventDefault();
+			callback();
 		};
-		return window.addEventListener("beforeunload", t), () => window.removeEventListener("beforeunload", t);
-	}, [e]);
-}, U = () => {
-	let { context: e } = F(), { setContext: t } = P();
+		window.addEventListener("beforeunload", handler);
+		return () => window.removeEventListener("beforeunload", handler);
+	}, [callback]);
+};
+//#endregion
+//#region hooks/useRouterContext.ts
+var useRouterContext = () => {
+	const { context } = useRouterData();
+	const { setContext } = useRouterActions();
 	return {
-		context: e,
-		setContext: t
+		context,
+		setContext
 	};
-}, W = (e, t) => {
-	let n = /* @__PURE__ */ Error();
-	throw n.cause = "redirect", Object.assign(n, {
-		url: e,
-		search: t || ""
+};
+//#endregion
+//#region utils/redirect.ts
+var redirect = (url, search) => {
+	const error = /* @__PURE__ */ new Error();
+	error.cause = "redirect";
+	throw Object.assign(error, {
+		url,
+		search: search || ""
 	});
 };
 //#endregion
-export { L as Link, M as Router, x as createRouter, W as redirect, H as useBeforeUnload, V as useBlocker, B as useLoaderState, z as useLocation, I as useNavigate, R as useParams, U as useRouterContext };
+export { Link, Router, createRouter, redirect, useBeforeUnload, useBlocker, useLoaderState, useLocation, useNavigate, useParams, useRouterContext };

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "clear-react-router",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly"
   },
@@ -31,6 +28,9 @@
   ],
   "license": "MIT",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",