@alepha/react 0.8.1 → 0.9.1

package/dist/index.js

@@ -1,31 +1,35 @@
-import { $hook, $inject, $logger, Alepha, KIND, NotImplementedError, OPTIONS, __bind, __descriptor, t } from "@alepha/core";
+import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, NotImplementedError, createDescriptor, t } from "@alepha/core";
 import { AlephaServer, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "@alepha/server-links";
 import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { RouterProvider } from "@alepha/router";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
 import { ServerStaticProvider } from "@alepha/server-static";
 import { renderToString } from "react-dom/server";
-import { RouterProvider } from "@alepha/router";
 
 //#region src/descriptors/$page.ts
-const KEY = "PAGE";
 /**
 * Main descriptor for defining a React route in the application.
 */
 const $page = (options) => {
-	__descriptor(KEY);
-	return {
-		[KIND]: KEY,
-		[OPTIONS]: options,
-		render: () => {
-			throw new NotImplementedError(KEY);
-		}
-	};
+	return createDescriptor(PageDescriptor, options);
 };
-$page[KIND] = KEY;
+var PageDescriptor = class extends Descriptor {
+	get name() {
+		return this.options.name ?? this.config.propertyKey;
+	}
+	/**
+	* For testing or build purposes, this will render the page (with or without the HTML layout) and return the HTML and context.
+	* Only valid for server-side rendering, it will throw an error if called on the client-side.
+	*/
+	async render(options) {
+		throw new NotImplementedError("");
+	}
+};
+$page[KIND] = PageDescriptor;
 
 //#endregion
 //#region src/components/ClientOnly.tsx
@@ -47,23 +51,11 @@ const ClientOnly = (props) => {
 };
 var ClientOnly_default = ClientOnly;
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = createContext(void 0);
-
-//#endregion
-//#region src/hooks/useAlepha.ts
-const useAlepha = () => {
-	const routerContext = useContext(RouterContext);
-	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
-	return routerContext.alepha;
-};
-
 //#endregion
 //#region src/components/ErrorViewer.tsx
-const ErrorViewer = ({ error }) => {
+const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = useState(false);
-	const isProduction = useAlepha().isProduction();
+	const isProduction = alepha.isProduction();
 	if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
 	const stackLines = error.stack?.split("\n") ?? [];
 	const previewLines = stackLines.slice(0, 5);
@@ -207,6 +199,10 @@ const ErrorViewerProduction = () => {
 	});
 };
 
+//#endregion
+//#region src/contexts/RouterContext.ts
+const RouterContext = createContext(void 0);
+
 //#endregion
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = createContext(void 0);
@@ -341,7 +337,7 @@ var RedirectionError = class extends Error {
 const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
 var PageDescriptorProvider = class {
 	log = $logger();
-	env = $inject(envSchema$1);
+	env = $env(envSchema$1);
 	alepha = $inject(Alepha);
 	pages = [];
 	getPages() {
@@ -514,7 +510,10 @@ var PageDescriptorProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return createElement(ErrorViewer_default, { error });
+		return createElement(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
 	}
 	renderEmptyView() {
 		return createElement(NestedView_default, {});
@@ -547,18 +546,17 @@ var PageDescriptorProvider = class {
 		on: "configure",
 		handler: () => {
 			let hasNotFoundHandler = false;
-			const pages = this.alepha.getDescriptorValues($page);
+			const pages = this.alepha.descriptors($page);
 			const hasParent = (it) => {
 				for (const page of pages) {
-					const children = page.value[OPTIONS].children ? Array.isArray(page.value[OPTIONS].children) ? page.value[OPTIONS].children : page.value[OPTIONS].children() : [];
+					const children = page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : [];
 					if (children.includes(it)) return true;
 				}
 			};
-			for (const { value, key } of pages) value[OPTIONS].name ??= key;
-			for (const { value } of pages) {
-				if (value[OPTIONS].path === "/*") hasNotFoundHandler = true;
-				if (hasParent(value)) continue;
-				this.add(this.map(pages, value));
+			for (const page of pages) {
+				if (page.options.path === "/*") hasNotFoundHandler = true;
+				if (hasParent(page)) continue;
+				this.add(this.map(pages, page));
 			}
 			if (!hasNotFoundHandler && pages.length > 0) this.add({
 				path: "/*",
@@ -572,9 +570,10 @@ var PageDescriptorProvider = class {
 		}
 	});
 	map(pages, target) {
-		const children = target[OPTIONS].children ? Array.isArray(target[OPTIONS].children) ? target[OPTIONS].children : target[OPTIONS].children() : [];
+		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
 		return {
-			...target[OPTIONS],
+			...target.options,
+			name: target.name,
 			parent: void 0,
 			children: children.map((it) => this.map(pages, it))
 		};
@@ -611,13 +610,222 @@ const isPageRoute = (it) => {
 	return it && typeof it === "object" && typeof it.path === "string" && typeof it.page === "object";
 };
 
+//#endregion
+//#region src/providers/BrowserRouterProvider.ts
+var BrowserRouterProvider = class extends RouterProvider {
+	log = $logger();
+	alepha = $inject(Alepha);
+	pageDescriptorProvider = $inject(PageDescriptorProvider);
+	add(entry) {
+		this.pageDescriptorProvider.add(entry);
+	}
+	configure = $hook({
+		on: "configure",
+		handler: async () => {
+			for (const page of this.pageDescriptorProvider.getPages()) if (page.component || page.lazy) this.push({
+				path: page.match,
+				page
+			});
+		}
+	});
+	async transition(url, options = {}) {
+		const { pathname, search } = url;
+		const state = {
+			pathname,
+			search,
+			layers: []
+		};
+		const context = {
+			url,
+			query: {},
+			params: {},
+			onError: () => null,
+			...options.context ?? {}
+		};
+		await this.alepha.emit("react:transition:begin", {
+			state,
+			context
+		});
+		try {
+			const previous = options.previous;
+			const { route, params } = this.match(pathname);
+			const query = {};
+			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			context.query = query;
+			context.params = params ?? {};
+			context.previous = previous;
+			if (isPageRoute(route)) {
+				const result = await this.pageDescriptorProvider.createLayers(route.page, context);
+				if (result.redirect) return {
+					redirect: result.redirect,
+					state,
+					context
+				};
+				state.layers = result.layers;
+			}
+			if (state.layers.length === 0) state.layers.push({
+				name: "not-found",
+				element: createElement(NotFoundPage),
+				index: 0,
+				path: "/"
+			});
+			await this.alepha.emit("react:transition:success", {
+				state,
+				context
+			});
+		} catch (e) {
+			this.log.error(e);
+			state.layers = [{
+				name: "error",
+				element: this.pageDescriptorProvider.renderError(e),
+				index: 0,
+				path: "/"
+			}];
+			await this.alepha.emit("react:transition:error", {
+				error: e,
+				state,
+				context
+			});
+		}
+		if (options.state) {
+			options.state.layers = state.layers;
+			options.state.pathname = state.pathname;
+			options.state.search = state.search;
+		}
+		await this.alepha.emit("react:transition:end", {
+			state: options.state,
+			context
+		});
+		return {
+			context,
+			state
+		};
+	}
+	root(state, context) {
+		return this.pageDescriptorProvider.root(state, context);
+	}
+};
+
+//#endregion
+//#region src/providers/ReactBrowserProvider.ts
+var ReactBrowserProvider = class {
+	log = $logger();
+	client = $inject(LinkProvider);
+	alepha = $inject(Alepha);
+	router = $inject(BrowserRouterProvider);
+	root;
+	transitioning;
+	state = {
+		layers: [],
+		pathname: "",
+		search: ""
+	};
+	get document() {
+		return window.document;
+	}
+	get history() {
+		return window.history;
+	}
+	get location() {
+		return window.location;
+	}
+	get url() {
+		let url = this.location.pathname + this.location.search;
+		if (import.meta?.env?.BASE_URL) {
+			url = url.replace(import.meta.env?.BASE_URL, "");
+			if (!url.startsWith("/")) url = `/${url}`;
+		}
+		return url;
+	}
+	pushState(url, replace) {
+		let path = url;
+		if (import.meta?.env?.BASE_URL) path = (import.meta.env?.BASE_URL + path).replaceAll("//", "/");
+		if (replace) this.history.replaceState({}, "", path);
+		else this.history.pushState({}, "", path);
+	}
+	async invalidate(props) {
+		const previous = [];
+		if (props) {
+			const [key] = Object.keys(props);
+			const value = props[key];
+			for (const layer of this.state.layers) {
+				if (layer.props?.[key]) {
+					previous.push({
+						...layer,
+						props: {
+							...layer.props,
+							[key]: value
+						}
+					});
+					break;
+				}
+				previous.push(layer);
+			}
+		}
+		await this.render({ previous });
+	}
+	async go(url, options = {}) {
+		const result = await this.render({ url });
+		if (result.context.url.pathname !== url) {
+			this.pushState(result.context.url.pathname);
+			return;
+		}
+		if (options.replace) {
+			this.pushState(url);
+			return;
+		}
+		this.pushState(url);
+	}
+	async render(options = {}) {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+		this.transitioning = { to: url };
+		const result = await this.router.transition(new URL(`http://localhost${url}`), {
+			previous,
+			state: this.state
+		});
+		if (result.redirect) return await this.render({ url: result.redirect });
+		this.transitioning = void 0;
+		return result;
+	}
+	/**
+	* Get embedded layers from the server.
+	*/
+	getHydrationState() {
+		try {
+			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+	ready = $hook({
+		on: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink(link);
+			const { context } = await this.render({ previous });
+			await this.alepha.emit("react:browser:render", {
+				state: this.state,
+				context,
+				hydration
+			});
+			window.addEventListener("popstate", () => {
+				if (this.state.pathname === this.url) return;
+				this.render();
+			});
+		}
+	});
+};
+
 //#endregion
 //#region src/providers/ReactServerProvider.ts
 const envSchema = t.object({
 	REACT_SERVER_DIST: t.string({ default: "public" }),
 	REACT_SERVER_PREFIX: t.string({ default: "" }),
 	REACT_SSR_ENABLED: t.optional(t.boolean()),
-	REACT_ROOT_ID: t.string({ default: "root" })
+	REACT_ROOT_ID: t.string({ default: "root" }),
+	REACT_SERVER_TEMPLATE: t.optional(t.string({ size: "rich" }))
 });
 var ReactServerProvider = class {
 	log = $logger();
@@ -626,18 +834,15 @@ var ReactServerProvider = class {
 	serverStaticProvider = $inject(ServerStaticProvider);
 	serverRouterProvider = $inject(ServerRouterProvider);
 	serverTimingProvider = $inject(ServerTimingProvider);
-	env = $inject(envSchema);
+	env = $env(envSchema);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
 	onConfigure = $hook({
 		on: "configure",
 		handler: async () => {
-			const pages = this.alepha.getDescriptorValues($page);
+			const pages = this.alepha.descriptors($page);
 			const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
 			this.alepha.state("react.server.ssr", ssrEnabled);
-			for (const { key, instance, value } of pages) {
-				const name = value[OPTIONS].name ?? key;
-				instance[key].render = this.createRenderFunction(name);
-			}
+			for (const page of pages) page.render = this.createRenderFunction(page.name);
 			if (this.alepha.isServerless() === "vite") {
 				await this.configureVite(ssrEnabled);
 				return;
@@ -657,7 +862,7 @@ var ReactServerProvider = class {
 				return;
 			}
 			this.log.info("SSR is disabled, use History API fallback");
-			await this.serverRouterProvider.route({
+			this.serverRouterProvider.createRoute({
 				path: "*",
 				handler: async ({ url, reply }) => {
 					if (url.pathname.includes(".")) {
@@ -673,13 +878,13 @@ var ReactServerProvider = class {
 		}
 	});
 	get template() {
-		return this.alepha.state("react.server.template") ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
+		return this.alepha.env.REACT_SERVER_TEMPLATE ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
 	}
 	async registerPages(templateLoader) {
 		for (const page of this.pageDescriptorProvider.getPages()) {
 			if (page.children?.length) continue;
 			this.log.debug(`+ ${page.match} -> ${page.name}`);
-			await this.serverRouterProvider.route({
+			this.serverRouterProvider.createRoute({
 				...page,
 				schema: void 0,
 				method: "GET",
@@ -694,7 +899,7 @@ var ReactServerProvider = class {
 		return "";
 	}
 	async configureStaticServer(root) {
-		await this.serverStaticProvider.serve({
+		await this.serverStaticProvider.createStaticServer({
 			root,
 			path: this.env.REACT_SERVER_PREFIX
 		});
@@ -748,7 +953,7 @@ var ReactServerProvider = class {
 				onError: () => null
 			};
 			if (this.alepha.has(ServerLinksProvider)) {
-				const srv = this.alepha.get(ServerLinksProvider);
+				const srv = this.alepha.inject(ServerLinksProvider);
 				const schema = apiLinksResponseSchema;
 				context.links = this.alepha.parse(schema, await srv.getLinks({
 					user: serverRequest.user,
@@ -838,214 +1043,6 @@ var ReactServerProvider = class {
 	}
 };
 
-//#endregion
-//#region src/providers/BrowserRouterProvider.ts
-var BrowserRouterProvider = class extends RouterProvider {
-	log = $logger();
-	alepha = $inject(Alepha);
-	pageDescriptorProvider = $inject(PageDescriptorProvider);
-	add(entry) {
-		this.pageDescriptorProvider.add(entry);
-	}
-	configure = $hook({
-		on: "configure",
-		handler: async () => {
-			for (const page of this.pageDescriptorProvider.getPages()) if (page.component || page.lazy) this.push({
-				path: page.match,
-				page
-			});
-		}
-	});
-	async transition(url, options = {}) {
-		const { pathname, search } = url;
-		const state = {
-			pathname,
-			search,
-			layers: []
-		};
-		const context = {
-			url,
-			query: {},
-			params: {},
-			onError: () => null,
-			...options.context ?? {}
-		};
-		await this.alepha.emit("react:transition:begin", {
-			state,
-			context
-		});
-		try {
-			const previous = options.previous;
-			const { route, params } = this.match(pathname);
-			const query = {};
-			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
-			context.query = query;
-			context.params = params ?? {};
-			context.previous = previous;
-			if (isPageRoute(route)) {
-				const result = await this.pageDescriptorProvider.createLayers(route.page, context);
-				if (result.redirect) return {
-					redirect: result.redirect,
-					state,
-					context
-				};
-				state.layers = result.layers;
-			}
-			if (state.layers.length === 0) state.layers.push({
-				name: "not-found",
-				element: createElement(NotFoundPage),
-				index: 0,
-				path: "/"
-			});
-			await this.alepha.emit("react:transition:success", {
-				state,
-				context
-			});
-		} catch (e) {
-			this.log.error(e);
-			state.layers = [{
-				name: "error",
-				element: this.pageDescriptorProvider.renderError(e),
-				index: 0,
-				path: "/"
-			}];
-			await this.alepha.emit("react:transition:error", {
-				error: e,
-				state,
-				context
-			});
-		}
-		if (options.state) {
-			options.state.layers = state.layers;
-			options.state.pathname = state.pathname;
-			options.state.search = state.search;
-		}
-		await this.alepha.emit("react:transition:end", {
-			state: options.state,
-			context
-		});
-		return {
-			context,
-			state
-		};
-	}
-	root(state, context) {
-		return this.pageDescriptorProvider.root(state, context);
-	}
-};
-
-//#endregion
-//#region src/providers/ReactBrowserProvider.ts
-var ReactBrowserProvider = class {
-	log = $logger();
-	client = $inject(LinkProvider);
-	alepha = $inject(Alepha);
-	router = $inject(BrowserRouterProvider);
-	root;
-	transitioning;
-	state = {
-		layers: [],
-		pathname: "",
-		search: ""
-	};
-	get document() {
-		return window.document;
-	}
-	get history() {
-		return window.history;
-	}
-	get location() {
-		return window.location;
-	}
-	get url() {
-		let url = this.location.pathname + this.location.search;
-		if (import.meta?.env?.BASE_URL) {
-			url = url.replace(import.meta.env?.BASE_URL, "");
-			if (!url.startsWith("/")) url = `/${url}`;
-		}
-		return url;
-	}
-	pushState(url, replace) {
-		let path = url;
-		if (import.meta?.env?.BASE_URL) path = (import.meta.env?.BASE_URL + path).replaceAll("//", "/");
-		if (replace) this.history.replaceState({}, "", path);
-		else this.history.pushState({}, "", path);
-	}
-	async invalidate(props) {
-		const previous = [];
-		if (props) {
-			const [key] = Object.keys(props);
-			const value = props[key];
-			for (const layer of this.state.layers) {
-				if (layer.props?.[key]) {
-					previous.push({
-						...layer,
-						props: {
-							...layer.props,
-							[key]: value
-						}
-					});
-					break;
-				}
-				previous.push(layer);
-			}
-		}
-		await this.render({ previous });
-	}
-	async go(url, options = {}) {
-		const result = await this.render({ url });
-		if (result.context.url.pathname !== url) {
-			this.pushState(result.context.url.pathname);
-			return;
-		}
-		if (options.replace) {
-			this.pushState(url);
-			return;
-		}
-		this.pushState(url);
-	}
-	async render(options = {}) {
-		const previous = options.previous ?? this.state.layers;
-		const url = options.url ?? this.url;
-		this.transitioning = { to: url };
-		const result = await this.router.transition(new URL(`http://localhost${url}`), {
-			previous,
-			state: this.state
-		});
-		if (result.redirect) return await this.render({ url: result.redirect });
-		this.transitioning = void 0;
-		return result;
-	}
-	/**
-	* Get embedded layers from the server.
-	*/
-	getHydrationState() {
-		try {
-			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
-		} catch (error) {
-			console.error(error);
-		}
-	}
-	ready = $hook({
-		on: "ready",
-		handler: async () => {
-			const hydration = this.getHydrationState();
-			const previous = hydration?.layers ?? [];
-			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink(link);
-			const { context } = await this.render({ previous });
-			await this.alepha.emit("react:browser:render", {
-				state: this.state,
-				context,
-				hydration
-			});
-			window.addEventListener("popstate", () => {
-				if (this.state.pathname === location.pathname) return;
-				this.render();
-			});
-		}
-	});
-};
-
 //#endregion
 //#region src/hooks/RouterHookApi.ts
 var RouterHookApi = class {
@@ -1139,9 +1136,9 @@ const useRouter = () => {
 	const layer = useContext(RouterLayerContext);
 	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
 	const pages = useMemo(() => {
-		return ctx.alepha.get(PageDescriptorProvider).getPages();
+		return ctx.alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
+	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -1149,11 +1146,11 @@ const useRouter = () => {
 const Link = (props) => {
 	React.useContext(RouterContext);
 	const router = useRouter();
-	const to = typeof props.to === "string" ? props.to : props.to[OPTIONS].path;
+	const to = typeof props.to === "string" ? props.to : props.to.options.path;
 	if (!to) return null;
-	const can = typeof props.to === "string" ? void 0 : props.to[OPTIONS].can;
+	const can = typeof props.to === "string" ? void 0 : props.to.options.can;
 	if (can && !can()) return null;
-	const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
+	const name = typeof props.to === "string" ? void 0 : props.to.options.name;
 	const anchorProps = {
 		...props,
 		to: void 0
@@ -1200,12 +1197,20 @@ const useActive = (path) => {
 	};
 };
 
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const routerContext = useContext(RouterContext);
+	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
+	return routerContext.alepha;
+};
+
 //#endregion
 //#region src/hooks/useInject.ts
 const useInject = (clazz) => {
 	const ctx = useContext(RouterContext);
 	if (!ctx) throw new Error("useRouter must be used within a <RouterProvider>");
-	return useMemo(() => ctx.alepha.get(clazz), []);
+	return useMemo(() => ctx.alepha.inject(clazz), []);
 };
 
 //#endregion
@@ -1267,136 +1272,20 @@ const useRouterState = () => {
 * It delivers seamless server-side rendering, automatic code splitting, and client-side navigation with full
 * type safety and schema validation for route parameters and data.
 *
-* **Key Features:**
-* - Declarative page definition with `$page` descriptor
-* - Server-side rendering (SSR) with automatic hydration
-* - Type-safe routing with parameter validation
-* - Schema-based data resolution and validation
-* - SEO-friendly meta tag management
-* - Automatic code splitting and lazy loading
-* - Client-side navigation with browser history
-*
-* **Basic Usage:**
-* ```ts
-* import { Alepha, run, t } from "alepha";
-* import { AlephaReact, $page } from "alepha/react";
-*
-* class AppRoutes {
-*   // Home page
-*   home = $page({
-*     path: "/",
-*     component: () => (
-*       <div>
-*         <h1>Welcome to Alepha</h1>
-*         <p>Build amazing React applications!</p>
-*       </div>
-*     ),
-*   });
-*
-*   // About page with meta tags
-*   about = $page({
-*     path: "/about",
-*     head: {
-*       title: "About Us",
-*       description: "Learn more about our mission",
-*     },
-*     component: () => (
-*       <div>
-*         <h1>About Us</h1>
-*         <p>Learn more about our mission.</p>
-*       </div>
-*     ),
-*   });
-* }
-*
-* const alepha = Alepha.create()
-*   .with(AlephaReact)
-*   .with(AppRoutes);
-*
-* run(alepha);
-* ```
-*
-* **Dynamic Routes with Parameters:**
-* ```tsx
-* class UserRoutes {
-*   userProfile = $page({
-*     path: "/users/:id",
-*     schema: {
-*       params: t.object({
-*         id: t.string(),
-*       }),
-*     },
-*     resolve: async ({ params }) => {
-*       // Fetch user data server-side
-*       const user = await getUserById(params.id);
-*       return { user };
-*     },
-*     head: ({ user }) => ({
-*       title: `${user.name} - Profile`,
-*       description: `View ${user.name}'s profile`,
-*     }),
-*     component: ({ user }) => (
-*       <div>
-*         <h1>{user.name}</h1>
-*         <p>Email: {user.email}</p>
-*       </div>
-*     ),
-*   });
-*
-*   userSettings = $page({
-*     path: "/users/:id/settings",
-*     schema: {
-*       params: t.object({
-*         id: t.string(),
-*       }),
-*     },
-*     component: ({ params }) => (
-*       <UserSettings userId={params.id} />
-*     ),
-*   });
-* }
-* ```
-*
-* **Static Generation:**
-* ```tsx
-* class BlogRoutes {
-*   blogPost = $page({
-*     path: "/blog/:slug",
-*     schema: {
-*       params: t.object({
-*         slug: t.string(),
-*       }),
-*     },
-*     static: {
-*       entries: [
-*         { params: { slug: "getting-started" } },
-*         { params: { slug: "advanced-features" } },
-*         { params: { slug: "deployment" } },
-*       ],
-*     },
-*     resolve: ({ params }) => {
-*       const post = getBlogPost(params.slug);
-*       return { post };
-*     },
-*     component: ({ post }) => (
-*       <article>
-*         <h1>{post.title}</h1>
-*         <div>{post.content}</div>
-*       </article>
-*     ),
-*   });
-* }
-* ```
-*
 * @see {@link $page}
 * @module alepha.react
 */
-var AlephaReact = class {
-	name = "alepha.react";
-	$services = (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider);
-};
-__bind($page, AlephaReact);
+const AlephaReact = $module({
+	name: "alepha.react",
+	descriptors: [$page],
+	services: [
+		ReactServerProvider,
+		PageDescriptorProvider,
+		ReactBrowserProvider
+	],
+	register: (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider)
+});
 
 //#endregion
-export { $page, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+export { $page, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
 //# sourceMappingURL=index.js.map