@alepha/react 0.9.2 → 0.9.4

package/src/providers/ReactServerProvider.ts

@@ -4,13 +4,13 @@ import {
 	$env,
 	$hook,
 	$inject,
-	$logger,
 	Alepha,
+	AlephaError,
 	type Static,
 	t,
 } from "@alepha/core";
+import { $logger } from "@alepha/logger";
 import {
-	apiLinksResponseSchema,
 	type ServerHandler,
 	ServerRouterProvider,
 	ServerTimingProvider,
@@ -22,14 +22,13 @@ import {
 	$page,
 	type PageDescriptorRenderOptions,
 } from "../descriptors/$page.ts";
+import { Redirection } from "../errors/Redirection.ts";
+import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
 import {
-	PageDescriptorProvider,
-	type PageReactContext,
-	type PageRequest,
 	type PageRoute,
-	type RouterState,
-} from "./PageDescriptorProvider.ts";
-import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
+	ReactPageProvider,
+	type ReactRouterState,
+} from "./ReactPageProvider.ts";
 
 const envSchema = t.object({
 	REACT_SERVER_DIST: t.string({ default: "public" }),
@@ -53,7 +52,7 @@ declare module "@alepha/core" {
 export class ReactServerProvider {
 	protected readonly log = $logger();
 	protected readonly alepha = $inject(Alepha);
-	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
+	protected readonly pageApi = $inject(ReactPageProvider);
 	protected readonly serverStaticProvider = $inject(ServerStaticProvider);
 	protected readonly serverRouterProvider = $inject(ServerRouterProvider);
 	protected readonly serverTimingProvider = $inject(ServerTimingProvider);
@@ -135,7 +134,7 @@ export class ReactServerProvider {
 	}
 
 	protected async registerPages(templateLoader: TemplateLoader) {
-		for (const page of this.pageDescriptorProvider.getPages()) {
+		for (const page of this.pageApi.getPages()) {
 			if (page.children?.length) {
 				continue;
 			}
@@ -196,43 +195,56 @@ export class ReactServerProvider {
 	 */
 	protected createRenderFunction(name: string, withIndex = false) {
 		return async (options: PageDescriptorRenderOptions = {}) => {
-			const page = this.pageDescriptorProvider.page(name);
-			const url = new URL(this.pageDescriptorProvider.url(name, options));
-			const context: PageRequest = {
+			const page = this.pageApi.page(name);
+			const url = new URL(this.pageApi.url(name, options));
+
+			const entry: Partial<ReactRouterState> = {
 				url,
 				params: options.params ?? {},
 				query: options.query ?? {},
-				head: {},
 				onError: () => null,
+				layers: [],
 			};
 
+			const state = entry as ReactRouterState;
+
+			this.log.trace("Rendering", {
+				url,
+			});
+
 			await this.alepha.emit("react:server:render:begin", {
-				context,
+				state,
 			});
 
-			const state = await this.pageDescriptorProvider.createLayers(
+			const { redirect } = await this.pageApi.createLayers(
 				page,
-				context,
+				state as ReactRouterState,
 			);
 
+			if (redirect) {
+				throw new AlephaError("Redirection is not supported in this context");
+			}
+
 			if (!withIndex && !options.html) {
+				this.alepha.state("react.router.state", state);
+
 				return {
-					context,
-					html: renderToString(
-						this.pageDescriptorProvider.root(state, context),
-					),
+					state,
+					html: renderToString(this.pageApi.root(state)),
 				};
 			}
 
 			const html = this.renderToHtml(
 				this.template ?? "",
 				state,
-				context,
 				options.hydration,
 			);
 
+			if (html instanceof Redirection) {
+				throw new Error("Redirection is not supported in this context");
+			}
+
 			const result = {
-				context,
 				state,
 				html,
 			};
@@ -244,7 +256,7 @@ export class ReactServerProvider {
 	}
 
 	protected createHandler(
-		page: PageRoute,
+		route: PageRoute,
 		templateLoader: TemplateLoader,
 	): ServerHandler {
 		return async (serverRequest) => {
@@ -254,33 +266,33 @@ export class ReactServerProvider {
 				throw new Error("Template not found");
 			}
 
-			const context: PageRequest = {
+			this.log.trace("Rendering page", {
+				name: route.name,
+			});
+
+			const entry: Partial<ReactRouterState> = {
 				url,
 				params,
 				query,
-				// plugins
-				head: {},
 				onError: () => null,
+				layers: [],
 			};
 
-			if (this.alepha.has(ServerLinksProvider)) {
-				const srv = this.alepha.inject(ServerLinksProvider);
-				const schema = apiLinksResponseSchema as any;
+			const state = entry as ReactRouterState;
 
-				context.links = this.alepha.parse(
-					schema,
-					await srv.getLinks({
-						user: serverRequest.user,
+			if (this.alepha.has(ServerLinksProvider)) {
+				this.alepha.state(
+					"api",
+					await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
+						user: (serverRequest as any).user, // TODO: fix type
 						authorization: serverRequest.headers.authorization,
 					}),
-				) as any;
-
-				this.alepha.context.set("links", context.links);
+				);
 			}
 
-			let target: PageRoute | undefined = page; // TODO: move to PageDescriptorProvider
+			let target: PageRoute | undefined = route; // TODO: move to PageDescriptorProvider
 			while (target) {
-				if (page.can && !page.can()) {
+				if (route.can && !route.can()) {
 					// if the page is not accessible, return 403
 					reply.status = 403;
 					reply.headers["content-type"] = "text/plain";
@@ -302,20 +314,17 @@ export class ReactServerProvider {
 
 			await this.alepha.emit("react:server:render:begin", {
 				request: serverRequest,
-				context,
+				state,
 			});
 
 			this.serverTimingProvider.beginTiming("createLayers");
 
-			const state = await this.pageDescriptorProvider.createLayers(
-				page,
-				context,
-			);
+			const { redirect } = await this.pageApi.createLayers(route, state);
 
 			this.serverTimingProvider.endTiming("createLayers");
 
-			if (state.redirect) {
-				return reply.redirect(state.redirect);
+			if (redirect) {
+				return reply.redirect(redirect);
 			}
 
 			reply.headers["content-type"] = "text/html";
@@ -327,44 +336,62 @@ export class ReactServerProvider {
 			reply.headers.pragma = "no-cache";
 			reply.headers.expires = "0";
 
-			// don't cache user links
-			if (page.cache && serverRequest.user) {
-				delete context.links;
+			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 html = this.renderToHtml(template, state, context);
-
-			await this.alepha.emit("react:server:render:end", {
+			const event = {
 				request: serverRequest,
-				context,
 				state,
 				html,
-			});
+			};
+
+			await this.alepha.emit("react:server:render:end", event);
 
-			page.afterHandler?.(serverRequest);
+			route.onServerResponse?.(serverRequest);
+
+			this.log.trace("Page rendered", {
+				name: route.name,
+			});
 
-			return html;
+			return event.html;
 		};
 	}
 
 	public renderToHtml(
 		template: string,
-		state: RouterState,
-		context: PageReactContext,
+		state: ReactRouterState,
 		hydration = true,
-	) {
-		const element = this.pageDescriptorProvider.root(state, context);
+	): string | Redirection {
+		const element = this.pageApi.root(state);
 
-		this.serverTimingProvider.beginTiming("renderToString");
+		// attach react router state to the http request context
+		this.alepha.state("react.router.state", state);
 
+		this.serverTimingProvider.beginTiming("renderToString");
 		let app = "";
 		try {
 			app = renderToString(element);
 		} catch (error) {
-			this.log.error("Error during SSR", error);
-			app = renderToString(context.onError(error as Error));
-		}
+			this.log.error(
+				"renderToString has failed, fallback to error handler",
+				error,
+			);
+			const element = state.onError(error as Error, state);
+			if (element instanceof Redirection) {
+				// if the error is a redirection, return the redirection URL
+				return element;
+			}
 
+			app = renderToString(element);
+			this.log.debug("Error handled successfully with fallback");
+		}
 		this.serverTimingProvider.endTiming("renderToString");
 
 		const response = {
@@ -372,8 +399,13 @@ export class ReactServerProvider {
 		};
 
 		if (hydration) {
+			const { request, context, ...store } =
+				this.alepha.context.als?.getStore() ?? {}; /// TODO: als must be protected, find a way to iterate on alepha.state
+
 			const hydrationData: ReactHydrationState = {
-				links: context.links,
+				...store,
+				// map react.router.state to the hydration state
+				"react.router.state": undefined,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error
@@ -381,7 +413,7 @@ export class ReactServerProvider {
 								...it.error,
 								name: it.error.name,
 								message: it.error.message,
-								stack: it.error.stack, // TODO: Hide stack in production ?
+								stack: !this.alepha.isProduction() ? it.error.stack : undefined,
 							}
 						: undefined,
 					index: undefined,
@@ -418,7 +450,7 @@ export class ReactServerProvider {
 			const bodyOpenTag = /<body([^>]*)>/i;
 			if (bodyOpenTag.test(response.html)) {
 				response.html = response.html.replace(bodyOpenTag, (match) => {
-					return `${match}\n<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
+					return `${match}<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
 				});
 			}
 		}
@@ -427,7 +459,7 @@ export class ReactServerProvider {
 		if (bodyCloseTagRegex.test(response.html)) {
 			response.html = response.html.replace(
 				bodyCloseTagRegex,
-				`${script}\n</body>`,
+				`${script}</body>`,
 			);
 		}
 	}

package/src/{hooks/RouterHookApi.ts → services/ReactRouter.ts}

@@ -1,30 +1,56 @@
+import { $inject, Alepha } from "@alepha/core";
 import type { PageDescriptor } from "../descriptors/$page.ts";
-import type {
-	AnchorProps,
-	PageReactContext,
-	PageRoute,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-import type {
+import {
 	ReactBrowserProvider,
-	RouterGoOptions,
+	type RouterGoOptions,
 } from "../providers/ReactBrowserProvider.ts";
+import {
+	type AnchorProps,
+	ReactPageProvider,
+	type ReactRouterState,
+} from "../providers/ReactPageProvider.ts";
+
+export class ReactRouter<T extends object> {
+	protected readonly alepha = $inject(Alepha);
+	protected readonly pageApi = $inject(ReactPageProvider);
+
+	public get state(): ReactRouterState {
+		return this.alepha.state("react.router.state")!;
+	}
+
+	public get pages() {
+		return this.pageApi.getPages();
+	}
+
+	public get browser(): ReactBrowserProvider | undefined {
+		if (this.alepha.isBrowser()) {
+			return this.alepha.inject(ReactBrowserProvider);
+		}
+		// server-side
+		return undefined;
+	}
 
-export class RouterHookApi {
-	constructor(
-		private readonly pages: PageRoute[],
-		private readonly context: PageReactContext,
-		private readonly state: RouterState,
-		private readonly layer: {
-			path: string;
-		},
-		private readonly browser?: ReactBrowserProvider,
-	) {}
+	public path(
+		name: keyof VirtualRouter<T>,
+		config: {
+			params?: Record<string, string>;
+			query?: Record<string, string>;
+		} = {},
+	): string {
+		return this.pageApi.pathname(name as string, {
+			params: {
+				...this.state.params,
+				...config.params,
+			},
+			query: config.query,
+		});
+	}
 
 	public getURL(): URL {
 		if (!this.browser) {
-			return this.context.url;
+			return this.state.url;
 		}
+
 		return new URL(this.location.href);
 	}
 
@@ -36,19 +62,19 @@ export class RouterHookApi {
 		return this.browser.location;
 	}
 
-	public get current(): RouterState {
+	public get current(): ReactRouterState {
 		return this.state;
 	}
 
 	public get pathname(): string {
-		return this.state.pathname;
+		return this.state.url.pathname;
 	}
 
 	public get query(): Record<string, string> {
 		const query: Record<string, string> = {};
 
 		for (const [key, value] of new URLSearchParams(
-			this.state.search,
+			this.state.url.search,
 		).entries()) {
 			query[key] = String(value);
 		}
@@ -68,79 +94,69 @@ export class RouterHookApi {
 		await this.browser?.invalidate(props);
 	}
 
-	/**
-	 * Create a valid href for the given pathname.
-	 *
-	 * @param pathname
-	 * @param layer
-	 */
-	public createHref(
-		pathname: HrefLike,
-		layer: { path: string } = this.layer,
-		options: { params?: Record<string, any> } = {},
-	) {
-		if (typeof pathname === "object") {
-			pathname = pathname.options.path ?? "";
-		}
-
-		if (options.params) {
-			for (const [key, value] of Object.entries(options.params)) {
-				pathname = pathname.replace(`:${key}`, String(value));
-			}
-		}
-
-		return pathname.startsWith("/")
-			? pathname
-			: `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
-	}
-
 	public async go(path: string, options?: RouterGoOptions): Promise<void>;
-	public async go<T extends object>(
+	public async go(
 		path: keyof VirtualRouter<T>,
 		options?: RouterGoOptions,
 	): Promise<void>;
-	public async go(path: string, options?: RouterGoOptions): Promise<void> {
+	public async go(
+		path: string | keyof VirtualRouter<T>,
+		options?: RouterGoOptions,
+	): Promise<void> {
 		for (const page of this.pages) {
 			if (page.name === path) {
-				path = page.path ?? "";
-				break;
+				await this.browser?.go(
+					this.path(path as keyof VirtualRouter<T>, options),
+					options,
+				);
+				return;
 			}
 		}
 
-		await this.browser?.go(this.createHref(path, this.layer, options), options);
+		await this.browser?.go(path as string, options);
 	}
 
 	public anchor(
 		path: string,
 		options?: { params?: Record<string, any> },
 	): AnchorProps;
-	public anchor<T extends object>(
+	public anchor(
 		path: keyof VirtualRouter<T>,
 		options?: { params?: Record<string, any> },
 	): AnchorProps;
 	public anchor(
-		path: string,
+		path: string | keyof VirtualRouter<T>,
 		options: { params?: Record<string, any> } = {},
 	): AnchorProps {
+		let href = path as string;
+
 		for (const page of this.pages) {
 			if (page.name === path) {
-				path = page.path ?? "";
+				href = this.path(path as keyof VirtualRouter<T>, options);
 				break;
 			}
 		}
 
-		const href = this.createHref(path, this.layer, options);
 		return {
-			href,
+			href: this.base(href),
 			onClick: (ev: any) => {
 				ev.stopPropagation();
 				ev.preventDefault();
 
-				this.go(path, options).catch(console.error);
+				this.go(href, options).catch(console.error);
 			},
 		};
 	}
 
+	public base(path: string): string {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") {
+			return path;
+		}
+
+		return base + path;
+	}
+
 	/**
 	 * Set query params.
 	 *
@@ -170,8 +186,6 @@ export class RouterHookApi {
 	}
 }
 
-export type HrefLike = string | { options: { path?: string; name?: string } };
-
 export type VirtualRouter<T> = {
 	[K in keyof T as T[K] extends PageDescriptor ? K : never]: T[K];
 };

package/src/contexts/RouterContext.ts

@@ -1,14 +0,0 @@
-import { createContext } from "react";
-import type {
-	PageReactContext,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-
-export interface RouterContextValue {
-	state: RouterState;
-	context: PageReactContext;
-}
-
-export const RouterContext = createContext<RouterContextValue | undefined>(
-	undefined,
-);

package/src/errors/RedirectionError.ts

@@ -1,10 +0,0 @@
-import type { HrefLike } from "../hooks/RouterHookApi.ts";
-
-export class RedirectionError extends Error {
-	public readonly page: HrefLike;
-
-	constructor(page: HrefLike) {
-		super("Redirection");
-		this.page = page;
-	}
-}