@alepha/react 0.6.2 → 0.6.4

package/src/hooks/useActive.ts

@@ -0,0 +1,57 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import type { AnchorProps } from "../providers/PageDescriptorProvider.ts";
+import type { HrefLike } from "./RouterHookApi.ts";
+import { useRouter } from "./useRouter.ts";
+
+export const useActive = (path: HrefLike): UseActiveHook => {
+	const router = useRouter();
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) {
+		throw new Error("useRouter must be used within a RouterProvider");
+	}
+
+	let name: string | undefined;
+	if (typeof path === "object" && path.options.name) {
+		name = path.options.name;
+	}
+
+	const [current, setCurrent] = useState(ctx.state.pathname);
+	const href = useMemo(() => router.createHref(path, layer), [path, layer]);
+	const [isPending, setPending] = useState(false);
+	const isActive = current === href;
+
+	useEffect(
+		() => ctx.events.on("end", ({ pathname }) => setCurrent(pathname)),
+		[],
+	);
+
+	return {
+		name,
+		isPending,
+		isActive,
+		anchorProps: {
+			href,
+			onClick: (ev: any) => {
+				ev.stopPropagation();
+				ev.preventDefault();
+				if (isActive) return;
+				if (isPending) return;
+
+				setPending(true);
+				router.go(href).then(() => {
+					setPending(false);
+				});
+			},
+		},
+	};
+};
+
+export interface UseActiveHook {
+	isActive: boolean;
+	anchorProps: AnchorProps;
+	isPending: boolean;
+	name?: string;
+}

package/src/hooks/useClient.ts

@@ -0,0 +1,6 @@
+import { HttpClient } from "@alepha/server";
+import { useInject } from "./useInject.ts";
+
+export const useClient = (): HttpClient => {
+	return useInject(HttpClient);
+};

package/src/hooks/useInject.ts

@@ -0,0 +1,14 @@
+import type { Class } from "@alepha/core";
+import { useContext } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+
+export const useInject = <T extends object>(clazz: Class<T>): T => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) {
+		throw new Error("useRouter must be used within a <RouterProvider>");
+	}
+
+	return ctx.alepha.get(clazz, {
+		skipRegistration: true,
+	});
+};

package/src/hooks/useQueryParams.ts

@@ -0,0 +1,59 @@
+import type { Alepha, Static, TObject } from "@alepha/core";
+import { useContext, useEffect, useState } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+import { useRouter } from "./useRouter.ts";
+
+export interface UseQueryParamsHookOptions {
+	format?: "base64" | "querystring";
+	key?: string;
+	push?: boolean;
+}
+
+export const useQueryParams = <T extends TObject>(
+	schema: T,
+	options: UseQueryParamsHookOptions = {},
+): [Static<T>, (data: Static<T>) => void] => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) {
+		throw new Error("useQueryParams must be used within a RouterProvider");
+	}
+
+	const key = options.key ?? "q";
+	const router = useRouter();
+	const querystring = router.query[key];
+
+	const [queryParams, setQueryParams] = useState(
+		decode(ctx.alepha, schema, router.query[key]),
+	);
+
+	useEffect(() => {
+		setQueryParams(decode(ctx.alepha, schema, querystring));
+	}, [querystring]);
+
+	return [
+		queryParams,
+		(queryParams: Static<T>) => {
+			setQueryParams(queryParams);
+			router.setQueryParams(
+				{ [key]: encode(ctx.alepha, schema, queryParams) },
+				{
+					merge: true,
+				},
+			);
+		},
+	];
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+const encode = (alepha: Alepha, schema: TObject, data: any) => {
+	return btoa(JSON.stringify(alepha.parse(schema, data)));
+};
+
+const decode = (alepha: Alepha, schema: TObject, data: any) => {
+	try {
+		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
+	} catch (error) {
+		return {};
+	}
+};

package/src/hooks/useRouter.ts

@@ -0,0 +1,25 @@
+import { useContext, useMemo } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import { ReactBrowserProvider } from "../providers/ReactBrowserProvider.ts";
+import { RouterHookApi } from "./RouterHookApi.ts";
+
+export const useRouter = (): RouterHookApi => {
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) {
+		throw new Error("useRouter must be used within a RouterProvider");
+	}
+
+	return useMemo(
+		() =>
+			new RouterHookApi(
+				ctx.state,
+				layer,
+				ctx.alepha.isBrowser()
+					? ctx.alepha.get(ReactBrowserProvider)
+					: undefined,
+			),
+		[layer],
+	);
+};

package/src/hooks/useRouterEvents.ts

@@ -0,0 +1,43 @@
+import { useContext, useEffect } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import type { RouterState } from "../providers/PageDescriptorProvider.ts";
+
+export const useRouterEvents = (
+	opts: {
+		onBegin?: () => void;
+		onEnd?: (it: RouterState) => void;
+		onError?: (it: Error) => void;
+	} = {},
+) => {
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) {
+		throw new Error("useRouter must be used within a RouterProvider");
+	}
+
+	useEffect(() => {
+		const subs: Function[] = [];
+		const onBegin = opts.onBegin;
+		const onEnd = opts.onEnd;
+		const onError = opts.onError;
+
+		if (onBegin) {
+			subs.push(ctx.events.on("begin", onBegin));
+		}
+
+		if (onEnd) {
+			subs.push(ctx.events.on("end", onEnd));
+		}
+
+		if (onError) {
+			subs.push(ctx.events.on("error", onError));
+		}
+
+		return () => {
+			for (const sub of subs) {
+				sub();
+			}
+		};
+	}, []);
+};

package/src/hooks/useRouterState.ts

@@ -0,0 +1,23 @@
+import { useContext, useEffect, useState } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import type { RouterState } from "../providers/PageDescriptorProvider.ts";
+
+export const useRouterState = (): RouterState => {
+	const ctx = useContext(RouterContext);
+	const layer = useContext(RouterLayerContext);
+	if (!ctx || !layer) {
+		throw new Error("useRouter must be used within a RouterProvider");
+	}
+
+	const [state, setState] = useState(ctx.state);
+	useEffect(
+		() =>
+			ctx.events.on("end", (it) => {
+				setState({ ...it });
+			}),
+		[],
+	);
+
+	return state;
+};

package/src/index.browser.ts

@@ -0,0 +1,21 @@
+import { $inject, Alepha, __bind } from "@alepha/core";
+import { $page } from "./descriptors/$page.ts";
+import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
+import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
+import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
+
+export * from "./index.shared";
+export * from "./providers/ReactBrowserProvider.ts";
+
+export class ReactModule {
+	protected readonly alepha = $inject(Alepha);
+
+	constructor() {
+		this.alepha //
+			.with(PageDescriptorProvider)
+			.with(ReactBrowserProvider)
+			.with(BrowserRouterProvider);
+	}
+}
+
+__bind($page, ReactModule);

package/src/index.shared.ts

@@ -0,0 +1,15 @@
+export { default as NestedView } from "./components/NestedView.tsx";
+export { default as Link } from "./components/Link.tsx";
+
+export * from "./contexts/RouterContext.ts";
+export * from "./contexts/RouterLayerContext.ts";
+export * from "./descriptors/$page.ts";
+export * from "./hooks/RouterHookApi.ts";
+export * from "./hooks/useInject.ts";
+export * from "./hooks/useClient.ts";
+export * from "./hooks/useQueryParams.ts";
+export * from "./hooks/useRouter.ts";
+export * from "./hooks/useRouterEvents.ts";
+export * from "./hooks/useRouterState.ts";
+export * from "./hooks/useActive.ts";
+export * from "./errors/RedirectionError.ts";

package/src/index.ts

@@ -0,0 +1,48 @@
+import { $inject, Alepha, __bind } from "@alepha/core";
+import {
+	ServerLinksProvider,
+	ServerModule,
+	type ServerRequest,
+} from "@alepha/server";
+import { $page } from "./descriptors/$page.ts";
+import {
+	PageDescriptorProvider,
+	type PageReactContext,
+	type PageRequest,
+} from "./providers/PageDescriptorProvider.ts";
+import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
+import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
+export { default as NestedView } from "./components/NestedView.tsx";
+
+export * from "./index.shared.ts";
+export * from "./providers/PageDescriptorProvider.ts";
+export * from "./providers/ReactBrowserProvider.ts";
+export * from "./providers/ReactServerProvider.ts";
+export * from "./errors/RedirectionError.ts";
+
+declare module "@alepha/core" {
+	interface Hooks {
+		"react:browser:render": {
+			context: PageReactContext;
+			hydration?: ReactHydrationState;
+		};
+		"react:server:render": {
+			request: ServerRequest;
+			pageRequest: PageRequest;
+		};
+	}
+}
+
+export class ReactModule {
+	protected readonly alepha = $inject(Alepha);
+
+	constructor() {
+		this.alepha //
+			.with(ServerModule)
+			.with(ServerLinksProvider)
+			.with(PageDescriptorProvider)
+			.with(ReactServerProvider);
+	}
+}
+
+__bind($page, ReactModule);

package/src/providers/BrowserHeadProvider.ts

@@ -0,0 +1,43 @@
+import type { Head } from "./ServerHeadProvider.ts";
+
+export class BrowserHeadProvider {
+	renderHead(document: Document, head: Head): void {
+		if (head.title) {
+			document.title = head.title;
+		}
+
+		if (head.bodyAttributes) {
+			for (const [key, value] of Object.entries(head.bodyAttributes)) {
+				if (value) {
+					document.body.setAttribute(key, value);
+				} else {
+					document.body.removeAttribute(key);
+				}
+			}
+		}
+
+		if (head.htmlAttributes) {
+			for (const [key, value] of Object.entries(head.htmlAttributes)) {
+				if (value) {
+					document.documentElement.setAttribute(key, value);
+				} else {
+					document.documentElement.removeAttribute(key);
+				}
+			}
+		}
+
+		if (head.meta) {
+			for (const [key, value] of Object.entries(head.meta)) {
+				const meta = document.querySelector(`meta[name="${key}"]`);
+				if (meta) {
+					meta.setAttribute("content", value.content);
+				} else {
+					const newMeta = document.createElement("meta");
+					newMeta.setAttribute("name", key);
+					newMeta.setAttribute("content", value.content);
+					document.head.appendChild(newMeta);
+				}
+			}
+		}
+	}
+}

package/src/providers/BrowserRouterProvider.ts

@@ -0,0 +1,146 @@
+import { $hook, $inject, $logger, Alepha, EventEmitter } from "@alepha/core";
+import { type Route, RouterProvider } from "@alepha/router";
+import type { ReactNode } from "react";
+import {
+	PageDescriptorProvider,
+	type PageReactContext,
+	type PageRoute,
+	type PageRouteEntry,
+	type RouterEvents,
+	type RouterRenderResult,
+	type RouterState,
+	type TransitionOptions,
+	isPageRoute,
+} from "./PageDescriptorProvider.ts";
+
+export interface BrowserRoute extends Route {
+	page: PageRoute;
+}
+
+export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
+	protected readonly log = $logger();
+	protected readonly alepha = $inject(Alepha);
+	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
+	public readonly events = new EventEmitter<RouterEvents>();
+
+	public add(entry: PageRouteEntry) {
+		this.pageDescriptorProvider.add(entry);
+	}
+
+	protected readonly configure = $hook({
+		name: "configure",
+		handler: async () => {
+			for (const page of this.pageDescriptorProvider.getPages()) {
+				// mount only if a view is provided
+				if (page.component || page.lazy) {
+					this.push({
+						path: page.match,
+						page,
+					});
+				}
+			}
+		},
+	});
+
+	public async transition(
+		url: URL,
+		options: TransitionOptions = {},
+	): Promise<RouterRenderResult> {
+		const { pathname, search } = url;
+		const state: RouterState = {
+			pathname,
+			search,
+			layers: [],
+			head: {},
+		};
+
+		await this.events.emit("begin", undefined);
+
+		try {
+			const previous = options.previous;
+			const { route, params } = this.match(pathname);
+
+			const query: Record<string, string> = {};
+			if (search) {
+				for (const [key, value] of new URLSearchParams(search).entries()) {
+					query[key] = String(value);
+				}
+			}
+
+			if (isPageRoute(route)) {
+				const result = await this.pageDescriptorProvider.createLayers(
+					route.page,
+					{
+						url,
+						params: params ?? {},
+						query,
+						previous,
+						...state,
+						head: state.head,
+						...(options.context ?? {}),
+					},
+				);
+
+				if (result.redirect) {
+					return {
+						element: null,
+						layers: [],
+						redirect: result.redirect,
+						head: state.head,
+					};
+				}
+
+				state.layers = result.layers;
+				state.head = result.head;
+			}
+
+			if (state.layers.length === 0) {
+				state.layers.push({
+					name: "not-found",
+					element: "Not Found",
+					index: 0,
+					path: "/",
+				});
+			}
+
+			await this.events.emit("success", undefined);
+		} catch (e) {
+			this.log.error(e);
+			state.layers = [
+				{
+					name: "error",
+					element: this.pageDescriptorProvider.renderError(e as Error),
+					index: 0,
+					path: "/",
+				},
+			];
+
+			await this.events.emit("error", e as Error);
+		}
+
+		if (!options.state) {
+			await this.events.emit("end", state);
+			return {
+				element: this.root(state, options.context),
+				layers: state.layers,
+				head: state.head,
+			};
+		}
+
+		options.state.layers = state.layers;
+		options.state.pathname = state.pathname;
+		options.state.search = state.search;
+		options.state.head = state.head;
+
+		await this.events.emit("end", options.state);
+		return {
+			element: this.root(state, options.context),
+			layers: options.state.layers,
+			head: state.head,
+		};
+	}
+
+	public root(state: RouterState, context: PageReactContext = {}): ReactNode {
+		return this.pageDescriptorProvider.root(state, context, this.events);
+	}
+}