@alepha/react 0.9.1 → 0.9.3

package/src/hooks/useStore.ts

@@ -0,0 +1,47 @@
+import type { State } from "@alepha/core";
+import { useEffect, useMemo, useState } from "react";
+import { useAlepha } from "./useAlepha.ts";
+
+/**
+ * Hook to access and mutate the Alepha state.
+ */
+export const useStore = <Key extends keyof State>(
+	key: Key,
+	defaultValue?: State[Key],
+): [State[Key], (value: State[Key]) => void] => {
+	const alepha = useAlepha();
+
+	useMemo(() => {
+		if (defaultValue != null && alepha.state(key) == null) {
+			alepha.state(key, defaultValue);
+		}
+	}, [defaultValue]);
+
+	const [state, setState] = useState(alepha.state(key));
+
+	useEffect(() => {
+		if (!alepha.isBrowser()) {
+			return;
+		}
+
+		return alepha.on("state:mutate", (ev) => {
+			if (ev.key === key) {
+				setState(ev.value);
+			}
+		});
+	}, []);
+
+	if (!alepha.isBrowser()) {
+		const value = alepha.context.get(key) as State[Key];
+		if (value !== null) {
+			return [value, (_: State[Key]) => {}] as const;
+		}
+	}
+
+	return [
+		state,
+		(value: State[Key]) => {
+			alepha.state(key, value);
+		},
+	] as const;
+};

package/src/index.shared.ts

@@ -1,13 +1,14 @@
 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 Link, type LinkProps } from "./components/Link.tsx";
 export { default as NestedView } from "./components/NestedView.tsx";
 export { default as NotFound } from "./components/NotFound.tsx";
+export * from "./contexts/AlephaContext.ts";
 export * from "./contexts/RouterContext.ts";
 export * from "./contexts/RouterLayerContext.ts";
 export * from "./descriptors/$page.ts";
-export * from "./errors/RedirectionError.ts";
+export * from "./errors/Redirection.ts";
 export * from "./hooks/RouterHookApi.ts";
 export * from "./hooks/useActive.ts";
 export * from "./hooks/useAlepha.ts";
@@ -17,3 +18,5 @@ export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterEvents.ts";
 export * from "./hooks/useRouterState.ts";
+export * from "./hooks/useSchema.ts";
+export * from "./hooks/useStore.ts";

package/src/providers/BrowserRouterProvider.ts

@@ -129,6 +129,15 @@ export class BrowserRouterProvider extends RouterProvider<BrowserRoute> {
 			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,

package/src/providers/PageDescriptorProvider.ts

@@ -13,14 +13,17 @@ 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 { AlephaContext } from "../contexts/AlephaContext.ts";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
 	$page,
+	type ErrorHandler,
 	type PageDescriptor,
 	type PageDescriptorOptions,
 } from "../descriptors/$page.ts";
-import { RedirectionError } from "../errors/RedirectionError.ts";
+import { Redirection } from "../errors/Redirection.ts";
+import type { HrefLike } from "../hooks/RouterHookApi.ts";
 
 const envSchema = t.object({
 	REACT_STRICT_MODE: t.boolean({ default: true }),
@@ -50,10 +53,13 @@ export class PageDescriptorProvider {
 		throw new Error(`Page ${name} not found`);
 	}
 
-	public url(
+	public pathname(
 		name: string,
-		options: { params?: Record<string, string>; base?: string } = {},
-	): URL {
+		options: {
+			params?: Record<string, string>;
+			query?: Record<string, string>;
+		} = {},
+	) {
 		const page = this.page(name);
 		if (!page) {
 			throw new Error(`Page ${name} not found`);
@@ -68,23 +74,41 @@ export class PageDescriptorProvider {
 
 		url = this.compile(url, options.params ?? {});
 
+		if (options.query) {
+			const query = new URLSearchParams(options.query);
+			if (query.toString()) {
+				url += `?${query.toString()}`;
+			}
+		}
+
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+
+	public url(
+		name: string,
+		options: { params?: Record<string, string>; base?: string } = {},
+	): URL {
 		return new URL(
-			url.replace(/\/\/+/g, "/") || "/",
+			this.pathname(name, options),
+			// use provided base or default to http://localhost
 			options.base ?? `http://localhost`,
 		);
 	}
 
 	public root(state: RouterState, context: PageReactContext): ReactNode {
 		const root = createElement(
-			RouterContext.Provider,
-			{
-				value: {
-					alepha: this.alepha,
-					state,
-					context,
+			AlephaContext.Provider,
+			{ value: this.alepha },
+			createElement(
+				RouterContext.Provider,
+				{
+					value: {
+						state,
+						context,
+					},
 				},
-			},
-			createElement(NestedView, {}, state.layers[0]?.element),
+				createElement(NestedView, {}, state.layers[0]?.element),
+			),
 		);
 
 		if (this.env.REACT_STRICT_MODE) {
@@ -196,13 +220,11 @@ export class PageDescriptorProvider {
 				};
 			} catch (e) {
 				// check if we need to redirect
-				if (e instanceof RedirectionError) {
-					return {
-						layers: [],
-						redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+				if (e instanceof Redirection) {
+					return this.createRedirectionLayer(e.page, {
 						pathname,
 						search,
-					};
+					});
 				}
 
 				this.log.error(e);
@@ -227,28 +249,56 @@ export class PageDescriptorProvider {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				request.onError = localErrorHandler;
+				const onErrorParent = request.onError;
+				request.onError = (error, context) => {
+					const result = localErrorHandler(error, context);
+					// if nothing happen, call the parent
+					if (result === undefined) {
+						return onErrorParent(error, context);
+					}
+					return result;
+				};
 			}
 
 			// handler has thrown an error, render an error view
 			if (it.error) {
-				let element: ReactNode = await request.onError(it.error);
-				if (element === null) {
-					element = this.renderError(it.error);
-				}
+				try {
+					let element: ReactNode | Redirection | undefined =
+						await request.onError(it.error, request);
 
-				layers.push({
-					props,
-					error: it.error,
-					name: it.route.name,
-					part: it.route.path,
-					config: it.config,
-					element: this.renderView(i + 1, path, element, it.route),
-					index: i + 1,
-					path,
-					route: it.route,
-				});
-				break;
+					if (element === undefined) {
+						throw it.error;
+					}
+
+					if (element instanceof Redirection) {
+						return this.createRedirectionLayer(element.page, {
+							pathname,
+							search,
+						});
+					}
+
+					if (element === null) {
+						element = this.renderError(it.error);
+					}
+
+					layers.push({
+						props,
+						error: it.error,
+						name: it.route.name,
+						part: it.route.path,
+						config: it.config,
+						element: this.renderView(i + 1, path, element, it.route),
+						index: i + 1,
+						path,
+						route: it.route,
+					});
+					break;
+				} catch (e) {
+					if (e instanceof Redirection) {
+						return this.createRedirectionLayer(e.page, { pathname, search });
+					}
+					throw e;
+				}
 			}
 
 			// normal use case
@@ -274,7 +324,22 @@ export class PageDescriptorProvider {
 		return { layers, pathname, search };
 	}
 
-	protected getErrorHandler(route: PageRoute) {
+	protected createRedirectionLayer(
+		href: HrefLike,
+		context: {
+			pathname: string;
+			search: string;
+		},
+	) {
+		return {
+			layers: [],
+			redirect: typeof href === "string" ? href : this.href(href),
+			pathname: context.pathname,
+			search: context.search,
+		};
+	}
+
+	protected getErrorHandler(route: PageRoute): ErrorHandler | undefined {
 		if (route.errorHandler) return route.errorHandler;
 		let parent = route.parent;
 		while (parent) {
@@ -370,6 +435,10 @@ export class PageDescriptorProvider {
 			const pages = this.alepha.descriptors($page);
 
 			const hasParent = (it: PageDescriptor) => {
+				if (it.options.parent) {
+					return true;
+				}
+
 				for (const page of pages) {
 					const children = page.options.children
 						? Array.isArray(page.options.children)
@@ -402,7 +471,7 @@ export class PageDescriptorProvider {
 					name: "notFound",
 					cache: true,
 					component: NotFoundPage,
-					afterHandler: ({ reply }) => {
+					onServerResponse: ({ reply }) => {
 						reply.status = 404;
 					},
 				});
@@ -420,6 +489,18 @@ export class PageDescriptorProvider {
 				: target.options.children()
 			: [];
 
+		const getChildrenFromParent = (it: PageDescriptor): PageDescriptor[] => {
+			const children = [];
+			for (const page of pages) {
+				if (page.options.parent === it) {
+					children.push(page);
+				}
+			}
+			return children;
+		};
+
+		children.push(...getChildrenFromParent(target));
+
 		return {
 			...target.options,
 			name: target.name,
@@ -517,7 +598,7 @@ export type PreviousLayerData = Omit<Layer, "element" | "index" | "path">;
 
 export interface AnchorProps {
 	href: string;
-	onClick: (ev: any) => any;
+	onClick: (ev?: any) => any;
 }
 
 export interface RouterState {
@@ -564,6 +645,9 @@ export interface CreateLayersResult extends RouterState {
  */
 export interface PageReactContext {
 	url: URL;
-	onError: (error: Error) => ReactNode;
+	onError: ErrorHandler;
 	links?: ApiLinksResponse;
+
+	params: Record<string, any>;
+	query: Record<string, string>;
 }

package/src/providers/ReactBrowserProvider.ts

@@ -1,4 +1,4 @@
-import { $hook, $inject, $logger, Alepha } from "@alepha/core";
+import { $hook, $inject, $logger, Alepha, type State } from "@alepha/core";
 import type { ApiLinksResponse } from "@alepha/server";
 import { LinkProvider } from "@alepha/server-links";
 import type { Root } from "react-dom/client";
@@ -97,18 +97,12 @@ export class ReactBrowserProvider {
 		});
 
 		// when redirecting in browser
-		if (result.context.url.pathname !== url) {
-			// TODO: check if losing search params is acceptable?
-			this.pushState(result.context.url.pathname);
+		if (result.context.url.pathname + result.context.url.search !== url) {
+			this.pushState(result.context.url.pathname + result.context.url.search);
 			return;
 		}
 
-		if (options.replace) {
-			this.pushState(url);
-			return;
-		}
-
-		this.pushState(url);
+		this.pushState(url, options.replace);
 	}
 
 	protected async render(
@@ -157,9 +151,20 @@ export class ReactBrowserProvider {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
 
+			if (hydration) {
+				for (const [key, value] of Object.entries(hydration)) {
+					if (key !== "layers" && key !== "links") {
+						this.alepha.state(key as keyof State, value);
+					}
+				}
+			}
+
 			if (hydration?.links) {
 				for (const link of hydration.links.links) {
-					this.client.pushLink(link);
+					this.client.pushLink({
+						...link,
+						prefix: hydration.links.prefix,
+					});
 				}
 			}
 
@@ -190,6 +195,7 @@ export interface RouterGoOptions {
 	replace?: boolean;
 	match?: TransitionOptions;
 	params?: Record<string, string>;
+	query?: Record<string, string>;
 }
 
 export interface ReactHydrationState {

package/src/providers/ReactServerProvider.ts

@@ -22,6 +22,7 @@ import {
 	$page,
 	type PageDescriptorRenderOptions,
 } from "../descriptors/$page.ts";
+import { Redirection } from "../errors/Redirection.ts";
 import {
 	PageDescriptorProvider,
 	type PageReactContext,
@@ -231,6 +232,10 @@ export class ReactServerProvider {
 				options.hydration,
 			);
 
+			if (html instanceof Redirection) {
+				throw new Error("Redirection is not supported in this context");
+			}
+
 			const result = {
 				context,
 				state,
@@ -254,6 +259,10 @@ export class ReactServerProvider {
 				throw new Error("Template not found");
 			}
 
+			this.log.trace("Rendering page", {
+				name: page.name,
+			});
+
 			const context: PageRequest = {
 				url,
 				params,
@@ -300,6 +309,11 @@ 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,
@@ -333,17 +347,31 @@ export class ReactServerProvider {
 			}
 
 			const html = this.renderToHtml(template, state, context);
+			if (html instanceof Redirection) {
+				reply.redirect(
+					typeof html.page === "string"
+						? html.page
+						: this.pageDescriptorProvider.href(html.page),
+				);
+				return;
+			}
 
-			await this.alepha.emit("react:server:render:end", {
+			const event = {
 				request: serverRequest,
 				context,
 				state,
 				html,
-			});
+			};
+
+			await this.alepha.emit("react:server:render:end", event);
 
-			page.afterHandler?.(serverRequest);
+			page.onServerResponse?.(serverRequest);
+
+			this.log.trace("Page rendered", {
+				name: page.name,
+			});
 
-			return html;
+			return event.html;
 		};
 	}
 
@@ -352,7 +380,7 @@ export class ReactServerProvider {
 		state: RouterState,
 		context: PageReactContext,
 		hydration = true,
-	) {
+	): string | Redirection {
 		const element = this.pageDescriptorProvider.root(state, context);
 
 		this.serverTimingProvider.beginTiming("renderToString");
@@ -362,7 +390,13 @@ export class ReactServerProvider {
 			app = renderToString(element);
 		} catch (error) {
 			this.log.error("Error during SSR", error);
-			app = renderToString(context.onError(error as Error));
+			const element = context.onError(error as Error, context);
+			if (element instanceof Redirection) {
+				// if the error is a redirection, return the redirection URL
+				return element;
+			}
+
+			app = renderToString(element);
 		}
 
 		this.serverTimingProvider.endTiming("renderToString");
@@ -372,8 +406,11 @@ export class ReactServerProvider {
 		};
 
 		if (hydration) {
+			const { request, context, ...rest } =
+				this.alepha.context.als?.getStore() ?? {};
+
 			const hydrationData: ReactHydrationState = {
-				links: context.links,
+				...rest,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error
@@ -381,7 +418,7 @@ export class ReactServerProvider {
 								...it.error,
 								name: it.error.name,
 								message: it.error.message,
-								stack: it.error.stack, // TODO: Hide stack in production ?
+								stack: !this.alepha.isProduction() ? it.error.stack : undefined,
 							}
 						: undefined,
 					index: undefined,
@@ -418,7 +455,7 @@ export class ReactServerProvider {
 			const bodyOpenTag = /<body([^>]*)>/i;
 			if (bodyOpenTag.test(response.html)) {
 				response.html = response.html.replace(bodyOpenTag, (match) => {
-					return `${match}\n<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
+					return `${match}<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
 				});
 			}
 		}
@@ -427,7 +464,7 @@ export class ReactServerProvider {
 		if (bodyCloseTagRegex.test(response.html)) {
 			response.html = response.html.replace(
 				bodyCloseTagRegex,
-				`${script}\n</body>`,
+				`${script}</body>`,
 			);
 		}
 	}