@alepha/react 0.9.3 → 0.9.5

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

@@ -2,19 +2,19 @@ import {
 	$env,
 	$hook,
 	$inject,
-	$logger,
 	Alepha,
 	type Static,
+	type TSchema,
+	TypeGuard,
 	t,
 } from "@alepha/core";
-import type { ApiLinksResponse } from "@alepha/server";
+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 +23,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 +32,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 +85,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 +108,42 @@ export class PageDescriptorProvider {
 		return root;
 	}
 
+	protected convertStringObjectToObject = (
+		schema?: TSchema,
+		value?: any,
+	): any => {
+		if (TypeGuard.IsObject(schema) && typeof value === "object") {
+			for (const key in schema.properties) {
+				if (
+					TypeGuard.IsObject(schema.properties[key]) &&
+					typeof value[key] === "string"
+				) {
+					try {
+						value[key] = this.alepha.parse(
+							schema.properties[key],
+							decodeURIComponent(value[key]),
+						);
+					} catch (e) {
+						// ignore
+					}
+				}
+			}
+		}
+		return value;
+	};
+
+	/**
+	 * 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) {
@@ -142,8 +159,9 @@ export class PageDescriptorProvider {
 			const config: Record<string, any> = {};
 
 			try {
+				this.convertStringObjectToObject(route.schema?.query, state.query);
 				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 +170,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 +183,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 +220,7 @@ export class PageDescriptorProvider {
 			try {
 				const props =
 					(await route.resolve?.({
-						...request, // request
+						...state, // request
 						...config, // params, query
 						...context, // previous props
 					} as any)) ?? {};
@@ -221,13 +238,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 +265,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 +276,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 +334,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,
 		};
 	}
 
@@ -352,6 +365,12 @@ export class PageDescriptorProvider {
 		page: PageRoute,
 		props: Record<string, any>,
 	): Promise<ReactNode> {
+		if (page.lazy && page.component) {
+			this.log.warn(
+				`Page ${page.name} has both lazy and component options, lazy will be used`,
+			);
+		}
+
 		if (page.lazy) {
 			const component = await page.lazy(); // load component
 			return createElement(component.default, props);
@@ -601,16 +620,36 @@ 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>;
+
+	/**
+	 * Optional meta information associated with the current page.
+	 */
+	meta: Record<string, any>;
 }
 
 export interface RouterStackItem {
@@ -621,33 +660,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;
 }