@alepha/react 0.6.3 → 0.6.5

package/src/providers/ReactBrowserProvider.ts

@@ -0,0 +1,232 @@
+import { $hook, $inject, $logger, Alepha, type Static, t } from "@alepha/core";
+import { HttpClient, type HttpClientLink } from "@alepha/server";
+import type { Root } from "react-dom/client";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import type { Head } from "../descriptors/$page.ts";
+import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
+import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
+import type {
+	PreviousLayerData,
+	RouterState,
+	TransitionOptions,
+} from "./PageDescriptorProvider.ts";
+
+const envSchema = t.object({
+	REACT_ROOT_ID: t.string({ default: "root" }),
+});
+
+declare module "@alepha/core" {
+	interface Env extends Partial<Static<typeof envSchema>> {}
+}
+
+export class ReactBrowserProvider {
+	protected readonly log = $logger();
+	protected readonly client = $inject(HttpClient);
+	protected readonly alepha = $inject(Alepha);
+	protected readonly router = $inject(BrowserRouterProvider);
+	protected readonly headProvider = $inject(BrowserHeadProvider);
+	protected readonly env = $inject(envSchema);
+	protected root!: Root;
+
+	public transitioning?: {
+		to: string;
+	};
+
+	public state: RouterState = {
+		layers: [],
+		pathname: "",
+		search: "",
+		head: {},
+	};
+
+	public get document() {
+		return window.document;
+	}
+
+	public get history() {
+		return window.history;
+	}
+
+	public get url(): string {
+		return window.location.pathname + window.location.search;
+	}
+
+	public async invalidate(props?: Record<string, any>) {
+		const previous: PreviousLayerData[] = [];
+
+		if (props) {
+			const [key] = Object.keys(props);
+			const value = props[key];
+
+			for (const layer of this.state.layers) {
+				if (layer.props?.[key]) {
+					previous.push({
+						...layer,
+						props: {
+							...layer.props,
+							[key]: value,
+						},
+					});
+					break;
+				}
+				previous.push(layer);
+			}
+		}
+
+		await this.render({ previous });
+	}
+
+	/**
+	 *
+	 * @param url
+	 * @param options
+	 */
+	public async go(url: string, options: RouterGoOptions = {}): Promise<void> {
+		const result = await this.render({
+			url,
+		});
+
+		if (result.url !== url) {
+			this.history.replaceState({}, "", result.url);
+			return;
+		}
+
+		if (options.replace) {
+			this.history.replaceState({}, "", url);
+			return;
+		}
+
+		this.history.pushState({}, "", url);
+	}
+
+	protected async render(
+		options: {
+			url?: string;
+			previous?: PreviousLayerData[];
+		} = {},
+	): Promise<{ url: string; head: Head }> {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+
+		this.transitioning = { to: url };
+
+		const result = await this.router.transition(
+			new URL(`http://localhost${url}`),
+			{
+				previous,
+				state: this.state,
+			},
+		);
+
+		if (result.redirect) {
+			return await this.render({ url: result.redirect });
+		}
+
+		this.transitioning = undefined;
+
+		return { url, head: result.head };
+	}
+
+	/**
+	 * Get embedded layers from the server.
+	 *
+	 * @protected
+	 */
+	protected getHydrationState(): ReactHydrationState | undefined {
+		try {
+			if ("__ssr" in window && typeof window.__ssr === "object") {
+				return window.__ssr as ReactHydrationState;
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	/**
+	 *
+	 * @protected
+	 */
+	protected getRootElement() {
+		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
+		if (root) {
+			return root;
+		}
+
+		const div = this.document.createElement("div");
+		div.id = this.env.REACT_ROOT_ID;
+
+		this.document.body.prepend(div);
+
+		return div;
+	}
+
+	// -------------------------------------------------------------------------------------------------------------------
+
+	/**
+	 *
+	 * @protected
+	 */
+	public readonly ready = $hook({
+		name: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+
+			if (hydration?.links) {
+				this.client.links = hydration.links as HttpClientLink[];
+			}
+
+			const { head } = await this.render({ previous });
+			if (head) {
+				this.headProvider.renderHead(this.document, head);
+			}
+
+			const context = {};
+
+			await this.alepha.emit("react:browser:render", {
+				context,
+				hydration,
+			});
+
+			const element = this.router.root(this.state, context);
+
+			if (previous.length > 0) {
+				this.root = hydrateRoot(this.getRootElement(), element);
+				this.log.info("Hydrated root element");
+			} else {
+				this.root ??= createRoot(this.getRootElement());
+				this.root.render(element);
+				this.log.info("Created root element");
+			}
+
+			window.addEventListener("popstate", () => {
+				this.render();
+			});
+
+			this.alepha.on("react:transition:end", {
+				callback: ({ state }) => {
+					this.headProvider.renderHead(this.document, state.head);
+				},
+			});
+		},
+	});
+
+	public readonly onTransitionEnd = $hook({
+		name: "react:transition:end",
+		handler: async ({ state }) => {
+			this.headProvider.renderHead(this.document, state.head);
+		},
+	});
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface RouterGoOptions {
+	replace?: boolean;
+	match?: TransitionOptions;
+}
+
+export interface ReactHydrationState {
+	layers?: PreviousLayerData[];
+	links?: HttpClientLink[];
+}

package/src/providers/ReactServerProvider.ts

@@ -0,0 +1,286 @@
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import {
+	$hook,
+	$inject,
+	$logger,
+	Alepha,
+	OPTIONS,
+	type Static,
+	t,
+} from "@alepha/core";
+import {
+	type ServerHandler,
+	ServerLinksProvider,
+	ServerRouterProvider,
+} from "@alepha/server";
+import { ServerStaticProvider } from "@alepha/server-static";
+import { renderToString } from "react-dom/server";
+import { $page } from "../descriptors/$page.ts";
+import {
+	PageDescriptorProvider,
+	type PageRequest,
+	type PageRoute,
+} from "./PageDescriptorProvider.ts";
+import { ServerHeadProvider } from "./ServerHeadProvider.ts";
+
+export const envSchema = t.object({
+	REACT_SERVER_DIST: t.string({ default: "client" }),
+	REACT_SERVER_PREFIX: t.string({ default: "" }),
+	REACT_SSR_ENABLED: t.boolean({ default: false }),
+	REACT_ROOT_ID: t.string({ default: "root" }),
+});
+
+declare module "@alepha/core" {
+	interface Env extends Partial<Static<typeof envSchema>> {}
+	interface State {
+		"ReactServerProvider.template"?: string;
+		"ReactServerProvider.ssr"?: boolean;
+	}
+}
+
+export class ReactServerProvider {
+	protected readonly log = $logger();
+	protected readonly alepha = $inject(Alepha);
+	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
+	protected readonly serverStaticProvider = $inject(ServerStaticProvider);
+	protected readonly serverRouterProvider = $inject(ServerRouterProvider);
+	protected readonly headProvider = $inject(ServerHeadProvider);
+	protected readonly env = $inject(envSchema);
+	protected readonly ROOT_DIV_REGEX = new RegExp(
+		`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
+		"is",
+	);
+
+	protected readonly configure = $hook({
+		name: "configure",
+		handler: async () => {
+			const pages = this.alepha.getDescriptorValues($page);
+			if (pages.length === 0) {
+				return;
+			}
+
+			for (const { key, instance, value } of pages) {
+				const name = value[OPTIONS].name ?? key;
+
+				if (this.alepha.isTest()) {
+					instance[key].render = this.createRenderFunction(name);
+				}
+			}
+
+			if (this.alepha.isServerless() === "vite") {
+				await this.configureVite();
+				return;
+			}
+
+			let root = "";
+			if (!this.alepha.isServerless()) {
+				root = this.getPublicDirectory();
+
+				if (!root) {
+					this.log.warn("Missing static files, SSR will be disabled");
+					return;
+				}
+
+				await this.configureStaticServer(root);
+			}
+
+			const template =
+				this.alepha.state("ReactServerProvider.template") ??
+				(await readFile(join(root, "index.html"), "utf-8"));
+
+			await this.registerPages(async () => template);
+
+			this.alepha.state("ReactServerProvider.ssr", true);
+		},
+	});
+
+	protected async registerPages(
+		templateLoader: () => Promise<string | undefined>,
+	) {
+		for (const page of this.pageDescriptorProvider.getPages()) {
+			this.log.debug(`+ ${page.match} -> ${page.name}`);
+			await this.serverRouterProvider.route({
+				method: "GET",
+				path: page.match,
+				handler: this.createHandler(page, templateLoader),
+			});
+		}
+	}
+
+	protected getPublicDirectory(): string {
+		const maybe = [
+			join(process.cwd(), this.env.REACT_SERVER_DIST),
+			join(process.cwd(), "..", this.env.REACT_SERVER_DIST),
+		];
+
+		for (const it of maybe) {
+			if (existsSync(it)) {
+				return it;
+			}
+		}
+
+		return "";
+	}
+
+	protected async configureStaticServer(root: string) {
+		await this.serverStaticProvider.serve({
+			root,
+			path: this.env.REACT_SERVER_PREFIX,
+		});
+	}
+
+	protected async configureVite() {
+		const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
+		this.log.info("SSR (vite) OK");
+		this.alepha.state("ReactServerProvider.ssr", true);
+		const templateUrl = `${url}/index.html`;
+
+		await this.registerPages(() =>
+			fetch(templateUrl)
+				.then((it) => it.text())
+				.catch(() => undefined),
+		);
+	}
+
+	protected createRenderFunction(name: string) {
+		return async (
+			options: {
+				params?: Record<string, string>;
+				query?: Record<string, string>;
+			} = {},
+		) => {
+			const page = this.pageDescriptorProvider.page(name);
+
+			const state = await this.pageDescriptorProvider.createLayers(page, {
+				url: new URL("http://localhost"),
+				params: options.params ?? {},
+				query: options.query ?? {},
+				head: {},
+			});
+
+			return renderToString(this.pageDescriptorProvider.root(state));
+		};
+	}
+
+	protected createHandler(
+		page: PageRoute,
+		templateLoader: () => Promise<string | undefined>,
+	): ServerHandler {
+		return async (serverRequest) => {
+			const { url, reply, query, params } = serverRequest;
+			const template = await templateLoader();
+			if (!template) {
+				throw new Error("Template not found");
+			}
+
+			const request: PageRequest = {
+				url,
+				params,
+				query,
+				head: {},
+			};
+
+			// -- links
+			if (this.alepha.has(ServerLinksProvider)) {
+				const srv = this.alepha.get(ServerLinksProvider);
+				request.links = (await srv.links()) as any;
+				this.alepha.als.set("links", request.links);
+			}
+
+			await this.alepha.emit(
+				"react:server:render",
+				{
+					request: serverRequest,
+					pageRequest: request,
+				},
+				{
+					log: false,
+				},
+			);
+
+			const state = await this.pageDescriptorProvider.createLayers(
+				page,
+				request,
+			);
+
+			if (state.redirect) {
+				return reply.redirect(state.redirect);
+			}
+
+			const element = this.pageDescriptorProvider.root(state, request);
+			const app = renderToString(element);
+
+			// create hydration data
+			const script = `<script>window.__ssr=${JSON.stringify({
+				links: request.links,
+				layers: state.layers.map((it) => ({
+					...it,
+					error: it.error
+						? {
+								...it.error,
+								name: it.error.name,
+								message: it.error.message,
+								stack: it.error.stack, // TODO: Hide stack in production ?
+							}
+						: undefined,
+					index: undefined,
+					path: undefined,
+					element: undefined,
+				})),
+			})}</script>`;
+
+			const response = {
+				html: template,
+			};
+
+			reply.status = 200;
+			reply.headers["content-type"] = "text/html";
+			reply.headers["cache-control"] =
+				"no-store, no-cache, must-revalidate, proxy-revalidate";
+			reply.headers.pragma = "no-cache";
+			reply.headers.expires = "0";
+
+			// inject app into template
+			this.fillTemplate(response, app, script);
+
+			// inject head meta
+			if (state.head) {
+				response.html = this.headProvider.renderHead(response.html, state.head);
+			}
+
+			// TODO: hook for plugins "react:server:template"
+			// { response: { html: string }, request, state }
+
+			return response.html;
+		};
+	}
+
+	fillTemplate(response: { html: string }, app: string, script: string) {
+		if (this.ROOT_DIV_REGEX.test(response.html)) {
+			// replace contents of the existing <div id="root">
+			response.html = response.html.replace(
+				this.ROOT_DIV_REGEX,
+				(_match, beforeId, afterId) => {
+					return `<div${beforeId} id="${this.env.REACT_ROOT_ID}"${afterId}>${app}</div>`;
+				},
+			);
+		} else {
+			const bodyOpenTag = /<body([^>]*)>/i;
+			if (bodyOpenTag.test(response.html)) {
+				response.html = response.html.replace(bodyOpenTag, (match) => {
+					return `${match}\n<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
+				});
+			}
+		}
+
+		const bodyCloseTagRegex = /<\/body>/i;
+		if (bodyCloseTagRegex.test(response.html)) {
+			response.html = response.html.replace(
+				bodyCloseTagRegex,
+				`${script}\n</body>`,
+			);
+		}
+	}
+}

package/src/providers/ServerHeadProvider.ts

@@ -0,0 +1,91 @@
+export interface Head {
+	title?: string;
+	htmlAttributes?: Record<string, string>;
+	bodyAttributes?: Record<string, string>;
+	meta?: Array<{ name: string; content: string }>;
+}
+
+export class ServerHeadProvider {
+	renderHead(template: string, head: Head): string {
+		let result = template;
+
+		// Inject htmlAttributes
+		const htmlAttributes = head.htmlAttributes;
+		if (htmlAttributes) {
+			result = result.replace(
+				/<html([^>]*)>/i,
+				(_, existingAttrs) =>
+					`<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`,
+			);
+		}
+
+		// Inject bodyAttributes
+		const bodyAttributes = head.bodyAttributes;
+		if (bodyAttributes) {
+			result = result.replace(
+				/<body([^>]*)>/i,
+				(_, existingAttrs) =>
+					`<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`,
+			);
+		}
+
+		// Build head content
+		let headContent = "";
+		const title = head.title;
+		if (title) {
+			if (template.includes("<title>")) {
+				result = result.replace(
+					/<title>(.*?)<\/title>/i,
+					() => `<title>${this.escapeHtml(title)}</title>`,
+				);
+			} else {
+				headContent += `<title>${this.escapeHtml(title)}</title>\n`;
+			}
+		}
+
+		if (head.meta) {
+			for (const meta of head.meta) {
+				headContent += `<meta name="${this.escapeHtml(meta.name)}" content="${this.escapeHtml(meta.content)}">\n`;
+			}
+		}
+
+		// Inject into <head>...</head>
+		result = result.replace(
+			/<head([^>]*)>(.*?)<\/head>/is,
+			(_, existingAttrs, existingHead) =>
+				`<head${existingAttrs}>${existingHead}${headContent}</head>`,
+		);
+
+		return result.trim();
+	}
+
+	mergeAttributes(existing: string, attrs: Record<string, string>): string {
+		const existingAttrs = this.parseAttributes(existing);
+		const merged = { ...existingAttrs, ...attrs };
+		return Object.entries(merged)
+			.map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`)
+			.join("");
+	}
+
+	parseAttributes(attrStr: string): Record<string, string> {
+		const attrs: Record<string, string> = {};
+		const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
+		let match: RegExpExecArray | null = attrRegex.exec(attrStr);
+
+		while (match) {
+			attrs[match[1]] = match[2] ?? "";
+			match = attrRegex.exec(attrStr);
+		}
+
+		return attrs;
+	}
+
+	escapeHtml(str: string): string {
+		return str
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;")
+			.replace(/'/g, "&#039;");
+	}
+}