@alepha/react 0.9.3 → 0.9.4

package/dist/index.js

@@ -1,14 +1,17 @@
-import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, createDescriptor, t } from "@alepha/core";
-import { AlephaServer, HttpClient, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
+import { $env, $hook, $inject, $module, Alepha, AlephaError, Descriptor, KIND, createDescriptor, t } from "@alepha/core";
+import { AlephaServer, HttpClient, ServerRouterProvider, ServerTimingProvider } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "@alepha/server-links";
+import { $logger } from "@alepha/logger";
 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 { DateTimeProvider } from "@alepha/datetime";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { RouterProvider } from "@alepha/router";
 
 //#region src/descriptors/$page.ts
 /**
@@ -34,6 +37,12 @@ var PageDescriptor = class extends Descriptor {
 	async render(options) {
 		throw new Error("render method is not implemented in this environment");
 	}
+	match(url) {
+		return false;
+	}
+	pathname(config) {
+		return this.options.path || "";
+	}
 };
 $page[KIND] = PageDescriptor;
 
@@ -205,28 +214,54 @@ const ErrorViewerProduction = () => {
 	});
 };
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = createContext(void 0);
-
 //#endregion
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = createContext(void 0);
 
+//#endregion
+//#region src/errors/Redirection.ts
+/**
+* Used for Redirection during the page loading.
+*
+* Depends on the context, it can be thrown or just returned.
+*/
+var Redirection = class extends Error {
+	redirect;
+	constructor(redirect) {
+		super("Redirection");
+		this.redirect = redirect;
+	}
+};
+
 //#endregion
 //#region src/contexts/AlephaContext.ts
 const AlephaContext = createContext(void 0);
 
 //#endregion
 //#region src/hooks/useAlepha.ts
+/**
+* Main Alepha hook.
+*
+* It provides access to the Alepha instance within a React component.
+*
+* With Alepha, you can access the core functionalities of the framework:
+*
+* - alepha.state() for state management
+* - alepha.inject() for dependency injection
+* - alepha.emit() for event handling
+* etc...
+*/
 const useAlepha = () => {
 	const alepha = useContext(AlephaContext);
-	if (!alepha) throw new Error("useAlepha must be used within an AlephaContext.Provider");
+	if (!alepha) throw new AlephaError("Hook 'useAlepha()' must be used within an AlephaContext.Provider");
 	return alepha;
 };
 
 //#endregion
 //#region src/hooks/useRouterEvents.ts
+/**
+* Subscribe to various router events.
+*/
 const useRouterEvents = (opts = {}, deps = []) => {
 	const alepha = useAlepha();
 	useEffect(() => {
@@ -299,19 +334,21 @@ var ErrorBoundary_default = ErrorBoundary;
 * ```
 */
 const NestedView = (props) => {
-	const app = useContext(RouterContext);
 	const layer = useContext(RouterLayerContext);
 	const index = layer?.index ?? 0;
-	const [view, setView] = useState(app?.state.layers[index]?.element);
-	useRouterEvents({ onEnd: ({ state, context }) => {
-		if (app) app.context = context;
-		if (!state.layers[index]?.cache) setView(state.layers[index]?.element);
-	} }, [app]);
-	if (!app) throw new Error("NestedView must be used within a RouterContext.");
+	const alepha = useAlepha();
+	const state = alepha.state("react.router.state");
+	if (!state) throw new Error("<NestedView/> must be used inside a RouterLayerContext.");
+	const [view, setView] = useState(state.layers[index]?.element);
+	useRouterEvents({ onEnd: ({ state: state$1 }) => {
+		if (!state$1.layers[index]?.cache) setView(state$1.layers[index]?.element);
+	} }, []);
 	const element = view ?? props.children ?? null;
 	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
 		fallback: (error) => {
-			return app.context.onError?.(error, app.context);
+			const result = state.onError(error, state);
+			if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
+			return result;
 		},
 		children: element
 	});
@@ -338,27 +375,17 @@ function NotFoundPage(props) {
 				fontSize: "1rem",
 				marginBottom: "0.5rem"
 			},
-			children: "This page does not exist"
+			children: "404 - This page does not exist"
 		})
 	});
 }
 
 //#endregion
-//#region src/errors/Redirection.ts
-var Redirection = class extends Error {
-	page;
-	constructor(page) {
-		super("Redirection");
-		this.page = page;
-	}
-};
-
-//#endregion
-//#region src/providers/PageDescriptorProvider.ts
-const envSchema$1 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
-var PageDescriptorProvider = class {
+//#region src/providers/ReactPageProvider.ts
+const envSchema$2 = t.object({ REACT_STRICT_MODE: t.boolean({ default: true }) });
+var ReactPageProvider = class {
 	log = $logger();
-	env = $env(envSchema$1);
+	env = $env(envSchema$2);
 	alepha = $inject(Alepha);
 	pages = [];
 	getPages() {
@@ -385,22 +412,21 @@ var PageDescriptorProvider = class {
 		return url.replace(/\/\/+/g, "/") || "/";
 	}
 	url(name, options = {}) {
-		return new URL(this.pathname(name, options), options.base ?? `http://localhost`);
+		return new URL(this.pathname(name, options), options.host ?? `http://localhost`);
 	}
-	root(state, context) {
-		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(RouterContext.Provider, { value: {
-			state,
-			context
-		} }, createElement(NestedView_default, {}, state.layers[0]?.element)));
+	root(state) {
+		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(NestedView_default, {}, state.layers[0]?.element));
 		if (this.env.REACT_STRICT_MODE) return createElement(StrictMode, {}, root);
 		return root;
 	}
-	async createLayers(route, request) {
-		const { pathname, search } = request.url;
-		const layers = [];
+	/**
+	* Create a new RouterState based on a given route and request.
+	* This method resolves the layers for the route, applying any query and params schemas defined in the route.
+	* It also handles errors and redirects.
+	*/
+	async createLayers(route, state, previous = []) {
 		let context = {};
 		const stack = [{ route }];
-		request.onError = (error) => this.renderError(error);
 		let parent = route.parent;
 		while (parent) {
 			stack.unshift({ route: parent });
@@ -412,19 +438,18 @@ var PageDescriptorProvider = class {
 			const route$1 = it.route;
 			const config = {};
 			try {
-				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, request.query) : {};
+				config.query = route$1.schema?.query ? this.alepha.parse(route$1.schema.query, state.query) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			try {
-				config.params = route$1.schema?.params ? this.alepha.parse(route$1.schema.params, request.params) : {};
+				config.params = route$1.schema?.params ? this.alepha.parse(route$1.schema.params, state.params) : {};
 			} catch (e) {
 				it.error = e;
 				break;
 			}
 			it.config = { ...config };
-			const previous = request.previous;
 			if (previous?.[i] && !forceRefresh && previous[i].name === route$1.name) {
 				const url = (str) => str ? str.replace(/\/\/+/g, "/") : "/";
 				const prev = JSON.stringify({
@@ -450,7 +475,7 @@ var PageDescriptorProvider = class {
 			if (!route$1.resolve) continue;
 			try {
 				const props = await route$1.resolve?.({
-					...request,
+					...state,
 					...config,
 					...context
 				}) ?? {};
@@ -460,11 +485,8 @@ var PageDescriptorProvider = class {
 					...props
 				};
 			} catch (e) {
-				if (e instanceof Redirection) return this.createRedirectionLayer(e.page, {
-					pathname,
-					search
-				});
-				this.log.error(e);
+				if (e instanceof Redirection) return { redirect: e.redirect };
+				this.log.error("Page resolver has failed", e);
 				it.error = e;
 				break;
 			}
@@ -480,69 +502,58 @@ var PageDescriptorProvider = class {
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
 			if (localErrorHandler) {
-				const onErrorParent = request.onError;
-				request.onError = (error, context$1) => {
+				const onErrorParent = state.onError;
+				state.onError = (error, context$1) => {
 					const result = localErrorHandler(error, context$1);
 					if (result === void 0) return onErrorParent(error, context$1);
 					return result;
 				};
 			}
-			if (it.error) try {
-				let element$1 = await request.onError(it.error, request);
-				if (element$1 === void 0) throw it.error;
-				if (element$1 instanceof Redirection) return this.createRedirectionLayer(element$1.page, {
-					pathname,
-					search
+			if (!it.error) try {
+				const element = await this.createElement(it.route, {
+					...props,
+					...context
+				});
+				state.layers.push({
+					name: it.route.name,
+					props,
+					part: it.route.path,
+					config: it.config,
+					element: this.renderView(i + 1, path, element, it.route),
+					index: i + 1,
+					path,
+					route: it.route,
+					cache: it.cache
 				});
-				if (element$1 === null) element$1 = this.renderError(it.error);
-				layers.push({
+			} catch (e) {
+				it.error = e;
+			}
+			if (it.error) try {
+				let element = await state.onError(it.error, state);
+				if (element === void 0) throw it.error;
+				if (element instanceof Redirection) return { redirect: element.redirect };
+				if (element === null) element = this.renderError(it.error);
+				state.layers.push({
 					props,
 					error: it.error,
 					name: it.route.name,
 					part: it.route.path,
 					config: it.config,
-					element: this.renderView(i + 1, path, element$1, it.route),
+					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
-				});
+				if (e instanceof Redirection) return { redirect: e.redirect };
 				throw e;
 			}
-			const element = await this.createElement(it.route, {
-				...props,
-				...context
-			});
-			layers.push({
-				name: it.route.name,
-				props,
-				part: it.route.path,
-				config: it.config,
-				element: this.renderView(i + 1, path, element, it.route),
-				index: i + 1,
-				path,
-				route: it.route,
-				cache: it.cache
-			});
 		}
-		return {
-			layers,
-			pathname,
-			search
-		};
+		return { state };
 	}
-	createRedirectionLayer(href, context) {
-		return {
-			layers: [],
-			redirect: typeof href === "string" ? href : this.href(href),
-			pathname: context.pathname,
-			search: context.search
-		};
+	createRedirectionLayer(redirect) {
+		return { redirect };
 	}
 	getErrorHandler(route) {
 		if (route.errorHandler) return route.errorHandler;
@@ -668,223 +679,9 @@ 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;
-		}
-		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
-		});
-		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 + result.context.url.search !== url) {
-			this.pushState(result.context.url.pathname + result.context.url.search);
-			return;
-		}
-		this.pushState(url, options.replace);
-	}
-	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) {
-				for (const [key, value] of Object.entries(hydration)) if (key !== "layers" && key !== "links") this.alepha.state(key, value);
-			}
-			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink({
-				...link,
-				prefix: hydration.links.prefix
-			});
-			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({
+const envSchema$1 = t.object({
 	REACT_SERVER_DIST: t.string({ default: "public" }),
 	REACT_SERVER_PREFIX: t.string({ default: "" }),
 	REACT_SSR_ENABLED: t.optional(t.boolean()),
@@ -894,11 +691,11 @@ const envSchema = t.object({
 var ReactServerProvider = class {
 	log = $logger();
 	alepha = $inject(Alepha);
-	pageDescriptorProvider = $inject(PageDescriptorProvider);
+	pageApi = $inject(ReactPageProvider);
 	serverStaticProvider = $inject(ServerStaticProvider);
 	serverRouterProvider = $inject(ServerRouterProvider);
 	serverTimingProvider = $inject(ServerTimingProvider);
-	env = $env(envSchema);
+	env = $env(envSchema$1);
 	ROOT_DIV_REGEX = new RegExp(`<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`, "is");
 	onConfigure = $hook({
 		on: "configure",
@@ -945,7 +742,7 @@ var ReactServerProvider = class {
 		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()) {
+		for (const page of this.pageApi.getPages()) {
 			if (page.children?.length) continue;
 			this.log.debug(`+ ${page.match} -> ${page.name}`);
 			this.serverRouterProvider.createRoute({
@@ -979,25 +776,30 @@ var ReactServerProvider = class {
 	*/
 	createRenderFunction(name, withIndex = false) {
 		return async (options = {}) => {
-			const page = this.pageDescriptorProvider.page(name);
-			const url = new URL(this.pageDescriptorProvider.url(name, options));
-			const context = {
+			const page = this.pageApi.page(name);
+			const url = new URL(this.pageApi.url(name, options));
+			const entry = {
 				url,
 				params: options.params ?? {},
 				query: options.query ?? {},
-				head: {},
-				onError: () => null
+				onError: () => null,
+				layers: []
 			};
-			await this.alepha.emit("react:server:render:begin", { context });
-			const state = await this.pageDescriptorProvider.createLayers(page, context);
-			if (!withIndex && !options.html) return {
-				context,
-				html: renderToString(this.pageDescriptorProvider.root(state, context))
-			};
-			const html = this.renderToHtml(this.template ?? "", state, context, options.hydration);
+			const state = entry;
+			this.log.trace("Rendering", { url });
+			await this.alepha.emit("react:server:render:begin", { state });
+			const { redirect } = await this.pageApi.createLayers(page, state);
+			if (redirect) throw new AlephaError("Redirection is not supported in this context");
+			if (!withIndex && !options.html) {
+				this.alepha.state("react.router.state", state);
+				return {
+					state,
+					html: renderToString(this.pageApi.root(state))
+				};
+			}
+			const html = this.renderToHtml(this.template ?? "", state, options.hydration);
 			if (html instanceof Redirection) throw new Error("Redirection is not supported in this context");
 			const result = {
-				context,
 				state,
 				html
 			};
@@ -1005,89 +807,82 @@ var ReactServerProvider = class {
 			return result;
 		};
 	}
-	createHandler(page, templateLoader) {
+	createHandler(route, templateLoader) {
 		return async (serverRequest) => {
 			const { url, reply, query, params } = serverRequest;
 			const template = await templateLoader();
 			if (!template) throw new Error("Template not found");
-			this.log.trace("Rendering page", { name: page.name });
-			const context = {
+			this.log.trace("Rendering page", { name: route.name });
+			const entry = {
 				url,
 				params,
 				query,
-				head: {},
-				onError: () => null
+				onError: () => null,
+				layers: []
 			};
-			if (this.alepha.has(ServerLinksProvider)) {
-				const srv = this.alepha.inject(ServerLinksProvider);
-				const schema = apiLinksResponseSchema;
-				context.links = this.alepha.parse(schema, await srv.getLinks({
-					user: serverRequest.user,
-					authorization: serverRequest.headers.authorization
-				}));
-				this.alepha.context.set("links", context.links);
-			}
-			let target = page;
+			const state = entry;
+			if (this.alepha.has(ServerLinksProvider)) this.alepha.state("api", await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
+				user: serverRequest.user,
+				authorization: serverRequest.headers.authorization
+			}));
+			let target = route;
 			while (target) {
-				if (page.can && !page.can()) {
+				if (route.can && !route.can()) {
 					reply.status = 403;
 					reply.headers["content-type"] = "text/plain";
 					return "Forbidden";
 				}
 				target = target.parent;
 			}
-			await this.alepha.emit("react:transition:begin", {
-				request: serverRequest,
-				context
-			});
 			await this.alepha.emit("react:server:render:begin", {
 				request: serverRequest,
-				context
+				state
 			});
 			this.serverTimingProvider.beginTiming("createLayers");
-			const state = await this.pageDescriptorProvider.createLayers(page, context);
+			const { redirect } = await this.pageApi.createLayers(route, state);
 			this.serverTimingProvider.endTiming("createLayers");
-			if (state.redirect) return reply.redirect(state.redirect);
+			if (redirect) return reply.redirect(redirect);
 			reply.headers["content-type"] = "text/html";
 			reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
 			reply.headers.pragma = "no-cache";
 			reply.headers.expires = "0";
-			if (page.cache && serverRequest.user) delete context.links;
-			const html = this.renderToHtml(template, state, context);
+			const html = this.renderToHtml(template, state);
 			if (html instanceof Redirection) {
-				reply.redirect(typeof html.page === "string" ? html.page : this.pageDescriptorProvider.href(html.page));
+				reply.redirect(typeof html.redirect === "string" ? html.redirect : this.pageApi.href(html.redirect));
 				return;
 			}
 			const event = {
 				request: serverRequest,
-				context,
 				state,
 				html
 			};
 			await this.alepha.emit("react:server:render:end", event);
-			page.onServerResponse?.(serverRequest);
-			this.log.trace("Page rendered", { name: page.name });
+			route.onServerResponse?.(serverRequest);
+			this.log.trace("Page rendered", { name: route.name });
 			return event.html;
 		};
 	}
-	renderToHtml(template, state, context, hydration = true) {
-		const element = this.pageDescriptorProvider.root(state, context);
+	renderToHtml(template, state, hydration = true) {
+		const element = this.pageApi.root(state);
+		this.alepha.state("react.router.state", state);
 		this.serverTimingProvider.beginTiming("renderToString");
 		let app = "";
 		try {
 			app = renderToString(element);
 		} catch (error) {
-			this.log.error("Error during SSR", error);
-			const element$1 = context.onError(error, context);
+			this.log.error("renderToString has failed, fallback to error handler", error);
+			const element$1 = state.onError(error, state);
 			if (element$1 instanceof Redirection) return element$1;
 			app = renderToString(element$1);
+			this.log.debug("Error handled successfully with fallback");
 		}
 		this.serverTimingProvider.endTiming("renderToString");
 		const response = { html: template };
 		if (hydration) {
-			const { request, context: context$1,...rest } = this.alepha.context.als?.getStore() ?? {};
+			const { request, context,...store } = this.alepha.context.als?.getStore() ?? {};
 			const hydrationData = {
-				...rest,
+				...store,
+				"react.router.state": void 0,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error ? {
@@ -1102,7 +897,7 @@ var ReactServerProvider = class {
 					route: void 0
 				}))
 			};
-			const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}</script>`;
+			const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}<\/script>`;
 			this.fillTemplate(response, app, script);
 		}
 		return response.html;
@@ -1123,27 +918,260 @@ var ReactServerProvider = class {
 };
 
 //#endregion
-//#region src/hooks/RouterHookApi.ts
-var RouterHookApi = class {
-	constructor(pages, context, state, layer, pageApi, browser) {
-		this.pages = pages;
-		this.context = context;
-		this.state = state;
-		this.layer = layer;
-		this.pageApi = pageApi;
-		this.browser = browser;
+//#region src/providers/ReactBrowserRouterProvider.ts
+var ReactBrowserRouterProvider = class extends RouterProvider {
+	log = $logger();
+	alepha = $inject(Alepha);
+	pageApi = $inject(ReactPageProvider);
+	add(entry) {
+		this.pageApi.add(entry);
+	}
+	configure = $hook({
+		on: "configure",
+		handler: async () => {
+			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
+				path: page.match,
+				page
+			});
+		}
+	});
+	async transition(url, previous = []) {
+		const { pathname, search } = url;
+		const entry = {
+			url,
+			query: {},
+			params: {},
+			layers: [],
+			onError: () => null
+		};
+		const state = entry;
+		await this.alepha.emit("react:transition:begin", { state });
+		try {
+			const { route, params } = this.match(pathname);
+			const query = {};
+			if (search) for (const [key, value] of new URLSearchParams(search).entries()) query[key] = String(value);
+			state.query = query;
+			state.params = params ?? {};
+			if (isPageRoute(route)) {
+				const { redirect } = await this.pageApi.createLayers(route.page, state, previous);
+				if (redirect) return redirect;
+			}
+			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 });
+		} catch (e) {
+			this.log.error("Transition has failed", e);
+			state.layers = [{
+				name: "error",
+				element: this.pageApi.renderError(e),
+				index: 0,
+				path: "/"
+			}];
+			await this.alepha.emit("react:transition:error", {
+				error: e,
+				state
+			});
+		}
+		if (previous) for (let i = 0; i < previous.length; i++) {
+			const layer = previous[i];
+			if (state.layers[i]?.name !== layer.name) this.pageApi.page(layer.name)?.onLeave?.();
+		}
+		await this.alepha.emit("react:transition:end", { state });
+		this.alepha.state("react.router.state", state);
+	}
+	root(state) {
+		return this.pageApi.root(state);
+	}
+};
+
+//#endregion
+//#region src/providers/ReactBrowserProvider.ts
+const envSchema = t.object({ REACT_ROOT_ID: t.string({ default: "root" }) });
+var ReactBrowserProvider = class {
+	env = $env(envSchema);
+	log = $logger();
+	client = $inject(LinkProvider);
+	alepha = $inject(Alepha);
+	router = $inject(ReactBrowserRouterProvider);
+	dateTimeProvider = $inject(DateTimeProvider);
+	root;
+	options = { scrollRestoration: "top" };
+	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;
+	}
+	transitioning;
+	get state() {
+		return this.alepha.state("react.router.state");
+	}
+	/**
+	* Accessor for Document DOM API.
+	*/
+	get document() {
+		return window.document;
+	}
+	/**
+	* Accessor for History DOM API.
+	*/
+	get history() {
+		return window.history;
+	}
+	/**
+	* Accessor for Location DOM API.
+	*/
+	get location() {
+		return window.location;
+	}
+	get base() {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") return "";
+		return base;
+	}
+	get url() {
+		const url = this.location.pathname + this.location.search;
+		if (this.base) return url.replace(this.base, "");
+		return url;
+	}
+	pushState(path, replace) {
+		const url = this.base + path;
+		if (replace) this.history.replaceState({}, "", url);
+		else this.history.pushState({}, "", url);
+	}
+	async invalidate(props) {
+		const previous = [];
+		this.log.trace("Invalidating layers");
+		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 = {}) {
+		this.log.trace(`Going to ${url}`, {
+			url,
+			options
+		});
+		await this.render({
+			url,
+			previous: options.force ? [] : this.state.layers
+		});
+		if (this.state.url.pathname + this.state.url.search !== url) {
+			this.pushState(this.state.url.pathname + this.state.url.search);
+			return;
+		}
+		this.pushState(url, options.replace);
+	}
+	async render(options = {}) {
+		const previous = options.previous ?? this.state.layers;
+		const url = options.url ?? this.url;
+		const start = this.dateTimeProvider.now();
+		this.transitioning = {
+			to: url,
+			from: this.state?.url.pathname
+		};
+		this.log.debug("Transitioning...", { to: url });
+		const redirect = await this.router.transition(new URL(`http://localhost${url}`), previous);
+		if (redirect) {
+			this.log.info("Redirecting to", { redirect });
+			return await this.render({ url: redirect });
+		}
+		const ms = this.dateTimeProvider.now().diff(start);
+		this.log.info(`Transition OK [${ms}ms]`, this.transitioning);
+		this.transitioning = void 0;
+	}
+	/**
+	* Get embedded layers from the server.
+	*/
+	getHydrationState() {
+		try {
+			if ("__ssr" in window && typeof window.__ssr === "object") return window.__ssr;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+	onTransitionEnd = $hook({
+		on: "react:transition:end",
+		handler: () => {
+			if (this.options.scrollRestoration === "top" && typeof window !== "undefined") {
+				this.log.trace("Restoring scroll position to top");
+				window.scrollTo(0, 0);
+			}
+		}
+	});
+	ready = $hook({
+		on: "ready",
+		handler: async () => {
+			const hydration = this.getHydrationState();
+			const previous = hydration?.layers ?? [];
+			if (hydration) {
+				for (const [key, value] of Object.entries(hydration)) if (key !== "layers") this.alepha.state(key, value);
+			}
+			await this.render({ previous });
+			const element = this.router.root(this.state);
+			if (hydration?.layers) {
+				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", () => {
+				if (this.base + this.state.url.pathname === this.location.pathname) return;
+				this.log.debug("Popstate event triggered - rendering new state", { url: this.location.pathname + this.location.search });
+				this.render();
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/services/ReactRouter.ts
+var ReactRouter = class {
+	alepha = $inject(Alepha);
+	pageApi = $inject(ReactPageProvider);
+	get state() {
+		return this.alepha.state("react.router.state");
+	}
+	get pages() {
+		return this.pageApi.getPages();
+	}
+	get browser() {
+		if (this.alepha.isBrowser()) return this.alepha.inject(ReactBrowserProvider);
+		return void 0;
 	}
 	path(name, config = {}) {
 		return this.pageApi.pathname(name, {
 			params: {
-				...this.context.params,
+				...this.state.params,
 				...config.params
 			},
 			query: config.query
 		});
 	}
 	getURL() {
-		if (!this.browser) return this.context.url;
+		if (!this.browser) return this.state.url;
 		return new URL(this.location.href);
 	}
 	get location() {
@@ -1154,11 +1182,11 @@ var RouterHookApi = class {
 		return this.state;
 	}
 	get pathname() {
-		return this.state.pathname;
+		return this.state.url.pathname;
 	}
 	get query() {
 		const query = {};
-		for (const [key, value] of new URLSearchParams(this.state.search).entries()) query[key] = String(value);
+		for (const [key, value] of new URLSearchParams(this.state.url.search).entries()) query[key] = String(value);
 		return query;
 	}
 	async back() {
@@ -1170,17 +1198,6 @@ var RouterHookApi = class {
 	async invalidate(props) {
 		await this.browser?.invalidate(props);
 	}
-	/**
-	* Create a valid href for the given pathname.
-	*
-	* @param pathname
-	* @param layer
-	*/
-	createHref(pathname, layer = this.layer, options = {}) {
-		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, "/");
-	}
 	async go(path, options) {
 		for (const page of this.pages) if (page.name === path) {
 			await this.browser?.go(this.path(path, options), options);
@@ -1195,7 +1212,7 @@ var RouterHookApi = class {
 			break;
 		}
 		return {
-			href,
+			href: this.base(href),
 			onClick: (ev) => {
 				ev.stopPropagation();
 				ev.preventDefault();
@@ -1203,6 +1220,11 @@ var RouterHookApi = class {
 			}
 		};
 	}
+	base(path) {
+		const base = import.meta.env?.BASE_URL;
+		if (!base || base === "/") return path;
+		return base + path;
+	}
 	/**
 	* Set query params.
 	*
@@ -1218,17 +1240,35 @@ var RouterHookApi = class {
 	}
 };
 
+//#endregion
+//#region src/hooks/useInject.ts
+/**
+* Hook to inject a service instance.
+* It's a wrapper of `useAlepha().inject(service)` with a memoization.
+*/
+const useInject = (service) => {
+	const alepha = useAlepha();
+	return useMemo(() => alepha.inject(service), []);
+};
+
 //#endregion
 //#region src/hooks/useRouter.ts
+/**
+* Use this hook to access the React Router instance.
+*
+* You can add a type parameter to specify the type of your application.
+* This will allow you to use the router in a typesafe way.
+*
+* @example
+* class App {
+*   home = $page();
+* }
+*
+* const router = useRouter<App>();
+* router.go("home"); // typesafe
+*/
 const useRouter = () => {
-	const alepha = useAlepha();
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
-	const pages = useMemo(() => {
-		return alepha.inject(PageDescriptorProvider).getPages();
-	}, []);
-	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, alepha.inject(PageDescriptorProvider), alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : void 0), [layer]);
+	return useInject(ReactRouter);
 };
 
 //#endregion
@@ -1244,46 +1284,6 @@ const Link = (props) => {
 };
 var Link_default = Link;
 
-//#endregion
-//#region src/hooks/useActive.ts
-const useActive = (path) => {
-	const router = useRouter();
-	const ctx = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
-	const [current, setCurrent] = useState(ctx.state.pathname);
-	const href = useMemo(() => router.createHref(path ?? "", layer), [path, layer]);
-	const [isPending, setPending] = useState(false);
-	const isActive = current === href || current === `${href}/` || `${current}/` === href;
-	useRouterEvents({ onEnd: ({ state }) => {
-		path && setCurrent(state.pathname);
-	} }, [path]);
-	return {
-		isPending,
-		isActive,
-		anchorProps: {
-			href,
-			onClick: (ev) => {
-				ev?.stopPropagation();
-				ev?.preventDefault();
-				if (isActive) return;
-				if (isPending) return;
-				setPending(true);
-				router.go(href).then(() => {
-					setPending(false);
-				});
-			}
-		}
-	};
-};
-
-//#endregion
-//#region src/hooks/useInject.ts
-const useInject = (service) => {
-	const alepha = useAlepha();
-	return useMemo(() => alepha.inject(service), []);
-};
-
 //#endregion
 //#region src/hooks/useStore.ts
 /**
@@ -1301,24 +1301,70 @@ const useStore = (key, defaultValue) => {
 			if (ev.key === key) setState(ev.value);
 		});
 	}, []);
-	if (!alepha.isBrowser()) {
-		const value = alepha.context.get(key);
-		if (value !== null) return [value, (_) => {}];
-	}
 	return [state, (value) => {
 		alepha.state(key, value);
 	}];
 };
 
+//#endregion
+//#region src/hooks/useRouterState.ts
+const useRouterState = () => {
+	const [state] = useStore("react.router.state");
+	if (!state) throw new AlephaError("Missing react router state");
+	return state;
+};
+
+//#endregion
+//#region src/hooks/useActive.ts
+const useActive = (args) => {
+	const router = useRouter();
+	const [isPending, setPending] = useState(false);
+	const state = useRouterState();
+	const current = state.url.pathname;
+	const options = typeof args === "string" ? { href: args } : {
+		...args,
+		href: args.href
+	};
+	const href = options.href;
+	let isActive = current === href || current === `${href}/` || `${current}/` === href;
+	if (options.startWith && !isActive) isActive = current.startsWith(href);
+	return {
+		isPending,
+		isActive,
+		anchorProps: {
+			href: router.base(href),
+			onClick: async (ev) => {
+				ev?.stopPropagation();
+				ev?.preventDefault();
+				if (isActive) return;
+				if (isPending) return;
+				setPending(true);
+				try {
+					await router.go(href);
+				} finally {
+					setPending(false);
+				}
+			}
+		}
+	};
+};
+
 //#endregion
 //#region src/hooks/useClient.ts
-const useClient = (_scope) => {
-	useStore("user");
-	return useInject(LinkProvider).client();
+/**
+* Hook to get a virtual client for the specified scope.
+*
+* It's the React-hook version of `$client()`, from `AlephaServerLinks` module.
+*/
+const useClient = (scope) => {
+	return useInject(LinkProvider).client(scope);
 };
 
 //#endregion
 //#region src/hooks/useQueryParams.ts
+/**
+* Not well tested. Use with caution.
+*/
 const useQueryParams = (schema, options = {}) => {
 	const alepha = useAlepha();
 	const key = options.key ?? "q";
@@ -1349,29 +1395,17 @@ const decode = (alepha, schema, data) => {
 	}
 };
 
-//#endregion
-//#region src/hooks/useRouterState.ts
-const useRouterState = () => {
-	const router = useContext(RouterContext);
-	const layer = useContext(RouterLayerContext);
-	if (!router || !layer) throw new Error("useRouterState must be used within a RouterContext.Provider");
-	const [state, setState] = useState(router.state);
-	useRouterEvents({ onEnd: ({ state: state$1 }) => setState({ ...state$1 }) });
-	return state;
-};
-
 //#endregion
 //#region src/hooks/useSchema.ts
 const useSchema = (action) => {
 	const name = action.name;
 	const alepha = useAlepha();
 	const httpClient = useInject(HttpClient);
-	const linkProvider = useInject(LinkProvider);
 	const [schema, setSchema] = useState(ssrSchemaLoading(alepha, name));
 	useEffect(() => {
 		if (!schema.loading) return;
 		const opts = { cache: true };
-		httpClient.fetch(`${linkProvider.URL_LINKS}/${name}/schema`, {}, opts).then((it) => setSchema(it.data));
+		httpClient.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, opts).then((it) => setSchema(it.data));
 	}, [name]);
 	return schema;
 };
@@ -1380,10 +1414,10 @@ const useSchema = (action) => {
 */
 const ssrSchemaLoading = (alepha, name) => {
 	if (!alepha.isBrowser()) {
-		const links = alepha.context.get("links")?.links ?? [];
-		const can = links.find((it) => it.name === name);
+		const linkProvider = alepha.inject(LinkProvider);
+		const can = linkProvider.getServerLinks().find((link) => link.name === name);
 		if (can) {
-			const schema$1 = alepha.inject(LinkProvider).links?.find((it) => it.name === name)?.schema;
+			const schema$1 = linkProvider.links.find((it) => it.name === name)?.schema;
 			if (schema$1) {
 				can.schema = schema$1;
 				return schema$1;
@@ -1391,7 +1425,7 @@ const ssrSchemaLoading = (alepha, name) => {
 		}
 		return { loading: true };
 	}
-	const schema = alepha.inject(LinkProvider).links?.find((it) => it.name === name)?.schema;
+	const schema = alepha.inject(LinkProvider).links.find((it) => it.name === name)?.schema;
 	if (schema) return schema;
 	return { loading: true };
 };
@@ -1413,12 +1447,12 @@ const AlephaReact = $module({
 	descriptors: [$page],
 	services: [
 		ReactServerProvider,
-		PageDescriptorProvider,
-		ReactBrowserProvider
+		ReactPageProvider,
+		ReactRouter
 	],
-	register: (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with(ReactServerProvider).with(PageDescriptorProvider)
+	register: (alepha) => alepha.with(AlephaServer).with(AlephaServerCache).with(AlephaServerLinks).with(ReactServerProvider).with(ReactPageProvider).with(ReactRouter)
 });
 
 //#endregion
-export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, PageDescriptorProvider, ReactBrowserProvider, ReactServerProvider, Redirection, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
+export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, ReactBrowserProvider, ReactPageProvider, ReactRouter, ReactServerProvider, Redirection, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.js.map