@alepha/react 0.6.3 → 0.6.5

package/src/index.ts

@@ -0,0 +1,63 @@
+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,
+	type RouterState,
+} 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;
+		};
+
+		"react:transition:begin": {
+			state: RouterState;
+		};
+		"react:transition:success": {
+			state: RouterState;
+		};
+		"react:transition:error": {
+			error: Error;
+			state: RouterState;
+		};
+		"react:transition:end": {
+			state: RouterState;
+		};
+	}
+}
+
+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,152 @@
+import { $hook, $inject, $logger, Alepha } from "@alepha/core";
+import { type Route, RouterProvider } from "@alepha/router";
+import type { ReactNode } from "react";
+import {
+	PageDescriptorProvider,
+	type PageReactContext,
+	type PageRoute,
+	type PageRouteEntry,
+	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 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.alepha.emit("react:transition:begin", { state });
+
+		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.alepha.emit("react:transition:success", { state });
+		} catch (e) {
+			this.log.error(e);
+			state.layers = [
+				{
+					name: "error",
+					element: this.pageDescriptorProvider.renderError(e as Error),
+					index: 0,
+					path: "/",
+				},
+			];
+
+			await this.alepha.emit("react:transition:error", {
+				error: e as Error,
+				state,
+			});
+		}
+
+		if (!options.state) {
+			await this.alepha.emit("react:transition: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.alepha.emit("react:transition:end", {
+			state: 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);
+	}
+}