@alepha/react 0.9.0 → 0.9.2

package/dist/index.cjs

@@ -74,23 +74,11 @@ const ClientOnly = (props) => {
 };
 var ClientOnly_default = ClientOnly;
 
-//#endregion
-//#region src/contexts/RouterContext.ts
-const RouterContext = (0, react.createContext)(void 0);
-
-//#endregion
-//#region src/hooks/useAlepha.ts
-const useAlepha = () => {
-	const routerContext = (0, react.useContext)(RouterContext);
-	if (!routerContext) throw new Error("useAlepha must be used within a RouterProvider");
-	return routerContext.alepha;
-};
-
 //#endregion
 //#region src/components/ErrorViewer.tsx
-const ErrorViewer = ({ error }) => {
+const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = (0, react.useState)(false);
-	const isProduction = useAlepha().isProduction();
+	const isProduction = alepha.isProduction();
 	if (isProduction) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorViewerProduction, {});
 	const stackLines = error.stack?.split("\n") ?? [];
 	const previewLines = stackLines.slice(0, 5);
@@ -234,24 +222,39 @@ const ErrorViewerProduction = () => {
 	});
 };
 
+//#endregion
+//#region src/contexts/RouterContext.ts
+const RouterContext = (0, react.createContext)(void 0);
+
 //#endregion
 //#region src/contexts/RouterLayerContext.ts
 const RouterLayerContext = (0, react.createContext)(void 0);
 
+//#endregion
+//#region src/contexts/AlephaContext.ts
+const AlephaContext = (0, react.createContext)(void 0);
+
+//#endregion
+//#region src/hooks/useAlepha.ts
+const useAlepha = () => {
+	const alepha = (0, react.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 = (0, react.useContext)(RouterContext);
-	if (!ctx) throw new Error("useRouter must be used within a RouterProvider");
+	const alepha = useAlepha();
 	(0, react.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();
 		};
@@ -391,11 +394,10 @@ var PageDescriptorProvider = class {
 		return new URL(url.replace(/\/\/+/g, "/") || "/", options.base ?? `http://localhost`);
 	}
 	root(state, context) {
-		const root = (0, react.createElement)(RouterContext.Provider, { value: {
-			alepha: this.alepha,
+		const root = (0, react.createElement)(AlephaContext.Provider, { value: this.alepha }, (0, react.createElement)(RouterContext.Provider, { value: {
 			state,
 			context
-		} }, (0, react.createElement)(NestedView_default, {}, state.layers[0]?.element));
+		} }, (0, react.createElement)(NestedView_default, {}, state.layers[0]?.element)));
 		if (this.env.REACT_STRICT_MODE) return (0, react.createElement)(react.StrictMode, {}, root);
 		return root;
 	}
@@ -541,7 +543,10 @@ var PageDescriptorProvider = class {
 		return void 0;
 	}
 	renderError(error) {
-		return (0, react.createElement)(ErrorViewer_default, { error });
+		return (0, react.createElement)(ErrorViewer_default, {
+			error,
+			alepha: this.alepha
+		});
 	}
 	renderEmptyView() {
 		return (0, react.createElement)(NestedView_default, {});
@@ -834,7 +839,7 @@ var ReactBrowserProvider = class {
 				hydration
 			});
 			window.addEventListener("popstate", () => {
-				if (this.state.pathname === location.pathname) return;
+				if (this.state.pathname === this.url) return;
 				this.render();
 			});
 		}
@@ -847,7 +852,8 @@ const envSchema = __alepha_core.t.object({
 	REACT_SERVER_DIST: __alepha_core.t.string({ default: "public" }),
 	REACT_SERVER_PREFIX: __alepha_core.t.string({ default: "" }),
 	REACT_SSR_ENABLED: __alepha_core.t.optional(__alepha_core.t.boolean()),
-	REACT_ROOT_ID: __alepha_core.t.string({ default: "root" })
+	REACT_ROOT_ID: __alepha_core.t.string({ default: "root" }),
+	REACT_SERVER_TEMPLATE: __alepha_core.t.optional(__alepha_core.t.string({ size: "rich" }))
 });
 var ReactServerProvider = class {
 	log = (0, __alepha_core.$logger)();
@@ -900,7 +906,7 @@ var ReactServerProvider = class {
 		}
 	});
 	get template() {
-		return this.alepha.state("react.server.template") ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
+		return this.alepha.env.REACT_SERVER_TEMPLATE ?? "<!DOCTYPE html><html lang='en'><head></head><body></body></html>";
 	}
 	async registerPages(templateLoader) {
 		for (const page of this.pageDescriptorProvider.getPages()) {
@@ -1154,13 +1160,14 @@ var RouterHookApi = class {
 //#endregion
 //#region src/hooks/useRouter.ts
 const useRouter = () => {
+	const alepha = useAlepha();
 	const ctx = (0, react.useContext)(RouterContext);
 	const layer = (0, react.useContext)(RouterLayerContext);
 	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
 	const pages = (0, react.useMemo)(() => {
-		return ctx.alepha.inject(PageDescriptorProvider).getPages();
+		return alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
-	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, ctx.alepha.isBrowser() ? ctx.alepha.inject(ReactBrowserProvider) : void 0), [layer]);
+	return (0, react.useMemo)(() => new RouterHookApi(pages, ctx.context, ctx.state, layer, alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : void 0), [layer]);
 };
 
 //#endregion
@@ -1221,10 +1228,9 @@ const useActive = (path) => {
 
 //#endregion
 //#region src/hooks/useInject.ts
-const useInject = (clazz) => {
-	const ctx = (0, react.useContext)(RouterContext);
-	if (!ctx) throw new Error("useRouter must be used within a <RouterProvider>");
-	return (0, react.useMemo)(() => ctx.alepha.inject(clazz), []);
+const useInject = (service) => {
+	const alepha = useAlepha();
+	return (0, react.useMemo)(() => alepha.inject(service), []);
 };
 
 //#endregion
@@ -1236,21 +1242,20 @@ const useClient = (_scope) => {
 //#endregion
 //#region src/hooks/useQueryParams.ts
 const useQueryParams = (schema, options = {}) => {
-	const ctx = (0, react.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] = (0, react.useState)(decode(ctx.alepha, schema, router.query[key]));
+	const [queryParams, setQueryParams] = (0, react.useState)(decode(alepha, schema, router.query[key]));
 	(0, react.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)
 			};
 		});
 	}];
@@ -1269,14 +1274,73 @@ const decode = (alepha, schema, data) => {
 //#endregion
 //#region src/hooks/useRouterState.ts
 const useRouterState = () => {
-	const ctx = (0, react.useContext)(RouterContext);
+	const router = (0, react.useContext)(RouterContext);
 	const layer = (0, react.useContext)(RouterLayerContext);
-	if (!ctx || !layer) throw new Error("useRouter must be used within a RouterProvider");
-	const [state, setState] = (0, react.useState)(ctx.state);
+	if (!router || !layer) throw new Error("useRouterState must be used within a RouterContext.Provider");
+	const [state, setState] = (0, react.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(__alepha_server.HttpClient);
+	const linkProvider = useInject(__alepha_server_links.LinkProvider);
+	const [schema, setSchema] = (0, react.useState)(ssrSchemaLoading(alepha, name));
+	(0, react.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(__alepha_server_links.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(__alepha_server_links.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] = (0, react.useState)(alepha.state(key));
+	(0, react.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
 /**
@@ -1302,6 +1366,7 @@ const AlephaReact = (0, __alepha_core.$module)({
 
 //#endregion
 exports.$page = $page;
+exports.AlephaContext = AlephaContext;
 exports.AlephaReact = AlephaReact;
 exports.ClientOnly = ClientOnly_default;
 exports.ErrorBoundary = ErrorBoundary_default;
@@ -1317,6 +1382,7 @@ exports.RouterContext = RouterContext;
 exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.isPageRoute = isPageRoute;
+exports.ssrSchemaLoading = ssrSchemaLoading;
 exports.useActive = useActive;
 exports.useAlepha = useAlepha;
 exports.useClient = useClient;
@@ -1325,4 +1391,6 @@ exports.useQueryParams = useQueryParams;
 exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
 exports.useRouterState = useRouterState;
+exports.useSchema = useSchema;
+exports.useStore = useStore;
 //# sourceMappingURL=index.cjs.map