@alepha/react 0.7.6 → 0.7.7

package/src/index.ts

@@ -22,21 +22,33 @@ export * from "./providers/ReactServerProvider.ts";
 
 declare module "@alepha/core" {
 	interface Hooks {
+		"react:router:createLayers": {
+			request: ServerRequest;
+			context: PageRequest;
+			layers: PageRequest[];
+		};
+		"react:server:render:begin": {
+			request?: ServerRequest;
+			context: PageRequest;
+		};
+		"react:server:render:end": {
+			request?: ServerRequest;
+			context: PageRequest;
+			state: RouterState;
+			html: string;
+		};
 		"react:browser:render": {
 			state: RouterState;
 			context: PageReactContext;
 			hydration?: ReactHydrationState;
 		};
-		"react:server:render": {
-			request: ServerRequest;
-			pageRequest: PageRequest;
-		};
 		"react:transition:begin": {
 			state: RouterState;
 			context: PageReactContext;
 		};
 		"react:transition:success": {
 			state: RouterState;
+			context: PageReactContext;
 		};
 		"react:transition:error": {
 			error: Error;

package/src/providers/BrowserRouterProvider.ts

@@ -53,14 +53,13 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			layers: [],
 		};
 
-		const context: PageRequest = {
+		const context = {
 			url,
 			query: {},
 			params: {},
-			head: {},
 			onError: () => null,
 			...(options.context ?? {}),
-		};
+		} as PageRequest;
 
 		await this.alepha.emit("react:transition:begin", { state, context });
 
@@ -105,7 +104,7 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 				});
 			}
 
-			await this.alepha.emit("react:transition:success", { state });
+			await this.alepha.emit("react:transition:success", { state, context });
 		} catch (e) {
 			this.log.error(e);
 			state.layers = [

package/src/providers/PageDescriptorProvider.ts

@@ -8,11 +8,7 @@ import NestedView from "../components/NestedView.tsx";
 import NotFoundPage from "../components/NotFound.tsx";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
-import {
-	$page,
-	type Head,
-	type PageDescriptorOptions,
-} from "../descriptors/$page.ts";
+import { $page, type PageDescriptorOptions } from "../descriptors/$page.ts";
 import { RedirectionError } from "../errors/RedirectionError.ts";
 
 const envSchema = t.object({
@@ -213,12 +209,12 @@ export class PageDescriptorProvider {
 				params[key] = String(params[key]);
 			}
 
-			if (it.route.head && !it.error) {
-				this.fillHead(it.route, request, {
-					...props,
-					...context,
-				});
-			}
+			// if (it.route.head && !it.error) {
+			// 	this.fillHead(it.route, request, {
+			// 		...props,
+			// 		...context,
+			// 	});
+			// }
 
 			acc += "/";
 			acc += it.route.path ? this.compile(it.route.path, params) : "";
@@ -244,6 +240,7 @@ export class PageDescriptorProvider {
 					element: this.renderView(i + 1, path, element, it.route),
 					index: i + 1,
 					path,
+					route,
 				});
 				break;
 			}
@@ -263,6 +260,7 @@ export class PageDescriptorProvider {
 				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
 				path,
+				route,
 			});
 		}
 
@@ -294,51 +292,6 @@ export class PageDescriptorProvider {
 		return undefined;
 	}
 
-	protected fillHead(
-		page: PageRoute,
-		ctx: PageRequest,
-		props: Record<string, any>,
-	): void {
-		if (!page.head) {
-			return;
-		}
-
-		ctx.head ??= {};
-
-		const head =
-			typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
-
-		if (head.title) {
-			ctx.head ??= {};
-
-			if (ctx.head.titleSeparator) {
-				ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
-			} else {
-				ctx.head.title = head.title;
-			}
-
-			ctx.head.titleSeparator = head.titleSeparator;
-		}
-
-		if (head.htmlAttributes) {
-			ctx.head.htmlAttributes = {
-				...ctx.head.htmlAttributes,
-				...head.htmlAttributes,
-			};
-		}
-
-		if (head.bodyAttributes) {
-			ctx.head.bodyAttributes = {
-				...ctx.head.bodyAttributes,
-				...head.bodyAttributes,
-			};
-		}
-
-		if (head.meta) {
-			ctx.head.meta = [...(ctx.head.meta ?? []), ...(head.meta ?? [])];
-		}
-	}
-
 	public renderError(error: Error): ReactNode {
 		return createElement(ErrorViewer, { error });
 	}
@@ -534,6 +487,7 @@ export interface Layer {
 	element: ReactNode;
 	index: number;
 	path: string;
+	route?: PageRoute;
 }
 
 export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
@@ -586,7 +540,6 @@ export interface CreateLayersResult extends RouterState {
  */
 export interface PageReactContext {
 	url: URL;
-	head: Head;
 	onError: (error: Error) => ReactNode;
 	links?: ApiLinksResponse;
 }

package/src/providers/ReactBrowserProvider.ts

@@ -1,7 +1,7 @@
 import { $hook, $inject, $logger, Alepha } from "@alepha/core";
-import { type ApiLinksResponse, HttpClient } from "@alepha/server";
+import type { ApiLinksResponse } from "@alepha/server";
+import { LinkProvider } from "@alepha/server-links";
 import type { Root } from "react-dom/client";
-import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
 import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
 import type {
 	PreviousLayerData,
@@ -12,10 +12,9 @@ import type {
 
 export class ReactBrowserProvider {
 	protected readonly log = $logger();
-	protected readonly client = $inject(HttpClient);
+	protected readonly client = $inject(LinkProvider);
 	protected readonly alepha = $inject(Alepha);
 	protected readonly router = $inject(BrowserRouterProvider);
-	protected readonly headProvider = $inject(BrowserHeadProvider);
 	protected root!: Root;
 
 	public transitioning?: {
@@ -138,9 +137,6 @@ export class ReactBrowserProvider {
 			}
 
 			const { context } = await this.render({ previous });
-			if (context.head) {
-				this.headProvider.renderHead(this.document, context.head);
-			}
 
 			await this.alepha.emit("react:browser:render", {
 				state: this.state,
@@ -153,13 +149,6 @@ export class ReactBrowserProvider {
 			});
 		},
 	});
-
-	public readonly onTransitionEnd = $hook({
-		name: "react:transition:end",
-		handler: async ({ context }) => {
-			this.headProvider.renderHead(this.document, context.head);
-		},
-	});
 }
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/providers/ReactServerProvider.ts

@@ -12,13 +12,16 @@ import {
 import {
 	apiLinksResponseSchema,
 	type ServerHandler,
-	ServerLinksProvider,
 	ServerRouterProvider,
 	ServerTimingProvider,
 } from "@alepha/server";
+import { ServerLinksProvider } from "@alepha/server-links";
 import { ServerStaticProvider } from "@alepha/server-static";
 import { renderToString } from "react-dom/server";
-import { $page } from "../descriptors/$page.ts";
+import {
+	$page,
+	type PageDescriptorRenderOptions,
+} from "../descriptors/$page.ts";
 import {
 	PageDescriptorProvider,
 	type PageReactContext,
@@ -27,7 +30,6 @@ import {
 	type RouterState,
 } from "./PageDescriptorProvider.ts";
 import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
-import { ServerHeadProvider } from "./ServerHeadProvider.ts";
 
 const envSchema = t.object({
 	REACT_SERVER_DIST: t.string({ default: "public" }),
@@ -50,7 +52,6 @@ export class ReactServerProvider {
 	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
 	protected readonly serverStaticProvider = $inject(ServerStaticProvider);
 	protected readonly serverRouterProvider = $inject(ServerRouterProvider);
-	protected readonly headProvider = $inject(ServerHeadProvider);
 	protected readonly serverTimingProvider = $inject(ServerTimingProvider);
 	protected readonly env = $inject(envSchema);
 	protected readonly ROOT_DIV_REGEX = new RegExp(
@@ -71,11 +72,7 @@ export class ReactServerProvider {
 			for (const { key, instance, value } of pages) {
 				const name = value[OPTIONS].name ?? key;
 
-				instance[key].prerender = this.createRenderFunction(name, true);
-
-				if (this.alepha.isTest()) {
-					instance[key].render = this.createRenderFunction(name);
-				}
+				instance[key].render = this.createRenderFunction(name);
 			}
 
 			// development mode
@@ -129,7 +126,10 @@ export class ReactServerProvider {
 	});
 
 	public get template() {
-		return this.alepha.state("ReactServerProvider.template");
+		return (
+			this.alepha.state("ReactServerProvider.template") ??
+			"<!DOCTYPE html><html lang='en'><head></head><body></body></html>"
+		);
 	}
 
 	protected async registerPages(templateLoader: TemplateLoader) {
@@ -193,12 +193,7 @@ export class ReactServerProvider {
 	 * For testing purposes, creates a render function that can be used.
 	 */
 	protected createRenderFunction(name: string, withIndex = false) {
-		return async (
-			options: {
-				params?: Record<string, string>;
-				query?: Record<string, string>;
-			} = {},
-		) => {
+		return async (options: PageDescriptorRenderOptions = {}) => {
 			const page = this.pageDescriptorProvider.page(name);
 			const url = new URL(this.pageDescriptorProvider.url(name, options));
 			const context: PageRequest = {
@@ -209,12 +204,16 @@ export class ReactServerProvider {
 				onError: () => null,
 			};
 
+			await this.alepha.emit("react:server:render:begin", {
+				context,
+			});
+
 			const state = await this.pageDescriptorProvider.createLayers(
 				page,
 				context,
 			);
 
-			if (!withIndex) {
+			if (!withIndex && !options.html) {
 				return {
 					context,
 					html: renderToString(
@@ -223,10 +222,22 @@ export class ReactServerProvider {
 				};
 			}
 
-			return {
+			const html = this.renderToHtml(
+				this.template ?? "",
+				state,
 				context,
-				html: this.renderToHtml(this.template ?? "", state, context),
+				options.hydration,
+			);
+
+			const result = {
+				context,
+				state,
+				html,
 			};
+
+			await this.alepha.emit("react:server:render:end", result);
+
+			return result;
 		};
 	}
 
@@ -287,16 +298,10 @@ export class ReactServerProvider {
 			// 	return;
 			// }
 
-			await this.alepha.emit(
-				"react:server:render",
-				{
-					request: serverRequest,
-					pageRequest: context,
-				},
-				{
-					log: false,
-				},
-			);
+			await this.alepha.emit("react:server:render:begin", {
+				request: serverRequest,
+				context,
+			});
 
 			this.serverTimingProvider.beginTiming("createLayers");
 
@@ -327,6 +332,13 @@ export class ReactServerProvider {
 
 			const html = this.renderToHtml(template, state, context);
 
+			await this.alepha.emit("react:server:render:end", {
+				request: serverRequest,
+				context,
+				state,
+				html,
+			});
+
 			page.afterHandler?.(serverRequest);
 
 			return html;
@@ -337,6 +349,7 @@ export class ReactServerProvider {
 		template: string,
 		state: RouterState,
 		context: PageReactContext,
+		hydration = true,
 	) {
 		const element = this.pageDescriptorProvider.root(state, context);
 
@@ -352,41 +365,36 @@ export class ReactServerProvider {
 
 		this.serverTimingProvider.endTiming("renderToString");
 
-		const hydrationData: ReactHydrationState = {
-			links: context.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,
-			})),
-		};
-
-		// create hydration data
-		const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
-
 		const response = {
 			html: template,
 		};
 
-		// inject app into template
-		this.fillTemplate(response, app, script);
+		if (hydration) {
+			const hydrationData: ReactHydrationState = {
+				links: context.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,
+					route: undefined,
+				})),
+			};
 
-		// inject head meta
-		if (context.head) {
-			response.html = this.headProvider.renderHead(response.html, context.head);
-		}
+			// create hydration data
+			const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
 
-		// TODO: hook for plugins "react:server:template"
-		// { response: { html: string }, request, state }
+			// inject app into template
+			this.fillTemplate(response, app, script);
+		}
 
 		return response.html;
 	}

package/src/providers/BrowserHeadProvider.ts

@@ -1,43 +0,0 @@
-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/ServerHeadProvider.ts

@@ -1,91 +0,0 @@
-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;");
-	}
-}