@alepha/react 0.9.3 → 0.9.4

package/src/providers/{PageDescriptorProvider.ts → ReactPageProvider.ts}

@@ -1,20 +1,11 @@
-import {
-	$env,
-	$hook,
-	$inject,
-	$logger,
-	Alepha,
-	type Static,
-	t,
-} from "@alepha/core";
-import type { ApiLinksResponse } from "@alepha/server";
+import { $env, $hook, $inject, Alepha, type Static, t } from "@alepha/core";
+import { $logger } from "@alepha/logger";
 import { createElement, type ReactNode, StrictMode } from "react";
 import ClientOnly from "../components/ClientOnly.tsx";
 import ErrorViewer from "../components/ErrorViewer.tsx";
 import NestedView from "../components/NestedView.tsx";
 import NotFoundPage from "../components/NotFound.tsx";
 import { AlephaContext } from "../contexts/AlephaContext.ts";
-import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
 	$page,
@@ -23,7 +14,6 @@ import {
 	type PageDescriptorOptions,
 } from "../descriptors/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
-import type { HrefLike } from "../hooks/RouterHookApi.ts";
 
 const envSchema = t.object({
 	REACT_STRICT_MODE: t.boolean({ default: true }),
@@ -33,7 +23,7 @@ declare module "@alepha/core" {
 	export interface Env extends Partial<Static<typeof envSchema>> {}
 }
 
-export class PageDescriptorProvider {
+export class ReactPageProvider {
 	protected readonly log = $logger();
 	protected readonly env = $env(envSchema);
 	protected readonly alepha = $inject(Alepha);
@@ -86,29 +76,20 @@ export class PageDescriptorProvider {
 
 	public url(
 		name: string,
-		options: { params?: Record<string, string>; base?: string } = {},
+		options: { params?: Record<string, string>; host?: string } = {},
 	): URL {
 		return new URL(
 			this.pathname(name, options),
 			// use provided base or default to http://localhost
-			options.base ?? `http://localhost`,
+			options.host ?? `http://localhost`,
 		);
 	}
 
-	public root(state: RouterState, context: PageReactContext): ReactNode {
+	public root(state: ReactRouterState): ReactNode {
 		const root = createElement(
 			AlephaContext.Provider,
 			{ value: this.alepha },
-			createElement(
-				RouterContext.Provider,
-				{
-					value: {
-						state,
-						context,
-					},
-				},
-				createElement(NestedView, {}, state.layers[0]?.element),
-			),
+			createElement(NestedView, {}, state.layers[0]?.element),
 		);
 
 		if (this.env.REACT_STRICT_MODE) {
@@ -118,15 +99,18 @@ export class PageDescriptorProvider {
 		return root;
 	}
 
+	/**
+	 * Create a new RouterState based on a given route and request.
+	 * This method resolves the layers for the route, applying any query and params schemas defined in the route.
+	 * It also handles errors and redirects.
+	 */
 	public async createLayers(
 		route: PageRoute,
-		request: PageRequest,
+		state: ReactRouterState,
+		previous: PreviousLayerData[] = [],
 	): Promise<CreateLayersResult> {
-		const { pathname, search } = request.url;
-		const layers: Layer[] = []; // result layers
 		let context: Record<string, any> = {}; // all props
 		const stack: Array<RouterStackItem> = [{ route }]; // stack of routes
-		request.onError = (error) => this.renderError(error); // error handler
 
 		let parent = route.parent;
 		while (parent) {
@@ -143,7 +127,7 @@ export class PageDescriptorProvider {
 
 			try {
 				config.query = route.schema?.query
-					? this.alepha.parse(route.schema.query, request.query)
+					? this.alepha.parse(route.schema.query, state.query)
 					: {};
 			} catch (e) {
 				it.error = e as Error;
@@ -152,7 +136,7 @@ export class PageDescriptorProvider {
 
 			try {
 				config.params = route.schema?.params
-					? this.alepha.parse(route.schema.params, request.params)
+					? this.alepha.parse(route.schema.params, state.params)
 					: {};
 			} catch (e) {
 				it.error = e as Error;
@@ -165,7 +149,6 @@ export class PageDescriptorProvider {
 			};
 
 			// check if previous layer is the same, reuse if possible
-			const previous = request.previous;
 			if (previous?.[i] && !forceRefresh && previous[i].name === route.name) {
 				const url = (str?: string) => (str ? str.replace(/\/\/+/g, "/") : "/");
 
@@ -203,7 +186,7 @@ export class PageDescriptorProvider {
 			try {
 				const props =
 					(await route.resolve?.({
-						...request, // request
+						...state, // request
 						...config, // params, query
 						...context, // previous props
 					} as any)) ?? {};
@@ -221,13 +204,12 @@ export class PageDescriptorProvider {
 			} catch (e) {
 				// check if we need to redirect
 				if (e instanceof Redirection) {
-					return this.createRedirectionLayer(e.page, {
-						pathname,
-						search,
-					});
+					return {
+						redirect: e.redirect,
+					};
 				}
 
-				this.log.error(e);
+				this.log.error("Page resolver has failed", e);
 
 				it.error = e as Error;
 				break;
@@ -249,8 +231,8 @@ export class PageDescriptorProvider {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				const onErrorParent = request.onError;
-				request.onError = (error, context) => {
+				const onErrorParent = state.onError;
+				state.onError = (error, context) => {
 					const result = localErrorHandler(error, context);
 					// if nothing happen, call the parent
 					if (result === undefined) {
@@ -260,28 +242,51 @@ export class PageDescriptorProvider {
 				};
 			}
 
+			// normal use case
+			if (!it.error) {
+				try {
+					const element = await this.createElement(it.route, {
+						...props,
+						...context,
+					});
+
+					state.layers.push({
+						name: it.route.name,
+						props,
+						part: it.route.path,
+						config: it.config,
+						element: this.renderView(i + 1, path, element, it.route),
+						index: i + 1,
+						path,
+						route: it.route,
+						cache: it.cache,
+					});
+				} catch (e) {
+					it.error = e as Error;
+				}
+			}
+
 			// handler has thrown an error, render an error view
 			if (it.error) {
 				try {
 					let element: ReactNode | Redirection | undefined =
-						await request.onError(it.error, request);
+						await state.onError(it.error, state);
 
 					if (element === undefined) {
 						throw it.error;
 					}
 
 					if (element instanceof Redirection) {
-						return this.createRedirectionLayer(element.page, {
-							pathname,
-							search,
-						});
+						return {
+							redirect: element.redirect,
+						};
 					}
 
 					if (element === null) {
 						element = this.renderError(it.error);
 					}
 
-					layers.push({
+					state.layers.push({
 						props,
 						error: it.error,
 						name: it.route.name,
@@ -295,47 +300,21 @@ export class PageDescriptorProvider {
 					break;
 				} catch (e) {
 					if (e instanceof Redirection) {
-						return this.createRedirectionLayer(e.page, { pathname, search });
+						return {
+							redirect: e.redirect,
+						};
 					}
 					throw e;
 				}
 			}
-
-			// normal use case
-
-			const element = await this.createElement(it.route, {
-				...props,
-				...context,
-			});
-
-			layers.push({
-				name: it.route.name,
-				props,
-				part: it.route.path,
-				config: it.config,
-				element: this.renderView(i + 1, path, element, it.route),
-				index: i + 1,
-				path,
-				route: it.route,
-				cache: it.cache,
-			});
 		}
 
-		return { layers, pathname, search };
+		return { state };
 	}
 
-	protected createRedirectionLayer(
-		href: HrefLike,
-		context: {
-			pathname: string;
-			search: string;
-		},
-	) {
+	protected createRedirectionLayer(redirect: string): CreateLayersResult {
 		return {
-			layers: [],
-			redirect: typeof href === "string" ? href : this.href(href),
-			pathname: context.pathname,
-			search: context.search,
+			redirect,
 		};
 	}
 
@@ -601,16 +580,31 @@ export interface AnchorProps {
 	onClick: (ev?: any) => any;
 }
 
-export interface RouterState {
-	pathname: string;
-	search: string;
+export interface ReactRouterState {
+	/**
+	 * Stack of layers for the current page.
+	 */
 	layers: Array<Layer>;
-}
 
-export interface TransitionOptions {
-	state?: RouterState;
-	previous?: PreviousLayerData[];
-	context?: PageReactContext;
+	/**
+	 * URL of the current page.
+	 */
+	url: URL;
+
+	/**
+	 * Error handler for the current page.
+	 */
+	onError: ErrorHandler;
+
+	/**
+	 * Params extracted from the URL for the current page.
+	 */
+	params: Record<string, any>;
+
+	/**
+	 * Query parameters extracted from the URL for the current page.
+	 */
+	query: Record<string, string>;
 }
 
 export interface RouterStackItem {
@@ -621,33 +615,11 @@ export interface RouterStackItem {
 	cache?: boolean;
 }
 
-export interface RouterRenderResult {
-	state: RouterState;
-	context: PageReactContext;
-	redirect?: string;
-}
-
-export interface PageRequest extends PageReactContext {
-	params: Record<string, any>;
-	query: Record<string, string>;
-
-	// previous layers (browser history or browser hydration, always null on server)
+export interface TransitionOptions {
 	previous?: PreviousLayerData[];
 }
 
-export interface CreateLayersResult extends RouterState {
+export interface CreateLayersResult {
 	redirect?: string;
-}
-
-/**
- * It's like RouterState, but publicly available in React context.
- * This is where we store all plugin data!
- */
-export interface PageReactContext {
-	url: URL;
-	onError: ErrorHandler;
-	links?: ApiLinksResponse;
-
-	params: Record<string, any>;
-	query: Record<string, string>;
+	state?: ReactRouterState;
 }

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,
@@ -23,14 +23,12 @@ import {
 	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" }),
@@ -54,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);
@@ -136,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;
 			}
@@ -197,38 +195,48 @@ 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,
 			);
 
@@ -237,7 +245,6 @@ export class ReactServerProvider {
 			}
 
 			const result = {
-				context,
 				state,
 				html,
 			};
@@ -249,7 +256,7 @@ export class ReactServerProvider {
 	}
 
 	protected createHandler(
-		page: PageRoute,
+		route: PageRoute,
 		templateLoader: TemplateLoader,
 	): ServerHandler {
 		return async (serverRequest) => {
@@ -260,36 +267,32 @@ export class ReactServerProvider {
 			}
 
 			this.log.trace("Rendering page", {
-				name: page.name,
+				name: route.name,
 			});
 
-			const context: PageRequest = {
+			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";
@@ -309,27 +312,19 @@ export class ReactServerProvider {
 			// 	return;
 			// }
 
-			await this.alepha.emit("react:transition:begin", {
-				request: serverRequest,
-				context,
-			});
-
 			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";
@@ -341,34 +336,28 @@ 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, context);
+			const html = this.renderToHtml(template, state);
 			if (html instanceof Redirection) {
 				reply.redirect(
-					typeof html.page === "string"
-						? html.page
-						: this.pageDescriptorProvider.href(html.page),
+					typeof html.redirect === "string"
+						? html.redirect
+						: this.pageApi.href(html.redirect),
 				);
 				return;
 			}
 
 			const event = {
 				request: serverRequest,
-				context,
 				state,
 				html,
 			};
 
 			await this.alepha.emit("react:server:render:end", event);
 
-			page.onServerResponse?.(serverRequest);
+			route.onServerResponse?.(serverRequest);
 
 			this.log.trace("Page rendered", {
-				name: page.name,
+				name: route.name,
 			});
 
 			return event.html;
@@ -377,28 +366,32 @@ export class ReactServerProvider {
 
 	public renderToHtml(
 		template: string,
-		state: RouterState,
-		context: PageReactContext,
+		state: ReactRouterState,
 		hydration = true,
 	): string | Redirection {
-		const element = this.pageDescriptorProvider.root(state, context);
+		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);
-			const element = context.onError(error as Error, context);
+			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 = {
@@ -406,11 +399,13 @@ export class ReactServerProvider {
 		};
 
 		if (hydration) {
-			const { request, context, ...rest } =
-				this.alepha.context.als?.getStore() ?? {};
+			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 = {
-				...rest,
+				...store,
+				// map react.router.state to the hydration state
+				"react.router.state": undefined,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error