@aminnairi/react-router 3.0.1 → 4.0.0

package/README.md

@@ -26,6 +26,7 @@ Type-safe router for the React library
   - [Transition](#transition)
   - [Error handling](#error-handling)
 - [License](#license)
+- [Contributing](../CONTRIBUTING.md)
 - [Changelogs](#changelogs)
   - [Versions](#versions)
   - [3.0.0](#300)
@@ -935,6 +936,8 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`4.0.0`](#400)
+- [`3.0.2`](#302)
 - [`3.0.1`](#301)
 - [`3.0.0`](#300)
 - [`2.1.0`](#210)
@@ -946,6 +949,34 @@ See [`LICENSE`](./LICENSE).
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 4.0.0
+
+#### Major changes
+
+- Externalized React from the build output to prevent hooks mismatch issues with consumer applications. Consumers are now required to have React as a dependency in their project.
+
+#### Minor changes
+
+- Explicitly set the build output format to ESM.
+
+#### Bug & security fixes
+
+- Fixed lint error in the source code dependencies.
+
+### 3.0.2
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+None.
+
+#### Bug & security fixes
+
+- Fixed the output file path in the rolldown configuration (changed from `dist/index.ts` to `dist/index.js`)
+
 ### 3.0.1
 
 #### Major changes

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,353 @@
+import { Component, createContext, useCallback, useContext, useEffect, useEffectEvent, useMemo, useState } from "react";
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+//#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
+		};
+	}
+	exports.jsx = jsxProd;
+}));
+//#endregion
+//#region index.tsx
+var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = require_react_jsx_runtime_production();
+})))();
+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 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 = createContext({
+		locale: null,
+		prefix: null,
+		path: "/",
+		setLocale: () => {}
+	});
+	function useIsActivePage(page) {
+		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) => {
+				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(page) {
+		const { locale } = useLocale();
+		const { prefix } = usePrefix();
+		return 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 = useMemo(() => Uri.from(window.location.pathname, expectedPrefix, locales), []);
+		const [locale, setLocale] = useState(uri.locale);
+		const [path, setPath] = useState(uri.path);
+		const [prefix, setPrefix] = useState(uri.prefix);
+		function setHash(newHash) {
+			window.location.hash = newHash;
+		}
+		const value = useMemo(() => {
+			return {
+				locale,
+				path,
+				prefix: prefix ?? null,
+				setLocale,
+				setHash
+			};
+		}, [
+			locale,
+			prefix,
+			path
+		]);
+		const onNavigation = 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 = 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();
+			};
+		}, [onMount, onNavigation]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterContext.Provider, {
+			value,
+			children
+		});
+	}
+	function RouterView() {
+		const { path } = usePath();
+		const foundPage = useMemo(() => {
+			return pages.find((page) => {
+				return matchPath(page.path, path);
+			});
+		}, [path]);
+		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": "4.0.0",
+  "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"
@@ -28,16 +32,19 @@
     "history"
   ],
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": "^19.2.4"
   },
   "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": {
+    "@types/react": "^19.2.14",
     "@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,
-  };
-}