@alepha/react 0.5.1 → 0.6.0

package/src/services/Router.ts

@@ -1,5 +1,4 @@
 import { $inject, $logger, Alepha, EventEmitter } from "@alepha/core";
-import type { UserAccountInfo } from "@alepha/security";
 import type { MatchFunction, ParamData } from "path-to-regexp";
 import { compile, match } from "path-to-regexp";
 import type { ReactNode } from "react";
@@ -7,14 +6,8 @@ import { createElement } from "react";
 import NestedView from "../components/NestedView";
 import { RouterContext } from "../contexts/RouterContext";
 import { RouterLayerContext } from "../contexts/RouterLayerContext";
-import type { PageDescriptorOptions } from "../descriptors/$page";
-import type { HrefLike } from "../hooks/RouterHookApi";
-
-export class RedirectException extends Error {
-	constructor(public readonly page: HrefLike) {
-		super("Redirection");
-	}
-}
+import type { PageContext, PageDescriptorOptions } from "../descriptors/$page";
+import { RedirectionError } from "../errors/RedirectionError";
 
 export class Router extends EventEmitter<RouterEvents> {
 	protected readonly log = $logger();
@@ -40,10 +33,7 @@ export class Router extends EventEmitter<RouterEvents> {
 	/**
 	 *
 	 */
-	public root(
-		state: RouterState,
-		opts: { user?: UserAccountInfo } = {},
-	): ReactNode {
+	public root(state: RouterState, context: PageContext = {}): ReactNode {
 		return createElement(
 			RouterContext.Provider,
 			{
@@ -51,7 +41,10 @@ export class Router extends EventEmitter<RouterEvents> {
 					state,
 					router: this,
 					alepha: this.alepha,
-					session: opts.user ? { user: opts.user } : undefined,
+					args: {
+						user: context.user,
+						cookies: context.cookies,
+					},
 				},
 			},
 			state.layers[0]?.element,
@@ -66,22 +59,19 @@ export class Router extends EventEmitter<RouterEvents> {
 	public async render(
 		url: string,
 		options: RouterRenderOptions = {},
-	): Promise<{
-		element: ReactNode;
-		layers: Layer[];
-		redirect?: string;
-	}> {
+	): Promise<RouterRenderResult> {
 		const [pathname, search = ""] = url.split("?");
 		const state: RouterState = {
 			pathname,
 			search,
 			layers: [],
+			context: {},
 		};
 
-		this.emit("begin", undefined);
+		await this.emit("begin", undefined);
 
 		try {
-			let layers = await this.match(url, options);
+			let layers = await this.match(url, options, state.context);
 			if (layers.length === 0) {
 				if (this.notFoundPageRoute) {
 					layers = await this.createLayers(url, this.notFoundPageRoute);
@@ -96,14 +86,15 @@ export class Router extends EventEmitter<RouterEvents> {
 			}
 
 			state.layers = layers;
-			this.emit("success", undefined);
+			await this.emit("success", undefined);
 		} catch (e) {
-			if (e instanceof RedirectException) {
+			if (e instanceof RedirectionError) {
 				// redirect - stop processing
 				return {
 					element: null,
 					layers: [],
 					redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+					context: state.context,
 				};
 			}
 
@@ -118,7 +109,7 @@ export class Router extends EventEmitter<RouterEvents> {
 				},
 			];
 
-			this.emit("error", e as Error);
+			await this.emit("error", e as Error);
 		}
 
 		if (options.state) {
@@ -126,20 +117,23 @@ export class Router extends EventEmitter<RouterEvents> {
 			options.state.layers = state.layers;
 			options.state.pathname = state.pathname;
 			options.state.search = state.search;
+			options.state.context = state.context;
 
-			this.emit("end", options.state);
+			await this.emit("end", options.state);
 
 			return {
-				element: this.root(options.state, options),
+				element: this.root(options.state, options.args),
 				layers: options.state.layers,
+				context: state.context,
 			};
 		}
 
 		// stateless (ssr)
-		this.emit("end", state);
+		await this.emit("end", state);
 		return {
-			element: this.root(state, options),
+			element: this.root(state, options.args),
 			layers: state.layers,
+			context: state.context,
 		};
 	}
 
@@ -147,11 +141,13 @@ export class Router extends EventEmitter<RouterEvents> {
 	 *
 	 * @param url
 	 * @param options
+	 * @param context
 	 * @protected
 	 */
 	public async match(
 		url: string,
 		options: RouterMatchOptions = {},
+		context: RouterRenderContext = {},
 	): Promise<Layer[]> {
 		const pages = this.pages;
 		const previous = options.previous;
@@ -178,7 +174,8 @@ export class Router extends EventEmitter<RouterEvents> {
 					params,
 					query,
 					previous,
-					options.user,
+					options.args,
+					context,
 				);
 			}
 		}
@@ -189,11 +186,13 @@ export class Router extends EventEmitter<RouterEvents> {
 	/**
 	 * Create layers for the given route.
 	 *
+	 * @param url
 	 * @param route
 	 * @param params
 	 * @param query
 	 * @param previous
-	 * @param user
+	 * @param args
+	 * @param renderContext
 	 * @protected
 	 */
 	public async createLayers(
@@ -202,7 +201,8 @@ export class Router extends EventEmitter<RouterEvents> {
 		params: Record<string, any> = {},
 		query: Record<string, string> = {},
 		previous: PreviousLayerData[] = [],
-		user?: UserAccountInfo,
+		args?: PageContext,
+		renderContext?: RouterRenderContext,
 	): Promise<Layer[]> {
 		const layers: Layer[] = [];
 		let context: Record<string, any> = {};
@@ -224,7 +224,7 @@ export class Router extends EventEmitter<RouterEvents> {
 			try {
 				config.query = route.schema?.query
 					? this.alepha.parse(route.schema.query, query)
-					: {};
+					: query;
 			} catch (e) {
 				it.error = e as Error;
 				break;
@@ -233,7 +233,7 @@ export class Router extends EventEmitter<RouterEvents> {
 			try {
 				config.params = route.schema?.params
 					? this.alepha.parse(route.schema.params, params)
-					: {};
+					: params;
 			} catch (e) {
 				it.error = e as Error;
 				break;
@@ -278,12 +278,15 @@ export class Router extends EventEmitter<RouterEvents> {
 
 			try {
 				const props =
-					(await route.resolve?.({
-						...config,
-						...context,
-						user,
-						url,
-					} as any)) ?? {};
+					(await route.resolve?.(
+						{
+							...config,
+							...context,
+							context: args,
+							url,
+						} as any,
+						args ?? {},
+					)) ?? {};
 
 				// save props
 				it.props = {
@@ -297,7 +300,7 @@ export class Router extends EventEmitter<RouterEvents> {
 				};
 			} catch (e) {
 				// check if we need to redirect
-				if (e instanceof RedirectException) {
+				if (e instanceof RedirectionError) {
 					throw e; // redirect - stop processing
 				}
 
@@ -318,6 +321,13 @@ export class Router extends EventEmitter<RouterEvents> {
 				params[key] = String(params[key]);
 			}
 
+			if (it.route.helmet && renderContext) {
+				this.mergeRenderContext(it.route, renderContext, {
+					...props,
+					...context,
+				});
+			}
+
 			acc += "/";
 			acc += it.route.path ? compile(it.route.path)(params) : "";
 			const path = acc.replace(/\/+/, "/");
@@ -402,6 +412,34 @@ export class Router extends EventEmitter<RouterEvents> {
 		return undefined;
 	}
 
+	/**
+	 * Merge the render context with the page context.
+	 *
+	 * @param page
+	 * @param ctx
+	 * @param props
+	 * @protected
+	 */
+	protected mergeRenderContext(
+		page: PageRoute,
+		ctx: RouterRenderContext,
+		props: Record<string, any>,
+	): void {
+		if (page.helmet) {
+			const helmet =
+				typeof page.helmet === "function" ? page.helmet(props) : page.helmet;
+			if (helmet.title) {
+				ctx.helmet ??= {};
+
+				if (ctx.helmet?.title) {
+					ctx.helmet.title = `${helmet.title} - ${ctx.helmet.title}`;
+				} else {
+					ctx.helmet.title = helmet.title;
+				}
+			}
+		}
+	}
+
 	/**
 	 *
 	 * @param e
@@ -685,7 +723,7 @@ export interface RouterMatchOptions {
 	/**
 	 *
 	 */
-	user?: UserAccountInfo;
+	args?: PageContext;
 }
 
 export interface RouterEvents {
@@ -725,6 +763,18 @@ export interface RouterState {
 	 *
 	 */
 	layers: Array<Layer>;
+
+	/**
+	 *
+	 */
+	context: RouterRenderContext;
+}
+
+export interface RouterRenderContext {
+	/**
+	 *
+	 */
+	helmet?: RouterRenderHelmetContext;
 }
 
 export interface RouterRenderOptions extends RouterMatchOptions {
@@ -735,8 +785,71 @@ export interface RouterRenderOptions extends RouterMatchOptions {
 }
 
 export interface RouterStackItem {
+	/**
+	 *
+	 */
 	route: PageRoute;
+
+	/**
+	 *
+	 */
 	config?: Record<string, any>;
+
+	/**
+	 *
+	 */
 	props?: Record<string, any>;
+
+	/**
+	 *
+	 */
 	error?: Error;
 }
+
+export interface RouterRenderHelmetContext {
+	/**
+	 *
+	 */
+	title?: string;
+
+	/**
+	 *
+	 */
+	html?: {
+		attributes?: Record<string, string>;
+	};
+
+	/**
+	 *
+	 */
+	body?: {
+		attributes?: Record<string, string>;
+	};
+
+	/**
+	 *
+	 */
+	meta?: Array<{ name: string; content: string }>;
+}
+
+export interface RouterRenderResult {
+	/**
+	 *
+	 */
+	element: ReactNode;
+
+	/**
+	 *
+	 */
+	layers: Layer[];
+
+	/**
+	 *
+	 */
+	redirect?: string;
+
+	/**
+	 *
+	 */
+	context: RouterRenderContext;
+}

package/dist/index.browser.mjs

@@ -1,17 +0,0 @@
-import { autoInject, $inject, Alepha } from '@alepha/core';
-import { $ as $page, P as PageDescriptorProvider, k as ReactBrowserProvider } from './useRouterState-CvFCmaq7.mjs';
-export { N as NestedView, j as RedirectException, R as Router, a as RouterContext, f as RouterHookApi, b as RouterLayerContext, p as pageDescriptorKey, u as useActive, c as useClient, d as useInject, e as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useRouterState-CvFCmaq7.mjs';
-import 'react';
-import '@alepha/server';
-import 'react-dom/client';
-import 'path-to-regexp';
-
-class ReactModule {
-  alepha = $inject(Alepha);
-  constructor() {
-    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider);
-  }
-}
-autoInject($page, ReactModule);
-
-export { $page, ReactBrowserProvider, ReactModule };