@alepha/react 0.9.1 → 0.9.3

package/README.md

@@ -15,6 +15,7 @@ Alternatively, you can install it individually:
 ```bash
 npm install @alepha/core @alepha/react
 ```
+
 ## Module
 
 Provides full-stack React development with declarative routing, server-side rendering, and client-side hydration.
@@ -30,3 +31,9 @@ type safety and schema validation for route parameters and data.
 #### $page()
 
 Main descriptor for defining a React route in the application.
+
+### Hooks
+
+#### useStore()
+
+Hook to access and mutate the Alepha state.

package/dist/index.browser.js

@@ -1,5 +1,5 @@
-import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, NotImplementedError, createDescriptor, t } from "@alepha/core";
-import { AlephaServer } from "@alepha/server";
+import { $env, $hook, $inject, $logger, $module, Alepha, Descriptor, KIND, createDescriptor, t } from "@alepha/core";
+import { AlephaServer, HttpClient } from "@alepha/server";
 import { AlephaServerLinks, LinkProvider } from "@alepha/server-links";
 import { RouterProvider } from "@alepha/router";
 import React, { StrictMode, createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
@@ -14,6 +14,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;
 	}
@@ -22,14 +28,14 @@ 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;
 
 //#endregion
 //#region src/components/NotFound.tsx
-function NotFoundPage() {
+function NotFoundPage(props) {
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			height: "100vh",
@@ -39,7 +45,8 @@ function NotFoundPage() {
 			alignItems: "center",
 			textAlign: "center",
 			fontFamily: "sans-serif",
-			padding: "1rem"
+			padding: "1rem",
+			...props.style
 		},
 		children: /* @__PURE__ */ jsx("h1", {
 			style: {
@@ -100,7 +107,7 @@ const ErrorViewer = ({ error, alepha }) => {
 		heading: {
 			fontSize: "20px",
 			fontWeight: "bold",
-			marginBottom: "4px"
+			marginBottom: "10px"
 		},
 		name: {
 			fontSize: "16px",
@@ -227,20 +234,31 @@ const RouterContext = createContext(void 0);
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = createContext(void 0);
 
+//#endregion
+//#region src/contexts/AlephaContext.ts
+const AlephaContext = createContext(void 0);
+
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const alepha = useContext(AlephaContext);
+	if (!alepha) throw new Error("useAlepha must be used within an AlephaContext.Provider");
+	return alepha;
+};
+
 //#endregion
 //#region src/hooks/useRouterEvents.ts
 const useRouterEvents = (opts = {}, deps = []) => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) throw new Error("useRouter must be used within a RouterProvider");
+	const alepha = useAlepha();
 	useEffect(() => {
-		if (!ctx.alepha.isBrowser()) return;
+		if (!alepha.isBrowser()) return;
 		const subs = [];
 		const onBegin = opts.onBegin;
 		const onEnd = opts.onEnd;
 		const onError = opts.onError;
-		if (onBegin) subs.push(ctx.alepha.on("react:transition:begin", { callback: onBegin }));
-		if (onEnd) subs.push(ctx.alepha.on("react:transition:end", { callback: onEnd }));
-		if (onError) subs.push(ctx.alepha.on("react:transition:error", { callback: onError }));
+		if (onBegin) subs.push(alepha.on("react:transition:begin", { callback: onBegin }));
+		if (onEnd) subs.push(alepha.on("react:transition:end", { callback: onEnd }));
+		if (onError) subs.push(alepha.on("react:transition:error", { callback: onError }));
 		return () => {
 			for (const sub of subs) sub();
 		};
@@ -306,21 +324,24 @@ 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
 	});
 };
 var NestedView_default = NestedView;
 
 //#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");
@@ -343,7 +364,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 ?? "";
@@ -353,14 +374,20 @@ 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(RouterContext.Provider, { value: {
-			alepha: this.alepha,
+		const root = createElement(AlephaContext.Provider, { value: this.alepha }, createElement(RouterContext.Provider, { value: {
 			state,
 			context
-		} }, createElement(NestedView_default, {}, state.layers[0]?.element));
+		} }, createElement(NestedView_default, {}, state.layers[0]?.element)));
 		if (this.env.REACT_STRICT_MODE) return createElement(StrictMode, {}, root);
 		return root;
 	}
@@ -429,12 +456,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;
@@ -450,9 +475,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,
@@ -466,6 +503,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,
@@ -489,6 +532,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;
@@ -544,6 +595,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;
@@ -559,7 +611,7 @@ var PageDescriptorProvider = class {
 				name: "notFound",
 				cache: true,
 				component: NotFoundPage,
-				afterHandler: ({ reply }) => {
+				onServerResponse: ({ reply }) => {
 					reply.status = 404;
 				}
 			});
@@ -567,6 +619,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,
@@ -688,6 +746,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
@@ -762,15 +824,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);
-			return;
-		}
-		if (options.replace) {
-			this.pushState(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);
+		this.pushState(url, options.replace);
 	}
 	async render(options = {}) {
 		const previous = options.previous ?? this.state.layers;
@@ -799,7 +857,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,
@@ -857,13 +921,23 @@ var ReactBrowserRenderer = class {
 //#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);
@@ -905,23 +979,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);
 			}
 		};
 	}
@@ -943,33 +1017,25 @@ var RouterHookApi = class {
 //#endregion
 //#region src/hooks/useRouter.ts
 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 ctx.alepha.inject(PageDescriptorProvider).getPages();
+		return alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return useMemo(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.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;
@@ -981,22 +1047,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);
@@ -1009,45 +1074,62 @@ 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;
+//#region src/hooks/useInject.ts
+const useInject = (service) => {
+	const alepha = useAlepha();
+	return useMemo(() => alepha.inject(service), []);
 };
 
 //#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.inject(clazz), []);
+//#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();
 };
 
 //#endregion
 //#region src/hooks/useQueryParams.ts
 const useQueryParams = (schema, options = {}) => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) throw new Error("useQueryParams must be used within a RouterProvider");
+	const alepha = useAlepha();
 	const key = options.key ?? "q";
 	const router = useRouter();
 	const querystring = router.query[key];
-	const [queryParams, setQueryParams] = useState(decode(ctx.alepha, schema, router.query[key]));
+	const [queryParams, setQueryParams] = useState(decode(alepha, schema, router.query[key]));
 	useEffect(() => {
-		setQueryParams(decode(ctx.alepha, schema, querystring));
+		setQueryParams(decode(alepha, schema, querystring));
 	}, [querystring]);
 	return [queryParams, (queryParams$1) => {
 		setQueryParams(queryParams$1);
 		router.setQueryParams((data) => {
 			return {
 				...data,
-				[key]: encode(ctx.alepha, schema, queryParams$1)
+				[key]: encode(alepha, schema, queryParams$1)
 			};
 		});
 	}];
@@ -1066,14 +1148,50 @@ const decode = (alepha, schema, data) => {
 //#endregion
 //#region src/hooks/useRouterState.ts
 const useRouterState = () => {
-	const ctx = useContext(RouterContext);
+	const router = useContext(RouterContext);
 	const layer = useContext(RouterLayerContext);
-	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
-	const [state, setState] = useState(ctx.state);
+	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));
+	}, [name]);
+	return schema;
+};
+/**
+* Get an action schema during server-side rendering (SSR) or client-side rendering (CSR).
+*/
+const ssrSchemaLoading = (alepha, name) => {
+	if (!alepha.isBrowser()) {
+		const links = alepha.context.get("links")?.links ?? [];
+		const can = links.find((it) => it.name === name);
+		if (can) {
+			const schema$1 = alepha.inject(LinkProvider).links?.find((it) => it.name === name)?.schema;
+			if (schema$1) {
+				can.schema = schema$1;
+				return schema$1;
+			}
+		}
+		return { loading: true };
+	}
+	const schema = alepha.inject(LinkProvider).links?.find((it) => it.name === name)?.schema;
+	if (schema) return schema;
+	return { loading: true };
+};
+
 //#endregion
 //#region src/index.browser.ts
 const AlephaReact = $module({
@@ -1089,5 +1207,5 @@ const AlephaReact = $module({
 });
 
 //#endregion
-export { $page, AlephaReact, BrowserRouterProvider, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, PageDescriptorProvider, ReactBrowserProvider, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState };
+export { $page, AlephaContext, AlephaReact, BrowserRouterProvider, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PageDescriptor, PageDescriptorProvider, ReactBrowserProvider, Redirection, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.browser.js.map