@alepha/react 0.9.4 → 0.9.5

package/src/providers/ReactPageProvider.ts

@@ -1,4 +1,13 @@
-import { $env, $hook, $inject, Alepha, type Static, t } from "@alepha/core";
+import {
+	$env,
+	$hook,
+	$inject,
+	Alepha,
+	type Static,
+	type TSchema,
+	TypeGuard,
+	t,
+} from "@alepha/core";
 import { $logger } from "@alepha/logger";
 import { createElement, type ReactNode, StrictMode } from "react";
 import ClientOnly from "../components/ClientOnly.tsx";
@@ -99,6 +108,30 @@ export class ReactPageProvider {
 		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.
@@ -126,6 +159,7 @@ export class ReactPageProvider {
 			const config: Record<string, any> = {};
 
 			try {
+				this.convertStringObjectToObject(route.schema?.query, state.query);
 				config.query = route.schema?.query
 					? this.alepha.parse(route.schema.query, state.query)
 					: {};
@@ -331,6 +365,12 @@ export class ReactPageProvider {
 		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);
@@ -605,6 +645,11 @@ export interface ReactRouterState {
 	 * 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 {

package/src/providers/ReactServerProvider.ts

@@ -12,6 +12,7 @@ import {
 import { $logger } from "@alepha/logger";
 import {
 	type ServerHandler,
+	ServerProvider,
 	ServerRouterProvider,
 	ServerTimingProvider,
 } from "@alepha/server";
@@ -21,6 +22,7 @@ import { renderToString } from "react-dom/server";
 import {
 	$page,
 	type PageDescriptorRenderOptions,
+	type PageDescriptorRenderResult,
 } from "../descriptors/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
 import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
@@ -53,6 +55,7 @@ export class ReactServerProvider {
 	protected readonly log = $logger();
 	protected readonly alepha = $inject(Alepha);
 	protected readonly pageApi = $inject(ReactPageProvider);
+	protected readonly serverProvider = $inject(ServerProvider);
 	protected readonly serverStaticProvider = $inject(ServerStaticProvider);
 	protected readonly serverRouterProvider = $inject(ServerRouterProvider);
 	protected readonly serverTimingProvider = $inject(ServerTimingProvider);
@@ -74,6 +77,19 @@ export class ReactServerProvider {
 
 			for (const page of pages) {
 				page.render = this.createRenderFunction(page.name);
+				page.fetch = async (options) => {
+					const response = await fetch(
+						`${this.serverProvider.hostname}/${page.pathname(options)}`,
+					);
+					const html = await response.text();
+					if (options?.html) return { html, response };
+					// take only text inside the root div
+					const match = html.match(this.ROOT_DIV_REGEX);
+					if (match) {
+						return { html: match[3], response };
+					}
+					throw new AlephaError("Invalid HTML response");
+				};
 			}
 
 			// development mode
@@ -194,7 +210,9 @@ export class ReactServerProvider {
 	 * For testing purposes, creates a render function that can be used.
 	 */
 	protected createRenderFunction(name: string, withIndex = false) {
-		return async (options: PageDescriptorRenderOptions = {}) => {
+		return async (
+			options: PageDescriptorRenderOptions = {},
+		): Promise<PageDescriptorRenderResult> => {
 			const page = this.pageApi.page(name);
 			const url = new URL(this.pageApi.url(name, options));
 
@@ -204,6 +222,7 @@ export class ReactServerProvider {
 				query: options.query ?? {},
 				onError: () => null,
 				layers: [],
+				meta: {},
 			};
 
 			const state = entry as ReactRouterState;
@@ -222,7 +241,7 @@ export class ReactServerProvider {
 			);
 
 			if (redirect) {
-				throw new AlephaError("Redirection is not supported in this context");
+				return { state, html: "", redirect };
 			}
 
 			if (!withIndex && !options.html) {
@@ -241,7 +260,7 @@ export class ReactServerProvider {
 			);
 
 			if (html instanceof Redirection) {
-				throw new Error("Redirection is not supported in this context");
+				return { state, html: "", redirect };
 			}
 
 			const result = {

package/src/services/ReactRouter.ts

@@ -33,8 +33,8 @@ export class ReactRouter<T extends object> {
 	public path(
 		name: keyof VirtualRouter<T>,
 		config: {
-			params?: Record<string, string>;
-			query?: Record<string, string>;
+			params?: Record<string, any>;
+			query?: Record<string, any>;
 		} = {},
 	): string {
 		return this.pageApi.pathname(name as string, {
@@ -116,17 +116,14 @@ export class ReactRouter<T extends object> {
 		await this.browser?.go(path as string, options);
 	}
 
-	public anchor(
-		path: string,
-		options?: { params?: Record<string, any> },
-	): AnchorProps;
+	public anchor(path: string, options?: RouterGoOptions): AnchorProps;
 	public anchor(
 		path: keyof VirtualRouter<T>,
-		options?: { params?: Record<string, any> },
+		options?: RouterGoOptions,
 	): AnchorProps;
 	public anchor(
 		path: string | keyof VirtualRouter<T>,
-		options: { params?: Record<string, any> } = {},
+		options: RouterGoOptions = {},
 	): AnchorProps {
 		let href = path as string;