@void/react 0.0.0

package/dist/runtime-C24S_Dlg.mjs

@@ -0,0 +1,492 @@
+import { i as SharedContext, n as NavigationContext, r as RouterContext } from "./context-BCeFV8Jy.mjs";
+import "./action-BFWtavbf.mjs";
+import { useActionState, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { VoidActionError, categorizeActionError, isAbortError, isEqualFormValue, ssrProxy, submitAction } from "void/pages-client";
+import { jsx } from "react/jsx-runtime";
+//#region src/runtime/link.tsx
+function appendQueryValue(params, key, value) {
+	if (value === null || value === void 0) return false;
+	if (value instanceof Date) {
+		params.append(key, value.toISOString());
+		return true;
+	}
+	if (Array.isArray(value)) {
+		let appended = false;
+		for (const item of value) appended = appendQueryValue(params, key, item) || appended;
+		return appended;
+	}
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+		params.append(key, String(value));
+		return true;
+	}
+	throw new Error(`Link: GET data only supports primitive values and arrays. Remove nested data for '${key}'.`);
+}
+function mergeDataIntoHref(href, data) {
+	if (!data) return href;
+	const hashIndex = href.indexOf("#");
+	const beforeHash = hashIndex === -1 ? href : href.slice(0, hashIndex);
+	const hash = hashIndex === -1 ? "" : href.slice(hashIndex);
+	const searchIndex = beforeHash.indexOf("?");
+	const path = searchIndex === -1 ? beforeHash : beforeHash.slice(0, searchIndex);
+	const search = searchIndex === -1 ? "" : beforeHash.slice(searchIndex + 1);
+	const params = new URLSearchParams(search);
+	let appended = false;
+	for (const [key, value] of Object.entries(data)) appended = appendQueryValue(params, key, value) || appended;
+	if (!appended) return href;
+	const query = params.toString();
+	return `${path}${query ? `?${query}` : ""}${hash}`;
+}
+function hasPrefetch(prefetch) {
+	return prefetch !== false;
+}
+function isModifiedEvent(e) {
+	const target = e.currentTarget.getAttribute("target");
+	return target !== null && target !== "_self" || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.button !== 0;
+}
+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 (hasPrefetch(prefetchProp) && !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;
+		if (hrefWithData === window.location.pathname + window.location.search) return;
+		const options = {};
+		if (cacheFor !== void 0) options.cacheFor = cacheFor;
+		if (normalizedMethod) options.method = normalizedMethod;
+		router.prefetch(hrefWithData, options);
+	}, [
+		cacheFor,
+		hrefWithData,
+		normalizedMethod,
+		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-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 getValidationErrors$1(error) {
+	const body = error.body;
+	if (body && typeof body === "object" && "errors" in body && body.errors && typeof body.errors === "object" && !Array.isArray(body.errors)) return body.errors;
+	return null;
+}
+function useForm(url, defaults, options) {
+	let resolvedUrl = url;
+	let actionQuery = "";
+	const qIdx = resolvedUrl.indexOf("?");
+	if (qIdx !== -1) {
+		actionQuery = resolvedUrl.slice(qIdx);
+		resolvedUrl = resolvedUrl.slice(0, qIdx);
+	}
+	if (options?.params) for (const [key, value] of Object.entries(options.params)) resolvedUrl = resolvedUrl.replace(`:${key}`, encodeURIComponent(value));
+	resolvedUrl = resolvedUrl + actionQuery;
+	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, resolvedUrl, {
+				method,
+				data: { ...dataRef.current },
+				_resolveOnShell: true
+			});
+		} catch (submitError) {
+			if (isAbortError(submitError)) return previousSuccessVersion;
+			throw submitError;
+		}
+		if (!result.ok) {
+			const validationErrors = getValidationErrors$1(result.error);
+			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
+function getValidationErrors(body) {
+	if (body && typeof body === "object" && "errors" in body && body.errors && typeof body.errors === "object" && !Array.isArray(body.errors)) return body.errors;
+	return null;
+}
+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 f of fields) delete next[f];
+			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 if (!response.ok) {
+				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 { useRouter as a, useShared as i, useNavigation as n, Link as o, useForm as r, useIslandForm as t };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@void/react",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.mts",
+      "import": "./dist/plugin.mjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.mts",
+      "import": "./dist/runtime/index.mjs"
+    },
+    "./prefetch": {
+      "types": "./dist/runtime/prefetch.d.mts",
+      "import": "./dist/runtime/prefetch.mjs"
+    },
+    "./pages-client": {
+      "types": "./dist/runtime/pages-client.d.mts",
+      "import": "./dist/runtime/pages-client.mjs"
+    },
+    "./pages-server": {
+      "types": "./dist/runtime/pages-server.d.mts",
+      "import": "./dist/runtime/pages-server.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^6.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "pathe": "catalog:",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsdown": "catalog:",
+    "vite": "catalog:",
+    "void": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "catalog:",
+    "void": "workspace:*"
+  }
+}