@alepha/react 0.9.0 → 0.9.2

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 { 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";
@@ -71,23 +71,11 @@ const ClientOnly = (props) => {
 };
 var ClientOnly_default = ClientOnly;
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = createContext(void 0);
-
-//#endregion
-//#region src/hooks/useAlepha.ts
-const useAlepha = () => {
-	const routerContext = useContext(RouterContext);
-	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
-	return routerContext.alepha;
-};
-
 //#endregion
 //#region src/components/ErrorViewer.tsx
-const ErrorViewer = ({ error }) => {
+const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = useState(false);
-	const isProduction = useAlepha().isProduction();
+	const isProduction = alepha.isProduction();
 	if (isProduction) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
 	const stackLines = error.stack?.split("\n") ?? [];
 	const previewLines = stackLines.slice(0, 5);
@@ -231,24 +219,39 @@ 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/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();
 		};
@@ -364,11 +367,10 @@ var PageDescriptorProvider = class {
 		return new URL(url.replace(/\/\/+/g, "/") || "/", 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;
 	}
@@ -514,7 +516,10 @@ var PageDescriptorProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return createElement(ErrorViewer_default, { error });
+		return createElement(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
 	}
 	renderEmptyView() {
 		return createElement(NestedView_default, {});
@@ -812,7 +817,7 @@ var ReactBrowserProvider = class {
 				hydration
 			});
 			window.addEventListener("popstate", () => {
-				if (this.state.pathname === location.pathname) return;
+				if (this.state.pathname === this.url) return;
 				this.render();
 			});
 		}
@@ -948,13 +953,14 @@ 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.isBrowser() ? alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -1015,10 +1021,9 @@ const useActive = (path) => {
 
 //#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), []);
+const useInject = (service) => {
+	const alepha = useAlepha();
+	return useMemo(() => alepha.inject(service), []);
 };
 
 //#endregion
@@ -1030,21 +1035,20 @@ const useClient = (_scope) => {
 //#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)
 			};
 		});
 	}];
@@ -1063,14 +1067,73 @@ 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/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.browser.ts
 const AlephaReact = $module({
@@ -1086,5 +1149,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, RedirectionError, RouterContext, RouterHookApi, RouterLayerContext, isPageRoute, ssrSchemaLoading, useActive, useAlepha, useClient, useInject, useQueryParams, useRouter, useRouterEvents, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.browser.js.map