@alepha/react 0.9.3 → 0.9.5

package/src/providers/ReactServerProvider.ts

@@ -4,14 +4,15 @@ import {
 	$env,
 	$hook,
 	$inject,
-	$logger,
 	Alepha,
+	AlephaError,
 	type Static,
 	t,
 } from "@alepha/core";
+import { $logger } from "@alepha/logger";
 import {
-	apiLinksResponseSchema,
 	type ServerHandler,
+	ServerProvider,
 	ServerRouterProvider,
 	ServerTimingProvider,
 } from "@alepha/server";
@@ -21,16 +22,15 @@ 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";
 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 +54,8 @@ 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 serverProvider = $inject(ServerProvider);
 	protected readonly serverStaticProvider = $inject(ServerStaticProvider);
 	protected readonly serverRouterProvider = $inject(ServerRouterProvider);
 	protected readonly serverTimingProvider = $inject(ServerTimingProvider);
@@ -76,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
@@ -136,7 +150,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;
 			}
@@ -196,48 +210,60 @@ export class ReactServerProvider {
 	 * For testing purposes, creates a render function that can be used.
 	 */
 	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 = {
+		return async (
+			options: PageDescriptorRenderOptions = {},
+		): Promise<PageDescriptorRenderResult> => {
+			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: [],
+				meta: {},
 			};
 
+			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) {
+				return { state, html: "", redirect };
+			}
+
 			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,
 			);
 
 			if (html instanceof Redirection) {
-				throw new Error("Redirection is not supported in this context");
+				return { state, html: "", redirect };
 			}
 
 			const result = {
-				context,
 				state,
 				html,
 			};
@@ -249,7 +275,7 @@ export class ReactServerProvider {
 	}
 
 	protected createHandler(
-		page: PageRoute,
+		route: PageRoute,
 		templateLoader: TemplateLoader,
 	): ServerHandler {
 		return async (serverRequest) => {
@@ -260,36 +286,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 +331,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 +355,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 +385,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 +418,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

package/src/{hooks/RouterHookApi.ts → services/ReactRouter.ts}

@@ -1,38 +1,45 @@
+import { $inject, Alepha } from "@alepha/core";
 import type { PageDescriptor } from "../descriptors/$page.ts";
-import type {
-	AnchorProps,
-	PageDescriptorProvider,
-	PageReactContext,
-	PageRoute,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-import type {
+import {
 	ReactBrowserProvider,
-	RouterGoOptions,
+	type RouterGoOptions,
 } from "../providers/ReactBrowserProvider.ts";
+import {
+	type AnchorProps,
+	ReactPageProvider,
+	type ReactRouterState,
+} from "../providers/ReactPageProvider.ts";
+
+export class ReactRouter<T extends object> {
+	protected readonly alepha = $inject(Alepha);
+	protected readonly pageApi = $inject(ReactPageProvider);
+
+	public get state(): ReactRouterState {
+		return this.alepha.state("react.router.state")!;
+	}
 
-export class RouterHookApi<T extends object> {
-	constructor(
-		private readonly pages: PageRoute[],
-		private readonly context: PageReactContext,
-		private readonly state: RouterState,
-		private readonly layer: {
-			path: string;
-		},
-		private readonly pageApi: PageDescriptorProvider,
-		private readonly browser?: ReactBrowserProvider,
-	) {}
+	public get pages() {
+		return this.pageApi.getPages();
+	}
+
+	public get browser(): ReactBrowserProvider | undefined {
+		if (this.alepha.isBrowser()) {
+			return this.alepha.inject(ReactBrowserProvider);
+		}
+		// server-side
+		return undefined;
+	}
 
 	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, {
 			params: {
-				...this.context.params,
+				...this.state.params,
 				...config.params,
 			},
 			query: config.query,
@@ -41,8 +48,9 @@ export class RouterHookApi<T extends object> {
 
 	public getURL(): URL {
 		if (!this.browser) {
-			return this.context.url;
+			return this.state.url;
 		}
+
 		return new URL(this.location.href);
 	}
 
@@ -54,19 +62,19 @@ export class RouterHookApi<T extends object> {
 		return this.browser.location;
 	}
 
-	public get current(): RouterState {
+	public get current(): ReactRouterState {
 		return this.state;
 	}
 
 	public get pathname(): string {
-		return this.state.pathname;
+		return this.state.url.pathname;
 	}
 
 	public get query(): Record<string, string> {
 		const query: Record<string, string> = {};
 
 		for (const [key, value] of new URLSearchParams(
-			this.state.search,
+			this.state.url.search,
 		).entries()) {
 			query[key] = String(value);
 		}
@@ -86,32 +94,6 @@ export class RouterHookApi<T extends object> {
 		await this.browser?.invalidate(props);
 	}
 
-	/**
-	 * Create a valid href for the given pathname.
-	 *
-	 * @param pathname
-	 * @param layer
-	 */
-	public createHref(
-		pathname: HrefLike,
-		layer: { path: string } = this.layer,
-		options: { params?: Record<string, any> } = {},
-	) {
-		if (typeof pathname === "object") {
-			pathname = pathname.options.path ?? "";
-		}
-
-		if (options.params) {
-			for (const [key, value] of Object.entries(options.params)) {
-				pathname = pathname.replace(`:${key}`, String(value));
-			}
-		}
-
-		return pathname.startsWith("/")
-			? pathname
-			: `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
-	}
-
 	public async go(path: string, options?: RouterGoOptions): Promise<void>;
 	public async go(
 		path: keyof VirtualRouter<T>,
@@ -134,19 +116,17 @@ export class RouterHookApi<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;
+
 		for (const page of this.pages) {
 			if (page.name === path) {
 				href = this.path(path as keyof VirtualRouter<T>, options);
@@ -155,7 +135,7 @@ export class RouterHookApi<T extends object> {
 		}
 
 		return {
-			href,
+			href: this.base(href),
 			onClick: (ev: any) => {
 				ev.stopPropagation();
 				ev.preventDefault();
@@ -165,6 +145,15 @@ export class RouterHookApi<T extends object> {
 		};
 	}
 
+	public base(path: string): string {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") {
+			return path;
+		}
+
+		return base + path;
+	}
+
 	/**
 	 * Set query params.
 	 *
@@ -194,8 +183,6 @@ export class RouterHookApi<T extends object> {
 	}
 }
 
-export type HrefLike = string | { options: { path?: string; name?: string } };
-
 export type VirtualRouter<T> = {
 	[K in keyof T as T[K] extends PageDescriptor ? K : never]: T[K];
 };

package/src/contexts/RouterContext.ts

@@ -1,14 +0,0 @@
-import { createContext } from "react";
-import type {
-	PageReactContext,
-	RouterState,
-} from "../providers/PageDescriptorProvider.ts";
-
-export interface RouterContextValue {
-	state: RouterState;
-	context: PageReactContext;
-}
-
-export const RouterContext = createContext<RouterContextValue | undefined>(
-	undefined,
-);

package/src/providers/BrowserRouterProvider.ts

@@ -1,155 +0,0 @@
-import { $hook, $inject, $logger, Alepha } from "@alepha/core";
-import { type Route, RouterProvider } from "@alepha/router";
-import { createElement, type ReactNode } from "react";
-import NotFoundPage from "../components/NotFound.tsx";
-import {
-	isPageRoute,
-	PageDescriptorProvider,
-	type PageReactContext,
-	type PageRequest,
-	type PageRoute,
-	type PageRouteEntry,
-	type RouterRenderResult,
-	type RouterState,
-	type TransitionOptions,
-} from "./PageDescriptorProvider.ts";
-
-export interface BrowserRoute extends Route {
-	page: PageRoute;
-}
-
-export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
-	protected readonly log = $logger();
-	protected readonly alepha = $inject(Alepha);
-	protected readonly pageDescriptorProvider = $inject(PageDescriptorProvider);
-
-	public add(entry: PageRouteEntry) {
-		this.pageDescriptorProvider.add(entry);
-	}
-
-	protected readonly configure = $hook({
-		on: "configure",
-		handler: async () => {
-			for (const page of this.pageDescriptorProvider.getPages()) {
-				// mount only if a view is provided
-				if (page.component || page.lazy) {
-					this.push({
-						path: page.match,
-						page,
-					});
-				}
-			}
-		},
-	});
-
-	public async transition(
-		url: URL,
-		options: TransitionOptions = {},
-	): Promise<RouterRenderResult> {
-		const { pathname, search } = url;
-		const state: RouterState = {
-			pathname,
-			search,
-			layers: [],
-		};
-
-		const context = {
-			url,
-			query: {},
-			params: {},
-			onError: () => null,
-			...(options.context ?? {}),
-		} as PageRequest;
-
-		await this.alepha.emit("react:transition:begin", { state, context });
-
-		try {
-			const previous = options.previous;
-			const { route, params } = this.match(pathname);
-
-			const query: Record<string, string> = {};
-			if (search) {
-				for (const [key, value] of new URLSearchParams(search).entries()) {
-					query[key] = String(value);
-				}
-			}
-
-			context.query = query;
-			context.params = params ?? {};
-			context.previous = previous;
-
-			if (isPageRoute(route)) {
-				const result = await this.pageDescriptorProvider.createLayers(
-					route.page,
-					context,
-				);
-
-				if (result.redirect) {
-					return {
-						redirect: result.redirect,
-						state,
-						context,
-					};
-				}
-
-				state.layers = result.layers;
-			}
-
-			if (state.layers.length === 0) {
-				state.layers.push({
-					name: "not-found",
-					element: createElement(NotFoundPage),
-					index: 0,
-					path: "/",
-				});
-			}
-
-			await this.alepha.emit("react:transition:success", { state, context });
-		} catch (e) {
-			this.log.error(e);
-			state.layers = [
-				{
-					name: "error",
-					element: this.pageDescriptorProvider.renderError(e as Error),
-					index: 0,
-					path: "/",
-				},
-			];
-
-			await this.alepha.emit("react:transition:error", {
-				error: e as Error,
-				state,
-				context,
-			});
-		}
-
-		if (options.state) {
-			options.state.layers = state.layers;
-			options.state.pathname = state.pathname;
-			options.state.search = state.search;
-		}
-
-		if (options.previous) {
-			for (let i = 0; i < options.previous.length; i++) {
-				const layer = options.previous[i];
-				if (state.layers[i]?.name !== layer.name) {
-					this.pageDescriptorProvider.page(layer.name)?.onLeave?.();
-				}
-			}
-		}
-
-		await this.alepha.emit("react:transition:end", {
-			state: options.state,
-			context,
-		});
-
-		return {
-			context,
-			state,
-		};
-	}
-
-	public root(state: RouterState, context: PageReactContext): ReactNode {
-		return this.pageDescriptorProvider.root(state, context);
-	}
-}