@alepha/react 0.6.10 → 0.7.1

package/src/providers/PageDescriptorProvider.ts

@@ -1,6 +1,9 @@
-import { $hook, $inject, $logger, Alepha, OPTIONS } from "@alepha/core";
-import type { HttpClientLink } from "@alepha/server";
-import { type ReactNode, createElement } from "react";
+import type { Static } from "@alepha/core";
+import { $hook, $inject, $logger, Alepha, OPTIONS, t } from "@alepha/core";
+import type { ApiLinksResponse } from "@alepha/server";
+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 { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
@@ -11,8 +14,17 @@ import {
 } from "../descriptors/$page.ts";
 import { RedirectionError } from "../errors/RedirectionError.ts";
 
+const envSchema = t.object({
+	REACT_STRICT_MODE: t.boolean({ default: true }),
+});
+
+declare module "@alepha/core" {
+	export interface Env extends Partial<Static<typeof envSchema>> {}
+}
+
 export class PageDescriptorProvider {
 	protected readonly log = $logger();
+	protected readonly env = $inject(envSchema);
 	protected readonly alepha = $inject(Alepha);
 	protected readonly pages: PageRoute[] = [];
 
@@ -30,8 +42,32 @@ export class PageDescriptorProvider {
 		throw new Error(`Page ${name} not found`);
 	}
 
-	public root(state: RouterState, context: PageReactContext = {}): ReactNode {
-		return createElement(
+	public url(
+		name: string,
+		options: { params?: Record<string, string>; base?: string } = {},
+	): URL {
+		const page = this.page(name);
+		if (!page) {
+			throw new Error(`Page ${name} not found`);
+		}
+
+		let url = page.path ?? "";
+		let parent = page.parent;
+		while (parent) {
+			url = `${parent.path ?? ""}/${url}`;
+			parent = parent.parent;
+		}
+
+		url = this.compile(url, options.params ?? {});
+
+		return new URL(
+			url.replace(/\/\/+/g, "/") || "/",
+			options.base ?? `http://localhost`,
+		);
+	}
+
+	public root(state: RouterState, context: PageReactContext): ReactNode {
+		const root = createElement(
 			RouterContext.Provider,
 			{
 				value: {
@@ -42,6 +78,12 @@ export class PageDescriptorProvider {
 			},
 			createElement(NestedView, {}, state.layers[0]?.element),
 		);
+
+		if (this.env.REACT_STRICT_MODE) {
+			return createElement(StrictMode, {}, root);
+		}
+
+		return root;
 	}
 
 	public async createLayers(
@@ -52,6 +94,7 @@ export class PageDescriptorProvider {
 		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) {
@@ -147,7 +190,6 @@ export class PageDescriptorProvider {
 					return {
 						layers: [],
 						redirect: typeof e.page === "string" ? e.page : this.href(e.page),
-						head: request.head,
 						pathname,
 						search,
 					};
@@ -180,17 +222,17 @@ export class PageDescriptorProvider {
 			acc += "/";
 			acc += it.route.path ? this.compile(it.route.path, params) : "";
 			const path = acc.replace(/\/+/, "/");
+			const localErrorHandler = this.getErrorHandler(it.route);
+			if (localErrorHandler) {
+				request.onError = localErrorHandler;
+			}
 
 			// handler has thrown an error, render an error view
 			if (it.error) {
-				const errorHandler = this.getErrorHandler(it.route);
-				const element = await (errorHandler
-					? errorHandler({
-							...it.config,
-							error: it.error,
-							url: "",
-						})
-					: this.renderError(it.error));
+				let element: ReactNode = await request.onError(it.error);
+				if (element === null) {
+					element = this.renderError(it.error);
+				}
 
 				layers.push({
 					props,
@@ -198,7 +240,7 @@ export class PageDescriptorProvider {
 					name: it.route.name,
 					part: it.route.path,
 					config: it.config,
-					element: this.renderView(i + 1, path, element),
+					element: this.renderView(i + 1, path, element, it.route),
 					index: i + 1,
 					path,
 				});
@@ -207,7 +249,7 @@ export class PageDescriptorProvider {
 
 			// normal use case
 
-			const layer = await this.createElement(it.route, {
+			const element = await this.createElement(it.route, {
 				...props,
 				...context,
 			});
@@ -217,13 +259,13 @@ export class PageDescriptorProvider {
 				props,
 				part: it.route.path,
 				config: it.config,
-				element: this.renderView(i + 1, path, layer),
+				element: this.renderView(i + 1, path, element, it.route),
 				index: i + 1,
 				path,
 			});
 		}
 
-		return { layers, head: request.head, pathname, search };
+		return { layers, pathname, search };
 	}
 
 	protected getErrorHandler(route: PageRoute) {
@@ -296,8 +338,8 @@ export class PageDescriptorProvider {
 		}
 	}
 
-	public renderError(e: Error): ReactNode {
-		return createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
+	public renderError(error: Error): ReactNode {
+		return createElement(ErrorViewer, { error });
 	}
 
 	public renderEmptyView(): ReactNode {
@@ -335,8 +377,19 @@ export class PageDescriptorProvider {
 	protected renderView(
 		index: number,
 		path: string,
-		view: ReactNode = this.renderEmptyView(),
+		view: ReactNode | undefined,
+		page: PageRoute,
 	): ReactNode {
+		view ??= this.renderEmptyView();
+
+		const element = page.client
+			? createElement(
+					ClientOnly,
+					typeof page.client === "object" ? page.client : {},
+					view,
+				)
+			: view;
+
 		return createElement(
 			RouterLayerContext.Provider,
 			{
@@ -345,7 +398,7 @@ export class PageDescriptorProvider {
 					path,
 				},
 			},
-			view,
+			element,
 		);
 	}
 
@@ -355,7 +408,8 @@ export class PageDescriptorProvider {
 			const pages = this.alepha.getDescriptorValues($page);
 			for (const { value, key } of pages) {
 				value[OPTIONS].name ??= key;
-
+			}
+			for (const { value } of pages) {
 				// skip children, we only want root pages
 				if (value[OPTIONS].parent) {
 					continue;
@@ -372,12 +426,6 @@ export class PageDescriptorProvider {
 	): PageRouteEntry {
 		const children = target[OPTIONS].children ?? [];
 
-		for (const it of pages) {
-			if (it.value[OPTIONS].parent === target) {
-				children.push(it.value);
-			}
-		}
-
 		return {
 			...target[OPTIONS],
 			parent: undefined,
@@ -468,18 +516,17 @@ export interface Layer {
 	path: string;
 }
 
-export type PreviousLayerData = Omit<Layer, "element">;
+export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
 
 export interface AnchorProps {
-	href?: string;
-	onClick?: (ev: any) => any;
+	href: string;
+	onClick: (ev: any) => any;
 }
 
 export interface RouterState {
 	pathname: string;
 	search: string;
 	layers: Array<Layer>;
-	head: Head;
 }
 
 export interface TransitionOptions {
@@ -496,17 +543,14 @@ export interface RouterStackItem {
 }
 
 export interface RouterRenderResult {
+	state: RouterState;
+	context: PageReactContext;
 	redirect?: string;
-	layers: Layer[];
-	head: Head;
-	element: ReactNode;
 }
 
 export interface PageRequest extends PageReactContext {
-	url: URL;
 	params: Record<string, any>;
 	query: Record<string, string>;
-	head: Head;
 
 	// previous layers (browser history or browser hydration, always null on server)
 	previous?: PreviousLayerData[];
@@ -516,7 +560,13 @@ export interface CreateLayersResult extends RouterState {
 	redirect?: string;
 }
 
-// will be passed to ReactContext
+/**
+ * It's like RouterState, but publicly available in React context.
+ * This is where we store all plugin data!
+ */
 export interface PageReactContext {
-	links?: HttpClientLink[];
+	url: URL;
+	head: Head;
+	onError: (error: Error) => ReactNode;
+	links?: ApiLinksResponse;
 }

package/src/providers/ReactBrowserProvider.ts

@@ -1,12 +1,12 @@
 import { $hook, $inject, $logger, Alepha, type Static, t } from "@alepha/core";
-import { HttpClient, type HttpClientLink } from "@alepha/server";
+import { type ApiLinksResponse, HttpClient } from "@alepha/server";
 import type { Root } from "react-dom/client";
 import { createRoot, hydrateRoot } from "react-dom/client";
-import type { Head } from "../descriptors/$page.ts";
 import { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
 import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
 import type {
 	PreviousLayerData,
+	RouterRenderResult,
 	RouterState,
 	TransitionOptions,
 } from "./PageDescriptorProvider.ts";
@@ -36,7 +36,6 @@ export class ReactBrowserProvider {
 		layers: [],
 		pathname: "",
 		search: "",
-		head: {},
 	};
 
 	public get document() {
@@ -86,8 +85,10 @@ export class ReactBrowserProvider {
 			url,
 		});
 
-		if (result.url !== url) {
-			this.history.replaceState({}, "", result.url);
+		// when redirecting in browser
+		if (result.context.url.pathname !== url) {
+			// TODO: check if losing search params is acceptable?
+			this.history.replaceState({}, "", result.context.url.pathname);
 			return;
 		}
 
@@ -100,11 +101,8 @@ export class ReactBrowserProvider {
 	}
 
 	protected async render(
-		options: {
-			url?: string;
-			previous?: PreviousLayerData[];
-		} = {},
-	): Promise<{ url: string; head: Head }> {
+		options: { url?: string; previous?: PreviousLayerData[] } = {},
+	): Promise<RouterRenderResult> {
 		const previous = options.previous ?? this.state.layers;
 		const url = options.url ?? this.url;
 
@@ -124,7 +122,7 @@ export class ReactBrowserProvider {
 
 		this.transitioning = undefined;
 
-		return { url, head: result.head };
+		return result;
 	}
 
 	/**
@@ -173,17 +171,18 @@ export class ReactBrowserProvider {
 			const previous = hydration?.layers ?? [];
 
 			if (hydration?.links) {
-				this.client.links = hydration.links as HttpClientLink[];
+				for (const link of hydration.links.links) {
+					this.client.pushLink(link);
+				}
 			}
 
-			const { head } = await this.render({ previous });
-			if (head) {
-				this.headProvider.renderHead(this.document, head);
+			const { context } = await this.render({ previous });
+			if (context.head) {
+				this.headProvider.renderHead(this.document, context.head);
 			}
 
-			const context = {};
-
 			await this.alepha.emit("react:browser:render", {
+				state: this.state,
 				context,
 				hydration,
 			});
@@ -202,19 +201,13 @@ export class ReactBrowserProvider {
 			window.addEventListener("popstate", () => {
 				this.render();
 			});
-
-			this.alepha.on("react:transition:end", {
-				callback: ({ state }) => {
-					this.headProvider.renderHead(this.document, state.head);
-				},
-			});
 		},
 	});
 
 	public readonly onTransitionEnd = $hook({
 		name: "react:transition:end",
-		handler: async ({ state }) => {
-			this.headProvider.renderHead(this.document, state.head);
+		handler: async ({ context }) => {
+			this.headProvider.renderHead(this.document, context.head);
 		},
 	});
 }
@@ -224,9 +217,10 @@ export class ReactBrowserProvider {
 export interface RouterGoOptions {
 	replace?: boolean;
 	match?: TransitionOptions;
+	params?: Record<string, string>;
 }
 
 export interface ReactHydrationState {
-	layers?: PreviousLayerData[];
-	links?: HttpClientLink[];
+	layers?: Array<PreviousLayerData>;
+	links?: ApiLinksResponse;
 }