@alepha/react 0.7.6 → 0.8.0

package/dist/index.js

@@ -1,6 +1,7 @@
 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 { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "@alepha/server-links";
 import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { existsSync } from "node:fs";
@@ -16,11 +17,6 @@ const KEY = "PAGE";
 */
 const $page = (options) => {
 	__descriptor(KEY);
-	if (options.children) for (const child of options.children) child[OPTIONS].parent = { [OPTIONS]: options };
-	if (options.parent) {
-		options.parent[OPTIONS].children ??= [];
-		options.parent[OPTIONS].children.push({ [OPTIONS]: options });
-	}
 	return {
 		[KIND]: KEY,
 		[OPTIONS]: options,
@@ -457,10 +453,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 +469,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 +485,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 +511,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 });
 	}
@@ -568,13 +542,19 @@ var PageDescriptorProvider = class {
 		} }, element);
 	}
 	configure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
 			const pages = this.alepha.getDescriptorValues($page);
+			const hasParent = (it) => {
+				for (const page of pages) {
+					const children = page.value[OPTIONS].children ? Array.isArray(page.value[OPTIONS].children) ? page.value[OPTIONS].children : page.value[OPTIONS].children() : [];
+					if (children.includes(it)) return true;
+				}
+			};
 			for (const { value, key } of pages) value[OPTIONS].name ??= key;
 			for (const { value } of pages) {
-				if (value[OPTIONS].parent) continue;
+				if (hasParent(value)) continue;
 				if (value[OPTIONS].path === "/*") hasNotFoundHandler = true;
 				this.add(this.map(pages, value));
 			}
@@ -590,7 +570,7 @@ var PageDescriptorProvider = class {
 		}
 	});
 	map(pages, target) {
-		const children = target[OPTIONS].children ?? [];
+		const children = target[OPTIONS].children ? Array.isArray(target[OPTIONS].children) ? target[OPTIONS].children : target[OPTIONS].children() : [];
 		return {
 			...target[OPTIONS],
 			parent: void 0,
@@ -629,46 +609,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,20 +623,18 @@ 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");
 	onConfigure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			const pages = this.alepha.getDescriptorValues($page);
 			const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
 			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 +671,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 +717,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 +763,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 +777,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 +798,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 +836,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 {
@@ -917,7 +846,7 @@ var BrowserRouterProvider = class extends RouterProvider {
 		this.pageDescriptorProvider.add(entry);
 	}
 	configure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			for (const page of this.pageDescriptorProvider.getPages()) if (page.component || page.lazy) this.push({
 				path: page.match,
@@ -936,7 +865,6 @@ var BrowserRouterProvider = class extends RouterProvider {
 			url,
 			query: {},
 			params: {},
-			head: {},
 			onError: () => null,
 			...options.context ?? {}
 		};
@@ -967,7 +895,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 +936,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 = {
@@ -1081,13 +1011,12 @@ var ReactBrowserProvider = class {
 		}
 	}
 	ready = $hook({
-		name: "ready",
+		on: "ready",
 		handler: async () => {
 			const hydration = this.getHydrationState();
 			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 +1027,6 @@ var ReactBrowserProvider = class {
 			});
 		}
 	});
-	onTransitionEnd = $hook({
-		name: "react:transition:end",
-		handler: async ({ context }) => {
-			this.headProvider.renderHead(this.document, context.head);
-		}
-	});
 };
 
 //#endregion
@@ -1262,7 +1185,7 @@ const useInject = (clazz) => {
 //#endregion
 //#region src/hooks/useClient.ts
 const useClient = (_scope) => {
-	return useInject(HttpClient).of();
+	return useInject(LinkProvider).client();
 };
 
 //#endregion
@@ -1322,7 +1245,7 @@ const useRouterState = () => {
 */
 var AlephaReact = class {
 	name = "alepha.react";
-	$services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(ReactServerProvider).with(PageDescriptorProvider);
+	$services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider);
 };
 __bind($page, AlephaReact);