@alepha/react 0.7.6 → 0.7.7

package/dist/index.cjs

@@ -28,6 +28,7 @@ const react = __toESM(require("react"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const node_fs = __toESM(require("node:fs"));
 const node_path = __toESM(require("node:path"));
+const __alepha_server_links = __toESM(require("@alepha/server-links"));
 const __alepha_server_static = __toESM(require("@alepha/server-static"));
 const react_dom_server = __toESM(require("react-dom/server"));
 const __alepha_router = __toESM(require("@alepha/router"));
@@ -480,10 +481,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(/\/+/, "/");
@@ -500,7 +497,8 @@ var PageDescriptorProvider = class {
 					config: it.config,
 					element: this.renderView(i + 1, path, element$1, it.route),
 					index: i + 1,
-					path
+					path,
+					route
 				});
 				break;
 			}
@@ -515,7 +513,8 @@ var PageDescriptorProvider = class {
 				config: it.config,
 				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
-				path
+				path,
+				route
 			});
 		}
 		return {
@@ -540,26 +539,6 @@ var PageDescriptorProvider = class {
 		if (page.component) return (0, react.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 (0, react.createElement)(ErrorViewer_default, { error });
 	}
@@ -652,46 +631,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 = __alepha_core.t.object({
@@ -706,7 +645,6 @@ var ReactServerProvider = class {
 	pageDescriptorProvider = (0, __alepha_core.$inject)(PageDescriptorProvider);
 	serverStaticProvider = (0, __alepha_core.$inject)(__alepha_server_static.ServerStaticProvider);
 	serverRouterProvider = (0, __alepha_core.$inject)(__alepha_server.ServerRouterProvider);
-	headProvider = (0, __alepha_core.$inject)(ServerHeadProvider);
 	serverTimingProvider = (0, __alepha_core.$inject)(__alepha_server.ServerTimingProvider);
 	env = (0, __alepha_core.$inject)(envSchema);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
@@ -718,8 +656,7 @@ var ReactServerProvider = class {
 			this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
 			for (const { key, instance, value } of pages) {
 				const name = value[__alepha_core.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);
@@ -756,7 +693,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()) {
@@ -802,15 +739,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: (0, react_dom_server.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) {
@@ -825,8 +767,8 @@ var ReactServerProvider = class {
 				head: {},
 				onError: () => null
 			};
-			if (this.alepha.has(__alepha_server.ServerLinksProvider)) {
-				const srv = this.alepha.get(__alepha_server.ServerLinksProvider);
+			if (this.alepha.has(__alepha_server_links.ServerLinksProvider)) {
+				const srv = this.alepha.get(__alepha_server_links.ServerLinksProvider);
 				const schema = __alepha_server.apiLinksResponseSchema;
 				context.links = this.alepha.parse(schema, await srv.getLinks({
 					user: serverRequest.user,
@@ -843,10 +785,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");
@@ -857,11 +799,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 = "";
@@ -872,25 +820,27 @@ var ReactServerProvider = class {
 			app = (0, react_dom_server.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) {
@@ -908,28 +858,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 __alepha_router.RouterProvider {
@@ -959,7 +887,6 @@ var BrowserRouterProvider = class extends __alepha_router.RouterProvider {
 			url,
 			query: {},
 			params: {},
-			head: {},
 			onError: () => null,
 			...options.context ?? {}
 		};
@@ -990,7 +917,10 @@ var BrowserRouterProvider = class extends __alepha_router.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 = [{
@@ -1028,10 +958,9 @@ var BrowserRouterProvider = class extends __alepha_router.RouterProvider {
 //#region src/providers/ReactBrowserProvider.ts
 var ReactBrowserProvider = class {
 	log = (0, __alepha_core.$logger)();
-	client = (0, __alepha_core.$inject)(__alepha_server.HttpClient);
+	client = (0, __alepha_core.$inject)(__alepha_server_links.LinkProvider);
 	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
 	router = (0, __alepha_core.$inject)(BrowserRouterProvider);
-	headProvider = (0, __alepha_core.$inject)(BrowserHeadProvider);
 	root;
 	transitioning;
 	state = {
@@ -1110,7 +1039,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,
@@ -1121,12 +1049,6 @@ var ReactBrowserProvider = class {
 			});
 		}
 	});
-	onTransitionEnd = (0, __alepha_core.$hook)({
-		name: "react:transition:end",
-		handler: async ({ context }) => {
-			this.headProvider.renderHead(this.document, context.head);
-		}
-	});
 };
 
 //#endregion
@@ -1285,7 +1207,7 @@ const useInject = (clazz) => {
 //#endregion
 //#region src/hooks/useClient.ts
 const useClient = (_scope) => {
-	return useInject(__alepha_server.HttpClient).of();
+	return useInject(__alepha_server_links.LinkProvider).client();
 };
 
 //#endregion