@alepha/react 0.7.6 → 0.7.7

package/dist/index.js

@@ -1,10 +1,11 @@
 import { $hook, $inject, $logger, Alepha, KIND, NotImplementedError, OPTIONS, __bind, __descriptor, t } from "@alepha/core";
-import { AlephaServer, HttpClient, ServerLinksProvider, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
+import { AlephaServer, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
+import { LinkProvider, ServerLinksProvider } from "@alepha/server-links";
 import { ServerStaticProvider } from "@alepha/server-static";
 import { renderToString } from "react-dom/server";
 import { RouterProvider } from "@alepha/router";
@@ -457,10 +458,6 @@ var PageDescriptorProvider = class {
 			const props = it.props ?? {};
 			const params = { ...it.config?.params };
 			for (const key of Object.keys(params)) params[key] = String(params[key]);
-			if (it.route.head && !it.error) this.fillHead(it.route, request, {
-				...props,
-				...context
-			});
 			acc += "/";
 			acc += it.route.path ? this.compile(it.route.path, params) : "";
 			const path = acc.replace(/\/+/, "/");
@@ -477,7 +474,8 @@ var PageDescriptorProvider = class {
 					config: it.config,
 					element: this.renderView(i + 1, path, element$1, it.route),
 					index: i + 1,
-					path
+					path,
+					route
 				});
 				break;
 			}
@@ -492,7 +490,8 @@ var PageDescriptorProvider = class {
 				config: it.config,
 				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
-				path
+				path,
+				route
 			});
 		}
 		return {
@@ -517,26 +516,6 @@ var PageDescriptorProvider = class {
 		if (page.component) return createElement(page.component, props);
 		return void 0;
 	}
-	fillHead(page, ctx, props) {
-		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 ?? []];
-	}
 	renderError(error) {
 		return createElement(ErrorViewer_default, { error });
 	}
@@ -629,46 +608,6 @@ const isPageRoute = (it) => {
 	return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
 };
 
-//#endregion
-//#region src/providers/ServerHeadProvider.ts
-var ServerHeadProvider = class {
-	renderHead(template, head) {
-		let result = template;
-		const htmlAttributes = head.htmlAttributes;
-		if (htmlAttributes) result = result.replace(/<html([^>]*)>/i, (_, existingAttrs) => `<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`);
-		const bodyAttributes = head.bodyAttributes;
-		if (bodyAttributes) result = result.replace(/<body([^>]*)>/i, (_, existingAttrs) => `<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`);
-		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`;
-		result = result.replace(/<head([^>]*)>(.*?)<\/head>/is, (_, existingAttrs, existingHead) => `<head${existingAttrs}>${existingHead}${headContent}</head>`);
-		return result.trim();
-	}
-	mergeAttributes(existing, attrs) {
-		const existingAttrs = this.parseAttributes(existing);
-		const merged = {
-			...existingAttrs,
-			...attrs
-		};
-		return Object.entries(merged).map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`).join("");
-	}
-	parseAttributes(attrStr) {
-		const attrs = {};
-		const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
-		let match = attrRegex.exec(attrStr);
-		while (match) {
-			attrs[match[1]] = match[2] ?? "";
-			match = attrRegex.exec(attrStr);
-		}
-		return attrs;
-	}
-	escapeHtml(str) {
-		return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-	}
-};
-
 //#endregion
 //#region src/providers/ReactServerProvider.ts
 const envSchema = t.object({
@@ -683,7 +622,6 @@ var ReactServerProvider = class {
 	pageDescriptorProvider = $inject(PageDescriptorProvider);
 	serverStaticProvider = $inject(ServerStaticProvider);
 	serverRouterProvider = $inject(ServerRouterProvider);
-	headProvider = $inject(ServerHeadProvider);
 	serverTimingProvider = $inject(ServerTimingProvider);
 	env = $inject(envSchema);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
@@ -695,8 +633,7 @@ var ReactServerProvider = class {
 			this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
 			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);
 			}
 			if (this.alepha.isServerless() === "vite") {
 				await this.configureVite(ssrEnabled);
@@ -733,7 +670,7 @@ var ReactServerProvider = class {
 		}
 	});
 	get template() {
-		return this.alepha.state("ReactServerProvider.template");
+		return this.alepha.state("ReactServerProvider.template") ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
 	}
 	async registerPages(templateLoader) {
 		for (const page of this.pageDescriptorProvider.getPages()) {
@@ -779,15 +716,20 @@ var ReactServerProvider = class {
 				head: {},
 				onError: () => null
 			};
+			await this.alepha.emit("react:server:render:begin", { context });
 			const state = await this.pageDescriptorProvider.createLayers(page, context);
-			if (!withIndex) return {
+			if (!withIndex && !options.html) return {
 				context,
 				html: renderToString(this.pageDescriptorProvider.root(state, context))
 			};
-			return {
+			const html = this.renderToHtml(this.template ?? "", state, context, options.hydration);
+			const result = {
 				context,
-				html: this.renderToHtml(this.template ?? "", state, context)
+				state,
+				html
 			};
+			await this.alepha.emit("react:server:render:end", result);
+			return result;
 		};
 	}
 	createHandler(page, templateLoader) {
@@ -820,10 +762,10 @@ var ReactServerProvider = class {
 				}
 				target = target.parent;
 			}
-			await this.alepha.emit("react:server:render", {
+			await this.alepha.emit("react:server:render:begin", {
 				request: serverRequest,
-				pageRequest: context
-			}, { log: false });
+				context
+			});
 			this.serverTimingProvider.beginTiming("createLayers");
 			const state = await this.pageDescriptorProvider.createLayers(page, context);
 			this.serverTimingProvider.endTiming("createLayers");
@@ -834,11 +776,17 @@ var ReactServerProvider = class {
 			reply.headers.expires = "0";
 			if (page.cache && serverRequest.user) delete context.links;
 			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;
 		};
 	}
-	renderToHtml(template, state, context) {
+	renderToHtml(template, state, context, hydration = true) {
 		const element = this.pageDescriptorProvider.root(state, context);
 		this.serverTimingProvider.beginTiming("renderToString");
 		let app = "";
@@ -849,25 +797,27 @@ var ReactServerProvider = class {
 			app = renderToString(context.onError(error));
 		}
 		this.serverTimingProvider.endTiming("renderToString");
-		const hydrationData = {
-			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
-				} : void 0,
-				index: void 0,
-				path: void 0,
-				element: void 0
-			}))
-		};
-		const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
 		const response = { html: template };
-		this.fillTemplate(response, app, script);
-		if (context.head) response.html = this.headProvider.renderHead(response.html, context.head);
+		if (hydration) {
+			const hydrationData = {
+				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
+					} : void 0,
+					index: void 0,
+					path: void 0,
+					element: void 0,
+					route: void 0
+				}))
+			};
+			const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
+			this.fillTemplate(response, app, script);
+		}
 		return response.html;
 	}
 	fillTemplate(response, app, script) {
@@ -885,28 +835,6 @@ var ReactServerProvider = class {
 	}
 };
 
-//#endregion
-//#region src/providers/BrowserHeadProvider.ts
-var BrowserHeadProvider = class {
-	renderHead(document, head) {
-		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);
-			}
-		}
-	}
-};
-
 //#endregion
 //#region src/providers/BrowserRouterProvider.ts
 var BrowserRouterProvider = class extends RouterProvider {
@@ -936,7 +864,6 @@ var BrowserRouterProvider = class extends RouterProvider {
 			url,
 			query: {},
 			params: {},
-			head: {},
 			onError: () => null,
 			...options.context ?? {}
 		};
@@ -967,7 +894,10 @@ var BrowserRouterProvider = class extends RouterProvider {
 				index: 0,
 				path: "/"
 			});
-			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 = [{
@@ -1005,10 +935,9 @@ var BrowserRouterProvider = class extends RouterProvider {
 //#region src/providers/ReactBrowserProvider.ts
 var ReactBrowserProvider = class {
 	log = $logger();
-	client = $inject(HttpClient);
+	client = $inject(LinkProvider);
 	alepha = $inject(Alepha);
 	router = $inject(BrowserRouterProvider);
-	headProvider = $inject(BrowserHeadProvider);
 	root;
 	transitioning;
 	state = {
@@ -1087,7 +1016,6 @@ var ReactBrowserProvider = class {
 			const previous = hydration?.layers ?? [];
 			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink(link);
 			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,
 				context,
@@ -1098,12 +1026,6 @@ var ReactBrowserProvider = class {
 			});
 		}
 	});
-	onTransitionEnd = $hook({
-		name: "react:transition:end",
-		handler: async ({ context }) => {
-			this.headProvider.renderHead(this.document, context.head);
-		}
-	});
 };
 
 //#endregion
@@ -1262,7 +1184,7 @@ const useInject = (clazz) => {
 //#endregion
 //#region src/hooks/useClient.ts
 const useClient = (_scope) => {
-	return useInject(HttpClient).of();
+	return useInject(LinkProvider).client();
 };
 
 //#endregion