@alepha/react 0.9.2 → 0.9.4

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

@@ -1,27 +1,19 @@
-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,
+	type ErrorHandler,
 	type PageDescriptor,
 	type PageDescriptorOptions,
 } from "../descriptors/$page.ts";
-import { RedirectionError } from "../errors/RedirectionError.ts";
+import { Redirection } from "../errors/Redirection.ts";
 
 const envSchema = t.object({
 	REACT_STRICT_MODE: t.boolean({ default: true }),
@@ -31,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);
@@ -51,10 +43,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,26 +64,32 @@ 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>; host?: string } = {},
+	): URL {
 		return new URL(
-			url.replace(/\/\/+/g, "/") || "/",
-			options.base ?? `http://localhost`,
+			this.pathname(name, options),
+			// use provided base or default to 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) {
@@ -98,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) {
@@ -123,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;
@@ -132,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;
@@ -145,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, "/") : "/");
 
@@ -183,7 +186,7 @@ export class PageDescriptorProvider {
 			try {
 				const props =
 					(await route.resolve?.({
-						...request, // request
+						...state, // request
 						...config, // params, query
 						...context, // previous props
 					} as any)) ?? {};
@@ -200,16 +203,13 @@ export class PageDescriptorProvider {
 				};
 			} catch (e) {
 				// check if we need to redirect
-				if (e instanceof RedirectionError) {
+				if (e instanceof Redirection) {
 					return {
-						layers: [],
-						redirect: typeof e.page === "string" ? e.page : this.href(e.page),
-						pathname,
-						search,
+						redirect: e.redirect,
 					};
 				}
 
-				this.log.error(e);
+				this.log.error("Page resolver has failed", e);
 
 				it.error = e as Error;
 				break;
@@ -231,54 +231,94 @@ export class PageDescriptorProvider {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				request.onError = localErrorHandler;
+				const onErrorParent = state.onError;
+				state.onError = (error, context) => {
+					const result = localErrorHandler(error, context);
+					// if nothing happen, call the parent
+					if (result === undefined) {
+						return onErrorParent(error, context);
+					}
+					return result;
+				};
+			}
+
+			// 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) {
-				let element: ReactNode = await request.onError(it.error);
-				if (element === null) {
-					element = this.renderError(it.error);
-				}
+				try {
+					let element: ReactNode | Redirection | undefined =
+						await state.onError(it.error, state);
 
-				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;
+					}
 
-			// normal use case
+					if (element instanceof Redirection) {
+						return {
+							redirect: element.redirect,
+						};
+					}
+
+					if (element === null) {
+						element = this.renderError(it.error);
+					}
 
-			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,
-			});
+					state.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 {
+							redirect: e.redirect,
+						};
+					}
+					throw e;
+				}
+			}
 		}
 
-		return { layers, pathname, search };
+		return { state };
+	}
+
+	protected createRedirectionLayer(redirect: string): CreateLayersResult {
+		return {
+			redirect,
+		};
 	}
 
-	protected getErrorHandler(route: PageRoute) {
+	protected getErrorHandler(route: PageRoute): ErrorHandler | undefined {
 		if (route.errorHandler) return route.errorHandler;
 		let parent = route.parent;
 		while (parent) {
@@ -374,6 +414,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 +450,7 @@ export class PageDescriptorProvider {
 					name: "notFound",
 					cache: true,
 					component: NotFoundPage,
-					afterHandler: ({ reply }) => {
+					onServerResponse: ({ reply }) => {
 						reply.status = 404;
 					},
 				});
@@ -424,6 +468,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,19 +577,34 @@ export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
 
 export interface AnchorProps {
 	href: string;
-	onClick: (ev: any) => any;
+	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 {
@@ -544,30 +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: (error: Error) => ReactNode;
-	links?: ApiLinksResponse;
+	state?: ReactRouterState;
 }