@alepha/react 0.12.0 → 0.13.0

package/dist/head/chunk-DhGyd7sr.js

@@ -0,0 +1,28 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+export {  };

package/dist/head/index.browser.js

@@ -1,12 +1,16 @@
 import { $atom, $env, $hook, $inject, $module, $use, Alepha, AlephaError, Atom, Descriptor, KIND, createDescriptor, t } from "alepha";
 import { AlephaDateTime, DateTimeProvider } from "alepha/datetime";
-import { AlephaServer } from "alepha/server";
-import { AlephaServerLinks, LinkProvider } from "alepha/server/links";
+import { AlephaServer, ServerProvider, ServerRouterProvider, ServerTimingProvider } from "alepha/server";
+import { AlephaServerCache } from "alepha/server/cache";
+import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "alepha/server/links";
 import { $logger } from "alepha/logger";
-import { RouterProvider } from "alepha/router";
 import React, { StrictMode, createContext, createElement, memo, use, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createRoot, hydrateRoot } from "react-dom/client";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { ServerStaticProvider } from "alepha/server/static";
+import { renderToString } from "react-dom/server";
+import { RouterProvider } from "alepha/router";
 
 //#region src/core/services/ReactPageService.ts
 var ReactPageService = class {
@@ -66,7 +70,7 @@ var ReactPageService = class {
 * const userProfile = $page({
 *   path: "/users/:id",
 *   schema: {
-*     params: t.object({ id: t.int() }),
+*     params: t.object({ id: t.integer() }),
 *     query: t.object({ tab: t.optional(t.text()) })
 *   },
 *   resolve: async ({ params }) => {
@@ -143,31 +147,6 @@ var PageDescriptor = class extends Descriptor {
 };
 $page[KIND] = PageDescriptor;
 
-//#endregion
-//#region src/core/components/NotFound.tsx
-function NotFoundPage(props) {
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			height: "100vh",
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "center",
-			alignItems: "center",
-			textAlign: "center",
-			fontFamily: "sans-serif",
-			padding: "1rem",
-			...props.style
-		},
-		children: /* @__PURE__ */ jsx("h1", {
-			style: {
-				fontSize: "1rem",
-				marginBottom: "0.5rem"
-			},
-			children: "404 - This page does not exist"
-		})
-	});
-}
-
 //#endregion
 //#region src/core/components/ClientOnly.tsx
 /**
@@ -597,12 +576,37 @@ function parseAnimation(animationLike, state, type = "enter") {
 	}
 }
 
+//#endregion
+//#region src/core/components/NotFound.tsx
+function NotFoundPage(props) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			height: "100vh",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center",
+			textAlign: "center",
+			fontFamily: "sans-serif",
+			padding: "1rem",
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx("h1", {
+			style: {
+				fontSize: "1rem",
+				marginBottom: "0.5rem"
+			},
+			children: "404 - This page does not exist"
+		})
+	});
+}
+
 //#endregion
 //#region src/core/providers/ReactPageProvider.ts
-const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+const envSchema$2 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
 var ReactPageProvider = class {
 	log = $logger();
-	env = $env(envSchema$1);
+	env = $env(envSchema$2);
 	alepha = $inject(Alepha);
 	pages = [];
 	getPages() {
@@ -920,6 +924,336 @@ const isPageRoute = (it) => {
 	return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
 };
 
+//#endregion
+//#region src/core/providers/ReactServerProvider.ts
+const envSchema$1 = t.object({
+	REACT_SSR_ENABLED: t.optional(t.boolean()),
+	REACT_ROOT_ID: t.text({ default: "root" }),
+	REACT_SERVER_TEMPLATE: t.optional(t.text({ size: "rich" }))
+});
+/**
+* React server provider configuration atom
+*/
+const reactServerOptions = $atom({
+	name: "alepha.react.server.options",
+	schema: t.object({
+		publicDir: t.string(),
+		staticServer: t.object({
+			disabled: t.boolean(),
+			path: t.string({ description: "URL path where static files will be served." })
+		})
+	}),
+	default: {
+		publicDir: "public",
+		staticServer: {
+			disabled: false,
+			path: "/"
+		}
+	}
+});
+var ReactServerProvider = class {
+	log = $logger();
+	alepha = $inject(Alepha);
+	env = $env(envSchema$1);
+	pageApi = $inject(ReactPageProvider);
+	serverProvider = $inject(ServerProvider);
+	serverStaticProvider = $inject(ServerStaticProvider);
+	serverRouterProvider = $inject(ServerRouterProvider);
+	serverTimingProvider = $inject(ServerTimingProvider);
+	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
+	preprocessedTemplate = null;
+	options = $use(reactServerOptions);
+	/**
+	* Configure the React server provider.
+	*/
+	onConfigure = $hook({
+		on: "configure",
+		handler: async () => {
+			const ssrEnabled = this.alepha.descriptors($page).length > 0 && this.env.REACT_SSR_ENABLED !== false;
+			this.alepha.state.set("alepha.react.server.ssr", ssrEnabled);
+			if (this.alepha.isViteDev()) {
+				await this.configureVite(ssrEnabled);
+				return;
+			}
+			let root = "";
+			if (!this.alepha.isServerless()) {
+				root = this.getPublicDirectory();
+				if (!root) this.log.warn("Missing static files, static file server will be disabled");
+				else {
+					this.log.debug(`Using static files from: ${root}`);
+					await this.configureStaticServer(root);
+				}
+			}
+			if (ssrEnabled) {
+				await this.registerPages(async () => this.template);
+				this.log.info("SSR OK");
+				return;
+			}
+			this.log.info("SSR is disabled, use History API fallback");
+			this.serverRouterProvider.createRoute({
+				path: "*",
+				handler: async ({ url, reply }) => {
+					if (url.pathname.includes(".")) {
+						reply.headers["content-type"] = "text/plain";
+						reply.body = "Not Found";
+						reply.status = 404;
+						return;
+					}
+					reply.headers["content-type"] = "text/html";
+					return this.template;
+				}
+			});
+		}
+	});
+	get template() {
+		return this.alepha.env.REACT_SERVER_TEMPLATE ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
+	}
+	async registerPages(templateLoader) {
+		const template = await templateLoader();
+		if (template) this.preprocessedTemplate = this.preprocessTemplate(template);
+		for (const page of this.pageApi.getPages()) {
+			if (page.children?.length) continue;
+			this.log.debug(`+ ${page.match} -> ${page.name}`);
+			this.serverRouterProvider.createRoute({
+				...page,
+				schema: void 0,
+				method: "GET",
+				path: page.match,
+				handler: this.createHandler(page, templateLoader)
+			});
+		}
+	}
+	/**
+	* Get the public directory path where static files are located.
+	*/
+	getPublicDirectory() {
+		const maybe = [join(process.cwd(), `dist/${this.options.publicDir}`), join(process.cwd(), this.options.publicDir)];
+		for (const it of maybe) if (existsSync(it)) return it;
+		return "";
+	}
+	/**
+	* Configure the static file server to serve files from the given root directory.
+	*/
+	async configureStaticServer(root) {
+		await this.serverStaticProvider.createStaticServer({
+			root,
+			cacheControl: {
+				maxAge: 3600,
+				immutable: true
+			},
+			...this.options.staticServer
+		});
+	}
+	/**
+	* Configure Vite for SSR.
+	*/
+	async configureVite(ssrEnabled) {
+		if (!ssrEnabled) return;
+		this.log.info("SSR (dev) OK");
+		const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
+		await this.registerPages(() => fetch(`${url}/index.html`).then((it) => it.text()).catch(() => void 0));
+	}
+	/**
+	* For testing purposes, creates a render function that can be used.
+	*/
+	async render(name, options = {}) {
+		const page = this.pageApi.page(name);
+		const url = new URL(this.pageApi.url(name, options));
+		const state = {
+			url,
+			params: options.params ?? {},
+			query: options.query ?? {},
+			onError: () => null,
+			layers: [],
+			meta: {}
+		};
+		this.log.trace("Rendering", { url });
+		await this.alepha.events.emit("react:server:render:begin", { state });
+		const { redirect } = await this.pageApi.createLayers(page, state);
+		if (redirect) return {
+			state,
+			html: "",
+			redirect
+		};
+		if (!options.html) {
+			this.alepha.state.set("alepha.react.router.state", state);
+			return {
+				state,
+				html: renderToString(this.pageApi.root(state))
+			};
+		}
+		const template = this.template ?? "";
+		const html = this.renderToHtml(template, state, options.hydration);
+		if (html instanceof Redirection) return {
+			state,
+			html: "",
+			redirect
+		};
+		const result = {
+			state,
+			html
+		};
+		await this.alepha.events.emit("react:server:render:end", result);
+		return result;
+	}
+	createHandler(route, templateLoader) {
+		return async (serverRequest) => {
+			const { url, reply, query, params } = serverRequest;
+			const template = await templateLoader();
+			if (!template) throw new AlephaError("Missing template for SSR rendering");
+			this.log.trace("Rendering page", { name: route.name });
+			const state = {
+				url,
+				params,
+				query,
+				onError: () => null,
+				layers: []
+			};
+			if (this.alepha.has(ServerLinksProvider)) this.alepha.state.set("alepha.server.request.apiLinks", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
+				user: serverRequest.user,
+				authorization: serverRequest.headers.authorization
+			}));
+			let target = route;
+			while (target) {
+				if (route.can && !route.can()) {
+					reply.status = 403;
+					reply.headers["content-type"] = "text/plain";
+					return "Forbidden";
+				}
+				target = target.parent;
+			}
+			await this.alepha.events.emit("react:server:render:begin", {
+				request: serverRequest,
+				state
+			});
+			this.serverTimingProvider.beginTiming("createLayers");
+			const { redirect } = await this.pageApi.createLayers(route, state);
+			this.serverTimingProvider.endTiming("createLayers");
+			if (redirect) return reply.redirect(redirect);
+			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";
+			const html = this.renderToHtml(template, state);
+			if (html instanceof Redirection) {
+				reply.redirect(typeof html.redirect === "string" ? html.redirect : this.pageApi.href(html.redirect));
+				return;
+			}
+			const event = {
+				request: serverRequest,
+				state,
+				html
+			};
+			await this.alepha.events.emit("react:server:render:end", event);
+			route.onServerResponse?.(serverRequest);
+			this.log.trace("Page rendered", { name: route.name });
+			return event.html;
+		};
+	}
+	renderToHtml(template, state, hydration = true) {
+		const element = this.pageApi.root(state);
+		this.alepha.state.set("alepha.react.router.state", state);
+		this.serverTimingProvider.beginTiming("renderToString");
+		let app = "";
+		try {
+			app = renderToString(element);
+		} catch (error) {
+			this.log.error("renderToString has failed, fallback to error handler", error);
+			const element$1 = state.onError(error, state);
+			if (element$1 instanceof Redirection) return element$1;
+			app = renderToString(element$1);
+			this.log.debug("Error handled successfully with fallback");
+		}
+		this.serverTimingProvider.endTiming("renderToString");
+		const response = { html: template };
+		if (hydration) {
+			const { request, context, ...store } = this.alepha.context.als?.getStore() ?? {};
+			const hydrationData = {
+				...store,
+				"alepha.react.router.state": void 0,
+				layers: state.layers.map((it) => ({
+					...it,
+					error: it.error ? {
+						...it.error,
+						name: it.error.name,
+						message: it.error.message,
+						stack: !this.alepha.isProduction() ? it.error.stack : void 0
+					} : 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;
+	}
+	preprocessTemplate(template) {
+		const bodyCloseIndex = template.match(/<\/body>/i)?.index ?? template.length;
+		const beforeScript = template.substring(0, bodyCloseIndex);
+		const afterScript = template.substring(bodyCloseIndex);
+		const rootDivMatch = beforeScript.match(this.ROOT_DIV_REGEX);
+		if (rootDivMatch) {
+			const beforeDiv = beforeScript.substring(0, rootDivMatch.index);
+			const afterDivStart = rootDivMatch.index + rootDivMatch[0].length;
+			const afterDiv = beforeScript.substring(afterDivStart);
+			return {
+				beforeApp: `${beforeDiv}<div${rootDivMatch[1]} id="${this.env.REACT_ROOT_ID}"${rootDivMatch[2]}>`,
+				afterApp: `</div>${afterDiv}`,
+				beforeScript: "",
+				afterScript
+			};
+		}
+		const bodyMatch = beforeScript.match(/<body([^>]*)>/i);
+		if (bodyMatch) {
+			const beforeBody = beforeScript.substring(0, bodyMatch.index + bodyMatch[0].length);
+			const afterBody = beforeScript.substring(bodyMatch.index + bodyMatch[0].length);
+			return {
+				beforeApp: `${beforeBody}<div id="${this.env.REACT_ROOT_ID}">`,
+				afterApp: `</div>${afterBody}`,
+				beforeScript: "",
+				afterScript
+			};
+		}
+		return {
+			beforeApp: `<div id="${this.env.REACT_ROOT_ID}">`,
+			afterApp: `</div>`,
+			beforeScript,
+			afterScript
+		};
+	}
+	fillTemplate(response, app, script) {
+		if (!this.preprocessedTemplate) this.preprocessedTemplate = this.preprocessTemplate(response.html);
+		response.html = this.preprocessedTemplate.beforeApp + app + this.preprocessedTemplate.afterApp + script + this.preprocessedTemplate.afterScript;
+	}
+};
+
+//#endregion
+//#region src/core/services/ReactPageServerService.ts
+var ReactPageServerService = class extends ReactPageService {
+	reactServerProvider = $inject(ReactServerProvider);
+	serverProvider = $inject(ServerProvider);
+	async render(name, options = {}) {
+		return this.reactServerProvider.render(name, options);
+	}
+	async fetch(pathname, options = {}) {
+		const response = await fetch(`${this.serverProvider.hostname}/${pathname}`);
+		const html = await response.text();
+		if (options?.html) return {
+			html,
+			response
+		};
+		const match = html.match(this.reactServerProvider.ROOT_DIV_REGEX);
+		if (match) return {
+			html: match[3],
+			response
+		};
+		throw new AlephaError("Invalid HTML response");
+	}
+};
+
 //#endregion
 //#region src/core/providers/ReactBrowserRouterProvider.ts
 var ReactBrowserRouterProvider = class extends RouterProvider {
@@ -1166,26 +1500,6 @@ var ReactBrowserProvider = class {
 	});
 };
 
-//#endregion
-//#region src/core/providers/ReactBrowserRendererProvider.ts
-var ReactBrowserRendererProvider = class {
-	log = $logger();
-	root;
-	onBrowserRender = $hook({
-		on: "react:browser:render",
-		handler: async ({ hydration, root, element }) => {
-			if (hydration?.layers) {
-				this.root = hydrateRoot(root, element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root ??= createRoot(root);
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-		}
-	});
-};
-
 //#endregion
 //#region src/core/services/ReactRouter.ts
 var ReactRouter = class {
@@ -1212,7 +1526,7 @@ var ReactRouter = class {
 	path(name, config = {}) {
 		return this.pageApi.pathname(name, {
 			params: {
-				...this.state.params,
+				...this.state?.params,
 				...config.params
 			},
 			query: config.query
@@ -1311,19 +1625,31 @@ const useInject = (service) => {
 };
 
 //#endregion
-//#region src/core/index.browser.ts
+//#region src/core/index.ts
+/**
+* Provides full-stack React development with declarative routing, server-side rendering, and client-side hydration.
+*
+* The React module enables building modern React applications using the `$page` descriptor on class properties.
+* It delivers seamless server-side rendering, automatic code splitting, and client-side navigation with full
+* type safety and schema validation for route parameters and data.
+*
+* @see {@link $page}
+* @module alepha.react
+*/
 const AlephaReact = $module({
 	name: "alepha.react",
 	descriptors: [$page],
 	services: [
+		ReactServerProvider,
 		ReactPageProvider,
-		ReactBrowserRouterProvider,
-		ReactBrowserProvider,
 		ReactRouter,
-		ReactBrowserRendererProvider,
-		ReactPageService
+		ReactPageService,
+		ReactPageServerService
 	],
-	register: (alepha) => alepha.with(AlephaDateTime).with(AlephaServer).with(AlephaServerLinks).with(ReactPageProvider).with(ReactBrowserProvider).with(ReactBrowserRouterProvider).with(ReactBrowserRendererProvider).with(ReactRouter)
+	register: (alepha) => alepha.with(AlephaDateTime).with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with({
+		provide: ReactPageService,
+		use: ReactPageServerService
+	}).with(ReactServerProvider).with(ReactPageProvider).with(ReactRouter)
 });
 
 //#endregion