@void/react 0.26.1 → 0.28.0

package/dist/index.d.mts

@@ -1,2 +1,103 @@
-import { _ as Form, a as ParamsContext, c as action, d as useNavigation, f as useForm, g as Link, h as useRouter, i as NavigationContext, l as setActionRouter, m as useParams, n as InferProps, o as RouterContext, p as useShared, r as ErrorsContext, s as SharedContext, t as Deferred, u as useIslandForm } from "./index-D5M3zrVB.mjs";
-export { Deferred, ErrorsContext, Form, type InferProps, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, Context, FormHTMLAttributes, JSX, ReactElement, ReactNode } from "react";
+import { ActionClient, FormMethod, FormModel, NavigationState, VoidActionError, VoidRouter } from "void/pages-client";
+import { CloudContextVariables, InferProps } from "void";
+import { ActionFormOptions, ActionUrl, ResolveActionBody } from "void/routes";
+//#region src/runtime/form.d.ts
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "onSubmit" | "method" | "onError"> & {
+  form: FormModel<[FormData]>;
+  method?: FormMethod;
+  renderError?: (error: VoidActionError) => ReactNode;
+};
+export declare function Form({ form, method, renderError, children, ...props }: FormProps): ReactElement;
+//#endregion
+//#region src/runtime/link.d.ts
+type PrefetchStrategy = "hover" | "click" | "mount" | "visible";
+type LinkMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+type CommonProps = {
+  href: string;
+  method?: LinkMethod | Lowercase<LinkMethod>;
+  data?: Record<string, unknown>;
+  preserveScroll?: boolean;
+  preserveState?: boolean;
+  replace?: boolean;
+  reloadDocument?: boolean;
+  viewTransition?: boolean;
+  prefetch?: boolean | PrefetchStrategy | ReadonlyArray<PrefetchStrategy>;
+  cacheFor?: number | string | [string, string];
+  onNavigate?: (event: {
+    preventDefault(): void;
+  }) => void;
+};
+type LinkProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps>;
+export declare function Link({ href, method, data, preserveScroll, preserveState, replace, reloadDocument, viewTransition, prefetch: prefetchProp, cacheFor, onNavigate, children, style, onClick: onClickProp, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, onTouchStart: onTouchStartProp, ...rest }: LinkProps): JSX.Element;
+//#endregion
+//#region src/runtime/use-router.d.ts
+export declare function useRouter(): VoidRouter;
+//#endregion
+//#region src/runtime/use-params.d.ts
+export declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+//#endregion
+//#region src/runtime/use-shared.d.ts
+export declare function useShared<T = CloudContextVariables["shared"]>(): T;
+//#endregion
+//#region src/runtime/use-form.d.ts
+export declare function useForm<U extends ActionUrl & string>(url: U, defaults: ResolveActionBody<U>, options?: ActionFormOptions<U>): {
+  data: ResolveActionBody<U>;
+  setData: <K extends keyof ResolveActionBody<U> & string>(field: K, value: ResolveActionBody<U>[K]) => void;
+  errors: Partial<Record<keyof ResolveActionBody<U> & string, string>>;
+  error: VoidActionError | null;
+  pending: boolean;
+  hasChanges: boolean;
+  wasSuccessful: boolean;
+  recentlySuccessful: boolean;
+  post(formData: FormData): void;
+  put(formData: FormData): void;
+  patch(formData: FormData): void;
+  delete(formData: FormData): void;
+  reset(...fields: ReadonlyArray<keyof ResolveActionBody<U> & string>): void;
+  clearErrors(...fields: ReadonlyArray<keyof ResolveActionBody<U> & string>): void;
+  clearError(): void;
+};
+//#endregion
+//#region src/runtime/use-navigation.d.ts
+export declare function useNavigation(): NavigationState;
+//#endregion
+//#region src/runtime/use-island-form.d.ts
+type IslandFormReturn<T extends Record<string, unknown>> = Readonly<{
+  data: T;
+  setData: <K extends keyof T & string>(field: K, value: T[K]) => void;
+  errors: Record<string, string>;
+  error: VoidActionError | null;
+  pending: boolean;
+  hasChanges: boolean;
+  wasSuccessful: boolean;
+  recentlySuccessful: boolean;
+  reset: (...fields: ReadonlyArray<keyof T & string>) => void;
+  clearErrors: (...fields: ReadonlyArray<string>) => void;
+  clearError: () => void;
+  post: (url: string) => Promise<void>;
+  put: (url: string) => Promise<void>;
+  patch: (url: string) => Promise<void>;
+  delete: (url: string) => Promise<void>;
+}>;
+/**
+ * Form hook for island pages. Uses fetch + page reload instead of the
+ * Void Router (which is not available in island mode).
+ */
+export declare function useIslandForm<T extends Record<string, unknown>>(defaults: T): IslandFormReturn<T>;
+//#endregion
+//#region src/runtime/action.d.ts
+export declare const action: ActionClient["action"];
+export declare const setActionRouter: ActionClient["setActionRouter"];
+//#endregion
+//#region src/runtime/context.d.ts
+export declare const SharedContext: Context<Record<string, unknown> | null>;
+export declare const ErrorsContext: Context<Record<string, string> | null>;
+export declare const ParamsContext: Context<Record<string, string> | null>;
+export declare const RouterContext: Context<VoidRouter | null>;
+export declare const NavigationContext: Context<NavigationState>;
+//#endregion
+//#region src/runtime/index.d.ts
+export type Deferred<T> = Promise<T>;
+//#endregion
+export type { InferProps };

package/dist/index.mjs

@@ -1,4 +1,463 @@
-import { a as useParams, c as Form, i as useShared, n as useNavigation, o as useRouter, r as useForm, s as Link, t as useIslandForm } from "./runtime--GesOVur.mjs";
 import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "./context-B0GL7p5m.mjs";
 import { n as setActionRouter, t as action } from "./action-4EvQppia.mjs";
+import { useActionState, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { VoidActionError, categorizeActionError, formErrorMessage, formRetryMessage, formSubmissionBlocked, getValidationErrors, interpolateRouteParams, isAbortError, isEqualFormValue, isModifiedEvent, mergeDataIntoHref, scheduleFormRetry, ssrProxy, submitAction } from "void/pages-client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/runtime/form.tsx
+function Form({ form, method = "post", renderError, children, ...props }) {
+	const [now, setNow] = useState(Date.now);
+	useEffect(() => scheduleFormRetry(form.error, () => setNow(Date.now())), [form.error]);
+	const message = formErrorMessage(form);
+	const retry = formRetryMessage(form.error);
+	const blocked = formSubmissionBlocked(form, now);
+	return /* @__PURE__ */ jsxs("form", {
+		...props,
+		action: form[method],
+		"aria-busy": form.pending,
+		onSubmit: (event) => {
+			if (blocked) event.preventDefault();
+		},
+		children: [message && /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			"data-void-form-error": true,
+			children: [form.error && renderError ? renderError(form.error) : message, retry && /* @__PURE__ */ jsx("p", { children: retry })]
+		}), children]
+	});
+}
+//#endregion
+//#region src/runtime/link.tsx
+function Link({ href, method = "GET", data, preserveScroll = false, preserveState = false, replace = false, reloadDocument = false, viewTransition, prefetch: prefetchProp = false, cacheFor, onNavigate, children, style, onClick: onClickProp, onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, onTouchStart: onTouchStartProp, ...rest }) {
+	const router = useContext(RouterContext);
+	const elementRef = useRef(null);
+	const hoverTimerRef = useRef(null);
+	const normalizedMethod = useMemo(() => method.toUpperCase(), [method]);
+	const isGet = normalizedMethod === "GET";
+	const hrefWithData = useMemo(() => isGet ? mergeDataIntoHref(href, data) : href, [
+		data,
+		href,
+		isGet
+	]);
+	const strategies = useMemo(() => {
+		if (prefetchProp === false || reloadDocument) return [];
+		if (prefetchProp === true) return ["hover"];
+		if (typeof prefetchProp === "string") return [prefetchProp];
+		return prefetchProp;
+	}, [prefetchProp, reloadDocument]);
+	const hoverDelay = router?._hoverDelay ?? 75;
+	if (prefetchProp !== false && !isGet) throw new Error("Link: prefetch only supports GET links. Remove `prefetch` or use method=\"GET\".");
+	if (reloadDocument && !isGet) throw new Error("Link: reloadDocument only supports GET links.");
+	const doPrefetch = useCallback(() => {
+		if (!router?.prefetch) return;
+		const current = window.location.pathname + window.location.search;
+		if (hrefWithData === current) return;
+		const options = {};
+		if (cacheFor !== void 0) options.cacheFor = cacheFor;
+		router.prefetch(hrefWithData, options);
+	}, [
+		cacheFor,
+		hrefWithData,
+		router
+	]);
+	const shouldHandleClick = useCallback((event) => {
+		if (reloadDocument || !router || event.defaultPrevented || isModifiedEvent(event)) return false;
+		if (event.currentTarget.hasAttribute("download")) return false;
+		if (new URL(hrefWithData, window.location.origin).origin !== window.location.origin) return false;
+		return true;
+	}, [
+		hrefWithData,
+		reloadDocument,
+		router
+	]);
+	const onClick = useCallback((event) => {
+		onClickProp?.(event);
+		if (!shouldHandleClick(event)) return;
+		let navigatePrevented = false;
+		onNavigate?.({ preventDefault() {
+			navigatePrevented = true;
+		} });
+		if (navigatePrevented) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		router?.visit(hrefWithData, {
+			method: normalizedMethod,
+			data: isGet ? void 0 : data,
+			preserveScroll,
+			preserveState,
+			replace,
+			viewTransition
+		});
+	}, [
+		data,
+		hrefWithData,
+		isGet,
+		normalizedMethod,
+		onClickProp,
+		onNavigate,
+		preserveScroll,
+		preserveState,
+		replace,
+		router,
+		shouldHandleClick,
+		viewTransition
+	]);
+	const onMouseEnter = useCallback((event) => {
+		onMouseEnterProp?.(event);
+		if (event.defaultPrevented) return;
+		if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+		hoverTimerRef.current = setTimeout(doPrefetch, hoverDelay);
+	}, [
+		doPrefetch,
+		hoverDelay,
+		onMouseEnterProp
+	]);
+	const onMouseLeave = useCallback((event) => {
+		onMouseLeaveProp?.(event);
+		if (hoverTimerRef.current) {
+			clearTimeout(hoverTimerRef.current);
+			hoverTimerRef.current = null;
+		}
+	}, [onMouseLeaveProp]);
+	const onFocus = useCallback((event) => {
+		onFocusProp?.(event);
+		if (!event.defaultPrevented) doPrefetch();
+	}, [doPrefetch, onFocusProp]);
+	const onMouseDown = useCallback((event) => {
+		onMouseDownProp?.(event);
+		if (!event.defaultPrevented) doPrefetch();
+	}, [doPrefetch, onMouseDownProp]);
+	const onTouchStart = useCallback((event) => {
+		onTouchStartProp?.(event);
+		if (!event.defaultPrevented) doPrefetch();
+	}, [doPrefetch, onTouchStartProp]);
+	useEffect(() => {
+		if (strategies.length === 0) return;
+		if (strategies.includes("mount")) doPrefetch();
+		let observer = null;
+		if (strategies.includes("visible") && elementRef.current) {
+			observer = new IntersectionObserver((entries) => {
+				if (entries.some((e) => e.isIntersecting)) {
+					doPrefetch();
+					observer?.disconnect();
+					observer = null;
+				}
+			}, { rootMargin: "0px" });
+			observer.observe(elementRef.current);
+		}
+		return () => {
+			if (hoverTimerRef.current) {
+				clearTimeout(hoverTimerRef.current);
+				hoverTimerRef.current = null;
+			}
+			if (observer) observer.disconnect();
+		};
+	}, [doPrefetch, strategies]);
+	const eventHandlers = useMemo(() => {
+		const handlers = {
+			onClick,
+			onFocus: onFocusProp,
+			onMouseDown: onMouseDownProp,
+			onMouseEnter: onMouseEnterProp,
+			onMouseLeave: onMouseLeaveProp,
+			onTouchStart: onTouchStartProp
+		};
+		if (strategies.includes("hover")) {
+			handlers.onMouseEnter = onMouseEnter;
+			handlers.onMouseLeave = onMouseLeave;
+			handlers.onFocus = onFocus;
+			handlers.onTouchStart = onTouchStart;
+		}
+		if (strategies.includes("click")) {
+			handlers.onMouseDown = onMouseDown;
+			handlers.onTouchStart = onTouchStart;
+		}
+		return handlers;
+	}, [
+		onClick,
+		onFocus,
+		onFocusProp,
+		onMouseDown,
+		onMouseDownProp,
+		onMouseEnter,
+		onMouseEnterProp,
+		onMouseLeave,
+		onMouseLeaveProp,
+		onTouchStart,
+		onTouchStartProp,
+		strategies
+	]);
+	const resolvedStyle = useMemo(() => ({
+		touchAction: "manipulation",
+		...style
+	}), [style]);
+	if (isGet) return /* @__PURE__ */ jsx("a", {
+		ref: elementRef,
+		href: hrefWithData,
+		style: resolvedStyle,
+		...rest,
+		...eventHandlers,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		ref: elementRef,
+		type: "button",
+		style: resolvedStyle,
+		...rest,
+		...eventHandlers,
+		children
+	});
+}
+//#endregion
+//#region src/runtime/use-router.ts
+function useRouter() {
+	return useContext(RouterContext) ?? ssrProxy;
+}
+//#endregion
+//#region src/runtime/use-params.ts
+function useParams() {
+	const params = useContext(ParamsContext);
+	if (params === null) throw new Error("useParams(): must be used inside a Void page.");
+	return params;
+}
+//#endregion
+//#region src/runtime/use-shared.ts
+function useShared() {
+	const shared = useContext(SharedContext);
+	if (!shared) throw new Error("useShared(): must be used inside a Void page.");
+	return shared;
+}
+//#endregion
+//#region src/runtime/use-form.ts
+function useForm(url, defaults, options) {
+	const router = useContext(RouterContext);
+	const [data, setDataState] = useState(() => ({ ...defaults }));
+	const [defaultsState, setDefaultsState] = useState(() => ({ ...defaults }));
+	const [errors, setErrors] = useState({});
+	const [error, setError] = useState(null);
+	const [wasSuccessful, setWasSuccessful] = useState(false);
+	const [recentlySuccessful, setRecentlySuccessful] = useState(false);
+	const defaultsRef = useRef(defaultsState);
+	const dataRef = useRef(data);
+	const successTimeoutRef = useRef(null);
+	const hasChanges = useMemo(() => {
+		return Object.keys(defaultsState).some((key) => !isEqualFormValue(data[key], defaultsState[key]));
+	}, [data, defaultsState]);
+	const setData = useCallback((field, value) => {
+		dataRef.current = {
+			...dataRef.current,
+			[field]: value
+		};
+		setDataState(dataRef.current);
+	}, []);
+	const reset = useCallback((...fields) => {
+		if (fields.length === 0) dataRef.current = { ...defaultsRef.current };
+		else {
+			const next = { ...dataRef.current };
+			for (const field of fields) next[field] = defaultsRef.current[field];
+			dataRef.current = next;
+		}
+		setDataState(dataRef.current);
+	}, []);
+	const clearErrors = useCallback((...fields) => {
+		if (fields.length === 0) setErrors({});
+		else setErrors((prev) => {
+			const next = { ...prev };
+			for (const field of fields) delete next[field];
+			return next;
+		});
+	}, []);
+	const clearError = useCallback(() => {
+		setError(null);
+	}, []);
+	const [, dispatchAction, pending] = useActionState(async (previousSuccessVersion, payload) => {
+		if (!router) throw new Error("useForm(): requires the Void Router.");
+		const method = payload instanceof FormData ? "POST" : payload.method;
+		setWasSuccessful(false);
+		setRecentlySuccessful(false);
+		if (successTimeoutRef.current) {
+			clearTimeout(successTimeoutRef.current);
+			successTimeoutRef.current = null;
+		}
+		setErrors({});
+		setError(null);
+		let result;
+		try {
+			result = await submitAction(router, interpolateRouteParams(url, options?.params), {
+				method,
+				data: { ...dataRef.current },
+				_resolveOnShell: true
+			});
+		} catch (submitError) {
+			if (isAbortError(submitError)) return previousSuccessVersion;
+			throw submitError;
+		}
+		if (!result.ok) {
+			const validationErrors = getValidationErrors(result.error.body);
+			if (validationErrors) setErrors(validationErrors);
+			else setError(result.error);
+			return previousSuccessVersion;
+		}
+		const nextDefaults = { ...dataRef.current };
+		defaultsRef.current = nextDefaults;
+		setDefaultsState(nextDefaults);
+		setWasSuccessful(true);
+		setRecentlySuccessful(true);
+		successTimeoutRef.current = setTimeout(() => {
+			setRecentlySuccessful(false);
+			successTimeoutRef.current = null;
+		}, 2e3);
+		return previousSuccessVersion + 1;
+	}, 0);
+	useEffect(() => {
+		return () => {
+			if (successTimeoutRef.current) {
+				clearTimeout(successTimeoutRef.current);
+				successTimeoutRef.current = null;
+			}
+		};
+	}, []);
+	const dispatchMethodAction = useCallback((method) => (_formData) => {
+		dispatchAction({ method });
+	}, [dispatchAction]);
+	return {
+		data,
+		setData,
+		errors,
+		error,
+		pending,
+		hasChanges,
+		wasSuccessful,
+		recentlySuccessful,
+		post: dispatchAction,
+		put: useMemo(() => dispatchMethodAction("PUT"), [dispatchMethodAction]),
+		patch: useMemo(() => dispatchMethodAction("PATCH"), [dispatchMethodAction]),
+		delete: useMemo(() => dispatchMethodAction("DELETE"), [dispatchMethodAction]),
+		reset,
+		clearErrors,
+		clearError
+	};
+}
+//#endregion
+//#region src/runtime/use-navigation.ts
+function useNavigation() {
+	return useContext(NavigationContext);
+}
+//#endregion
+//#region src/runtime/use-island-form.ts
+async function readActionErrorBody(response) {
+	const contentType = response.headers.get("content-type") || "";
+	try {
+		if (contentType.includes("application/json")) return await response.json();
+		return await response.text() || null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Form hook for island pages. Uses fetch + page reload instead of the
+* Void Router (which is not available in island mode).
+*/
+function useIslandForm(defaults) {
+	const [data, setDataState] = useState(() => ({ ...defaults }));
+	const [defaultsState, setDefaultsState] = useState(() => ({ ...defaults }));
+	const [errors, setErrors] = useState({});
+	const [error, setError] = useState(null);
+	const [pending, setPending] = useState(false);
+	const [wasSuccessful, setWasSuccessful] = useState(false);
+	const [recentlySuccessful, setRecentlySuccessful] = useState(false);
+	const defaultsRef = useRef(defaultsState);
+	const successTimeoutRef = useRef(null);
+	const hasChanges = useMemo(() => {
+		return Object.keys(defaultsState).some((key) => !isEqualFormValue(data[key], defaultsState[key]));
+	}, [data, defaultsState]);
+	const setData = useCallback((field, value) => {
+		setDataState((prev) => ({
+			...prev,
+			[field]: value
+		}));
+	}, []);
+	const reset = useCallback((...fields) => {
+		if (fields.length === 0) setDataState({ ...defaultsRef.current });
+		else setDataState((prev) => {
+			const next = { ...prev };
+			for (const field of fields) next[field] = defaultsRef.current[field];
+			return next;
+		});
+	}, []);
+	const clearErrors = useCallback((...fields) => {
+		if (fields.length === 0) setErrors({});
+		else setErrors((prev) => {
+			const next = { ...prev };
+			for (const field of fields) delete next[field];
+			return next;
+		});
+	}, []);
+	const clearError = useCallback(() => {
+		setError(null);
+	}, []);
+	const submit = useCallback(async (url, method) => {
+		setPending(true);
+		setWasSuccessful(false);
+		setRecentlySuccessful(false);
+		if (successTimeoutRef.current) clearTimeout(successTimeoutRef.current);
+		setErrors({});
+		setError(null);
+		try {
+			const response = await fetch(url, {
+				method,
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(data)
+			});
+			if (response.redirected) {
+				window.location.href = response.url;
+				return;
+			}
+			if (response.ok) {
+				setWasSuccessful(true);
+				setRecentlySuccessful(true);
+				const nextDefaults = { ...data };
+				defaultsRef.current = nextDefaults;
+				setDefaultsState(nextDefaults);
+				successTimeoutRef.current = setTimeout(() => setRecentlySuccessful(false), 2e3);
+				window.location.reload();
+			} else {
+				const body = await readActionErrorBody(response);
+				const actionError = new VoidActionError({
+					body,
+					status: response.status,
+					statusText: response.statusText,
+					url
+				});
+				const validationErrors = response.status === 422 ? getValidationErrors(body) : null;
+				if (validationErrors) {
+					setErrors(validationErrors);
+					return;
+				}
+				if (categorizeActionError(response.status) === "boundary") throw actionError;
+				setError(actionError);
+			}
+		} finally {
+			setPending(false);
+		}
+	}, [data]);
+	return {
+		data,
+		setData,
+		errors,
+		error,
+		pending,
+		hasChanges,
+		wasSuccessful,
+		recentlySuccessful,
+		reset,
+		clearErrors,
+		clearError,
+		post: (url) => submit(url, "POST"),
+		put: (url) => submit(url, "PUT"),
+		patch: (url) => submit(url, "PATCH"),
+		delete: (url) => submit(url, "DELETE")
+	};
+}
+//#endregion
 export { ErrorsContext, Form, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };