@alepha/react 0.9.2 → 0.9.3

package/src/providers/PageDescriptorProvider.ts

@@ -18,10 +18,12 @@ import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
 	$page,
+	type ErrorHandler,
 	type PageDescriptor,
 	type PageDescriptorOptions,
 } from "../descriptors/$page.ts";
-import { RedirectionError } from "../errors/RedirectionError.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 }),
@@ -51,10 +53,13 @@ export class PageDescriptorProvider {
 		throw new Error(`Page ${name} not found`);
 	}
 
-	public url(
+	public pathname(
 		name: string,
-		options: { params?: Record<string, string>; base?: string } = {},
-	): URL {
+		options: {
+			params?: Record<string, string>;
+			query?: Record<string, string>;
+		} = {},
+	) {
 		const page = this.page(name);
 		if (!page) {
 			throw new Error(`Page ${name} not found`);
@@ -69,8 +74,23 @@ export class PageDescriptorProvider {
 
 		url = this.compile(url, options.params ?? {});
 
+		if (options.query) {
+			const query = new URLSearchParams(options.query);
+			if (query.toString()) {
+				url += `?${query.toString()}`;
+			}
+		}
+
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+
+	public url(
+		name: string,
+		options: { params?: Record<string, string>; base?: string } = {},
+	): URL {
 		return new URL(
-			url.replace(/\/\/+/g, "/") || "/",
+			this.pathname(name, options),
+			// use provided base or default to http://localhost
 			options.base ?? `http://localhost`,
 		);
 	}
@@ -200,13 +220,11 @@ export class PageDescriptorProvider {
 				};
 			} catch (e) {
 				// check if we need to redirect
-				if (e instanceof RedirectionError) {
-					return {
-						layers: [],
-						redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+				if (e instanceof Redirection) {
+					return this.createRedirectionLayer(e.page, {
 						pathname,
 						search,
-					};
+					});
 				}
 
 				this.log.error(e);
@@ -231,28 +249,56 @@ export class PageDescriptorProvider {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				request.onError = localErrorHandler;
+				const onErrorParent = request.onError;
+				request.onError = (error, context) => {
+					const result = localErrorHandler(error, context);
+					// if nothing happen, call the parent
+					if (result === undefined) {
+						return onErrorParent(error, context);
+					}
+					return result;
+				};
 			}
 
 			// handler has thrown an error, render an error view
 			if (it.error) {
-				let element: ReactNode = await request.onError(it.error);
-				if (element === null) {
-					element = this.renderError(it.error);
-				}
+				try {
+					let element: ReactNode | Redirection | undefined =
+						await request.onError(it.error, request);
 
-				layers.push({
-					props,
-					error: it.error,
-					name: it.route.name,
-					part: it.route.path,
-					config: it.config,
-					element: this.renderView(i + 1, path, element, it.route),
-					index: i + 1,
-					path,
-					route: it.route,
-				});
-				break;
+					if (element === undefined) {
+						throw it.error;
+					}
+
+					if (element instanceof Redirection) {
+						return this.createRedirectionLayer(element.page, {
+							pathname,
+							search,
+						});
+					}
+
+					if (element === null) {
+						element = this.renderError(it.error);
+					}
+
+					layers.push({
+						props,
+						error: it.error,
+						name: it.route.name,
+						part: it.route.path,
+						config: it.config,
+						element: this.renderView(i + 1, path, element, it.route),
+						index: i + 1,
+						path,
+						route: it.route,
+					});
+					break;
+				} catch (e) {
+					if (e instanceof Redirection) {
+						return this.createRedirectionLayer(e.page, { pathname, search });
+					}
+					throw e;
+				}
 			}
 
 			// normal use case
@@ -278,7 +324,22 @@ export class PageDescriptorProvider {
 		return { layers, pathname, search };
 	}
 
-	protected getErrorHandler(route: PageRoute) {
+	protected createRedirectionLayer(
+		href: HrefLike,
+		context: {
+			pathname: string;
+			search: string;
+		},
+	) {
+		return {
+			layers: [],
+			redirect: typeof href === "string" ? href : this.href(href),
+			pathname: context.pathname,
+			search: context.search,
+		};
+	}
+
+	protected getErrorHandler(route: PageRoute): ErrorHandler | undefined {
 		if (route.errorHandler) return route.errorHandler;
 		let parent = route.parent;
 		while (parent) {
@@ -374,6 +435,10 @@ export class PageDescriptorProvider {
 			const pages = this.alepha.descriptors($page);
 
 			const hasParent = (it: PageDescriptor) => {
+				if (it.options.parent) {
+					return true;
+				}
+
 				for (const page of pages) {
 					const children = page.options.children
 						? Array.isArray(page.options.children)
@@ -406,7 +471,7 @@ export class PageDescriptorProvider {
 					name: "notFound",
 					cache: true,
 					component: NotFoundPage,
-					afterHandler: ({ reply }) => {
+					onServerResponse: ({ reply }) => {
 						reply.status = 404;
 					},
 				});
@@ -424,6 +489,18 @@ export class PageDescriptorProvider {
 				: target.options.children()
 			: [];
 
+		const getChildrenFromParent = (it: PageDescriptor): PageDescriptor[] => {
+			const children = [];
+			for (const page of pages) {
+				if (page.options.parent === it) {
+					children.push(page);
+				}
+			}
+			return children;
+		};
+
+		children.push(...getChildrenFromParent(target));
+
 		return {
 			...target.options,
 			name: target.name,
@@ -521,7 +598,7 @@ export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
 
 export interface AnchorProps {
 	href: string;
-	onClick: (ev: any) => any;
+	onClick: (ev?: any) => any;
 }
 
 export interface RouterState {
@@ -568,6 +645,9 @@ export interface CreateLayersResult extends RouterState {
  */
 export interface PageReactContext {
 	url: URL;
-	onError: (error: Error) => ReactNode;
+	onError: ErrorHandler;
 	links?: ApiLinksResponse;
+
+	params: Record<string, any>;
+	query: Record<string, string>;
 }

package/src/providers/ReactBrowserProvider.ts

@@ -1,4 +1,4 @@
-import { $hook, $inject, $logger, Alepha } from "@alepha/core";
+import { $hook, $inject, $logger, Alepha, type State } from "@alepha/core";
 import type { ApiLinksResponse } from "@alepha/server";
 import { LinkProvider } from "@alepha/server-links";
 import type { Root } from "react-dom/client";
@@ -97,18 +97,12 @@ export class ReactBrowserProvider {
 		});
 
 		// when redirecting in browser
-		if (result.context.url.pathname !== url) {
-			// TODO: check if losing search params is acceptable?
-			this.pushState(result.context.url.pathname);
+		if (result.context.url.pathname + result.context.url.search !== url) {
+			this.pushState(result.context.url.pathname + result.context.url.search);
 			return;
 		}
 
-		if (options.replace) {
-			this.pushState(url);
-			return;
-		}
-
-		this.pushState(url);
+		this.pushState(url, options.replace);
 	}
 
 	protected async render(
@@ -157,9 +151,20 @@ export class ReactBrowserProvider {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
 
+			if (hydration) {
+				for (const [key, value] of Object.entries(hydration)) {
+					if (key !== "layers" && key !== "links") {
+						this.alepha.state(key as keyof State, value);
+					}
+				}
+			}
+
 			if (hydration?.links) {
 				for (const link of hydration.links.links) {
-					this.client.pushLink(link);
+					this.client.pushLink({
+						...link,
+						prefix: hydration.links.prefix,
+					});
 				}
 			}
 
@@ -190,6 +195,7 @@ export interface RouterGoOptions {
 	replace?: boolean;
 	match?: TransitionOptions;
 	params?: Record<string, string>;
+	query?: Record<string, string>;
 }
 
 export interface ReactHydrationState {

package/src/providers/ReactServerProvider.ts

@@ -22,6 +22,7 @@ import {
 	$page,
 	type PageDescriptorRenderOptions,
 } from "../descriptors/$page.ts";
+import { Redirection } from "../errors/Redirection.ts";
 import {
 	PageDescriptorProvider,
 	type PageReactContext,
@@ -231,6 +232,10 @@ export class ReactServerProvider {
 				options.hydration,
 			);
 
+			if (html instanceof Redirection) {
+				throw new Error("Redirection is not supported in this context");
+			}
+
 			const result = {
 				context,
 				state,
@@ -254,6 +259,10 @@ export class ReactServerProvider {
 				throw new Error("Template not found");
 			}
 
+			this.log.trace("Rendering page", {
+				name: page.name,
+			});
+
 			const context: PageRequest = {
 				url,
 				params,
@@ -300,6 +309,11 @@ 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,
@@ -333,17 +347,31 @@ export class ReactServerProvider {
 			}
 
 			const html = this.renderToHtml(template, state, context);
+			if (html instanceof Redirection) {
+				reply.redirect(
+					typeof html.page === "string"
+						? html.page
+						: this.pageDescriptorProvider.href(html.page),
+				);
+				return;
+			}
 
-			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);
+			page.onServerResponse?.(serverRequest);
+
+			this.log.trace("Page rendered", {
+				name: page.name,
+			});
 
-			return html;
+			return event.html;
 		};
 	}
 
@@ -352,7 +380,7 @@ export class ReactServerProvider {
 		state: RouterState,
 		context: PageReactContext,
 		hydration = true,
-	) {
+	): string | Redirection {
 		const element = this.pageDescriptorProvider.root(state, context);
 
 		this.serverTimingProvider.beginTiming("renderToString");
@@ -362,7 +390,13 @@ export class ReactServerProvider {
 			app = renderToString(element);
 		} catch (error) {
 			this.log.error("Error during SSR", error);
-			app = renderToString(context.onError(error as Error));
+			const element = context.onError(error as Error, context);
+			if (element instanceof Redirection) {
+				// if the error is a redirection, return the redirection URL
+				return element;
+			}
+
+			app = renderToString(element);
 		}
 
 		this.serverTimingProvider.endTiming("renderToString");
@@ -372,8 +406,11 @@ export class ReactServerProvider {
 		};
 
 		if (hydration) {
+			const { request, context, ...rest } =
+				this.alepha.context.als?.getStore() ?? {};
+
 			const hydrationData: ReactHydrationState = {
-				links: context.links,
+				...rest,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error
@@ -381,7 +418,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 +455,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 +464,7 @@ export class ReactServerProvider {
 		if (bodyCloseTagRegex.test(response.html)) {
 			response.html = response.html.replace(
 				bodyCloseTagRegex,
-				`${script}\n</body>`,
+				`${script}</body>`,
 			);
 		}
 	}