@void/vue 0.26.0 → 0.27.0

package/README.md

@@ -1,10 +1,10 @@
 # @void/vue
 
-Build server-rendered Void pages with Vue, server loaders, and typed forms.
+Vue adapter for [Void](https://void.cloud). Build server-rendered pages with typed server loaders, forms, layouts, and interactive islands.
 
 ## Setup
 
-Install alongside `void`:
+For a new app, run `npx void init` and choose Vue. To add the adapter to an existing Void app:
 
 ```sh
 npm install @void/vue
@@ -13,15 +13,17 @@ npm install @void/vue
 Add the adapter to your Vite config. It includes the framework's Vite plugin:
 
 ```ts
+import { voidVue } from '@void/vue/plugin';
 import { defineConfig } from 'vite';
 import { voidPlugin } from 'void';
-import { voidVue } from '@void/vue/plugin';
 
 export default defineConfig({
   plugins: [voidPlugin(), voidVue()],
 });
 ```
 
-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,2 +1,2 @@
-import { a as useForm, c as useRouter, i as useNavigation, l as Link, n as setActionRouter, o as useShared, r as useIslandForm, s as useParams, t as action, u as Form } from "./runtime-DU7JTkNy.mjs";
+import { a as useForm, c as useRouter, i as useNavigation, l as Link, n as setActionRouter, o as useShared, r as useIslandForm, s as useParams, t as action, u as Form } from "./runtime-lPB1mgy1.mjs";
 export { Form, Link, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/plugin.d.mts

@@ -1,9 +1,16 @@
 import vue from "@vitejs/plugin-vue";
 import { Plugin } from "vite";
+//#region src/plugin-pages.d.ts
+type PrefetchConfig = {
+  hoverDelay?: number;
+  cacheFor?: number | string | [string, string];
+};
+//#endregion
 //#region src/plugin.d.ts
 export type VoidVueOptions = Readonly<{
   vue?: Parameters<typeof vue>[0];
   viewTransitions?: boolean;
+  prefetch?: PrefetchConfig;
 }>;
 export declare function voidVue(options?: VoidVueOptions): Array<Plugin>;
 //#endregion

package/dist/plugin.mjs

@@ -74,9 +74,23 @@ function islandsPlugin(pagesDir, options) {
 	let isDev = false;
 	let viteRoot = "";
 	let resolvedConfig = null;
-	function computePagesNeedingClientJS$1() {
-		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-vue:islands",
@@ -113,19 +127,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;
@@ -156,7 +158,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 = computePagesNeedingClientJS$1();
+					const needsJS = computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
 					return generateIslandRenderer(pageScan, pagesDir, mdScriptIds, needsJS);
 				}
 				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
@@ -183,16 +185,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,
@@ -618,7 +611,7 @@ currentLayouts.value = initialLayouts;
 
 const appEl = document.getElementById("app");
 if (!appEl) throw new Error("pages: Missing #app element for Void Vue pages hydration.");
-const createVoidApp = appEl?.getAttribute("data-void-ssr") === "false" ? createApp : createSSRApp;
+const createVoidApp = appEl.getAttribute("data-void-ssr") === "false" ? createApp : createSSRApp;
 const app = createVoidApp({
   setup() {
     provide("__void_shared", shared);
@@ -656,7 +649,8 @@ function voidVue(options) {
 		vue(options?.vue),
 		...pagesPlugin(pagesDir, {
 			root,
-			viewTransitions: options?.viewTransitions
+			viewTransitions: options?.viewTransitions,
+			prefetch: options?.prefetch
 		}),
 		...islandsPlugin(pagesDir, { root })
 	];

package/dist/runtime/index.mjs

@@ -1,2 +1,2 @@
-import { a as useForm, c as useRouter, i as useNavigation, l as Link, n as setActionRouter, o as useShared, r as useIslandForm, s as useParams, t as action, u as Form } from "../runtime-DU7JTkNy.mjs";
+import { a as useForm, c as useRouter, i as useNavigation, l as Link, n as setActionRouter, o as useShared, r as useIslandForm, s as useParams, t as action, u as Form } from "../runtime-lPB1mgy1.mjs";
 export { Form, Link, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/{runtime-DU7JTkNy.mjs → runtime-lPB1mgy1.mjs}

@@ -1,4 +1,4 @@
-import { VoidActionError, categorizeActionError, createActionClient, formErrorMessage, formRetryMessage, formSubmissionBlocked, idleNavigationState, isAbortError, isEqualFormValue, scheduleFormRetry, ssrProxy, submitAction } from "void/pages-client";
+import { VoidActionError, categorizeActionError, createActionClient, formErrorMessage, formRetryMessage, formSubmissionBlocked, getValidationErrors, idleNavigationState, interpolateRouteParams, isAbortError, isEqualFormValue, isModifiedEvent, mergeDataIntoHref, scheduleFormRetry, ssrProxy, submitAction } from "void/pages-client";
 import { computed, defineComponent, h, inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 //#region src/runtime/form.ts
 const Form = defineComponent({
@@ -44,45 +44,9 @@ const Form = defineComponent({
 });
 //#endregion
 //#region src/runtime/link.ts
-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 callHandler(handler, event) {
 	if (Array.isArray(handler)) {
 		for (const fn of handler) if (typeof fn === "function") fn(event);
@@ -280,22 +244,8 @@ 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;
 	const formDefaults = defaults;
-	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 = inject("__void_router", null);
 	const data = reactive({ ...formDefaults });
 	const errors = reactive({});
@@ -329,13 +279,13 @@ function useForm(url, defaults, options) {
 		clearError();
 		try {
 			if (!router) throw new Error("useForm(): requires the Void Router.");
-			const result = await submitAction(router, resolvedUrl, {
+			const result = await submitAction(router, interpolateRouteParams(url, options?.params), {
 				method,
 				data: { ...data },
 				...opts
 			});
 			if (!result.ok) {
-				const validationErrors = getValidationErrors$1(result.error);
+				const validationErrors = getValidationErrors(result.error.body);
 				if (validationErrors) Object.assign(errors, validationErrors);
 				else error.value = result.error;
 				return;
@@ -377,10 +327,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 {
@@ -443,7 +389,7 @@ function useIslandForm(defaults) {
 					recentlySuccessful.value = 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/vue",
-  "version": "0.26.0",
+  "version": "0.27.0",
+  "description": "Vue 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",
@@ -33,14 +39,14 @@
   "devDependencies": {
     "@types/node": "^26.6.4",
     "pathslash": "^0.1.0",
-    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
-    "vite-plus": "1.0.0",
-    "void": "0.26.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.1.0",
+    "vite-plus": "1.1.0",
+    "void": "0.27.0",
     "vue": "^3.5.43"
   },
   "peerDependencies": {
     "vite": "^8.0.0",
-    "void": "0.26.0",
+    "void": "0.27.0",
     "vue": "^3.5.0"
   },
   "scripts": {