@alepha/react 0.9.2 → 0.9.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, NotImplementedError, createDescriptor, t } from "@alepha/core";
+import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, createDescriptor, t } from "@alepha/core";
 import { AlephaServer, HttpClient, ServerRouterProvider, ServerTimingProvider, apiLinksResponseSchema } from "@alepha/server";
 import { AlephaServerCache } from "@alepha/server-cache";
 import { AlephaServerLinks, LinkProvider, ServerLinksProvider } from "@alepha/server-links";
@@ -18,6 +18,12 @@ const $page = (options) => {
 	return createDescriptor(PageDescriptor, options);
 };
 var PageDescriptor = class extends Descriptor {
+	onInit() {
+		if (this.options.static) this.options.cache ??= {
+			provider: "memory",
+			ttl: [1, "week"]
+		};
+	}
 	get name() {
 		return this.options.name ?? this.config.propertyKey;
 	}
@@ -26,7 +32,7 @@ var PageDescriptor = class extends Descriptor {
 	* Only valid for server-side rendering, it will throw an error if called on the client-side.
 	*/
 	async render(options) {
-		throw new NotImplementedError("");
+		throw new Error("render method is not implemented in this environment");
 	}
 };
 $page[KIND] = PageDescriptor;
@@ -80,7 +86,7 @@ const ErrorViewer = ({ error, alepha }) => {
 		heading: {
 			fontSize: "20px",
 			fontWeight: "bold",
-			marginBottom: "4px"
+			marginBottom: "10px"
 		},
 		name: {
 			fontSize: "16px",
@@ -297,13 +303,16 @@ const NestedView = (props) => {
 	const layer = useContext(RouterLayerContext);
 	const index = layer?.index ?? 0;
 	const [view, setView] = useState(app?.state.layers[index]?.element);
-	useRouterEvents({ onEnd: ({ state }) => {
+	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 element = view ?? props.children ?? null;
 	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
-		fallback: app.context.onError,
+		fallback: (error) => {
+			return app.context.onError?.(error, app.context);
+		},
 		children: element
 	});
 };
@@ -311,7 +320,7 @@ var NestedView_default = NestedView;
 
 //#endregion
 //#region src/components/NotFound.tsx
-function NotFoundPage() {
+function NotFoundPage(props) {
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			height: "100vh",
@@ -321,7 +330,8 @@ function NotFoundPage() {
 			alignItems: "center",
 			textAlign: "center",
 			fontFamily: "sans-serif",
-			padding: "1rem"
+			padding: "1rem",
+			...props.style
 		},
 		children: /* @__PURE__ */ jsx("h1", {
 			style: {
@@ -334,8 +344,8 @@ function NotFoundPage() {
 }
 
 //#endregion
-//#region src/errors/RedirectionError.ts
-var RedirectionError = class extends Error {
+//#region src/errors/Redirection.ts
+var Redirection = class extends Error {
 	page;
 	constructor(page) {
 		super("Redirection");
@@ -358,7 +368,7 @@ var PageDescriptorProvider = class {
 		for (const page of this.pages) if (page.name === name) return page;
 		throw new Error(`Page ${name} not found`);
 	}
-	url(name, options = {}) {
+	pathname(name, options = {}) {
 		const page = this.page(name);
 		if (!page) throw new Error(`Page ${name} not found`);
 		let url = page.path ?? "";
@@ -368,7 +378,14 @@ var PageDescriptorProvider = class {
 			parent = parent.parent;
 		}
 		url = this.compile(url, options.params ?? {});
-		return new URL(url.replace(/\/\/+/g, "/") || "/", options.base ?? `http://localhost`);
+		if (options.query) {
+			const query = new URLSearchParams(options.query);
+			if (query.toString()) url += `?${query.toString()}`;
+		}
+		return url.replace(/\/\/+/g, "/") || "/";
+	}
+	url(name, options = {}) {
+		return new URL(this.pathname(name, options), options.base ?? `http://localhost`);
 	}
 	root(state, context) {
 		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(RouterContext.Provider, { value: {
@@ -443,12 +460,10 @@ var PageDescriptorProvider = class {
 					...props
 				};
 			} catch (e) {
-				if (e instanceof RedirectionError) return {
-					layers: [],
-					redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+				if (e instanceof Redirection) return this.createRedirectionLayer(e.page, {
 					pathname,
 					search
-				};
+				});
 				this.log.error(e);
 				it.error = e;
 				break;
@@ -464,9 +479,21 @@ var PageDescriptorProvider = class {
 			acc += it.route.path ? this.compile(it.route.path, params) : "";
 			const path = acc.replace(/\/+/, "/");
 			const localErrorHandler = this.getErrorHandler(it.route);
-			if (localErrorHandler) request.onError = localErrorHandler;
-			if (it.error) {
-				let element$1 = await request.onError(it.error);
+			if (localErrorHandler) {
+				const onErrorParent = request.onError;
+				request.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 (element$1 === null) element$1 = this.renderError(it.error);
 				layers.push({
 					props,
@@ -480,6 +507,12 @@ var PageDescriptorProvider = class {
 					route: it.route
 				});
 				break;
+			} catch (e) {
+				if (e instanceof Redirection) return this.createRedirectionLayer(e.page, {
+					pathname,
+					search
+				});
+				throw e;
 			}
 			const element = await this.createElement(it.route, {
 				...props,
@@ -503,6 +536,14 @@ var PageDescriptorProvider = class {
 			search
 		};
 	}
+	createRedirectionLayer(href, context) {
+		return {
+			layers: [],
+			redirect: typeof href === "string" ? href : this.href(href),
+			pathname: context.pathname,
+			search: context.search
+		};
+	}
 	getErrorHandler(route) {
 		if (route.errorHandler) return route.errorHandler;
 		let parent = route.parent;
@@ -558,6 +599,7 @@ var PageDescriptorProvider = class {
 			let hasNotFoundHandler = false;
 			const pages = this.alepha.descriptors($page);
 			const hasParent = (it) => {
+				if (it.options.parent) return true;
 				for (const page of pages) {
 					const children = page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : [];
 					if (children.includes(it)) return true;
@@ -573,7 +615,7 @@ var PageDescriptorProvider = class {
 				name: "notFound",
 				cache: true,
 				component: NotFoundPage,
-				afterHandler: ({ reply }) => {
+				onServerResponse: ({ reply }) => {
 					reply.status = 404;
 				}
 			});
@@ -581,6 +623,12 @@ var PageDescriptorProvider = class {
 	});
 	map(pages, target) {
 		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
+		const getChildrenFromParent = (it) => {
+			const children$1 = [];
+			for (const page of pages) if (page.options.parent === it) children$1.push(page);
+			return children$1;
+		};
+		children.push(...getChildrenFromParent(target));
 		return {
 			...target.options,
 			name: target.name,
@@ -702,6 +750,10 @@ var BrowserRouterProvider = class extends RouterProvider {
 			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
@@ -776,15 +828,11 @@ var ReactBrowserProvider = class {
 	}
 	async go(url, options = {}) {
 		const result = await this.render({ url });
-		if (result.context.url.pathname !== url) {
-			this.pushState(result.context.url.pathname);
+		if (result.context.url.pathname + result.context.url.search !== url) {
+			this.pushState(result.context.url.pathname + result.context.url.search);
 			return;
 		}
-		if (options.replace) {
-			this.pushState(url);
-			return;
-		}
-		this.pushState(url);
+		this.pushState(url, options.replace);
 	}
 	async render(options = {}) {
 		const previous = options.previous ?? this.state.layers;
@@ -813,7 +861,13 @@ var ReactBrowserProvider = class {
 		handler: async () => {
 			const hydration = this.getHydrationState();
 			const previous = hydration?.layers ?? [];
-			if (hydration?.links) for (const link of hydration.links.links) this.client.pushLink(link);
+			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,
@@ -941,6 +995,7 @@ var ReactServerProvider = class {
 				html: renderToString(this.pageDescriptorProvider.root(state, context))
 			};
 			const html = this.renderToHtml(this.template ?? "", state, context, options.hydration);
+			if (html instanceof Redirection) throw new Error("Redirection is not supported in this context");
 			const result = {
 				context,
 				state,
@@ -955,6 +1010,7 @@ var ReactServerProvider = class {
 			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 = {
 				url,
 				params,
@@ -980,6 +1036,10 @@ var ReactServerProvider = class {
 				}
 				target = target.parent;
 			}
+			await this.alepha.emit("react:transition:begin", {
+				request: serverRequest,
+				context
+			});
 			await this.alepha.emit("react:server:render:begin", {
 				request: serverRequest,
 				context
@@ -994,14 +1054,20 @@ var ReactServerProvider = class {
 			reply.headers.expires = "0";
 			if (page.cache && serverRequest.user) delete context.links;
 			const html = this.renderToHtml(template, state, context);
-			await this.alepha.emit("react:server:render:end", {
+			if (html instanceof Redirection) {
+				reply.redirect(typeof html.page === "string" ? html.page : this.pageDescriptorProvider.href(html.page));
+				return;
+			}
+			const event = {
 				request: serverRequest,
 				context,
 				state,
 				html
-			});
-			page.afterHandler?.(serverRequest);
-			return html;
+			};
+			await this.alepha.emit("react:server:render:end", event);
+			page.onServerResponse?.(serverRequest);
+			this.log.trace("Page rendered", { name: page.name });
+			return event.html;
 		};
 	}
 	renderToHtml(template, state, context, hydration = true) {
@@ -1012,20 +1078,23 @@ var ReactServerProvider = class {
 			app = renderToString(element);
 		} catch (error) {
 			this.log.error("Error during SSR", error);
-			app = renderToString(context.onError(error));
+			const element$1 = context.onError(error, context);
+			if (element$1 instanceof Redirection) return element$1;
+			app = renderToString(element$1);
 		}
 		this.serverTimingProvider.endTiming("renderToString");
 		const response = { html: template };
 		if (hydration) {
+			const { request, context: context$1,...rest } = this.alepha.context.als?.getStore() ?? {};
 			const hydrationData = {
-				links: context.links,
+				...rest,
 				layers: state.layers.map((it) => ({
 					...it,
 					error: it.error ? {
 						...it.error,
 						name: it.error.name,
 						message: it.error.message,
-						stack: it.error.stack
+						stack: !this.alepha.isProduction() ? it.error.stack : void 0
 					} : void 0,
 					index: void 0,
 					path: void 0,
@@ -1045,24 +1114,34 @@ var ReactServerProvider = class {
 		else {
 			const bodyOpenTag = /<body([^>]*)>/i;
 			if (bodyOpenTag.test(response.html)) response.html = response.html.replace(bodyOpenTag, (match) => {
-				return `${match}\n<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
+				return `${match}<div id="${this.env.REACT_ROOT_ID}">${app}</div>`;
 			});
 		}
 		const bodyCloseTagRegex = /<\/body>/i;
-		if (bodyCloseTagRegex.test(response.html)) response.html = response.html.replace(bodyCloseTagRegex, `${script}\n</body>`);
+		if (bodyCloseTagRegex.test(response.html)) response.html = response.html.replace(bodyCloseTagRegex, `${script}</body>`);
 	}
 };
 
 //#endregion
 //#region src/hooks/RouterHookApi.ts
 var RouterHookApi = class {
-	constructor(pages, context, state, layer, browser) {
+	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;
 	}
+	path(name, config = {}) {
+		return this.pageApi.pathname(name, {
+			params: {
+				...this.context.params,
+				...config.params
+			},
+			query: config.query
+		});
+	}
 	getURL() {
 		if (!this.browser) return this.context.url;
 		return new URL(this.location.href);
@@ -1104,23 +1183,23 @@ var RouterHookApi = class {
 	}
 	async go(path, options) {
 		for (const page of this.pages) if (page.name === path) {
-			path = page.path ?? "";
-			break;
+			await this.browser?.go(this.path(path, options), options);
+			return;
 		}
-		await this.browser?.go(this.createHref(path, this.layer, options), options);
+		await this.browser?.go(path, options);
 	}
 	anchor(path, options = {}) {
+		let href = path;
 		for (const page of this.pages) if (page.name === path) {
-			path = page.path ?? "";
+			href = this.path(path, options);
 			break;
 		}
-		const href = this.createHref(path, this.layer, options);
 		return {
 			href,
 			onClick: (ev) => {
 				ev.stopPropagation();
 				ev.preventDefault();
-				this.go(path, options).catch(console.error);
+				this.go(href, options).catch(console.error);
 			}
 		};
 	}
@@ -1149,27 +1228,18 @@ const useRouter = () => {
 	const pages = useMemo(() => {
 		return alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : void 0), [layer]);
+	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, alepha.inject(PageDescriptorProvider), alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
 //#region src/components/Link.tsx
 const Link = (props) => {
-	React.useContext(RouterContext);
 	const router = useRouter();
-	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;
-	if (can && !can()) return null;
-	const name = typeof props.to === "string" ? void 0 : props.to.options.name;
-	const anchorProps = {
-		...props,
-		to: void 0
-	};
+	const { to,...anchorProps } = props;
 	return /* @__PURE__ */ jsx("a", {
 		...router.anchor(to),
 		...anchorProps,
-		children: props.children ?? name
+		children: props.children
 	});
 };
 var Link_default = Link;
@@ -1181,22 +1251,21 @@ const useActive = (path) => {
 	const ctx = useContext(RouterContext);
 	const layer = useContext(RouterLayerContext);
 	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
-	let name;
-	if (typeof path === "object" && path.options.name) name = path.options.name;
 	const [current, setCurrent] = useState(ctx.state.pathname);
-	const href = useMemo(() => router.createHref(path, layer), [path, layer]);
+	const href = useMemo(() => router.createHref(path ?? "", layer), [path, layer]);
 	const [isPending, setPending] = useState(false);
-	const isActive = current === href;
-	useRouterEvents({ onEnd: ({ state }) => setCurrent(state.pathname) });
+	const isActive = current === href || current === `${href}/` || `${current}/` === href;
+	useRouterEvents({ onEnd: ({ state }) => {
+		path && setCurrent(state.pathname);
+	} }, [path]);
 	return {
-		name,
 		isPending,
 		isActive,
 		anchorProps: {
 			href,
 			onClick: (ev) => {
-				ev.stopPropagation();
-				ev.preventDefault();
+				ev?.stopPropagation();
+				ev?.preventDefault();
 				if (isActive) return;
 				if (isPending) return;
 				setPending(true);
@@ -1215,9 +1284,36 @@ const useInject = (service) => {
 	return useMemo(() => alepha.inject(service), []);
 };
 
+//#endregion
+//#region src/hooks/useStore.ts
+/**
+* Hook to access and mutate the Alepha state.
+*/
+const useStore = (key, defaultValue) => {
+	const alepha = useAlepha();
+	useMemo(() => {
+		if (defaultValue != null && alepha.state(key) == null) alepha.state(key, defaultValue);
+	}, [defaultValue]);
+	const [state, setState] = useState(alepha.state(key));
+	useEffect(() => {
+		if (!alepha.isBrowser()) return;
+		return alepha.on("state:mutate", (ev) => {
+			if (ev.key === key) setState(ev.value);
+		});
+	}, []);
+	if (!alepha.isBrowser()) {
+		const value = alepha.context.get(key);
+		if (value !== null) return [value, (_) => {}];
+	}
+	return [state, (value) => {
+		alepha.state(key, value);
+	}];
+};
+
 //#endregion
 //#region src/hooks/useClient.ts
 const useClient = (_scope) => {
+	useStore("user");
 	return useInject(LinkProvider).client();
 };
 
@@ -1300,29 +1396,6 @@ const ssrSchemaLoading = (alepha, name) => {
 	return { loading: true };
 };
 
-//#endregion
-//#region src/hooks/useStore.ts
-/**
-* Hook to access and mutate the Alepha state.
-*/
-const useStore = (key) => {
-	const alepha = useAlepha();
-	const [state, setState] = useState(alepha.state(key));
-	useEffect(() => {
-		if (!alepha.isBrowser()) return;
-		return alepha.on("state:mutate", (ev) => {
-			if (ev.key === key) setState(ev.value);
-		});
-	}, []);
-	if (!alepha.isBrowser()) {
-		const value = alepha.context.get(key);
-		if (value !== null) return [value, (_) => {}];
-	}
-	return [state, (value) => {
-		alepha.state(key, value);
-	}];
-};
-
 //#endregion
 //#region src/index.ts
 /**
@@ -1347,5 +1420,5 @@ const AlephaReact = $module({
 });
 
 //#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, RedirectionError, 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, 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 };
 //# sourceMappingURL=index.js.map