@alepha/react 0.7.6 → 0.8.0

package/src/descriptors/$page.ts

@@ -96,17 +96,23 @@ export interface PageDescriptorOptions<
 	 *
 	 * If you still want to render at this pathname, add a child page with an empty path.
 	 */
-	children?: Array<{ [OPTIONS]: PageDescriptorOptions }>;
+	children?:
+		| Array<{ [OPTIONS]: PageDescriptorOptions }>
+		| (() => Array<{ [OPTIONS]: PageDescriptorOptions }>);
 
 	parent?: { [OPTIONS]: PageDescriptorOptions<PageConfigSchema, TPropsParent> };
 
 	can?: () => boolean;
 
-	head?: Head | ((props: TProps, previous?: Head) => Head);
-
 	errorHandler?: (error: Error) => ReactNode;
 
-	prerender?:
+	/**
+	 * If true, the page will be rendered on the build time.
+	 * Works only with viteAlepha plugin.
+	 *
+	 * Replace boolean by an object to define static entries. (e.g. list of params/query)
+	 */
+	static?:
 		| boolean
 		| {
 				entries?: Array<Partial<PageRequestConfig<TConfig>>>;
@@ -151,20 +157,20 @@ export const $page = <
 ): PageDescriptor<TConfig, TProps, TPropsParent> => {
 	__descriptor(KEY);
 
-	if (options.children) {
-		for (const child of options.children) {
-			child[OPTIONS].parent = {
-				[OPTIONS]: options as PageDescriptorOptions<any, any, any>,
-			};
-		}
-	}
-
-	if (options.parent) {
-		options.parent[OPTIONS].children ??= [];
-		options.parent[OPTIONS].children.push({
-			[OPTIONS]: options as PageDescriptorOptions<any, any, any>,
-		});
-	}
+	// if (options.children) {
+	// 	for (const child of options.children) {
+	// 		child[OPTIONS].parent = {
+	// 			[OPTIONS]: options as PageDescriptorOptions<any, any, any>,
+	// 		};
+	// 	}
+	// }
+
+	// if (options.parent) {
+	// 	options.parent[OPTIONS].children ??= [];
+	// 	options.parent[OPTIONS].children.push({
+	// 		[OPTIONS]: options as PageDescriptorOptions<any, any, any>,
+	// 	});
+	// }
 
 	return {
 		[KIND]: KEY,
@@ -182,7 +188,8 @@ $page[KIND] = KEY;
 export interface PageDescriptorRenderOptions {
 	params?: Record<string, string>;
 	query?: Record<string, string>;
-	withLayout?: boolean;
+	html?: boolean;
+	hydration?: boolean;
 }
 
 export interface PageDescriptorRenderResult {
@@ -190,50 +197,6 @@ export interface PageDescriptorRenderResult {
 	context: PageReactContext;
 }
 
-export interface Head {
-	title?: string;
-	description?: string;
-	titleSeparator?: string;
-	htmlAttributes?: Record<string, string>;
-	bodyAttributes?: Record<string, string>;
-	meta?: Array<{ name: string; content: string }>;
-
-	// TODO
-	keywords?: string[];
-	author?: string;
-	robots?: string;
-	themeColor?: string;
-	viewport?:
-		| string
-		| {
-				width?: string;
-				height?: string;
-				initialScale?: string;
-				maximumScale?: string;
-				userScalable?: "no" | "yes" | "0" | "1";
-				interactiveWidget?:
-					| "resizes-visual"
-					| "resizes-content"
-					| "overlays-content";
-		  };
-
-	og?: {
-		title?: string;
-		description?: string;
-		image?: string;
-		url?: string;
-		type?: string;
-	};
-
-	twitter?: {
-		card?: string;
-		title?: string;
-		description?: string;
-		image?: string;
-		site?: string;
-	};
-}
-
 export interface PageRequestConfig<
 	TConfig extends PageConfigSchema = PageConfigSchema,
 > {

package/src/hooks/useClient.ts

@@ -1,12 +1,12 @@
 import {
 	type ClientScope,
-	HttpClient,
 	type HttpVirtualClient,
-} from "@alepha/server";
+	LinkProvider,
+} from "@alepha/server-links";
 import { useInject } from "./useInject.ts";
 
 export const useClient = <T extends object>(
 	_scope?: ClientScope,
 ): HttpVirtualClient<T> => {
-	return useInject(HttpClient).of<T>();
+	return useInject(LinkProvider).client<T>();
 };

package/src/index.browser.ts

@@ -1,4 +1,6 @@
 import { __bind, type Alepha, type Module } from "@alepha/core";
+import { AlephaServer } from "@alepha/server";
+import { AlephaServerLinks } from "@alepha/server-links";
 import { $page } from "./descriptors/$page.ts";
 import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
@@ -18,6 +20,8 @@ export class AlephaReact implements Module {
 	public readonly name = "alepha.react";
 	public readonly $services = (alepha: Alepha) =>
 		alepha
+			.with(AlephaServer)
+			.with(AlephaServerLinks)
 			.with(PageDescriptorProvider)
 			.with(ReactBrowserProvider)
 			.with(BrowserRouterProvider)

package/src/index.ts

@@ -1,6 +1,7 @@
 import { __bind, type Alepha, type Module } from "@alepha/core";
 import { AlephaServer, type ServerRequest } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
+import { AlephaServerLinks } from "@alepha/server-links";
 import { $page } from "./descriptors/$page.ts";
 import {
 	PageDescriptorProvider,
@@ -22,21 +23,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;
@@ -67,6 +80,7 @@ export class AlephaReact implements Module {
 		alepha
 			.with(AlephaServer)
 			.with(AlephaServerCache)
+			.with(AlephaServerLinks)
 			.with(ReactServerProvider)
 			.with(PageDescriptorProvider);
 }

package/src/providers/BrowserRouterProvider.ts

@@ -28,7 +28,7 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 	}
 
 	protected readonly configure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			for (const page of this.pageDescriptorProvider.getPages()) {
 				// mount only if a view is provided
@@ -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,13 +209,6 @@ export class PageDescriptorProvider {
 				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(/\/+/, "/");
@@ -244,6 +233,7 @@ export class PageDescriptorProvider {
 					element: this.renderView(i + 1, path, element, it.route),
 					index: i + 1,
 					path,
+					route,
 				});
 				break;
 			}
@@ -263,6 +253,7 @@ export class PageDescriptorProvider {
 				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
 				path,
+				route,
 			});
 		}
 
@@ -294,51 +285,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 });
 	}
@@ -404,17 +350,31 @@ export class PageDescriptorProvider {
 	}
 
 	protected readonly configure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
 			const pages = this.alepha.getDescriptorValues($page);
+
+			const hasParent = (it: { [OPTIONS]: PageDescriptorOptions }) => {
+				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) {
 				// skip children, we only want root pages
-				if (value[OPTIONS].parent) {
+				if (hasParent(value)) {
 					continue;
 				}
 
@@ -444,7 +404,11 @@ export class PageDescriptorProvider {
 		pages: Array<{ value: { [OPTIONS]: PageDescriptorOptions } }>,
 		target: { [OPTIONS]: PageDescriptorOptions },
 	): PageRouteEntry {
-		const children = target[OPTIONS].children ?? [];
+		const children = target[OPTIONS].children
+			? Array.isArray(target[OPTIONS].children)
+				? target[OPTIONS].children
+				: target[OPTIONS].children()
+			: [];
 
 		return {
 			...target[OPTIONS],
@@ -534,6 +498,7 @@ export interface Layer {
 	element: ReactNode;
 	index: number;
 	path: string;
+	route?: PageRoute;
 }
 
 export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
@@ -586,7 +551,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?: {
@@ -126,7 +125,7 @@ export class ReactBrowserProvider {
 	// -------------------------------------------------------------------------------------------------------------------
 
 	public readonly ready = $hook({
-		name: "ready",
+		on: "ready",
 		handler: async () => {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
@@ -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/ReactBrowserRenderer.ts

@@ -43,7 +43,7 @@ export class ReactBrowserRenderer {
 	}
 
 	public readonly ready = $hook({
-		name: "react:browser:render",
+		on: "react:browser:render",
 		handler: async ({ state, context, hydration }) => {
 			const element = this.browserRouterProvider.root(state, context);
 

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(
@@ -59,7 +60,7 @@ export class ReactServerProvider {
 	);
 
 	public readonly onConfigure = $hook({
-		name: "configure",
+		on: "configure",
 		handler: async () => {
 			const pages = this.alepha.getDescriptorValues($page);
 
@@ -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;
 	}