@alepha/react 0.7.0 → 0.7.1

package/src/index.ts

@@ -1,4 +1,4 @@
-import { $inject, Alepha, __bind } from "@alepha/core";
+import { __bind, $inject, Alepha } from "@alepha/core";
 import {
 	ServerLinksProvider,
 	ServerModule,
@@ -13,13 +13,13 @@ import {
 } from "./providers/PageDescriptorProvider.ts";
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
 import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
-export { default as NestedView } from "./components/NestedView.tsx";
 
+export { default as NestedView } from "./components/NestedView.tsx";
+export * from "./errors/RedirectionError.ts";
 export * from "./index.shared.ts";
 export * from "./providers/PageDescriptorProvider.ts";
 export * from "./providers/ReactBrowserProvider.ts";
 export * from "./providers/ReactServerProvider.ts";
-export * from "./errors/RedirectionError.ts";
 
 declare module "@alepha/core" {
 	interface Hooks {
@@ -32,7 +32,6 @@ declare module "@alepha/core" {
 			request: ServerRequest;
 			pageRequest: PageRequest;
 		};
-
 		"react:transition:begin": {
 			state: RouterState;
 			context: PageReactContext;

package/src/providers/BrowserRouterProvider.ts

@@ -2,6 +2,7 @@ import { $hook, $inject, $logger, Alepha } from "@alepha/core";
 import { type Route, RouterProvider } from "@alepha/router";
 import type { ReactNode } from "react";
 import {
+	isPageRoute,
 	PageDescriptorProvider,
 	type PageReactContext,
 	type PageRequest,
@@ -10,7 +11,6 @@ import {
 	type RouterRenderResult,
 	type RouterState,
 	type TransitionOptions,
-	isPageRoute,
 } from "./PageDescriptorProvider.ts";
 
 export interface BrowserRoute extends Route {

package/src/providers/PageDescriptorProvider.ts

@@ -1,6 +1,9 @@
-import { $hook, $inject, $logger, Alepha, OPTIONS } from "@alepha/core";
+import type { Static } from "@alepha/core";
+import { $hook, $inject, $logger, Alepha, OPTIONS, t } from "@alepha/core";
 import type { ApiLinksResponse } from "@alepha/server";
-import { type ReactNode, createElement } from "react";
+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 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 {
-		return createElement(
+		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,7 +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
-		let onError = this.renderError; // error handler
+		request.onError = (error) => this.renderError(error); // error handler
 
 		let parent = route.parent;
 		while (parent) {
@@ -182,12 +224,15 @@ export class PageDescriptorProvider {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				onError = localErrorHandler;
+				request.onError = localErrorHandler;
 			}
 
 			// handler has thrown an error, render an error view
 			if (it.error) {
-				const element = await onError(it.error);
+				let element: ReactNode = await request.onError(it.error);
+				if (element === null) {
+					element = this.renderError(it.error);
+				}
 
 				layers.push({
 					props,
@@ -195,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,
 				});
@@ -204,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,
 			});
@@ -214,7 +259,7 @@ 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,
 			});
@@ -293,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 {
@@ -332,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,
 			{
@@ -342,7 +398,7 @@ export class PageDescriptorProvider {
 					path,
 				},
 			},
-			view,
+			element,
 		);
 	}
 
@@ -352,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;
@@ -369,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,
@@ -465,7 +516,7 @@ export interface Layer {
 	path: string;
 }
 
-export type PreviousLayerData = Omit<Layer, "element">;
+export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
 
 export interface AnchorProps {
 	href: string;

package/src/providers/ReactBrowserProvider.ts

@@ -1,5 +1,5 @@
 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 { BrowserHeadProvider } from "./BrowserHeadProvider.ts";
@@ -101,10 +101,7 @@ export class ReactBrowserProvider {
 	}
 
 	protected async render(
-		options: {
-			url?: string;
-			previous?: PreviousLayerData[];
-		} = {},
+		options: { url?: string; previous?: PreviousLayerData[] } = {},
 	): Promise<RouterRenderResult> {
 		const previous = options.previous ?? this.state.layers;
 		const url = options.url ?? this.url;
@@ -174,7 +171,7 @@ export class ReactBrowserProvider {
 			const previous = hydration?.layers ?? [];
 
 			if (hydration?.links) {
-				for (const link of hydration.links) {
+				for (const link of hydration.links.links) {
 					this.client.pushLink(link);
 				}
 			}
@@ -224,6 +221,6 @@ export interface RouterGoOptions {
 }
 
 export interface ReactHydrationState {
-	layers?: PreviousLayerData[];
-	links?: HttpClientLink[];
+	layers?: Array<PreviousLayerData>;
+	links?: ApiLinksResponse;
 }