clear-react-router 1.0.0

package/README.md

@@ -0,0 +1,169 @@
+A lightweight, type-safe routing library for React applications with nested routes, data loading, navigation blocking, and prefetching.
+
+## Features
+
+- 🧩 **Nested Routes** - Organize your UI with nested layouts and routes
+- ⚡ **Data Loading** - Built-in loaders with caching and stale-while-revalidate strategy
+- 🔒 **Navigation Blocking** - Prevent accidental navigation with `useBlocker`
+- 🎯 **Type-safe Redirects** - Redirect from loaders and beforeLoad hooks
+- 📦 **Prefetching** - Preload data on hover for instant navigation
+- 🚀 **Lazy Loading** - Code-split your routes with dynamic imports for optimal performance
+- 🎨 **Flexible API** - Use components or hooks as you prefer
+- 📱 **Browser History** - Full support for browser back/forward buttons
+- 🧠 **Context-aware** - Pass and update context through routes
+
+## API
+
+### `Router`
+
+Main component that renders the application based on current URL.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `routeList` | `RouteItem[]` | Array of route configurations |
+| `context` | `object` | Optional initial context (user, theme, etc.) |
+
+### `createRouter(routes)`
+
+Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic params, builds nested paths.
+
+### `redirect(url, search?)`
+
+Redirects from `beforeLoad`.
+```
+beforeLoad: context => {
+					if (!context.isAuthorized) return redirect('/');
+				}
+```
+
+### `Link`
+
+Component for client-side navigation with prefetch support.
+
+| Prop | Type | Default |
+|------|------|---------|
+| `to` | `string` | required |
+| `prefetch` | `boolean` | `true` |
+| `children` | `ReactElement` | required |
+
+## Hooks
+
+### `useNavigate()`
+
+Returns function to navigate programmatically:
+
+- `navigate({ pathname: '/about' })` - navigate to path
+- `navigate({ pathname: '/user/123', state: { fromDashboard: true } })` - navigate with state
+- `navigate(-1)` - go back
+
+**Note:** Navigation state can be accessed via `useLocation()`:
+
+```
+const navigate = useNavigate();
+navigate({ pathname: '/profile', state: { userId: 123 } });
+
+// In Profile component
+const { state } = useLocation();
+console.log(state); // { userId: 123 }
+```
+
+### `useParams<T>()`
+
+Returns route parameters object.
+
+const params = useParams<{ userId: string }>();
+// URL: /user/123 → params.userId === '123'
+
+### `useLocation()`
+
+Returns current location `{ pathname, search, state }`.
+```
+const { pathname, search, state } = useLocation();
+```
+
+### `useLoaderState()`
+
+Returns loaderState from current route's loader.
+
+### `useBlocker(callback)`
+
+Blocks navigation when callback returns `true`.
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `state` | `'unblocked' \| 'charged' \| 'blocked'` | Current blocker state |
+| `process()` | `() => void` | Confirm navigation and proceed |
+| `reset()` | `() => void` | Cancel navigation |
+
+```
+const { state, process, reset } = useBlocker(() => hasUnsavedChanges);
+
+useEffect(() => {
+  if (state === 'blocked') {
+    // Show your custom modal
+    if (confirm('Leave without saving?')) {
+      process();
+    } else {
+      reset();
+    }
+  }
+}, [state, process, reset]);
+```
+
+### `useBeforeUnload(callback?)`
+
+Executes a callback when the page is about to be closed or reloaded. Perfect for auto-saving data at the last moment.
+
+**Parameters:**
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `callback` | `() => void | undefined` | Function to execute before page unload (e.g., auto-save) |
+
+**Note:** This hook does not show a browser confirmation dialog. It silently executes the callback, allowing you to save user data in the background before the page closes.
+
+```
+const [text, setText] = useState('');
+const onSave = useCallback(() => {
+  localStorage.setItem('draft', text);
+}, [text]);
+
+// Auto-save when user tries to close/reload the page
+useBeforeUnload(text ? onSave : undefined);
+```
+## Route Configuration
+
+### `RouteItem`
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `path` | `string` | Route path, e.g., `/user/:userId` |
+| `element` | `ReactElement \| () => ReactElement \| LazyComponent` | Component to render |
+| `loader` | `() => Promise<unknown>` | Fetch data |
+| `beforeLoad` | `(context) => Promise<void>` | Auth checks, redirects |
+| `afterLoad` | `(context) => Promise<void>` | Analytics, side effects |
+| `fallback` | `ReactElement \| () => ReactElement` | Loading fallback (for lazy loading) |
+| `loaderFallback` | `ReactElement \| () => ReactElement` | Loading fallback (for loader) |
+| `errorElement` | `ReactElement \| () => ReactElement` | Error fallback |
+| `staleTime` | `number` | Cache duration in ms for loader data |
+| `children` | `RouteItem[]` | Nested routes |
+
+## Lazy Loading
+
+Clear Router supports code-splitting out of the box. Simply pass a function that returns a dynamic import:
+```
+{
+  path: '/heavy-page',
+  element: () => import('./pages/HeavyComponent'),
+  fallback: () => <div>Loading...</div>,
+}
+```
+
+## Requirements
+- React 16.6+ (for React.lazy and Suspense)
+- Use `default` export for your lazy-loaded components
+
+ ## License
+ MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/index.es.js

@@ -0,0 +1,439 @@
+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";
+//#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
+		};
+	}
+	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, {
+		value: {
+			context: n,
+			loaderCache: c
+		},
+		children: /* @__PURE__ */ (0, g.jsx)(p.Provider, {
+			value: {
+				blockerState: l,
+				params: o,
+				location: a
+			},
+			children: e
+		})
+	})
+}), 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;
+	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]
+	}), {});
+}, 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 = class {
+	url;
+	search;
+	cause;
+	constructor(e, t) {
+		this.url = e, this.search = t, this.cause = "redirect";
+	}
+}, E = (e, t) => Promise.reject(new T(e, t)), D = (e) => {
+	let t = s(e);
+	return a(() => {
+		t.current = e;
+	}, [e]), t;
+}, O = ({ setLocation: e, routeList: t, context: n, revalidateCache: i }) => {
+	let [l, u] = c({
+		from: "",
+		to: ""
+	}), d = s(""), f = D(r(async (r) => {
+		try {
+			let a = t.find((e) => w(e, r.pathname));
+			a?.beforeLoad && await a?.beforeLoad(n), 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) {
+			if (!(t instanceof T)) return t;
+			history.replaceState(null, "", `${t.url}${t.search || ""}`), e({
+				pathname: t.url,
+				search: t.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 t = async (t) => {
+			let n = C(t.target.location);
+			d.current === l.from ? (u({
+				from: d.current,
+				to: n.pathname
+			}), history.replaceState(null, "", d.current)) : e(n);
+		};
+		return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
+	}, [l.from, e]), 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
+	};
+}, k = (e) => {
+	let [t, n] = c({}), [i, a] = c({}), [o, s] = c(!1), [l, u] = c({}), d = r(({ key: e, value: t }) => n((n) => ({
+		...n,
+		[e]: t
+	})), []), f = r((e) => {
+		if (!e) return !0;
+		let t = i[e.path];
+		return !!(t && Date.now() - t < (e.staleTime || 0));
+	}, [i]), p = r(async (e) => {
+		if (e?.loader && !f(e)) {
+			u((t) => ({
+				...t,
+				[e.path]: !0
+			})), n((t) => Object.keys(t).filter((t) => t !== e.path).reduce((e, n) => ({
+				...e,
+				[n]: t[n]
+			}), {}));
+			try {
+				s(!1);
+				let t = await e?.loader();
+				a((t) => ({
+					...t,
+					[e.path]: Date.now()
+				})), d({
+					key: e.path,
+					value: t
+				});
+			} catch {
+				s(!0);
+			} finally {
+				u((t) => ({
+					...t,
+					[e.path]: !1
+				}));
+			}
+		}
+	}, [f, d]);
+	return {
+		loaderCache: t,
+		loaderError: o,
+		prefetchLoader: r(async (t) => {
+			let n = e.find((e) => w(e, t));
+			n && await p(n);
+		}, [p, e]),
+		revalidateCache: p,
+		isLoadingMap: l
+	};
+}, A = (e) => e ? typeof e == "function" ? /* @__PURE__ */ (0, g.jsx)(e, {}) : e : null, j = "error 404. Page not found", M = "*", N = ({ routeList: e, context: t = {} }) => {
+	let [n, r] = c(C(window.location)), [i, a] = c(t), s = o(() => e.find((e) => e.path === M || w(e, n.pathname)), [n.pathname, e]), { loaderError: l, loaderCache: u, prefetchLoader: d, revalidateCache: f, isLoadingMap: p } = k(e), { blockerState: m, updateLocation: h, updateBlockedRoute: v } = O({
+		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
+	}), [
+		m,
+		u,
+		n,
+		y,
+		d,
+		i,
+		v,
+		h
+	]);
+	return s?.loader && !l && p[n.pathname] ? /* @__PURE__ */ (0, g.jsx)(_, {
+		...b,
+		children: A(s?.loaderFallback)
+	}) : l ? /* @__PURE__ */ (0, g.jsx)(_, {
+		...b,
+		children: A(s?.errorElement)
+	}) : /* @__PURE__ */ (0, g.jsx)(_, {
+		...b,
+		children: A(s?.element) || j
+	});
+}, P = () => {
+	let e = i(p);
+	if (!Object.keys(e).length) throw Error("useNavigationState must be used within Router component");
+	return e;
+}, F = () => {
+	let e = i(d);
+	if (!Object.keys(e).length) throw Error("useRouterActions must be used within Router component");
+	return e;
+}, I = () => {
+	let e = i(f);
+	if (!Object.keys(e).length) throw Error("useRouterData must be used within Router component");
+	return e;
+}, L = () => {
+	let { updateLocation: e } = F();
+	return r(async (t) => t === -1 ? history.go(-1) : await e(t), [e]);
+}, R = ({ children: e, to: t, prefetch: n = !0 }) => {
+	let { prefetchLoader: r } = F(), i = L();
+	return /* @__PURE__ */ (0, g.jsx)("a", {
+		style: { cursor: "pointer" },
+		onClick: () => i({ pathname: t }),
+		onMouseOver: () => n && r(t),
+		children: e
+	});
+}, z = () => {
+	let { params: e } = P();
+	return e;
+}, B = () => P().location, V = () => {
+	let { loaderCache: e } = I();
+	return e[window.location.pathname];
+}, H = (e) => {
+	let { location: { pathname: t }, blockerState: n } = P(), { updateBlockedRoute: r } = F(), i = e();
+	return a(() => r(i ? {
+		type: "charge",
+		payload: t
+	} : { type: "unblock" }), [
+		i,
+		t,
+		r
+	]), {
+		state: n,
+		process: () => r({ type: "process" }),
+		reset: () => r({ type: "reset" })
+	};
+}, U = (e) => {
+	a(() => {
+		let t = (t) => {
+			e && (t.preventDefault(), e());
+		};
+		return window.addEventListener("beforeunload", t), () => window.removeEventListener("beforeunload", t);
+	}, [e]);
+}, W = () => {
+	let { context: e } = I(), { setContext: t } = F();
+	return {
+		context: e,
+		setContext: t
+	};
+};
+//#endregion
+export { R as Link, N as Router, x as createRouter, E as redirect, U as useBeforeUnload, H as useBlocker, V as useLoaderState, B as useLocation, L as useNavigate, z as useParams, W as useRouterContext };

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ClearReactRouter={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),r=(0,t.createContext)({}),i=(0,t.createContext)({}),a=(0,t.createContext)({}),o=n((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}}e.Fragment=n,e.jsx=r,e.jsxs=r})),s=n((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D: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 g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E: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===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.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(){N||(N=!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 P[e]||(P[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 u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,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 d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}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 f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),c=n(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=o():t.exports=s()}))(),l=({children:e,setContext:t,context:n,updateBlockedRoute:o,updateLocation:s,location:l,params:u,prefetchLoader:d,loaderCache:f,blockerState:p})=>(0,c.jsx)(r.Provider,{value:{updateLocation:s,updateBlockedRoute:o,prefetchLoader:d,setContext:t},children:(0,c.jsx)(i.Provider,{value:{context:n,loaderCache:f},children:(0,c.jsx)(a.Provider,{value:{blockerState:p,params:u,location:l},children:e})})}),u=(e,n)=>{let r=(0,t.lazy)(()=>e().then(e=>({default:e.default||e})));return()=>(0,c.jsx)(t.Suspense,{fallback:typeof n==`function`?n():n||null,children:(0,c.jsx)(r,{})})},d=e=>typeof e.element==`function`&&e.element.toString().includes(`import(`),f=(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=d(e)?u(e.element,e.fallback):e.element;return[{...e,path:s,params:o,element:c},...e.children?.flatMap(e=>f(e,o,s))||[]]},p=e=>e.flatMap(e=>f(e,[])),m=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]}),{})},h=e=>({pathname:e.pathname,search:e.search}),g=(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},_=class{url;search;cause;constructor(e,t){this.url=e,this.search=t,this.cause=`redirect`}},v=(e,t)=>Promise.reject(new _(e,t)),y=e=>{let n=(0,t.useRef)(e);return(0,t.useEffect)(()=>{n.current=e},[e]),n},b=({setLocation:e,routeList:n,context:r,revalidateCache:i})=>{let[a,o]=(0,t.useState)({from:``,to:``}),s=(0,t.useRef)(``),c=y((0,t.useCallback)(async t=>{try{let a=n.find(e=>g(e,t.pathname));a?.beforeLoad&&await a?.beforeLoad(r),e(t),t.pathname!==window.location.pathname&&(history.pushState(null,``,t.pathname),s.current=t.pathname),await i(a),a?.afterLoad&&await a?.afterLoad(r)}catch(t){if(!(t instanceof _))return t;history.replaceState(null,``,`${t.url}${t.search||``}`),e({pathname:t.url,search:t.search})}},[r,i,n,e])),l=(0,t.useCallback)(({type:e,payload:t=``})=>o(n=>n.from===t&&e===`charge`?n:t&&n.from!==t&&e===`charge`?{...n,from:t}:e===`reset`?{...n,to:``}:(e===`process`&&c.current({pathname:n.to}),!n.from&&!n.to?n:{from:``,to:``})),[c]),u=(0,t.useCallback)(async e=>{a.from?o(t=>({...t,to:e.pathname})):await c.current(e)},[a.from,c]);return(0,t.useEffect)(()=>{let t=async t=>{let n=h(t.target.location);s.current===a.from?(o({from:s.current,to:n.pathname}),history.replaceState(null,``,s.current)):e(n)};return window.addEventListener(`popstate`,t),()=>window.removeEventListener(`popstate`,t)},[a.from,e]),(0,t.useEffect)(()=>{let e=h(window.location);c.current(e),s.current=e.pathname},[c]),{blockerState:(0,t.useMemo)(()=>a.from&&a.to?`blocked`:a.from?`charged`:`unblocked`,[a]),updateLocation:u,updateBlockedRoute:l}},x=e=>{let[n,r]=(0,t.useState)({}),[i,a]=(0,t.useState)({}),[o,s]=(0,t.useState)(!1),[c,l]=(0,t.useState)({}),u=(0,t.useCallback)(({key:e,value:t})=>r(n=>({...n,[e]:t})),[]),d=(0,t.useCallback)(e=>{if(!e)return!0;let t=i[e.path];return!!(t&&Date.now()-t<(e.staleTime||0))},[i]),f=(0,t.useCallback)(async e=>{if(e?.loader&&!d(e)){l(t=>({...t,[e.path]:!0})),r(t=>Object.keys(t).filter(t=>t!==e.path).reduce((e,n)=>({...e,[n]:t[n]}),{}));try{s(!1);let t=await e?.loader();a(t=>({...t,[e.path]:Date.now()})),u({key:e.path,value:t})}catch{s(!0)}finally{l(t=>({...t,[e.path]:!1}))}}},[d,u]);return{loaderCache:n,loaderError:o,prefetchLoader:(0,t.useCallback)(async t=>{let n=e.find(e=>g(e,t));n&&await f(n)},[f,e]),revalidateCache:f,isLoadingMap:c}},S=e=>e?typeof e==`function`?(0,c.jsx)(e,{}):e:null,C=`error 404. Page not found`,w=`*`,T=({routeList:e,context:n={}})=>{let[r,i]=(0,t.useState)(h(window.location)),[a,o]=(0,t.useState)(n),s=(0,t.useMemo)(()=>e.find(e=>e.path===w||g(e,r.pathname)),[r.pathname,e]),{loaderError:u,loaderCache:d,prefetchLoader:f,revalidateCache:p,isLoadingMap:_}=x(e),{blockerState:v,updateLocation:y,updateBlockedRoute:T}=b({setLocation:i,routeList:e,context:a,revalidateCache:p}),E=(0,t.useMemo)(()=>s?.params?m(s.params):{},[s]),D=(0,t.useMemo)(()=>({location:r,updateLocation:y,params:E,loaderCache:d,prefetchLoader:f,updateBlockedRoute:T,blockerState:v,context:a,setContext:o}),[v,d,r,E,f,a,T,y]);return s?.loader&&!u&&_[r.pathname]?(0,c.jsx)(l,{...D,children:S(s?.loaderFallback)}):u?(0,c.jsx)(l,{...D,children:S(s?.errorElement)}):(0,c.jsx)(l,{...D,children:S(s?.element)||C})},E=()=>{let e=(0,t.useContext)(a);if(!Object.keys(e).length)throw Error(`useNavigationState must be used within Router component`);return e},D=()=>{let e=(0,t.useContext)(r);if(!Object.keys(e).length)throw Error(`useRouterActions must be used within Router component`);return e},O=()=>{let e=(0,t.useContext)(i);if(!Object.keys(e).length)throw Error(`useRouterData must be used within Router component`);return e},k=()=>{let{updateLocation:e}=D();return(0,t.useCallback)(async t=>t===-1?history.go(-1):await e(t),[e])};e.Link=({children:e,to:t,prefetch:n=!0})=>{let{prefetchLoader:r}=D(),i=k();return(0,c.jsx)(`a`,{style:{cursor:`pointer`},onClick:()=>i({pathname:t}),onMouseOver:()=>n&&r(t),children:e})},e.Router=T,e.createRouter=p,e.redirect=v,e.useBeforeUnload=e=>{(0,t.useEffect)(()=>{let t=t=>{e&&(t.preventDefault(),e())};return window.addEventListener(`beforeunload`,t),()=>window.removeEventListener(`beforeunload`,t)},[e])},e.useBlocker=e=>{let{location:{pathname:n},blockerState:r}=E(),{updateBlockedRoute:i}=D(),a=e();return(0,t.useEffect)(()=>i(a?{type:`charge`,payload:n}:{type:`unblock`}),[a,n,i]),{state:r,process:()=>i({type:`process`}),reset:()=>i({type:`reset`})}},e.useLoaderState=()=>{let{loaderCache:e}=O();return e[window.location.pathname]},e.useLocation=()=>E().location,e.useNavigate=k,e.useParams=()=>{let{params:e}=E();return e},e.useRouterContext=()=>{let{context:e}=O(),{setContext:t}=D();return{context:e,setContext:t}}});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "clear-react-router",
+  "version": "1.0.0",
+  "description": "A lightweight, type-safe routing library for React applications",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AndrewBubnov/clear-react-router"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "routing",
+    "typescript",
+    "spa",
+    "nested-routes"
+  ],
+  "license": "MIT",
+  "author": "Andrew Bubnov",
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
+  }
+}