@alepha/react 0.10.6 → 0.11.0

package/src/hooks/useActive.ts

@@ -4,51 +4,51 @@ import { useRouter } from "./useRouter.ts";
 import { useRouterState } from "./useRouterState.ts";
 
 export interface UseActiveOptions {
-	href: string;
-	startWith?: boolean;
+  href: string;
+  startWith?: boolean;
 }
 
 export const useActive = (args: string | UseActiveOptions): UseActiveHook => {
-	const router = useRouter();
-	const [isPending, setPending] = useState(false);
-	const state = useRouterState();
-	const current = state.url.pathname;
-
-	const options: UseActiveOptions =
-		typeof args === "string" ? { href: args } : { ...args, href: args.href };
-	const href = options.href;
-
-	let isActive =
-		current === href || current === `${href}/` || `${current}/` === href;
-
-	if (options.startWith && !isActive) {
-		isActive = current.startsWith(href);
-	}
-
-	return {
-		isPending,
-		isActive,
-		anchorProps: {
-			href: router.base(href),
-			onClick: async (ev?: any) => {
-				ev?.stopPropagation();
-				ev?.preventDefault();
-				if (isActive) return;
-				if (isPending) return;
-
-				setPending(true);
-				try {
-					await router.go(href);
-				} finally {
-					setPending(false);
-				}
-			},
-		},
-	};
+  const router = useRouter();
+  const [isPending, setPending] = useState(false);
+  const state = useRouterState();
+  const current = state.url.pathname;
+
+  const options: UseActiveOptions =
+    typeof args === "string" ? { href: args } : { ...args, href: args.href };
+  const href = options.href;
+
+  let isActive =
+    current === href || current === `${href}/` || `${current}/` === href;
+
+  if (options.startWith && !isActive) {
+    isActive = current.startsWith(href);
+  }
+
+  return {
+    isPending,
+    isActive,
+    anchorProps: {
+      href: router.base(href),
+      onClick: async (ev?: any) => {
+        ev?.stopPropagation();
+        ev?.preventDefault();
+        if (isActive) return;
+        if (isPending) return;
+
+        setPending(true);
+        try {
+          await router.go(href);
+        } finally {
+          setPending(false);
+        }
+      },
+    },
+  };
 };
 
 export interface UseActiveHook {
-	isActive: boolean;
-	anchorProps: AnchorProps;
-	isPending: boolean;
+  isActive: boolean;
+  anchorProps: AnchorProps;
+  isPending: boolean;
 }

package/src/hooks/useAlepha.ts

@@ -15,12 +15,12 @@ import { AlephaContext } from "../contexts/AlephaContext.ts";
  * etc...
  */
 export const useAlepha = (): Alepha => {
-	const alepha = useContext(AlephaContext);
-	if (!alepha) {
-		throw new AlephaError(
-			"Hook 'useAlepha()' must be used within an AlephaContext.Provider",
-		);
-	}
+  const alepha = useContext(AlephaContext);
+  if (!alepha) {
+    throw new AlephaError(
+      "Hook 'useAlepha()' must be used within an AlephaContext.Provider",
+    );
+  }
 
-	return alepha;
+  return alepha;
 };

package/src/hooks/useClient.ts

@@ -1,7 +1,7 @@
 import {
-	type ClientScope,
-	type HttpVirtualClient,
-	LinkProvider,
+  type ClientScope,
+  type HttpVirtualClient,
+  LinkProvider,
 } from "@alepha/server-links";
 import { useInject } from "./useInject.ts";
 
@@ -11,7 +11,7 @@ import { useInject } from "./useInject.ts";
  * It's the React-hook version of `$client()`, from `AlephaServerLinks` module.
  */
 export const useClient = <T extends object>(
-	scope?: ClientScope,
+  scope?: ClientScope,
 ): HttpVirtualClient<T> => {
-	return useInject(LinkProvider).client<T>(scope);
+  return useInject(LinkProvider).client<T>(scope);
 };

package/src/hooks/useInject.ts

@@ -7,6 +7,6 @@ import { useAlepha } from "./useAlepha.ts";
  * It's a wrapper of `useAlepha().inject(service)` with a memoization.
  */
 export const useInject = <T extends object>(service: Service<T>): T => {
-	const alepha = useAlepha();
-	return useMemo(() => alepha.inject(service), []);
+  const alepha = useAlepha();
+  return useMemo(() => alepha.inject(service), []);
 };

package/src/hooks/useQueryParams.ts

@@ -7,54 +7,57 @@ import { useRouter } from "./useRouter.ts";
  * Not well tested. Use with caution.
  */
 export const useQueryParams = <T extends TObject>(
-	schema: T,
-	options: UseQueryParamsHookOptions = {},
+  schema: T,
+  options: UseQueryParamsHookOptions = {},
 ): [Partial<Static<T>>, (data: Static<T>) => void] => {
-	const alepha = useAlepha();
-
-	const key = options.key ?? "q";
-	const router = useRouter();
-	const querystring = router.query[key];
-
-	const [queryParams = {}, setQueryParams] = useState<Static<T> | undefined>(
-		decode(alepha, schema, router.query[key]),
-	);
-
-	useEffect(() => {
-		setQueryParams(decode(alepha, schema, querystring));
-	}, [querystring]);
-
-	return [
-		queryParams,
-		(queryParams: Static<T>) => {
-			setQueryParams(queryParams);
-			router.setQueryParams((data) => {
-				return { ...data, [key]: encode(alepha, schema, queryParams) };
-			});
-		},
-	];
+  const alepha = useAlepha();
+
+  const key = options.key ?? "q";
+  const router = useRouter();
+  const querystring = router.query[key];
+
+  const [queryParams = {}, setQueryParams] = useState<Static<T> | undefined>(
+    decode(alepha, schema, router.query[key]),
+  );
+
+  useEffect(() => {
+    setQueryParams(decode(alepha, schema, querystring));
+  }, [querystring]);
+
+  return [
+    queryParams,
+    (queryParams: Static<T>) => {
+      setQueryParams(queryParams);
+      router.setQueryParams((data) => {
+        return { ...data, [key]: encode(alepha, schema, queryParams) };
+      });
+    },
+  ];
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export interface UseQueryParamsHookOptions {
-	format?: "base64" | "querystring";
-	key?: string;
-	push?: boolean;
+  format?: "base64" | "querystring";
+  key?: string;
+  push?: boolean;
 }
 
 const encode = (alepha: Alepha, schema: TObject, data: any) => {
-	return btoa(JSON.stringify(alepha.parse(schema, data)));
+  return btoa(JSON.stringify(alepha.codec.decode(schema, data)));
 };
 
 const decode = <T extends TObject>(
-	alepha: Alepha,
-	schema: T,
-	data: any,
+  alepha: Alepha,
+  schema: T,
+  data: any,
 ): Static<T> | undefined => {
-	try {
-		return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-	} catch {
-		return;
-	}
+  try {
+    return alepha.codec.decode(
+      schema,
+      JSON.parse(atob(decodeURIComponent(data))),
+    );
+  } catch {
+    return;
+  }
 };

package/src/hooks/useRouter.ts

@@ -16,5 +16,5 @@ import { useInject } from "./useInject.ts";
  * router.go("home"); // typesafe
  */
 export const useRouter = <T extends object = any>(): ReactRouter<T> => {
-	return useInject(ReactRouter<T>);
+  return useInject(ReactRouter<T>);
 };

package/src/hooks/useRouterEvents.ts

@@ -3,64 +3,64 @@ import { useEffect } from "react";
 import { useAlepha } from "./useAlepha.ts";
 
 type Hook<T extends keyof Hooks> =
-	| ((ev: Hooks[T]) => void)
-	| {
-			priority?: "first" | "last";
-			callback: (ev: Hooks[T]) => void;
-	  };
+  | ((ev: Hooks[T]) => void)
+  | {
+      priority?: "first" | "last";
+      callback: (ev: Hooks[T]) => void;
+    };
 
 /**
  * Subscribe to various router events.
  */
 export const useRouterEvents = (
-	opts: {
-		onBegin?: Hook<"react:transition:begin">;
-		onError?: Hook<"react:transition:error">;
-		onEnd?: Hook<"react:transition:end">;
-		onSuccess?: Hook<"react:transition:success">;
-	} = {},
-	deps: any[] = [],
+  opts: {
+    onBegin?: Hook<"react:transition:begin">;
+    onError?: Hook<"react:transition:error">;
+    onEnd?: Hook<"react:transition:end">;
+    onSuccess?: Hook<"react:transition:success">;
+  } = {},
+  deps: any[] = [],
 ) => {
-	const alepha = useAlepha();
+  const alepha = useAlepha();
 
-	useEffect(() => {
-		if (!alepha.isBrowser()) {
-			return;
-		}
+  useEffect(() => {
+    if (!alepha.isBrowser()) {
+      return;
+    }
 
-		const cb = <T extends keyof Hooks>(callback: Hook<T>) => {
-			if (typeof callback === "function") {
-				return { callback };
-			}
-			return callback;
-		};
+    const cb = <T extends keyof Hooks>(callback: Hook<T>) => {
+      if (typeof callback === "function") {
+        return { callback };
+      }
+      return callback;
+    };
 
-		const subs: Function[] = [];
-		const onBegin = opts.onBegin;
-		const onEnd = opts.onEnd;
-		const onError = opts.onError;
-		const onSuccess = opts.onSuccess;
+    const subs: Function[] = [];
+    const onBegin = opts.onBegin;
+    const onEnd = opts.onEnd;
+    const onError = opts.onError;
+    const onSuccess = opts.onSuccess;
 
-		if (onBegin) {
-			subs.push(alepha.events.on("react:transition:begin", cb(onBegin)));
-		}
+    if (onBegin) {
+      subs.push(alepha.events.on("react:transition:begin", cb(onBegin)));
+    }
 
-		if (onEnd) {
-			subs.push(alepha.events.on("react:transition:end", cb(onEnd)));
-		}
+    if (onEnd) {
+      subs.push(alepha.events.on("react:transition:end", cb(onEnd)));
+    }
 
-		if (onError) {
-			subs.push(alepha.events.on("react:transition:error", cb(onError)));
-		}
+    if (onError) {
+      subs.push(alepha.events.on("react:transition:error", cb(onError)));
+    }
 
-		if (onSuccess) {
-			subs.push(alepha.events.on("react:transition:success", cb(onSuccess)));
-		}
+    if (onSuccess) {
+      subs.push(alepha.events.on("react:transition:success", cb(onSuccess)));
+    }
 
-		return () => {
-			for (const sub of subs) {
-				sub();
-			}
-		};
-	}, deps);
+    return () => {
+      for (const sub of subs) {
+        sub();
+      }
+    };
+  }, deps);
 };

package/src/hooks/useRouterState.ts

@@ -3,9 +3,9 @@ import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { useStore } from "./useStore.ts";
 
 export const useRouterState = (): ReactRouterState => {
-	const [state] = useStore("react.router.state");
-	if (!state) {
-		throw new AlephaError("Missing react router state");
-	}
-	return state;
+  const [state] = useStore("react.router.state");
+  if (!state) {
+    throw new AlephaError("Missing react router state");
+  }
+  return state;
 };

package/src/hooks/useSchema.ts

@@ -1,8 +1,8 @@
 import type { Alepha } from "@alepha/core";
 import {
-	type FetchOptions,
-	HttpClient,
-	type RequestConfigSchema,
+  type FetchOptions,
+  HttpClient,
+  type RequestConfigSchema,
 } from "@alepha/server";
 import { LinkProvider, type VirtualAction } from "@alepha/server-links";
 import { useEffect, useState } from "react";
@@ -10,34 +10,34 @@ import { useAlepha } from "./useAlepha.ts";
 import { useInject } from "./useInject.ts";
 
 export const useSchema = <TConfig extends RequestConfigSchema>(
-	action: VirtualAction<TConfig>,
+  action: VirtualAction<TConfig>,
 ): UseSchemaReturn<TConfig> => {
-	const name = action.name;
-	const alepha = useAlepha();
-	const httpClient = useInject(HttpClient);
-	const [schema, setSchema] = useState<UseSchemaReturn<TConfig>>(
-		ssrSchemaLoading(alepha, name) as UseSchemaReturn<TConfig>,
-	);
+  const name = action.name;
+  const alepha = useAlepha();
+  const httpClient = useInject(HttpClient);
+  const [schema, setSchema] = useState<UseSchemaReturn<TConfig>>(
+    ssrSchemaLoading(alepha, name) as UseSchemaReturn<TConfig>,
+  );
 
-	useEffect(() => {
-		if (!schema.loading) {
-			return;
-		}
+  useEffect(() => {
+    if (!schema.loading) {
+      return;
+    }
 
-		const opts: FetchOptions = {
-			cache: true,
-		};
+    const opts: FetchOptions = {
+      localCache: true,
+    };
 
-		httpClient
-			.fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, {}, opts)
-			.then((it) => setSchema(it.data as UseSchemaReturn<TConfig>));
-	}, [name]);
+    httpClient
+      .fetch(`${LinkProvider.path.apiLinks}/${name}/schema`, opts)
+      .then((it) => setSchema(it.data as UseSchemaReturn<TConfig>));
+  }, [name]);
 
-	return schema;
+  return schema;
 };
 
 export type UseSchemaReturn<TConfig extends RequestConfigSchema> = TConfig & {
-	loading: boolean;
+  loading: boolean;
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -46,43 +46,43 @@ export type UseSchemaReturn<TConfig extends RequestConfigSchema> = TConfig & {
  * 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 linkProvider = alepha.inject(LinkProvider);
+  // server-side rendering (SSR) context
+  if (!alepha.isBrowser()) {
+    // get user links
+    const linkProvider = alepha.inject(LinkProvider);
 
-		// check if user can access the link
-		const can = linkProvider
-			.getServerLinks()
-			.find((link) => link.name === name);
+    // check if user can access the link
+    const can = linkProvider
+      .getServerLinks()
+      .find((link) => link.name === name);
 
-		// yes!
-		if (can) {
-			// user-links have no schema, so we need to get it from the provider
-			const schema = linkProvider.links.find((it) => it.name === name)?.schema;
+    // yes!
+    if (can) {
+      // user-links have no schema, so we need to get it from the provider
+      const schema = 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;
-			}
-		}
+      // 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 };
-	}
+    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;
+  // 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;
-	}
+  // yes!
+  if (schema) {
+    return schema;
+  }
 
-	// no, we need to load it
-	return { loading: true };
+  // no, we need to load it
+  return { loading: true };
 };

package/src/hooks/useStore.ts

@@ -6,35 +6,35 @@ import { useAlepha } from "./useAlepha.ts";
  * Hook to access and mutate the Alepha state.
  */
 export const useStore = <Key extends keyof State>(
-	key: Key,
-	defaultValue?: State[Key],
+  key: Key,
+  defaultValue?: State[Key],
 ): [State[Key], (value: State[Key]) => void] => {
-	const alepha = useAlepha();
+  const alepha = useAlepha();
 
-	useMemo(() => {
-		if (defaultValue != null && alepha.state.get(key) == null) {
-			alepha.state.set(key, defaultValue);
-		}
-	}, [defaultValue]);
+  useMemo(() => {
+    if (defaultValue != null && alepha.state.get(key) == null) {
+      alepha.state.set(key, defaultValue);
+    }
+  }, [defaultValue]);
 
-	const [state, setState] = useState(alepha.state.get(key));
+  const [state, setState] = useState(alepha.state.get(key));
 
-	useEffect(() => {
-		if (!alepha.isBrowser()) {
-			return;
-		}
+  useEffect(() => {
+    if (!alepha.isBrowser()) {
+      return;
+    }
 
-		return alepha.events.on("state:mutate", (ev) => {
-			if (ev.key === key) {
-				setState(ev.value);
-			}
-		});
-	}, []);
+    return alepha.events.on("state:mutate", (ev) => {
+      if (ev.key === key) {
+        setState(ev.value);
+      }
+    });
+  }, []);
 
-	return [
-		state,
-		(value: State[Key]) => {
-			alepha.state.set(key, value);
-		},
-	] as const;
+  return [
+    state,
+    (value: State[Key]) => {
+      alepha.state.set(key, value);
+    },
+  ] as const;
 };

package/src/index.browser.ts

@@ -18,22 +18,22 @@ export * from "./providers/ReactPageProvider.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const AlephaReact = $module({
-	name: "alepha.react",
-	descriptors: [$page],
-	services: [
-		ReactPageProvider,
-		ReactBrowserRouterProvider,
-		ReactBrowserProvider,
-		ReactRouter,
-		ReactBrowserRendererProvider,
-	],
-	register: (alepha) =>
-		alepha
-			.with(AlephaServer)
-			.with(AlephaServerLinks)
-			.with(ReactPageProvider)
-			.with(ReactBrowserProvider)
-			.with(ReactBrowserRouterProvider)
-			.with(ReactBrowserRendererProvider)
-			.with(ReactRouter),
+  name: "alepha.react",
+  descriptors: [$page],
+  services: [
+    ReactPageProvider,
+    ReactBrowserRouterProvider,
+    ReactBrowserProvider,
+    ReactRouter,
+    ReactBrowserRendererProvider,
+  ],
+  register: (alepha) =>
+    alepha
+      .with(AlephaServer)
+      .with(AlephaServerLinks)
+      .with(ReactPageProvider)
+      .with(ReactBrowserProvider)
+      .with(ReactBrowserRouterProvider)
+      .with(ReactBrowserRendererProvider)
+      .with(ReactRouter),
 });