@aminnairi/react-router 3.0.1 → 3.0.2

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import { type Dispatch, type FunctionComponent, type ReactNode, type SetStateAction } from "react";
+export interface IssueProps {
+    error: Error | null;
+    resetError: () => void;
+}
+export interface Router<Path extends string, Locale> {
+    prefix?: string;
+    locales?: Locale[];
+    transition?: Transition;
+    fallback: FunctionComponent;
+    issue: FunctionComponent<IssueProps>;
+    pages: Array<Page<Path>>;
+}
+export interface RouterProviderProps {
+    children: ReactNode;
+}
+export interface RouterContextInterface<Locale> {
+    locale: Locale | null;
+    prefix: string | null;
+    path: string;
+    setLocale: Dispatch<SetStateAction<Locale | null>>;
+}
+export type NavigationDirection = "forward" | "backward";
+export declare class Uri<Locale> {
+    readonly path: string;
+    readonly prefix: string | null;
+    readonly locale: Locale | null;
+    private constructor();
+    static from<Locale>(uri: string, expectedPrefix?: string, expectedLocales?: Locale[]): Uri<Locale>;
+}
+export type ExtractParams<Path extends string> = Path extends `${string}:${infer Param}/${infer Rest}` ? Param | ExtractParams<Rest> : Path extends `${string}:${infer Param}` ? Param : never;
+export type Params<Path extends string> = {
+    [Key in ExtractParams<Path>]: string;
+};
+export interface PageParams<Path extends string> {
+    parameters: Params<Path>;
+}
+export interface Page<Path extends string> {
+    path: Path;
+    element: FunctionComponent<PageParams<Path>>;
+}
+export declare function createPage<Path extends string>(page: Page<Path>): Page<Path>;
+export type Transition = (direction: "forward" | "backward", next: () => void) => void;
+export declare const scaleFadeTransition: Transition;
+export declare const crossFadeTransition: Transition;
+export declare const slideHorizontalTransition: Transition;
+export declare const slideVerticalTransition: Transition;
+export declare function createRouter<Locale extends string = never, Path extends string = never>({ prefix: expectedPrefix, locales, pages, fallback: Fallback, issue: Issue, transition }: Router<Path, Locale>): {
+    RouterProvider: ({ children }: RouterProviderProps) => import("react/jsx-runtime").JSX.Element;
+    RouterView: () => import("react/jsx-runtime").JSX.Element;
+    useLocale: () => {
+        locale: Locale | null;
+        setLocale: (locale: Locale) => void;
+    };
+    usePrefix: () => {
+        prefix: string | null;
+    };
+    usePath: () => {
+        path: string;
+    };
+    useNavigateToPage: <P extends Path>(page: Page<P>) => (...[params]: ExtractParams<P> extends never ? [] : [Params<P>]) => void;
+    useIsActivePage: <P extends Path>(page: Page<P>) => boolean;
+};

package/dist/index.js

@@ -0,0 +1,689 @@
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+//#endregion
+//#region ../../node_modules/react/cjs/react.production.min.js
+/**
+* @license React
+* react.production.min.js
+*
+* Copyright (c) Facebook, Inc. and its 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_production_min = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var l = Symbol.for("react.element"), n = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), r = Symbol.for("react.profiler"), t = Symbol.for("react.provider"), u = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), x = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), z = Symbol.iterator;
+	function A(a) {
+		if (null === a || "object" !== typeof a) return null;
+		a = z && a[z] || a["@@iterator"];
+		return "function" === typeof a ? a : null;
+	}
+	var B = {
+		isMounted: function() {
+			return !1;
+		},
+		enqueueForceUpdate: function() {},
+		enqueueReplaceState: function() {},
+		enqueueSetState: function() {}
+	}, C = Object.assign, D = {};
+	function E(a, b, e) {
+		this.props = a;
+		this.context = b;
+		this.refs = D;
+		this.updater = e || B;
+	}
+	E.prototype.isReactComponent = {};
+	E.prototype.setState = function(a, b) {
+		if ("object" !== typeof a && "function" !== typeof a && null != a) throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");
+		this.updater.enqueueSetState(this, a, b, "setState");
+	};
+	E.prototype.forceUpdate = function(a) {
+		this.updater.enqueueForceUpdate(this, a, "forceUpdate");
+	};
+	function F() {}
+	F.prototype = E.prototype;
+	function G(a, b, e) {
+		this.props = a;
+		this.context = b;
+		this.refs = D;
+		this.updater = e || B;
+	}
+	var H = G.prototype = new F();
+	H.constructor = G;
+	C(H, E.prototype);
+	H.isPureReactComponent = !0;
+	var I = Array.isArray, J = Object.prototype.hasOwnProperty, K = { current: null }, L = {
+		key: !0,
+		ref: !0,
+		__self: !0,
+		__source: !0
+	};
+	function M(a, b, e) {
+		var d, c = {}, k = null, h = null;
+		if (null != b) for (d in void 0 !== b.ref && (h = b.ref), void 0 !== b.key && (k = "" + b.key), b) J.call(b, d) && !L.hasOwnProperty(d) && (c[d] = b[d]);
+		var g = arguments.length - 2;
+		if (1 === g) c.children = e;
+		else if (1 < g) {
+			for (var f = Array(g), m = 0; m < g; m++) f[m] = arguments[m + 2];
+			c.children = f;
+		}
+		if (a && a.defaultProps) for (d in g = a.defaultProps, g) void 0 === c[d] && (c[d] = g[d]);
+		return {
+			$$typeof: l,
+			type: a,
+			key: k,
+			ref: h,
+			props: c,
+			_owner: K.current
+		};
+	}
+	function N(a, b) {
+		return {
+			$$typeof: l,
+			type: a.type,
+			key: b,
+			ref: a.ref,
+			props: a.props,
+			_owner: a._owner
+		};
+	}
+	function O(a) {
+		return "object" === typeof a && null !== a && a.$$typeof === l;
+	}
+	function escape(a) {
+		var b = {
+			"=": "=0",
+			":": "=2"
+		};
+		return "$" + a.replace(/[=:]/g, function(a) {
+			return b[a];
+		});
+	}
+	var P = /\/+/g;
+	function Q(a, b) {
+		return "object" === typeof a && null !== a && null != a.key ? escape("" + a.key) : b.toString(36);
+	}
+	function R(a, b, e, d, c) {
+		var k = typeof a;
+		if ("undefined" === k || "boolean" === k) a = null;
+		var h = !1;
+		if (null === a) h = !0;
+		else switch (k) {
+			case "string":
+			case "number":
+				h = !0;
+				break;
+			case "object": switch (a.$$typeof) {
+				case l:
+				case n: h = !0;
+			}
+		}
+		if (h) return h = a, c = c(h), a = "" === d ? "." + Q(h, 0) : d, I(c) ? (e = "", null != a && (e = a.replace(P, "$&/") + "/"), R(c, b, e, "", function(a) {
+			return a;
+		})) : null != c && (O(c) && (c = N(c, e + (!c.key || h && h.key === c.key ? "" : ("" + c.key).replace(P, "$&/") + "/") + a)), b.push(c)), 1;
+		h = 0;
+		d = "" === d ? "." : d + ":";
+		if (I(a)) for (var g = 0; g < a.length; g++) {
+			k = a[g];
+			var f = d + Q(k, g);
+			h += R(k, b, e, f, c);
+		}
+		else if (f = A(a), "function" === typeof f) for (a = f.call(a), g = 0; !(k = a.next()).done;) k = k.value, f = d + Q(k, g++), h += R(k, b, e, f, c);
+		else if ("object" === k) throw b = String(a), Error("Objects are not valid as a React child (found: " + ("[object Object]" === b ? "object with keys {" + Object.keys(a).join(", ") + "}" : b) + "). If you meant to render a collection of children, use an array instead.");
+		return h;
+	}
+	function S(a, b, e) {
+		if (null == a) return a;
+		var d = [], c = 0;
+		R(a, d, "", "", function(a) {
+			return b.call(e, a, c++);
+		});
+		return d;
+	}
+	function T(a) {
+		if (-1 === a._status) {
+			var b = a._result;
+			b = b();
+			b.then(function(b) {
+				if (0 === a._status || -1 === a._status) a._status = 1, a._result = b;
+			}, function(b) {
+				if (0 === a._status || -1 === a._status) a._status = 2, a._result = b;
+			});
+			-1 === a._status && (a._status = 0, a._result = b);
+		}
+		if (1 === a._status) return a._result.default;
+		throw a._result;
+	}
+	var U = { current: null }, V = { transition: null }, W = {
+		ReactCurrentDispatcher: U,
+		ReactCurrentBatchConfig: V,
+		ReactCurrentOwner: K
+	};
+	function X() {
+		throw Error("act(...) is not supported in production builds of React.");
+	}
+	exports.Children = {
+		map: S,
+		forEach: function(a, b, e) {
+			S(a, function() {
+				b.apply(this, arguments);
+			}, e);
+		},
+		count: function(a) {
+			var b = 0;
+			S(a, function() {
+				b++;
+			});
+			return b;
+		},
+		toArray: function(a) {
+			return S(a, function(a) {
+				return a;
+			}) || [];
+		},
+		only: function(a) {
+			if (!O(a)) throw Error("React.Children.only expected to receive a single React element child.");
+			return a;
+		}
+	};
+	exports.Component = E;
+	exports.Fragment = p;
+	exports.Profiler = r;
+	exports.PureComponent = G;
+	exports.StrictMode = q;
+	exports.Suspense = w;
+	exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = W;
+	exports.act = X;
+	exports.cloneElement = function(a, b, e) {
+		if (null === a || void 0 === a) throw Error("React.cloneElement(...): The argument must be a React element, but you passed " + a + ".");
+		var d = C({}, a.props), c = a.key, k = a.ref, h = a._owner;
+		if (null != b) {
+			void 0 !== b.ref && (k = b.ref, h = K.current);
+			void 0 !== b.key && (c = "" + b.key);
+			if (a.type && a.type.defaultProps) var g = a.type.defaultProps;
+			for (f in b) J.call(b, f) && !L.hasOwnProperty(f) && (d[f] = void 0 === b[f] && void 0 !== g ? g[f] : b[f]);
+		}
+		var f = arguments.length - 2;
+		if (1 === f) d.children = e;
+		else if (1 < f) {
+			g = Array(f);
+			for (var m = 0; m < f; m++) g[m] = arguments[m + 2];
+			d.children = g;
+		}
+		return {
+			$$typeof: l,
+			type: a.type,
+			key: c,
+			ref: k,
+			props: d,
+			_owner: h
+		};
+	};
+	exports.createContext = function(a) {
+		a = {
+			$$typeof: u,
+			_currentValue: a,
+			_currentValue2: a,
+			_threadCount: 0,
+			Provider: null,
+			Consumer: null,
+			_defaultValue: null,
+			_globalName: null
+		};
+		a.Provider = {
+			$$typeof: t,
+			_context: a
+		};
+		return a.Consumer = a;
+	};
+	exports.createElement = M;
+	exports.createFactory = function(a) {
+		var b = M.bind(null, a);
+		b.type = a;
+		return b;
+	};
+	exports.createRef = function() {
+		return { current: null };
+	};
+	exports.forwardRef = function(a) {
+		return {
+			$$typeof: v,
+			render: a
+		};
+	};
+	exports.isValidElement = O;
+	exports.lazy = function(a) {
+		return {
+			$$typeof: y,
+			_payload: {
+				_status: -1,
+				_result: a
+			},
+			_init: T
+		};
+	};
+	exports.memo = function(a, b) {
+		return {
+			$$typeof: x,
+			type: a,
+			compare: void 0 === b ? null : b
+		};
+	};
+	exports.startTransition = function(a) {
+		var b = V.transition;
+		V.transition = {};
+		try {
+			a();
+		} finally {
+			V.transition = b;
+		}
+	};
+	exports.unstable_act = X;
+	exports.useCallback = function(a, b) {
+		return U.current.useCallback(a, b);
+	};
+	exports.useContext = function(a) {
+		return U.current.useContext(a);
+	};
+	exports.useDebugValue = function() {};
+	exports.useDeferredValue = function(a) {
+		return U.current.useDeferredValue(a);
+	};
+	exports.useEffect = function(a, b) {
+		return U.current.useEffect(a, b);
+	};
+	exports.useId = function() {
+		return U.current.useId();
+	};
+	exports.useImperativeHandle = function(a, b, e) {
+		return U.current.useImperativeHandle(a, b, e);
+	};
+	exports.useInsertionEffect = function(a, b) {
+		return U.current.useInsertionEffect(a, b);
+	};
+	exports.useLayoutEffect = function(a, b) {
+		return U.current.useLayoutEffect(a, b);
+	};
+	exports.useMemo = function(a, b) {
+		return U.current.useMemo(a, b);
+	};
+	exports.useReducer = function(a, b, e) {
+		return U.current.useReducer(a, b, e);
+	};
+	exports.useRef = function(a) {
+		return U.current.useRef(a);
+	};
+	exports.useState = function(a) {
+		return U.current.useState(a);
+	};
+	exports.useSyncExternalStore = function(a, b, e) {
+		return U.current.useSyncExternalStore(a, b, e);
+	};
+	exports.useTransition = function() {
+		return U.current.useTransition();
+	};
+	exports.version = "18.3.1";
+}));
+//#endregion
+//#region ../../node_modules/react/index.js
+var require_react = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = require_react_production_min();
+}));
+//#endregion
+//#region ../../node_modules/react/cjs/react-jsx-runtime.production.min.js
+/**
+* @license React
+* react-jsx-runtime.production.min.js
+*
+* Copyright (c) Facebook, Inc. and its 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_min = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var f = require_react(), k = Symbol.for("react.element"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = {
+		key: !0,
+		ref: !0,
+		__self: !0,
+		__source: !0
+	};
+	function q(c, a, g) {
+		var b, d = {}, e = null, h = null;
+		void 0 !== g && (e = "" + g);
+		void 0 !== a.key && (e = "" + a.key);
+		void 0 !== a.ref && (h = a.ref);
+		for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+		if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
+		return {
+			$$typeof: k,
+			type: c,
+			key: e,
+			ref: h,
+			props: d,
+			_owner: n.current
+		};
+	}
+	exports.jsx = q;
+}));
+//#endregion
+//#region ../../node_modules/react/jsx-runtime.js
+var require_jsx_runtime = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = require_react_jsx_runtime_production_min();
+}));
+//#endregion
+//#region index.tsx
+var import_react = require_react();
+var import_jsx_runtime = require_jsx_runtime();
+function normalize(uri) {
+	return uri.trim().toLowerCase().replace(/\/+/g, "/").replace(/^\/+|\/$/g, "");
+}
+function matchPath(path, pathname) {
+	const pathParts = normalize(path).split("/").filter(Boolean);
+	const pathnameParts = normalize(pathname).split("/").filter(Boolean);
+	return pathParts.length === pathnameParts.length && pathParts.every((pathPart, index) => {
+		return pathPart.startsWith(":") || pathPart === pathnameParts.at(index);
+	});
+}
+function matchParameters(path, pathname) {
+	const pathParts = normalize(path).split("/").filter(Boolean);
+	const pathnameParts = normalize(pathname).split("/").filter(Boolean);
+	if (pathParts.length !== pathnameParts.length) return {};
+	return pathParts.reduce((parameters, pathPart, index) => {
+		if (!pathPart.startsWith(":")) return parameters;
+		return {
+			...parameters,
+			[pathPart.slice(1)]: pathnameParts.at(index) ?? ""
+		};
+	}, {});
+}
+var Uri = class Uri {
+	constructor(path, prefix, locale) {
+		this.path = path;
+		this.prefix = prefix;
+		this.locale = locale;
+	}
+	static from(uri, expectedPrefix, expectedLocales) {
+		const [prefixOrLocale, localeOrNothing, ...parts] = normalize(uri).split("/");
+		const locales = expectedLocales ?? [];
+		if (expectedPrefix && prefixOrLocale && prefixOrLocale === normalize(expectedPrefix)) {
+			const locale = locales.find((expectedLocale) => expectedLocale === localeOrNothing);
+			if (locale) return new Uri(parts.join("/"), prefixOrLocale, locale);
+			return new Uri([localeOrNothing, ...parts].join("/"), prefixOrLocale, null);
+		}
+		const locale = locales.find((expectedLocale) => expectedLocale === prefixOrLocale);
+		if (locale) return new Uri([localeOrNothing, ...parts].join("/"), null, locale);
+		return new Uri([
+			prefixOrLocale,
+			localeOrNothing,
+			...parts
+		].join("/"), null, null);
+	}
+};
+var ErrorBoundary = class extends import_react.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			error: null,
+			resetError: this.resetError.bind(this)
+		};
+	}
+	resetError() {
+		this.setState({ error: null });
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error) {
+		this.setState({ error: error instanceof Error ? error : new Error(String(error)) });
+	}
+	render() {
+		if (this.state.error) {
+			const Issue = this.props.issue;
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Issue, {
+				error: this.state.error,
+				resetError: this.state.resetError
+			});
+		}
+		return this.props.children;
+	}
+};
+function createPage(page) {
+	return {
+		...page,
+		path: normalize(page.path)
+	};
+}
+const scaleFadeTransition = async (direction, next) => {
+	try {
+		await document.startViewTransition(() => {
+			next();
+		}).ready;
+		document.documentElement.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: direction === "forward" ? "scale(1.04)" : "scale(0.96)",
+			opacity: 0
+		}], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-old(root)`
+		});
+		document.documentElement.animate([{
+			transform: direction === "forward" ? "scale(0.96)" : "scale(1.04)",
+			opacity: 0
+		}, {
+			transform: "scale(1)",
+			opacity: 1
+		}], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-new(root)`
+		});
+	} catch (error) {
+		console.error(error);
+	}
+};
+const crossFadeTransition = async (direction, next) => {
+	try {
+		await document.startViewTransition(() => {
+			next();
+		}).ready;
+		document.documentElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-old(root)`
+		});
+		document.documentElement.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-new(root)`
+		});
+	} catch (error) {
+		console.error(error);
+	}
+};
+const slideHorizontalTransition = async (direction, next) => {
+	try {
+		await document.startViewTransition(() => {
+			next();
+		}).ready;
+		document.documentElement.animate([{ transform: "translateX(0)" }, { transform: direction === "forward" ? "translateX(-100%)" : "translateX(100%)" }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-old(root)`
+		});
+		document.documentElement.animate([{ transform: direction === "forward" ? "translateX(100%)" : "translateX(-100%)" }, { transform: "translateX(0)" }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-new(root)`
+		});
+	} catch (error) {
+		console.error(error);
+	}
+};
+const slideVerticalTransition = async (direction, next) => {
+	try {
+		await document.startViewTransition(() => {
+			next();
+		}).ready;
+		document.documentElement.animate([{ transform: "translateY(0)" }, { transform: direction === "forward" ? "translateY(-100%)" : "translateY(100%)" }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-old(root)`
+		});
+		document.documentElement.animate([{ transform: direction === "forward" ? "translateY(100%)" : "translateY(-100%)" }, { transform: "translateY(0)" }], {
+			duration: 200,
+			easing: "ease-in-out",
+			fill: "both",
+			pseudoElement: `::view-transition-new(root)`
+		});
+	} catch (error) {
+		console.error(error);
+	}
+};
+function createRouter({ prefix: expectedPrefix, locales, pages, fallback: Fallback, issue: Issue, transition }) {
+	const RouterContext = (0, import_react.createContext)({
+		locale: null,
+		prefix: null,
+		path: "/",
+		setLocale: () => {}
+	});
+	function useIsActivePage(page) {
+		const { path } = usePath();
+		return matchPath(page.path, path);
+	}
+	function useLocale() {
+		const context = (0, import_react.useContext)(RouterContext);
+		if (!context) throw new Error("component using the useLocale hook has not been wrapped inside RouterProvider.");
+		return {
+			locale: context.locale,
+			setLocale: (locale) => {
+				if (!locales?.includes(locale)) return;
+				window.history.pushState(null, "", `/${normalize(`${context.prefix ?? ""}/${locale}/${context.path}`)}`);
+				window.dispatchEvent(new Event("pushstate"));
+			}
+		};
+	}
+	function usePrefix() {
+		const context = (0, import_react.useContext)(RouterContext);
+		if (!context) throw new Error("Component using the usePrefix hook has not been wrapped inside RouterProvider");
+		return { prefix: context.prefix };
+	}
+	function usePath() {
+		const context = (0, import_react.useContext)(RouterContext);
+		if (!context) throw new Error("Component using the usePath hook has not been wrapped inside RouterProvider");
+		return { path: context.path };
+	}
+	function useNavigateToPage(page) {
+		const { locale } = useLocale();
+		const { prefix } = usePrefix();
+		return (0, import_react.useCallback)((...[params]) => {
+			const path = Object.entries(params ?? {}).reduce((oldParams, [name, value]) => {
+				return oldParams.replace(`:${name}`, String(value));
+			}, page.path);
+			const pathname = `/${normalize(`${prefix ?? ""}/${locale ?? ""}/${path}`)}`;
+			console.log({ pathname });
+			window.history.pushState(null, "", pathname);
+			window.dispatchEvent(new Event("pushstate"));
+		}, [
+			page,
+			locale,
+			prefix
+		]);
+	}
+	function RouterProvider({ children }) {
+		const uri = (0, import_react.useMemo)(() => Uri.from(window.location.pathname, expectedPrefix, locales), [expectedPrefix, locales]);
+		const [locale, setLocale] = (0, import_react.useState)(uri.locale);
+		const [path, setPath] = (0, import_react.useState)(uri.path);
+		const [prefix, setPrefix] = (0, import_react.useState)(uri.prefix);
+		function setHash(newHash) {
+			window.location.hash = newHash;
+		}
+		const value = (0, import_react.useMemo)(() => {
+			return {
+				locale,
+				path,
+				prefix: prefix ?? null,
+				setLocale,
+				setHash
+			};
+		}, [
+			locale,
+			prefix,
+			path
+		]);
+		const onNavigation = (0, import_react.useEffectEvent)((direction) => {
+			const pathname = normalize(window.location.pathname);
+			const uri = Uri.from(pathname, expectedPrefix, locales);
+			const defaultTransition = (_, next) => {
+				next();
+			};
+			(transition ?? defaultTransition)(direction, () => {
+				setLocale(uri.locale);
+				setPath(uri.path);
+				setPrefix(uri.prefix);
+			});
+		});
+		const onMount = (0, import_react.useEffectEvent)(() => {
+			const pathname = `/${normalize(window.location.pathname)}`;
+			const uri = Uri.from(pathname, expectedPrefix, [locale, ...locales ?? []]);
+			const newPathname = `/${normalize(`${uri.prefix ?? expectedPrefix ?? ""}/${uri.locale ?? locales?.at(0) ?? ""}/${uri.path}`)}`;
+			if (newPathname !== pathname) {
+				window.history.pushState(null, "", newPathname);
+				window.dispatchEvent(new Event("pushstate"));
+			}
+		});
+		(0, import_react.useEffect)(() => {
+			const abortController = new AbortController();
+			window.addEventListener("pushstate", () => {
+				onNavigation("forward");
+			}, abortController);
+			window.addEventListener("popstate", () => {
+				onNavigation("backward");
+			}, abortController);
+			onMount();
+			return () => {
+				abortController.abort();
+			};
+		}, []);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterContext.Provider, {
+			value,
+			children
+		});
+	}
+	function RouterView() {
+		const { path } = usePath();
+		const foundPage = (0, import_react.useMemo)(() => {
+			return pages.find((page) => {
+				return matchPath(page.path, path);
+			});
+		}, [path, pages]);
+		if (foundPage) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBoundary, {
+			issue: Issue,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(foundPage.element, { parameters: matchParameters(foundPage.path, path) })
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBoundary, {
+			issue: Issue,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fallback, {})
+		});
+	}
+	return {
+		RouterProvider,
+		RouterView,
+		useLocale,
+		usePrefix,
+		usePath,
+		useNavigateToPage,
+		useIsActivePage
+	};
+}
+//#endregion
+export { Uri, createPage, createRouter, crossFadeTransition, scaleFadeTransition, slideHorizontalTransition, slideVerticalTransition };

package/package.json

@@ -2,11 +2,15 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "3.0.1",
-  "homepage": "https://github.com/aminnairi/react-router#readme",
+  "version": "3.0.2",
+  "homepage": "https://github.com/aminnairi/react-router",
   "license": "MIT",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "readme": "https://github.com/aminnairi/react-router#readme",
   "files": [
-    "index.tsx"
+    "dist/index.js",
+    "dist/index.d.ts"
   ],
   "bugs": {
     "url": "https://github.com/aminnairi/react-router/issues"
@@ -31,13 +35,15 @@
     "react": ">=18.0.0"
   },
   "scripts": {
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc && rolldown --config rolldown.config.ts"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "rolldown": "^1.0.0-rc.9",
     "typescript": "^5.9.3"
   }
 }

package/index.tsx

@@ -1,527 +0,0 @@
-import { Component, createContext, type Dispatch, type FunctionComponent, type ReactNode, type SetStateAction, useCallback, useContext, useEffect, useEffectEvent, useMemo, useState } from "react";
-
-export interface IssueProps {
-  error: Error | null,
-  resetError: () => void
-}
-
-export interface Router<Path extends string, Locale> {
-  prefix?: string
-  locales?: Locale[]
-  transition?: Transition
-  fallback: FunctionComponent
-  issue: FunctionComponent<IssueProps>
-  pages: Array<Page<Path>>
-}
-
-export interface RouterProviderProps {
-  children: ReactNode
-}
-
-export interface RouterContextInterface<Locale> {
-  locale: Locale | null
-  prefix: string | null
-  path: string
-  setLocale: Dispatch<SetStateAction<Locale | null>>
-}
-
-export type NavigationDirection = "forward" | "backward";
-
-function normalize(uri: string) {
-  return uri
-    .trim()
-    .toLowerCase()
-    .replace(/\/+/g, "/")
-    .replace(/^\/+|\/$/g, "");
-}
-
-function matchPath(path: string, pathname: string) {
-  const pathParts = normalize(path).split("/").filter(Boolean);
-  const pathnameParts = normalize(pathname).split("/").filter(Boolean);
-
-  return pathParts.length === pathnameParts.length && pathParts.every((pathPart, index) => {
-    return pathPart.startsWith(":") || pathPart === pathnameParts.at(index);
-  });
-}
-
-function matchParameters(path: string, pathname: string): Record<string, string> {
-  const pathParts = normalize(path).split("/").filter(Boolean);
-  const pathnameParts = normalize(pathname).split("/").filter(Boolean);
-
-  if (pathParts.length !== pathnameParts.length) {
-    return {};
-  }
-
-  return pathParts.reduce((parameters, pathPart, index) => {
-    if (!pathPart.startsWith(":")) {
-      return parameters;
-    }
-
-    return {
-      ...parameters,
-      [pathPart.slice(1)]: pathnameParts.at(index) ?? ""
-    }
-  }, {});
-}
-
-export class Uri<Locale> {
-  private constructor(public readonly path: string, public readonly prefix: string | null, public readonly locale: Locale | null) { }
-
-  public static from<Locale>(uri: string, expectedPrefix?: string, expectedLocales?: Locale[]): Uri<Locale> {
-    const [prefixOrLocale, localeOrNothing, ...parts] = normalize(uri).split("/");
-    const locales = expectedLocales ?? [];
-
-    if (expectedPrefix && prefixOrLocale && prefixOrLocale === normalize(expectedPrefix)) {
-      const locale = locales.find(expectedLocale => expectedLocale === localeOrNothing);
-
-      if (locale) {
-        return new Uri<Locale>(
-          parts.join("/"),
-          prefixOrLocale,
-          locale,
-        );
-      }
-
-      return new Uri<Locale>(
-        [localeOrNothing, ...parts].join("/"),
-        prefixOrLocale,
-        null
-      );
-    }
-
-    const locale = locales.find(expectedLocale => expectedLocale === prefixOrLocale);
-
-    if (locale) {
-      return new Uri<Locale>(
-        [localeOrNothing, ...parts].join("/"),
-        null,
-        locale
-      );
-    }
-
-    return new Uri<Locale>(
-      [prefixOrLocale, localeOrNothing, ...parts].join("/"),
-      null,
-      null
-    );
-  }
-}
-
-export type ExtractParams<Path extends string> =
-  Path extends `${string}:${infer Param}/${infer Rest}`
-  ? Param | ExtractParams<Rest>
-  : Path extends `${string}:${infer Param}`
-  ? Param
-  : never
-
-export type Params<Path extends string> = {
-  [Key in ExtractParams<Path>]: string
-}
-
-export interface PageParams<Path extends string> {
-  parameters: Params<Path>
-}
-
-export interface Page<Path extends string> {
-  path: Path
-  element: FunctionComponent<PageParams<Path>>
-}
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  issue: FunctionComponent<IssueProps>;
-}
-
-class ErrorBoundary extends Component<ErrorBoundaryProps, IssueProps> {
-  public constructor(props: ErrorBoundaryProps) {
-    super(props);
-
-    this.state = {
-      error: null,
-      resetError: this.resetError.bind(this)
-    };
-  }
-
-  private resetError() {
-    this.setState({ error: null });
-  }
-
-  public static getDerivedStateFromError(error: Error) {
-    return {
-      error
-    };
-  }
-
-  public override componentDidCatch(error: unknown) {
-    this.setState({
-      error: error instanceof Error ? error : new Error(String(error))
-    });
-  }
-
-  public override render() {
-    if (this.state.error) {
-      const Issue = this.props.issue;
-
-      return <Issue error={this.state.error} resetError={this.state.resetError} />;
-    }
-
-    return this.props.children;
-  }
-}
-
-export function createPage<Path extends string>(page: Page<Path>): Page<Path> {
-  return {
-    ...page,
-    path: normalize(page.path) as Path
-  };
-}
-
-export type Transition = (direction: "forward" | "backward", next: () => void) => void;
-
-export const scaleFadeTransition: Transition = async (direction: NavigationDirection, next) => {
-  try {
-    const transition = document.startViewTransition(() => {
-      next();
-    });
-
-    await transition.ready;
-
-    document.documentElement.animate(
-      [
-        {
-          transform: 'scale(1)',
-          opacity: 1
-        },
-        {
-          transform: direction === "forward" ? "scale(1.04)" : "scale(0.96)",
-          opacity: 0
-        }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-old(root)`,
-      }
-    );
-
-    document.documentElement.animate(
-      [
-        {
-          transform: direction === "forward" ? "scale(0.96)" : "scale(1.04)",
-          opacity: 0
-        },
-        {
-          transform: 'scale(1)',
-          opacity: 1
-        }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-new(root)`,
-      }
-    );
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-export const crossFadeTransition: Transition = async (direction: NavigationDirection, next) => {
-  try {
-    const transition = document.startViewTransition(() => {
-      next();
-    });
-
-    await transition.ready;
-
-    document.documentElement.animate(
-      [
-        { opacity: 1 },
-        { opacity: 0 }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-old(root)`,
-      }
-    );
-
-    document.documentElement.animate(
-      [
-        { opacity: 0 },
-        { opacity: 1 }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-new(root)`,
-      }
-    );
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-export const slideHorizontalTransition: Transition = async (direction: NavigationDirection, next) => {
-  try {
-    const transition = document.startViewTransition(() => {
-      next();
-    });
-
-    await transition.ready;
-
-    document.documentElement.animate(
-      [
-        { transform: 'translateX(0)' },
-        { transform: direction === "forward" ? 'translateX(-100%)' : 'translateX(100%)' }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-old(root)`,
-      }
-    );
-
-    document.documentElement.animate(
-      [
-        { transform: direction === "forward" ? 'translateX(100%)' : 'translateX(-100%)' },
-        { transform: 'translateX(0)' }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-new(root)`,
-      }
-    );
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-export const slideVerticalTransition: Transition = async (direction: NavigationDirection, next) => {
-  try {
-    const transition = document.startViewTransition(() => {
-      next();
-    });
-
-    await transition.ready;
-
-    document.documentElement.animate(
-      [
-        { transform: 'translateY(0)' },
-        { transform: direction === "forward" ? 'translateY(-100%)' : 'translateY(100%)' }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-old(root)`,
-      }
-    );
-
-    document.documentElement.animate(
-      [
-        { transform: direction === "forward" ? 'translateY(100%)' : 'translateY(-100%)' },
-        { transform: 'translateY(0)' }
-      ],
-      {
-        duration: 200,
-        easing: "ease-in-out",
-        fill: "both",
-        pseudoElement: `::view-transition-new(root)`,
-      }
-    );
-  } catch (error) {
-    console.error(error);
-  }
-}
-
-export function createRouter<Locale extends string = never, Path extends string = never>({ prefix: expectedPrefix, locales, pages, fallback: Fallback, issue: Issue, transition }: Router<Path, Locale>) {
-  const RouterContext = createContext<RouterContextInterface<Locale>>({
-    locale: null,
-    prefix: null,
-    path: "/",
-    setLocale: () => { },
-  });
-
-
-  function useIsActivePage<P extends Path>(page: Page<P>): boolean {
-    const { path } = usePath();
-    return matchPath(page.path, path);
-  }
-
-  function useLocale() {
-    const context = useContext(RouterContext);
-
-    if (!context) {
-      throw new Error("component using the useLocale hook has not been wrapped inside RouterProvider.");
-    }
-
-    return {
-      locale: context.locale,
-      setLocale: (locale: Locale) => {
-        if (!locales?.includes(locale)) {
-          return;
-        }
-
-        window.history.pushState(null, "", `/${normalize(`${context.prefix ?? ""}/${locale}/${context.path}`)}`);
-        window.dispatchEvent(new Event("pushstate"));
-      }
-    }
-  }
-
-  function usePrefix() {
-    const context = useContext(RouterContext);
-
-    if (!context) {
-      throw new Error("Component using the usePrefix hook has not been wrapped inside RouterProvider");
-    }
-
-    return {
-      prefix: context.prefix
-    };
-  }
-
-  function usePath() {
-    const context = useContext(RouterContext);
-
-    if (!context) {
-      throw new Error("Component using the usePath hook has not been wrapped inside RouterProvider");
-    }
-
-    return {
-      path: context.path,
-    };
-  }
-
-  function useNavigateToPage<P extends Path>(page: Page<P>) {
-    const { locale } = useLocale();
-    const { prefix } = usePrefix();
-
-    return useCallback((...[params]: ExtractParams<P> extends never ? [] : [Params<P>]) => {
-      const path = Object.entries(params ?? {}).reduce<string>((oldParams, [name, value]) => {
-        return oldParams.replace(`:${name}`, String(value));
-      }, page.path);
-
-      const pathname = `/${normalize(`${prefix ?? ""}/${locale ?? ""}/${path}`)}`
-
-      console.log({ pathname });
-
-      window.history.pushState(null, "", pathname);
-      window.dispatchEvent(new Event("pushstate"));
-    }, [page, locale, prefix]);
-  }
-
-  function RouterProvider({ children }: RouterProviderProps) {
-    const uri = useMemo(() => Uri.from(window.location.pathname, expectedPrefix, locales), [expectedPrefix, locales]);
-    const [locale, setLocale] = useState(uri.locale);
-    const [path, setPath] = useState(uri.path);
-    const [prefix, setPrefix] = useState(uri.prefix);
-
-    function setHash(newHash: string) {
-      window.location.hash = newHash;
-    }
-
-    const value = useMemo(() => {
-      return {
-        locale,
-        path,
-        prefix: prefix ?? null,
-        setLocale,
-        setHash,
-      };
-    }, [locale, prefix, path]);
-
-    const onNavigation = useEffectEvent((direction: NavigationDirection) => {
-      const pathname = normalize(window.location.pathname);
-      const uri = Uri.from(pathname, expectedPrefix, locales);
-
-      const defaultTransition: Transition = (_, next) => {
-        next();
-      }
-
-      const currentTransition: Transition = transition ?? defaultTransition;
-
-      currentTransition(direction, () => {
-        setLocale(uri.locale);
-        setPath(uri.path);
-        setPrefix(uri.prefix);
-      });
-    });
-
-    const onMount = useEffectEvent(() => {
-      const pathname = `/${normalize(window.location.pathname)}`;
-      const uri = Uri.from(pathname, expectedPrefix, [locale, ...locales ?? []]);
-      const newPathname = `/${normalize(`${uri.prefix ?? expectedPrefix ?? ""}/${uri.locale ?? locales?.at(0) ?? ""}/${uri.path}`)}`;
-
-      if (newPathname !== pathname) {
-        window.history.pushState(null, "", newPathname);
-        window.dispatchEvent(new Event("pushstate"));
-      }
-    });
-
-    useEffect(() => {
-      const abortController = new AbortController();
-
-      window.addEventListener("pushstate", () => {
-        onNavigation("forward");
-      }, abortController);
-
-      window.addEventListener("popstate", () => {
-        onNavigation("backward");
-      }, abortController);
-
-      onMount();
-
-      return () => {
-        abortController.abort();
-      };
-    }, []);
-
-    return (
-      <RouterContext.Provider value={value}>
-        {children}
-      </RouterContext.Provider>
-    );
-  }
-
-  function RouterView() {
-    const { path } = usePath();
-
-    const foundPage = useMemo(() => {
-      return pages.find(page => {
-        return matchPath(page.path, path);
-      });
-    }, [path, pages]);
-
-    if (foundPage) {
-      return (
-        <ErrorBoundary issue={Issue}>
-          <foundPage.element parameters={matchParameters(foundPage.path, path) as Params<Path>} />
-        </ErrorBoundary>
-      );
-    }
-
-    return (
-      <ErrorBoundary issue={Issue}>
-        <Fallback />
-      </ErrorBoundary>
-    );
-  }
-
-  return {
-    RouterProvider,
-    RouterView,
-    useLocale,
-    usePrefix,
-    usePath,
-    useNavigateToPage,
-    useIsActivePage,
-  };
-}