@alepha/react 0.7.0 → 0.7.2

package/src/hooks/RouterHookApi.ts

@@ -1,6 +1,7 @@
 import type { PageDescriptor } from "../descriptors/$page.ts";
 import type {
 	AnchorProps,
+	PageRoute,
 	RouterState,
 } from "../providers/PageDescriptorProvider.ts";
 import type {
@@ -10,6 +11,7 @@ import type {
 
 export class RouterHookApi {
 	constructor(
+		private readonly pages: PageRoute[],
 		private readonly state: RouterState,
 		private readonly layer: {
 			path: string;
@@ -17,23 +19,14 @@ export class RouterHookApi {
 		private readonly browser?: ReactBrowserProvider,
 	) {}
 
-	/**
-	 *
-	 */
 	public get current(): RouterState {
 		return this.state;
 	}
 
-	/**
-	 *
-	 */
 	public get pathname(): string {
 		return this.state.pathname;
 	}
 
-	/**
-	 *
-	 */
 	public get query(): Record<string, string> {
 		const query: Record<string, string> = {};
 
@@ -46,24 +39,14 @@ export class RouterHookApi {
 		return query;
 	}
 
-	/**
-	 *
-	 */
 	public async back() {
 		this.browser?.history.back();
 	}
 
-	/**
-	 *
-	 */
 	public async forward() {
 		this.browser?.history.forward();
 	}
 
-	/**
-	 *
-	 * @param props
-	 */
 	public async invalidate(props?: Record<string, any>) {
 		await this.browser?.invalidate(props);
 	}
@@ -74,11 +57,21 @@ export class RouterHookApi {
 	 * @param pathname
 	 * @param layer
 	 */
-	public createHref(pathname: HrefLike, layer: { path: string } = this.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, "/");
@@ -90,18 +83,43 @@ export class RouterHookApi {
 		options?: RouterGoOptions,
 	): Promise<void>;
 	public async go(path: string, options?: RouterGoOptions): Promise<void> {
-		await this.browser?.go(this.createHref(path, this.layer), options);
+		for (const page of this.pages) {
+			if (page.name === path) {
+				path = page.path ?? "";
+				break;
+			}
+		}
+
+		await this.browser?.go(this.createHref(path, this.layer, options), options);
 	}
 
-	public anchor(path: string): AnchorProps {
-		const href = this.createHref(path, this.layer);
+	public anchor(
+		path: string,
+		options?: { params?: Record<string, any> },
+	): AnchorProps;
+	public anchor<T extends object>(
+		path: keyof VirtualRouter<T>,
+		options?: { params?: Record<string, any> },
+	): AnchorProps;
+	public anchor(
+		path: string,
+		options: { params?: Record<string, any> } = {},
+	): AnchorProps {
+		for (const page of this.pages) {
+			if (page.name === path) {
+				path = page.path ?? "";
+				break;
+			}
+		}
+
+		const href = this.createHref(path, this.layer, options);
 		return {
 			href,
 			onClick: (ev: any) => {
 				ev.stopPropagation();
 				ev.preventDefault();
 
-				this.go(path).catch(console.error);
+				this.go(path, options).catch(console.error);
 			},
 		};
 	}

package/src/hooks/useAlepha.ts

@@ -0,0 +1,12 @@
+import type { Alepha } from "@alepha/core";
+import { useContext } from "react";
+import { RouterContext } from "../contexts/RouterContext.ts";
+
+export const useAlepha = (): Alepha => {
+	const routerContext = useContext(RouterContext);
+	if (!routerContext) {
+		throw new Error("useAlepha must be used within a RouterProvider");
+	}
+
+	return routerContext.alepha;
+};

package/src/hooks/useClient.ts

@@ -1,10 +1,12 @@
-import { HttpClient } from "@alepha/server";
+import {
+	type ClientScope,
+	HttpClient,
+	type HttpVirtualClient,
+} from "@alepha/server";
 import { useInject } from "./useInject.ts";
 
-export const useClient = (): HttpClient => {
-	return useInject(HttpClient);
-};
-
-export const useApi = <T extends object>() => {
+export const useClient = <T extends object>(
+	_scope?: ClientScope,
+): HttpVirtualClient<T> => {
 	return useInject(HttpClient).of<T>();
 };

package/src/hooks/useInject.ts

@@ -1,8 +1,8 @@
-import type { Class } from "@alepha/core";
+import type { Service } from "@alepha/core";
 import { useContext, useMemo } from "react";
 import { RouterContext } from "../contexts/RouterContext.ts";
 
-export const useInject = <T extends object>(clazz: Class<T>): T => {
+export const useInject = <T extends object>(clazz: Service<T>): T => {
 	const ctx = useContext(RouterContext);
 	if (!ctx) {
 		throw new Error("useRouter must be used within a <RouterProvider>");

package/src/hooks/useQueryParams.ts

@@ -50,7 +50,7 @@ const encode = (alepha: Alepha, schema: TObject, data: any) => {
 const decode = (alepha: Alepha, schema: TObject, data: any) => {
 	try {
 		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch (error) {
+	} catch (_error) {
 		return {};
 	}
 };

package/src/hooks/useRouter.ts

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from "react";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
+import { PageDescriptorProvider } from "../providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "../providers/ReactBrowserProvider.ts";
 import { RouterHookApi } from "./RouterHookApi.ts";
 
@@ -11,9 +12,14 @@ export const useRouter = (): RouterHookApi => {
 		throw new Error("useRouter must be used within a RouterProvider");
 	}
 
+	const pages = useMemo(() => {
+		return ctx.alepha.get(PageDescriptorProvider).getPages();
+	}, []);
+
 	return useMemo(
 		() =>
 			new RouterHookApi(
+				pages,
 				ctx.state,
 				layer,
 				ctx.alepha.isBrowser()

package/src/index.browser.ts

@@ -1,8 +1,9 @@
-import { $inject, Alepha, __bind } from "@alepha/core";
+import { __bind, $inject, Alepha } from "@alepha/core";
 import { $page } from "./descriptors/$page.ts";
 import { BrowserRouterProvider } from "./providers/BrowserRouterProvider.ts";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
+import { ReactBrowserRenderer } from "./providers/ReactBrowserRenderer.ts";
 
 export * from "./index.shared";
 export * from "./providers/ReactBrowserProvider.ts";
@@ -14,7 +15,8 @@ export class ReactModule {
 		this.alepha //
 			.with(PageDescriptorProvider)
 			.with(ReactBrowserProvider)
-			.with(BrowserRouterProvider);
+			.with(BrowserRouterProvider)
+			.with(ReactBrowserRenderer);
 	}
 }
 

package/src/index.shared.ts

@@ -1,16 +1,22 @@
-export { default as NestedView } from "./components/NestedView.tsx";
-export { default as Link } from "./components/Link.tsx";
+export { default as ClientOnly } from "./components/ClientOnly.tsx";
 export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
+export * from "./components/ErrorViewer.tsx";
+export { default as Link } from "./components/Link.tsx";
+export { default as NestedView } from "./components/NestedView.tsx";
 
 export * from "./contexts/RouterContext.ts";
 export * from "./contexts/RouterLayerContext.ts";
+
 export * from "./descriptors/$page.ts";
+
+export * from "./errors/RedirectionError.ts";
+
 export * from "./hooks/RouterHookApi.ts";
-export * from "./hooks/useInject.ts";
+export * from "./hooks/useActive.ts";
+export * from "./hooks/useAlepha.ts";
 export * from "./hooks/useClient.ts";
+export * from "./hooks/useInject.ts";
 export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterEvents.ts";
 export * from "./hooks/useRouterState.ts";
-export * from "./hooks/useActive.ts";
-export * from "./errors/RedirectionError.ts";

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

@@ -1,7 +1,9 @@
 import { $hook, $inject, $logger, Alepha } from "@alepha/core";
 import { type Route, RouterProvider } from "@alepha/router";
-import type { ReactNode } from "react";
+import { createElement, type ReactNode } from "react";
+import NotFoundPage from "../components/NotFound.tsx";
 import {
+	isPageRoute,
 	PageDescriptorProvider,
 	type PageReactContext,
 	type PageRequest,
@@ -10,7 +12,6 @@ import {
 	type RouterRenderResult,
 	type RouterState,
 	type TransitionOptions,
-	isPageRoute,
 } from "./PageDescriptorProvider.ts";
 
 export interface BrowserRoute extends Route {
@@ -98,7 +99,7 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			if (state.layers.length === 0) {
 				state.layers.push({
 					name: "not-found",
-					element: "Not Found",
+					element: createElement(NotFoundPage),
 					index: 0,
 					path: "/",
 				});

package/src/providers/PageDescriptorProvider.ts

@@ -1,7 +1,11 @@
-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 NotFoundPage from "../components/NotFound.tsx";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
@@ -11,8 +15,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 +43,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 +79,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 +95,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 +225,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 +241,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 +250,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 +260,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 +339,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 +378,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,24 +399,44 @@ export class PageDescriptorProvider {
 					path,
 				},
 			},
-			view,
+			element,
 		);
 	}
 
 	protected readonly configure = $hook({
 		name: "configure",
 		handler: () => {
+			let hasNotFoundHandler = false;
 			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;
 				}
 
+				if (value[OPTIONS].path === "/*") {
+					hasNotFoundHandler = true;
+				}
+
 				this.add(this.map(pages, value));
 			}
+
+			if (!hasNotFoundHandler && pages.length > 0) {
+				// add a default 404 page if not already defined
+				this.add({
+					path: "/*",
+					name: "notFound",
+					cache: true,
+					component: NotFoundPage,
+					afterHandler: ({ reply }) => {
+						reply.status = 404;
+					},
+				});
+			}
 		},
 	});
 
@@ -369,12 +446,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 +536,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,7 +1,6 @@
-import { $hook, $inject, $logger, Alepha, type Static, t } from "@alepha/core";
-import { HttpClient, type HttpClientLink } from "@alepha/server";
+import { $hook, $inject, $logger, Alepha } from "@alepha/core";
+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";
 import { BrowserRouterProvider } from "./BrowserRouterProvider.ts";
 import type {
@@ -11,21 +10,12 @@ import type {
 	TransitionOptions,
 } from "./PageDescriptorProvider.ts";
 
-const envSchema = t.object({
-	REACT_ROOT_ID: t.string({ default: "root" }),
-});
-
-declare module "@alepha/core" {
-	interface Env extends Partial<Static<typeof envSchema>> {}
-}
-
 export class ReactBrowserProvider {
 	protected readonly log = $logger();
 	protected readonly client = $inject(HttpClient);
 	protected readonly alepha = $inject(Alepha);
 	protected readonly router = $inject(BrowserRouterProvider);
 	protected readonly headProvider = $inject(BrowserHeadProvider);
-	protected readonly env = $inject(envSchema);
 	protected root!: Root;
 
 	public transitioning?: {
@@ -75,11 +65,6 @@ export class ReactBrowserProvider {
 		await this.render({ previous });
 	}
 
-	/**
-	 *
-	 * @param url
-	 * @param options
-	 */
 	public async go(url: string, options: RouterGoOptions = {}): Promise<void> {
 		const result = await this.render({
 			url,
@@ -101,10 +86,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;
@@ -130,8 +112,6 @@ export class ReactBrowserProvider {
 
 	/**
 	 * Get embedded layers from the server.
-	 *
-	 * @protected
 	 */
 	protected getHydrationState(): ReactHydrationState | undefined {
 		try {
@@ -143,30 +123,8 @@ export class ReactBrowserProvider {
 		}
 	}
 
-	/**
-	 *
-	 * @protected
-	 */
-	protected getRootElement() {
-		const root = this.document.getElementById(this.env.REACT_ROOT_ID);
-		if (root) {
-			return root;
-		}
-
-		const div = this.document.createElement("div");
-		div.id = this.env.REACT_ROOT_ID;
-
-		this.document.body.prepend(div);
-
-		return div;
-	}
-
 	// -------------------------------------------------------------------------------------------------------------------
 
-	/**
-	 *
-	 * @protected
-	 */
 	public readonly ready = $hook({
 		name: "ready",
 		handler: async () => {
@@ -174,7 +132,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);
 				}
 			}
@@ -190,17 +148,6 @@ export class ReactBrowserProvider {
 				hydration,
 			});
 
-			const element = this.router.root(this.state, context);
-
-			if (previous.length > 0) {
-				this.root = hydrateRoot(this.getRootElement(), element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root ??= createRoot(this.getRootElement());
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-
 			window.addEventListener("popstate", () => {
 				this.render();
 			});
@@ -224,6 +171,6 @@ export interface RouterGoOptions {
 }
 
 export interface ReactHydrationState {
-	layers?: PreviousLayerData[];
-	links?: HttpClientLink[];
+	layers?: Array<PreviousLayerData>;
+	links?: ApiLinksResponse;
 }