@void/react 0.25.0 → 0.26.1

package/README.md

@@ -1,10 +1,12 @@
 # @void/react
 
-Build server-rendered Void pages with React, server loaders, and typed forms. Requires React 19.
+React adapter for [Void](https://void.cloud). Build server-rendered pages with typed server loaders, forms, layouts, and interactive islands.
+
+Requires React 19. Navigation uses transitions and Suspense to keep the UI responsive while the next page loads.
 
 ## Setup
 
-Install alongside `void`:
+For a new app, run `npx void init` and choose React. To add the adapter to an existing Void app:
 
 ```sh
 npm install @void/react
@@ -13,15 +15,17 @@ npm install @void/react
 Add the adapter to your Vite config. It includes the framework's Vite plugin:
 
 ```ts
+import { voidReact } from '@void/react/plugin';
 import { defineConfig } from 'vite';
 import { voidPlugin } from 'void';
-import { voidReact } from '@void/react/plugin';
 
 export default defineConfig({
   plugins: [voidPlugin(), voidReact()],
 });
 ```
 
-Follow [Pages Routing](https://void.cloud/guide/pages-routing/overview) to add pages, then use [loaders](https://void.cloud/guide/pages-routing/loaders), [forms](https://void.cloud/guide/pages-routing/actions-and-forms), and [layouts](https://void.cloud/guide/pages-routing/layouts).
+## Documentation
+
+Follow [Pages Routing](https://void.cloud/guide/pages-routing/overview) to add pages, then use [loaders](https://void.cloud/guide/pages-routing/loaders), [forms](https://void.cloud/guide/pages-routing/actions-and-forms), and [layouts](https://void.cloud/guide/pages-routing/layouts). See the [adapter API reference](https://void.cloud/reference/api/pages) for plugin options and runtime helpers.
 
-See the [adapter API reference](https://void.cloud/reference/api/pages) for plugin options and runtime helpers, and [TESTING.md](../../TESTING.md) for repository verification.
+Read the [Void documentation](https://void.cloud) online or use the Markdown guides and references in `node_modules/void/docs/`, included with the `void` package.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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-D_Wv52MZ.mjs";
+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";
 export { ErrorsContext, Form, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/plugin.d.mts

@@ -1,10 +1,12 @@
 import react from "@vitejs/plugin-react";
 import { Plugin } from "vite";
-//#region src/plugin.d.ts
+//#region src/plugin-pages.d.ts
 type PrefetchConfig = {
   hoverDelay?: number;
   cacheFor?: number | string | [string, string];
 };
+//#endregion
+//#region src/plugin.d.ts
 export type VoidReactOptions = Readonly<{
   react?: Parameters<typeof react>[0];
   viewTransitions?: boolean;

package/dist/plugin.mjs

@@ -58,9 +58,23 @@ function islandsPlugin(pagesDir, options) {
 	const islandCssFiles = /* @__PURE__ */ new Set();
 	let viteRoot = "";
 	let resolvedConfig = null;
-	function computePagesNeedingClientJSLocal() {
-		if (!pageScan) return /* @__PURE__ */ new Set();
-		return computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
+	/** Resolve an island import and record it in the client manifest. */
+	function registerIsland(spec, importerDir, hydrate) {
+		const absPath = resolveSpecifier(spec, importerDir, COMPONENT_EXTENSIONS);
+		if (!absPath) return {
+			absPath,
+			islandId: spec
+		};
+		const islandId = normalizePath(relative(root, absPath)).replace(/\.[^.]+$/, "");
+		islandManifest.set(islandId, {
+			componentPath: absPath,
+			islandId,
+			hydrate
+		});
+		return {
+			absPath,
+			islandId
+		};
 	}
 	return [{
 		name: "void-react:islands",
@@ -96,19 +110,7 @@ function islandsPlugin(pagesDir, options) {
 					const filePath = resolve(pagesDir, entry.filePath);
 					const code = readFileSync(filePath, "utf-8");
 					const importerDir = dirname(filePath);
-					for (const islandImport of findIslandImports(code, filePath)) {
-						const spec = islandImport.specifier;
-						const strategy = islandImport.hydrate;
-						const absPath = resolveSpecifier(spec, importerDir, COMPONENT_EXTENSIONS);
-						if (absPath) {
-							const islandId = normalizePath(relative(root, absPath)).replace(/\.[^.]+$/, "");
-							islandManifest.set(islandId, {
-								componentPath: absPath,
-								islandId,
-								hydrate: strategy
-							});
-						}
-					}
+					for (const islandImport of findIslandImports(code, filePath)) registerIsland(islandImport.specifier, importerDir, islandImport.hydrate);
 				}
 				for (const page of pageScan.pages) {
 					if (!page.island) continue;
@@ -139,7 +141,7 @@ function islandsPlugin(pagesDir, options) {
 					if (!pageScan) return "export function renderIslandPage() { throw new Error('No pages found'); }";
 					const mdPlugin = resolvedConfig?.plugins?.find((plugin) => plugin.name === "void-md");
 					const mdScriptIds = new Set(mdPlugin?.api?.getClientScripts?.()?.keys() ?? []);
-					const needsJS = computePagesNeedingClientJSLocal();
+					const needsJS = computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
 					return generateIslandRenderer(pageScan, pagesDir, isDev, mdScriptIds, needsJS);
 				}
 				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
@@ -166,16 +168,7 @@ function islandsPlugin(pagesDir, options) {
 					const strategy = islandImport.hydrate;
 					const spec = islandImport.specifier;
 					const rawName = `_raw_island_${idx++}`;
-					const absPath = resolveSpecifier(spec, importerDir, COMPONENT_EXTENSIONS);
-					if (absPath) {
-						const islandId = normalizePath(relative(root, absPath)).replace(/\.[^.]+$/, "");
-						islandManifest.set(islandId, {
-							componentPath: absPath,
-							islandId,
-							hydrate: strategy
-						});
-					}
-					const islandId = absPath ? normalizePath(relative(root, absPath)).replace(/\.[^.]+$/, "") : spec;
+					const { islandId } = registerIsland(spec, importerDir, strategy);
 					const replacement = `import ${rawName} from ${specRaw}`;
 					edits.push({
 						start: islandImport.start,
@@ -439,7 +432,6 @@ import { renderReactPage } from "@void/react/pages-server";
 ${generateComponentManifest(scan, pagesDir)}
 
 	const PREAMBLE_SCRIPT = ${JSON.stringify(preambleScript)};
-	export const renderPreambleScript = PREAMBLE_SCRIPT;
 	
 	export async function renderPage(pageObj, assetTags) {
 	  return renderReactPage({

package/dist/runtime/index.mjs

@@ -1,4 +1,4 @@
-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-D_Wv52MZ.mjs";
+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";
 export { ErrorsContext, Form, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/{runtime-D_Wv52MZ.mjs → runtime--GesOVur.mjs}

@@ -1,7 +1,7 @@
 import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext } from "./context-B0GL7p5m.mjs";
 import "./action-4EvQppia.mjs";
 import { useActionState, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { VoidActionError, categorizeActionError, formErrorMessage, formRetryMessage, formSubmissionBlocked, isAbortError, isEqualFormValue, scheduleFormRetry, ssrProxy, submitAction } from "void/pages-client";
+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 }) {
@@ -26,45 +26,9 @@ function Form({ form, method = "post", renderError, children, ...props }) {
 }
 //#endregion
 //#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);
@@ -270,21 +234,7 @@ function useShared() {
 }
 //#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 }));
@@ -338,7 +288,7 @@ function useForm(url, defaults, options) {
 		setError(null);
 		let result;
 		try {
-			result = await submitAction(router, resolvedUrl, {
+			result = await submitAction(router, interpolateRouteParams(url, options?.params), {
 				method,
 				data: { ...dataRef.current },
 				_resolveOnShell: true
@@ -348,7 +298,7 @@ function useForm(url, defaults, options) {
 			throw submitError;
 		}
 		if (!result.ok) {
-			const validationErrors = getValidationErrors$1(result.error);
+			const validationErrors = getValidationErrors(result.error.body);
 			if (validationErrors) setErrors(validationErrors);
 			else setError(result.error);
 			return previousSuccessVersion;
@@ -400,10 +350,6 @@ function useNavigation() {
 }
 //#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 {
@@ -480,7 +426,7 @@ function useIslandForm(defaults) {
 				setDefaultsState(nextDefaults);
 				successTimeoutRef.current = setTimeout(() => setRecentlySuccessful(false), 2e3);
 				window.location.reload();
-			} else if (!response.ok) {
+			} else {
 				const body = await readActionErrorBody(response);
 				const actionError = new VoidActionError({
 					body,

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@void/react",
-  "version": "0.25.0",
+  "version": "0.26.1",
+  "description": "React pages, server rendering, forms, and navigation for Void.",
+  "homepage": "https://void.cloud",
+  "bugs": {
+    "url": "https://github.com/voidzero-dev/void/issues"
+  },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/voidzero-dev/void.git",
@@ -32,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^6.1.1"
+    "@vitejs/plugin-react": "^6.1.2"
   },
   "devDependencies": {
     "@types/node": "^26.6.4",
@@ -41,15 +47,15 @@
     "pathslash": "^0.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
-    "vite-plus": "1.0.0",
-    "void": "0.25.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.1.0",
+    "vite-plus": "1.1.0",
+    "void": "0.26.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0",
-    "void": "0.25.0"
+    "void": "0.26.1"
   },
   "scripts": {
     "build": "vp pack",