@alepha/react 0.8.1 → 0.9.1

package/dist/index.cjs

@@ -27,28 +27,32 @@ const __alepha_server_cache = __toESM(require("@alepha/server-cache"));
 const __alepha_server_links = __toESM(require("@alepha/server-links"));
 const react = __toESM(require("react"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
+const __alepha_router = __toESM(require("@alepha/router"));
 const node_fs = __toESM(require("node:fs"));
 const node_path = __toESM(require("node:path"));
 const __alepha_server_static = __toESM(require("@alepha/server-static"));
 const react_dom_server = __toESM(require("react-dom/server"));
-const __alepha_router = __toESM(require("@alepha/router"));
 
 //#region src/descriptors/$page.ts
-const KEY = "PAGE";
 /**
 * Main descriptor for defining a React route in the application.
 */
 const $page = (options) => {
-	(0, __alepha_core.__descriptor)(KEY);
-	return {
-		[__alepha_core.KIND]: KEY,
-		[__alepha_core.OPTIONS]: options,
-		render: () => {
-			throw new __alepha_core.NotImplementedError(KEY);
-		}
-	};
+	return (0, __alepha_core.createDescriptor)(PageDescriptor, options);
 };
-$page[__alepha_core.KIND] = KEY;
+var PageDescriptor = class extends __alepha_core.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 __alepha_core.NotImplementedError("");
+	}
+};
+$page[__alepha_core.KIND] = PageDescriptor;
 
 //#endregion
 //#region src/components/ClientOnly.tsx
@@ -70,23 +74,11 @@ const ClientOnly = (props) => {
 };
 var ClientOnly_default = ClientOnly;
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = (0, react.createContext)(void 0);
-
-//#endregion
-//#region src/hooks/useAlepha.ts
-const useAlepha = () => {
-	const routerContext = (0, react.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] = (0, react.useState)(false);
-	const isProduction = useAlepha().isProduction();
+	const isProduction = alepha.isProduction();
 	if (isProduction) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorViewerProduction, {});
 	const stackLines = error.stack?.split("\n") ?? [];
 	const previewLines = stackLines.slice(0, 5);
@@ -230,6 +222,10 @@ const ErrorViewerProduction = () => {
 	});
 };
 
+//#endregion
+//#region src/contexts/RouterContext.ts
+const RouterContext = (0, react.createContext)(void 0);
+
 //#endregion
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = (0, react.createContext)(void 0);
@@ -364,7 +360,7 @@ var RedirectionError = class extends Error {
 const envSchema$1 = __alepha_core.t.object({ REACT_STRICT_MODE: __alepha_core.t.boolean({ default: true }) });
 var PageDescriptorProvider = class {
 	log = (0, __alepha_core.$logger)();
-	env = (0, __alepha_core.$inject)(envSchema$1);
+	env = (0, __alepha_core.$env)(envSchema$1);
 	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
 	pages = [];
 	getPages() {
@@ -537,7 +533,10 @@ var PageDescriptorProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return (0, react.createElement)(ErrorViewer_default, { error });
+		return (0, react.createElement)(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
 	}
 	renderEmptyView() {
 		return (0, react.createElement)(NestedView_default, {});
@@ -570,18 +569,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[__alepha_core.OPTIONS].children ? Array.isArray(page.value[__alepha_core.OPTIONS].children) ? page.value[__alepha_core.OPTIONS].children : page.value[__alepha_core.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[__alepha_core.OPTIONS].name ??= key;
-			for (const { value } of pages) {
-				if (value[__alepha_core.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: "/*",
@@ -595,9 +593,10 @@ var PageDescriptorProvider = class {
 		}
 	});
 	map(pages, target) {
-		const children = target[__alepha_core.OPTIONS].children ? Array.isArray(target[__alepha_core.OPTIONS].children) ? target[__alepha_core.OPTIONS].children : target[__alepha_core.OPTIONS].children() : [];
+		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
 		return {
-			...target[__alepha_core.OPTIONS],
+			...target.options,
+			name: target.name,
 			parent: void 0,
 			children: children.map((it) => this.map(pages, it))
 		};
@@ -634,13 +633,217 @@ 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 __alepha_router.RouterProvider {
+	log = (0, __alepha_core.$logger)();
+	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
+	pageDescriptorProvider = (0, __alepha_core.$inject)(PageDescriptorProvider);
+	add(entry) {
+		this.pageDescriptorProvider.add(entry);
+	}
+	configure = (0, __alepha_core.$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: (0, react.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 = (0, __alepha_core.$logger)();
+	client = (0, __alepha_core.$inject)(__alepha_server_links.LinkProvider);
+	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
+	router = (0, __alepha_core.$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;
+		return url;
+	}
+	pushState(url, replace) {
+		let path = url;
+		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 = (0, __alepha_core.$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 = __alepha_core.t.object({
 	REACT_SERVER_DIST: __alepha_core.t.string({ default: "public" }),
 	REACT_SERVER_PREFIX: __alepha_core.t.string({ default: "" }),
 	REACT_SSR_ENABLED: __alepha_core.t.optional(__alepha_core.t.boolean()),
-	REACT_ROOT_ID: __alepha_core.t.string({ default: "root" })
+	REACT_ROOT_ID: __alepha_core.t.string({ default: "root" }),
+	REACT_SERVER_TEMPLATE: __alepha_core.t.optional(__alepha_core.t.string({ size: "rich" }))
 });
 var ReactServerProvider = class {
 	log = (0, __alepha_core.$logger)();
@@ -649,18 +852,15 @@ var ReactServerProvider = class {
 	serverStaticProvider = (0, __alepha_core.$inject)(__alepha_server_static.ServerStaticProvider);
 	serverRouterProvider = (0, __alepha_core.$inject)(__alepha_server.ServerRouterProvider);
 	serverTimingProvider = (0, __alepha_core.$inject)(__alepha_server.ServerTimingProvider);
-	env = (0, __alepha_core.$inject)(envSchema);
+	env = (0, __alepha_core.$env)(envSchema);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
 	onConfigure = (0, __alepha_core.$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[__alepha_core.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;
@@ -680,7 +880,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(".")) {
@@ -696,13 +896,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",
@@ -717,7 +917,7 @@ var ReactServerProvider = class {
 		return "";
 	}
 	async configureStaticServer(root) {
-		await this.serverStaticProvider.serve({
+		await this.serverStaticProvider.createStaticServer({
 			root,
 			path: this.env.REACT_SERVER_PREFIX
 		});
@@ -771,7 +971,7 @@ var ReactServerProvider = class {
 				onError: () => null
 			};
 			if (this.alepha.has(__alepha_server_links.ServerLinksProvider)) {
-				const srv = this.alepha.get(__alepha_server_links.ServerLinksProvider);
+				const srv = this.alepha.inject(__alepha_server_links.ServerLinksProvider);
 				const schema = __alepha_server.apiLinksResponseSchema;
 				context.links = this.alepha.parse(schema, await srv.getLinks({
 					user: serverRequest.user,
@@ -861,209 +1061,6 @@ var ReactServerProvider = class {
 	}
 };
 
-//#endregion
-//#region src/providers/BrowserRouterProvider.ts
-var BrowserRouterProvider = class extends __alepha_router.RouterProvider {
-	log = (0, __alepha_core.$logger)();
-	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
-	pageDescriptorProvider = (0, __alepha_core.$inject)(PageDescriptorProvider);
-	add(entry) {
-		this.pageDescriptorProvider.add(entry);
-	}
-	configure = (0, __alepha_core.$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: (0, react.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 = (0, __alepha_core.$logger)();
-	client = (0, __alepha_core.$inject)(__alepha_server_links.LinkProvider);
-	alepha = (0, __alepha_core.$inject)(__alepha_core.Alepha);
-	router = (0, __alepha_core.$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;
-		return url;
-	}
-	pushState(url, replace) {
-		let path = url;
-		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 = (0, __alepha_core.$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 {
@@ -1157,9 +1154,9 @@ const useRouter = () => {
 	const layer = (0, react.useContext)(RouterLayerContext);
 	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
 	const pages = (0, react.useMemo)(() => {
-		return ctx.alepha.get(PageDescriptorProvider).getPages();
+		return ctx.alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0), [layer]);
+	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -1167,11 +1164,11 @@ const useRouter = () => {
 const Link = (props) => {
 	react.default.useContext(RouterContext);
 	const router = useRouter();
-	const to = typeof props.to === "string" ? props.to : props.to[__alepha_core.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[__alepha_core.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[__alepha_core.OPTIONS].name;
+	const name = typeof props.to === "string" ? void 0 : props.to.options.name;
 	const anchorProps = {
 		...props,
 		to: void 0
@@ -1218,12 +1215,20 @@ const useActive = (path) => {
 	};
 };
 
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const routerContext = (0, react.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 = (0, react.useContext)(RouterContext);
 	if (!ctx) throw new Error("useRouter must be used within a <RouterProvider>");
-	return (0, react.useMemo)(() => ctx.alepha.get(clazz), []);
+	return (0, react.useMemo)(() => ctx.alepha.inject(clazz), []);
 };
 
 //#endregion
@@ -1285,135 +1290,19 @@ 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(__alepha_server.AlephaServer).with(__alepha_server_cache.AlephaServerCache).with(__alepha_server_links.AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider);
-};
-(0, __alepha_core.__bind)($page, AlephaReact);
+const AlephaReact = (0, __alepha_core.$module)({
+	name: "alepha.react",
+	descriptors: [$page],
+	services: [
+		ReactServerProvider,
+		PageDescriptorProvider,
+		ReactBrowserProvider
+	],
+	register: (alepha) => alepha.with(__alepha_server.AlephaServer).with(__alepha_server_cache.AlephaServerCache).with(__alepha_server_links.AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider)
+});
 
 //#endregion
 exports.$page = $page;
@@ -1423,6 +1312,7 @@ exports.ErrorBoundary = ErrorBoundary_default;
 exports.Link = Link_default;
 exports.NestedView = NestedView_default;
 exports.NotFound = NotFoundPage;
+exports.PageDescriptor = PageDescriptor;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
 exports.ReactServerProvider = ReactServerProvider;