@alepha/react 0.9.0 → 0.9.2

package/src/hooks/useQueryParams.ts

@@ -1,6 +1,6 @@
 import type { Alepha, Static, TObject } from "@alepha/core";
-import { useContext, useEffect, useState } from "react";
-import { RouterContext } from "../contexts/RouterContext.ts";
+import { useEffect, useState } from "react";
+import { useAlepha } from "./useAlepha.ts";
 import { useRouter } from "./useRouter.ts";
 
 export interface UseQueryParamsHookOptions {
@@ -13,21 +13,18 @@ export const useQueryParams = <T extends TObject>(
 	schema: T,
 	options: UseQueryParamsHookOptions = {},
 ): [Static<T>, (data: Static<T>) => void] => {
-	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]),
+		decode(alepha, schema, router.query[key]),
 	);
 
 	useEffect(() => {
-		setQueryParams(decode(ctx.alepha, schema, querystring));
+		setQueryParams(decode(alepha, schema, querystring));
 	}, [querystring]);
 
 	return [
@@ -35,7 +32,7 @@ export const useQueryParams = <T extends TObject>(
 		(queryParams: Static<T>) => {
 			setQueryParams(queryParams);
 			router.setQueryParams((data) => {
-				return { ...data, [key]: encode(ctx.alepha, schema, queryParams) };
+				return { ...data, [key]: encode(alepha, schema, queryParams) };
 			});
 		},
 	];

package/src/hooks/useRouter.ts

@@ -4,8 +4,10 @@ import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import { PageDescriptorProvider } from "../providers/PageDescriptorProvider.ts";
 import { ReactBrowserProvider } from "../providers/ReactBrowserProvider.ts";
 import { RouterHookApi } from "./RouterHookApi.ts";
+import { useAlepha } from "./useAlepha.ts";
 
 export const useRouter = (): RouterHookApi => {
+	const alepha = useAlepha();
 	const ctx = useContext(RouterContext);
 	const layer = useContext(RouterLayerContext);
 	if (!ctx || !layer) {
@@ -13,7 +15,7 @@ export const useRouter = (): RouterHookApi => {
 	}
 
 	const pages = useMemo(() => {
-		return ctx.alepha.inject(PageDescriptorProvider).getPages();
+		return alepha.inject(PageDescriptorProvider).getPages();
 	}, []);
 
 	return useMemo(
@@ -23,9 +25,7 @@ export const useRouter = (): RouterHookApi => {
 				ctx.context,
 				ctx.state,
 				layer,
-				ctx.alepha.isBrowser()
-					? ctx.alepha.inject(ReactBrowserProvider)
-					: undefined,
+				alepha.isBrowser() ? alepha.inject(ReactBrowserProvider) : undefined,
 			),
 		[layer],
 	);

package/src/hooks/useRouterEvents.ts

@@ -1,6 +1,6 @@
-import { useContext, useEffect } from "react";
-import { RouterContext } from "../contexts/RouterContext.ts";
+import { useEffect } from "react";
 import type { RouterState } from "../providers/PageDescriptorProvider.ts";
+import { useAlepha } from "./useAlepha.ts";
 
 export const useRouterEvents = (
 	opts: {
@@ -10,13 +10,10 @@ export const useRouterEvents = (
 	} = {},
 	deps: any[] = [],
 ) => {
-	const ctx = useContext(RouterContext);
-	if (!ctx) {
-		throw new Error("useRouter must be used within a RouterProvider");
-	}
+	const alepha = useAlepha();
 
 	useEffect(() => {
-		if (!ctx.alepha.isBrowser()) {
+		if (!alepha.isBrowser()) {
 			return;
 		}
 
@@ -27,7 +24,7 @@ export const useRouterEvents = (
 
 		if (onBegin) {
 			subs.push(
-				ctx.alepha.on("react:transition:begin", {
+				alepha.on("react:transition:begin", {
 					callback: onBegin,
 				}),
 			);
@@ -35,7 +32,7 @@ export const useRouterEvents = (
 
 		if (onEnd) {
 			subs.push(
-				ctx.alepha.on("react:transition:end", {
+				alepha.on("react:transition:end", {
 					callback: onEnd,
 				}),
 			);
@@ -43,7 +40,7 @@ export const useRouterEvents = (
 
 		if (onError) {
 			subs.push(
-				ctx.alepha.on("react:transition:error", {
+				alepha.on("react:transition:error", {
 					callback: onError,
 				}),
 			);

package/src/hooks/useRouterState.ts

@@ -5,13 +5,15 @@ import type { RouterState } from "../providers/PageDescriptorProvider.ts";
 import { useRouterEvents } from "./useRouterEvents.ts";
 
 export const useRouterState = (): RouterState => {
-	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");
+	if (!router || !layer) {
+		throw new Error(
+			"useRouterState must be used within a RouterContext.Provider",
+		);
 	}
 
-	const [state, setState] = useState(ctx.state);
+	const [state, setState] = useState(router.state);
 
 	useRouterEvents({
 		onEnd: ({ state }) => setState({ ...state }),

package/src/hooks/useSchema.ts

@@ -0,0 +1,93 @@
+import type { Alepha } from "@alepha/core";
+import {
+	type FetchOptions,
+	HttpClient,
+	type RequestConfigSchema,
+} from "@alepha/server";
+import {
+	type HttpClientLink,
+	LinkProvider,
+	type VirtualAction,
+} from "@alepha/server-links";
+import { useEffect, useState } from "react";
+import { useAlepha } from "./useAlepha.ts";
+import { useInject } from "./useInject.ts";
+
+export const useSchema = <TConfig extends RequestConfigSchema>(
+	action: VirtualAction<TConfig>,
+): UseSchemaReturn<TConfig> => {
+	const name = action.name;
+	const alepha = useAlepha();
+	const httpClient = useInject(HttpClient);
+	const linkProvider = useInject(LinkProvider);
+	const [schema, setSchema] = useState<UseSchemaReturn<TConfig>>(
+		ssrSchemaLoading(alepha, name) as UseSchemaReturn<TConfig>,
+	);
+
+	useEffect(() => {
+		if (!schema.loading) {
+			return;
+		}
+
+		const opts: FetchOptions = {
+			cache: true,
+		};
+
+		httpClient
+			.fetch(`${linkProvider.URL_LINKS}/${name}/schema`, {}, opts)
+			.then((it) => setSchema(it.data as UseSchemaReturn<TConfig>));
+	}, [name]);
+
+	return schema;
+};
+
+export type UseSchemaReturn<TConfig extends RequestConfigSchema> = TConfig & {
+	loading: boolean;
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Get an action schema during server-side rendering (SSR) or client-side rendering (CSR).
+ */
+export const ssrSchemaLoading = (alepha: Alepha, name: string) => {
+	// server-side rendering (SSR) context
+	if (!alepha.isBrowser()) {
+		// get user links
+		const links =
+			alepha.context.get<{ links: HttpClientLink[] }>("links")?.links ?? [];
+
+		// check if user can access the link
+		const can = links.find((it) => it.name === name);
+
+		// yes!
+		if (can) {
+			// user-links have no schema, so we need to get it from the provider
+			const schema = alepha
+				.inject(LinkProvider)
+				.links?.find((it) => it.name === name)?.schema;
+
+			// oh, we have a schema!
+			if (schema) {
+				// attach to user link, it will be used in the client during hydration :)
+				can.schema = schema;
+				return schema;
+			}
+		}
+		return { loading: true };
+	}
+
+	// browser side rendering (CSR) context
+	// check if we have the schema already loaded
+	const schema = alepha
+		.inject(LinkProvider)
+		.links?.find((it) => it.name === name)?.schema;
+
+	// yes!
+	if (schema) {
+		return schema;
+	}
+
+	// no, we need to load it
+	return { loading: true };
+};

package/src/hooks/useStore.ts

@@ -0,0 +1,39 @@
+import type { State } from "@alepha/core";
+import { useEffect, useState } from "react";
+import { useAlepha } from "./useAlepha.ts";
+
+/**
+ * Hook to access and mutate the Alepha state.
+ */
+export const useStore = <Key extends keyof State>(
+	key: Key,
+): [State[Key], (value: State[Key]) => void] => {
+	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) as State[Key];
+		if (value !== null) {
+			return [value, (_: State[Key]) => {}] as const;
+		}
+	}
+
+	return [
+		state,
+		(value: State[Key]) => {
+			alepha.state(key, value);
+		},
+	] as const;
+};

package/src/index.shared.ts

@@ -4,6 +4,7 @@ export * from "./components/ErrorViewer.tsx";
 export { default as Link } from "./components/Link.tsx";
 export { default as NestedView } from "./components/NestedView.tsx";
 export { default as NotFound } from "./components/NotFound.tsx";
+export * from "./contexts/AlephaContext.ts";
 export * from "./contexts/RouterContext.ts";
 export * from "./contexts/RouterLayerContext.ts";
 export * from "./descriptors/$page.ts";
@@ -17,3 +18,5 @@ export * from "./hooks/useQueryParams.ts";
 export * from "./hooks/useRouter.ts";
 export * from "./hooks/useRouterEvents.ts";
 export * from "./hooks/useRouterState.ts";
+export * from "./hooks/useSchema.ts";
+export * from "./hooks/useStore.ts";

package/src/providers/PageDescriptorProvider.ts

@@ -13,6 +13,7 @@ import ClientOnly from "../components/ClientOnly.tsx";
 import ErrorViewer from "../components/ErrorViewer.tsx";
 import NestedView from "../components/NestedView.tsx";
 import NotFoundPage from "../components/NotFound.tsx";
+import { AlephaContext } from "../contexts/AlephaContext.ts";
 import { RouterContext } from "../contexts/RouterContext.ts";
 import { RouterLayerContext } from "../contexts/RouterLayerContext.ts";
 import {
@@ -76,15 +77,18 @@ export class PageDescriptorProvider {
 
 	public root(state: RouterState, context: PageReactContext): ReactNode {
 		const root = createElement(
-			RouterContext.Provider,
-			{
-				value: {
-					alepha: this.alepha,
-					state,
-					context,
+			AlephaContext.Provider,
+			{ value: this.alepha },
+			createElement(
+				RouterContext.Provider,
+				{
+					value: {
+						state,
+						context,
+					},
 				},
-			},
-			createElement(NestedView, {}, state.layers[0]?.element),
+				createElement(NestedView, {}, state.layers[0]?.element),
+			),
 		);
 
 		if (this.env.REACT_STRICT_MODE) {
@@ -300,7 +304,7 @@ export class PageDescriptorProvider {
 	}
 
 	public renderError(error: Error): ReactNode {
-		return createElement(ErrorViewer, { error });
+		return createElement(ErrorViewer, { error, alepha: this.alepha });
 	}
 
 	public renderEmptyView(): ReactNode {

package/src/providers/ReactBrowserProvider.ts

@@ -174,7 +174,7 @@ export class ReactBrowserProvider {
 			window.addEventListener("popstate", () => {
 				// when you update silently queryparams or hash, skip rendering
 				// if you want to force a rendering, use #go()
-				if (this.state.pathname === location.pathname) {
+				if (this.state.pathname === this.url) {
 					return;
 				}
 

package/src/providers/ReactServerProvider.ts

@@ -36,12 +36,16 @@ const envSchema = t.object({
 	REACT_SERVER_PREFIX: t.string({ default: "" }),
 	REACT_SSR_ENABLED: t.optional(t.boolean()),
 	REACT_ROOT_ID: t.string({ default: "root" }),
+	REACT_SERVER_TEMPLATE: t.optional(
+		t.string({
+			size: "rich",
+		}),
+	),
 });
 
 declare module "@alepha/core" {
 	interface Env extends Partial<Static<typeof envSchema>> {}
 	interface State {
-		"react.server.template"?: string;
 		"react.server.ssr"?: boolean;
 	}
 }
@@ -125,7 +129,7 @@ export class ReactServerProvider {
 
 	public get template() {
 		return (
-			this.alepha.state("react.server.template") ??
+			this.alepha.env.REACT_SERVER_TEMPLATE ??
 			"<!DOCTYPE html><html lang='en'><head></head><body></body></html>"
 		);
 	}