/packages/react_ui/src/contexts/Router.tsx at 0e6f2f21a6827079450d3a56b1b26e432f6cb168

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import "../polyfill.ts";

import {
	createContext,
	type FC,
	type ReactNode,
	use,
	useEffect,
	useMemo,
	useRef,
	useState,
} from "react";

export const URLContext = createContext<URL>(new URL(location.href));

export interface Navigation {
	replace(url: string | URL): void;
	push(url: string | URL): void;

	forward(): void;
	back(): void;
}

const nativeNavigation: Navigation = {
	push(url) {
		location.href = url instanceof URL ? url.href : url;
	},
	replace(url) {
		location.href = url instanceof URL ? url.href : url;
	},
	forward() {
		history.forward();
	},
	back() {
		history.back();
	},
};

export const NavigationContext = createContext<Navigation>(nativeNavigation);

export interface HistoryAPIRouterProviderProps {
	children: ReactNode;

	baseURL?: string | URL | undefined;
}

export const HistoryAPIRouterProvider: FC<HistoryAPIRouterProviderProps> = ({
	baseURL,
	children,
}) => {
	const [url, setURL] = useState(() => new URL(location.href));

	const navigation = useMemo<Navigation>(() => {
		return {
			push(url) {
				history.pushState({}, "", url);
				setURL(new URL(url, location.href));
			},
			replace(url) {
				history.replaceState({}, "", url);
				setURL(new URL(url, location.href));
			},
			back() {
				history.back();
				setURL(new URL(location.href));
			},
			forward() {
				history.forward();
				setURL(new URL(location.href));
			},
		};
	}, []);

	useEffect(() => {
		const listener = (_event: PopStateEvent) => {
			setURL(new URL(location.href));
		};

		window.addEventListener("popstate", listener);

		return () => void window.removeEventListener("popstate", listener);
	}, []);

	useEffect(() => {
		const root = new URL(baseURL ?? "/", url);

		const listener = (event: MouseEvent) => {
			if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
				return;
			}

			if (!(event.target instanceof Element)) {
				return;
			}

			const anchor =
				event.target instanceof HTMLAnchorElement
					? event.target
					: event.target.closest("a");
			if (
				!anchor ||
				!anchor.href ||
				(anchor.hasAttribute("target") && anchor.getAttribute("target") !== "_self")
			) {
				return;
			}

			const href = new URL(anchor.href, url);
			if (!href.toString().startsWith(root.toString())) {
				return;
			}

			event.preventDefault();
			event.stopPropagation();
			event.stopImmediatePropagation();

			navigation.push(href);
		};

		document.addEventListener("click", listener);

		return () => void document.removeEventListener("click", listener);
	}, [baseURL, url, navigation]);

	return (
		<NavigationContext.Provider value={navigation}>
			<URLContext.Provider value={url}>{children}</URLContext.Provider>
		</NavigationContext.Provider>
	);
};

export interface InmemoryRouterProviderProps {
	initialURL?: string | URL | undefined;

	baseURL?: string | URL | undefined;

	children: ReactNode;

	onRouteChange?(url: URL): void;
}

export const InmemoryRouterProvider: FC<InmemoryRouterProviderProps> = ({
	initialURL,
	baseURL,
	children,
	onRouteChange,
}) => {
	const [history, setHistory] = useState<{
		current: URL;
		backwards: readonly URL[];
		forwards: readonly URL[];
	}>(() => {
		return {
			current: new URL(initialURL ?? location.href, location.href),
			forwards: [],
			backwards: [],
		};
	});

	const routeChangeCallback = useRef(onRouteChange);
	routeChangeCallback.current = onRouteChange;

	const navigation = useMemo<Navigation>(() => {
		return {
			push(url) {
				setHistory(({ current, backwards }) => {
					const next = new URL(url, current);

					routeChangeCallback.current?.(next);

					return {
						current: next,
						backwards: [current, ...backwards],
						forwards: [],
					};
				});
			},
			replace(url) {
				setHistory(({ current, backwards, forwards }) => {
					const next = new URL(url, current);

					routeChangeCallback.current?.(next);

					return {
						current: next,
						backwards,
						forwards,
					};
				});
			},
			forward() {
				setHistory((history) => {
					if (!history.forwards[0]) {
						return history;
					}

					routeChangeCallback.current?.(history.forwards[0]);

					return {
						current: history.forwards[0],
						backwards: [history.current, ...history.backwards],
						forwards: history.forwards.slice(1),
					};
				});
			},
			back() {
				setHistory((history) => {
					if (!history.backwards[0]) {
						return history;
					}

					routeChangeCallback.current?.(history.backwards[0]);

					return {
						current: history.backwards[0],
						backwards: history.backwards.slice(1),
						forwards: [history.current, ...history.forwards],
					};
				});
			},
		};
	}, []);

	const root = useMemo(() => new URL(baseURL ?? location.href, location.href), [baseURL]);

	useEffect(() => {
		const listener = (event: MouseEvent) => {
			if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
				return;
			}

			if (!(event.target instanceof Element)) {
				return;
			}

			const anchor =
				event.target instanceof HTMLAnchorElement
					? event.target
					: event.target.closest("a");
			if (
				!anchor ||
				!anchor.href ||
				(anchor.hasAttribute("target") && anchor.getAttribute("target") !== "_self")
			) {
				return;
			}

			const href = new URL(anchor.href, history.current);
			if (!href.toString().startsWith(root.toString())) {
				return;
			}

			event.preventDefault();
			event.stopPropagation();
			event.stopImmediatePropagation();

			navigation.push(href);
		};

		document.addEventListener("click", listener);

		return () => void document.removeEventListener("click", listener);
	}, [root, history.current, navigation]);

	return (
		<NavigationContext.Provider value={navigation}>
			<URLContext.Provider value={history.current}>{children}</URLContext.Provider>
		</NavigationContext.Provider>
	);
};

const URLPatternResultContext = createContext<URLPatternResult | null>(null);

export function useURLPatternResult(): URLPatternResult {
	const result = use(URLPatternResultContext);
	if (!result) {
		throw new Error("Router invariant: useURLPatternResult was called outside <On/>.");
	}

	return result;
}

export interface SelectProps {
	routes: readonly {
		children: ReactNode;
		pattern: URLPattern;
	}[];

	fallback?: ReactNode;
}

export const Select: FC<SelectProps> = ({ routes, fallback }) => {
	const url = use(URLContext);

	for (const route of routes) {
		const result = route.pattern.exec(url);
		if (!result) {
			continue;
		}

		return (
			<URLPatternResultContext.Provider value={result}>
				{route.children}
			</URLPatternResultContext.Provider>
		);
	}

	return fallback;
};

export interface OnProps {
	children: ReactNode;
	pattern: URLPattern;
}

export const On: FC<OnProps> = ({ children, pattern }) => {
	const url = use(URLContext);

	const result = useMemo(() => pattern.exec(url), [pattern, url]);
	if (!result) {
		return null;
	}

	return (
		<URLPatternResultContext.Provider value={result}>
			{children}
		</URLPatternResultContext.Provider>
	);
};