@void/svelte 1.5.0 → 1.6.0

package/dist/plugin.d.mts

@@ -1,13 +1,9 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { PrefetchConfig } from "void/pages";
 import { Plugin } from "vite";
-type PrefetchConfig = {
-  hoverDelay?: number;
-  cacheFor?: number | string | [string, string];
-};
 export type VoidSvelteOptions = Readonly<{
   svelte?: Parameters<typeof svelte>[0];
   viewTransitions?: boolean;
   prefetch?: PrefetchConfig;
 }>;
-export declare function voidSvelte(options?: VoidSvelteOptions): Array<Plugin>;
-export {};
+export declare function voidSvelte(options?: VoidSvelteOptions): Array<Plugin>;

package/dist/plugin.mjs

@@ -1,10 +1,9 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { createPagesPlugin, generateComponentManifest, resolveEffectiveLayoutChain, resolvePagesDir, scanPages } from "void/pages";
+import { createPagesPlugin, generateComponentManifest, resolvePagesDir, resolvePrefetchConfig, scanPages } from "void/pages";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import nodePath from "node:path";
 import { preprocess } from "svelte/compiler";
-import { normalizePath } from "vite";
-import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, editIslandSource, findIslandImports, findStaticCssImports, hasIslandPages, islandStylesPlugin, recordIslandStyles, recordedIslandStyles, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
+import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, createIslandManifest, editIslandSource, findIslandImports, generateIslandClientEntry, islandCssFiles, islandStylesPlugin, islandsBuildConfig, mdClientScriptIds, recordIslandStyles, recordedIslandStyles, watchPagesForRescan } from "void/pages-islands-plugin";
 // ../../node_modules/.pnpm/pathslash@0.1.0/node_modules/pathslash/dist/index.mjs
 const BACKSLASH_RE = /\\/g;
 const isWindows = process.platform === "win32";
@@ -49,6 +48,18 @@ const COMPONENT_EXTENSIONS = [
 	".ts",
 	".js"
 ];
+const HYDRATE_ISLAND = `
+async function hydrateIsland(el, mod, props, frontmatter) {
+  const { hydrate } = await import("svelte");
+  const Component = mod.default || mod;
+  const context = new Map([["__void_frontmatter", frontmatter]]);
+  hydrate(Component, { target: el, props, context });
+  el.setAttribute("data-hydrated", "true");
+}`;
+/** A Svelte component has at most one top-level `<style>`. */
+function styleBlockImports(file, content) {
+	return /<style\b/.test(content) ? [`import ${JSON.stringify(file + ".css?island-style")};`] : [];
+}
 /**
 * Prefix for virtual island wrapper modules. Must NOT use the `\0` prefix
 * because `@sveltejs/vite-plugin-svelte` skips `\0`-prefixed modules in
@@ -58,27 +69,10 @@ const WRAPPER_PREFIX = "/@void-island-wrap/";
 function islandsPlugin(pagesDir, options) {
 	let pageScan = null;
 	const root = options?.root ?? dirname(pagesDir);
-	const islandManifest = /* @__PURE__ */ new Map();
-	const islandCssFiles = /* @__PURE__ */ new Set();
+	const islandManifest = createIslandManifest(root, COMPONENT_EXTENSIONS);
+	let cssFiles = /* @__PURE__ */ new Set();
 	let isDev = false;
 	let resolvedConfig = null;
-	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-svelte:islands",
@@ -98,33 +92,8 @@ function islandsPlugin(pagesDir, options) {
 						pagesDir,
 						environment: isDev ? "dev" : "prod"
 					});
-					const filesToScan = [
-						...pageScan.pages.map((page) => ({
-							filePath: page.componentPath,
-							island: page.island
-						})),
-						...pageScan.layouts.map((layout) => ({
-							filePath: layout.filePath,
-							island: layout.island
-						})),
-						...pageScan.namedLayouts.map((namedLayout) => ({
-							filePath: namedLayout.filePath,
-							island: namedLayout.island
-						}))
-					];
-					for (const entry of filesToScan) {
-						if (!entry.island) continue;
-						const filePath = resolve(pagesDir, entry.filePath);
-						const code = readFileSync(filePath, "utf-8");
-						const importerDir = dirname(filePath);
-						for (const islandImport of findIslandImports(code, filePath)) registerIsland(islandImport.specifier, importerDir, islandImport.hydrate);
-					}
-					for (const page of pageScan.pages) {
-						if (!page.island) continue;
-						if (page.componentPath.endsWith(".svelte")) islandCssFiles.add(normalizePath(resolve(pagesDir, page.componentPath)));
-						const layoutChain = resolveEffectiveLayoutChain(page, pageScan.layouts, pageScan.namedLayouts);
-						for (const layout of layoutChain) islandCssFiles.add(normalizePath(resolve(pagesDir, layout.filePath)));
-					}
+					islandManifest.registerPages(pageScan, pagesDir);
+					cssFiles = islandCssFiles(pageScan, pagesDir, /\.svelte$/);
 				}
 			},
 			buildEnd() {
@@ -142,14 +111,21 @@ function islandsPlugin(pagesDir, options) {
 				handler(id) {
 					if (id === "\0" + ISLANDS_RENDERER_ID) {
 						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 mdScriptIds = mdClientScriptIds(resolvedConfig);
 						const needsJS = computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
 						return generateIslandRenderer(pageScan, pagesDir, mdScriptIds, needsJS);
 					}
 					if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
 						if (!pageScan) return "";
-						return generateIslandClientEntry(islandManifest, islandCssFiles, recordedIslandStyles(pagesDir), islandManifest.size > 0 || computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0, isDev);
+						return generateIslandClientEntry({
+							manifest: islandManifest,
+							cssFiles,
+							styles: recordedIslandStyles(pagesDir),
+							needsRuntime: islandManifest.entries.size > 0 || computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0,
+							isDev,
+							styleBlockImports,
+							hydrateIsland: HYDRATE_ISLAND
+						});
 					}
 					if (id.startsWith(WRAPPER_PREFIX)) return generateWrapperComponent(id);
 				}
@@ -164,7 +140,7 @@ function islandsPlugin(pagesDir, options) {
 						const name = islandImport.importName;
 						const spec = islandImport.specifier;
 						const strategy = islandImport.hydrate;
-						const { absPath, islandId } = registerIsland(spec, importerDir, strategy);
+						const { absPath, islandId } = islandManifest.register(spec, importerDir, strategy);
 						const wrapperUrl = WRAPPER_PREFIX + encodeURIComponent(islandId) + ".svelte?src=" + encodeURIComponent(absPath || spec) + "&island=" + encodeURIComponent(islandId) + "&hydrate=" + encodeURIComponent(strategy);
 						const replacement = `import ${name} from ${JSON.stringify(wrapperUrl)}`;
 						edits.push({
@@ -179,10 +155,7 @@ function islandsPlugin(pagesDir, options) {
 			async config(_, env) {
 				if (!existsSync(pagesDir)) return;
 				if (env.command === "serve") return { optimizeDeps: { include: ["svelte"] } };
-				if (await hasIslandPages(root, pagesDir)) return { environments: { client: { build: {
-					manifest: true,
-					rollupOptions: { input: { "islands-client": ISLANDS_CLIENT_ENTRY_ID } }
-				} } } };
+				return islandsBuildConfig(root, pagesDir);
 			}
 		},
 		{
@@ -297,35 +270,6 @@ export async function renderIslandPage(pageObj, assetTags) {
 }
 `;
 }
-function generateIslandClientEntry(manifest, cssFiles, styles, needsRuntime, isDev) {
-	const entries = [...manifest.values()];
-	const uniqueIslands = /* @__PURE__ */ new Map();
-	for (const entry of entries) uniqueIslands.set(entry.islandId, entry.componentPath);
-	const lines = [];
-	if (!isDev && styles) for (const id of styles) lines.push(`import ${JSON.stringify(id)};`);
-	else if (!isDev) for (const file of cssFiles) {
-		const content = readFileSync(file, "utf-8");
-		if (/<style\b/.test(content)) lines.push(`import ${JSON.stringify(file + ".css?island-style")};`);
-		for (const item of findStaticCssImports(content, file)) lines.push(rewriteCssImportForVirtualModule(item.statement, item.specifier, file));
-	}
-	if (!needsRuntime && !isDev) return lines.join("\n");
-	lines.push("import { initIslands } from \"void/pages-client\";");
-	lines.push("const islands = {");
-	for (const [id, path] of uniqueIslands) lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
-	lines.push("};");
-	lines.push(`
-async function hydrateIsland(el, mod, props, frontmatter) {
-  const { hydrate } = await import("svelte");
-  const Component = mod.default || mod;
-  const context = new Map([["__void_frontmatter", frontmatter]]);
-  hydrate(Component, { target: el, props, context });
-  el.setAttribute("data-hydrated", "true");
-}
-
-initIslands(islands, hydrateIsland);
-`);
-	return lines.join("\n");
-}
 // src/plugin-pages.ts
 const CLIENT_ENTRY_ID = "virtual:void-pages-client";
 const SVELTE_OPTIMIZE_DEPS = {
@@ -385,7 +329,7 @@ import { serializePageData } from "void/pages-server";
 
 ${generateComponentManifest(scan, pagesDir)}
 
-export async function renderPage(pageObj, assetTags) {
+export async function renderPage(pageObj, assetTags, requestUrl) {
   const PageComponent = (await components[pageObj.component]()).default;
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
@@ -399,7 +343,7 @@ export async function renderPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       params: pageObj.params || {},
-      router: createSsrRouter(pageObj.url || "/", pageObj.params || {}),
+      router: createSsrRouter(pageObj.url || "/", pageObj.params || {}, requestUrl),
       routeUrl: pageObj.url || "/",
       navigation: idleNavigationState(),
       stores: null,
@@ -424,6 +368,7 @@ export async function renderPage(pageObj, assetTags) {
 `;
 }
 function generateClientEntry(scan, pagesDir, viewTransitions, prefetch, staticPageData) {
+	const { defaultStrategy, hoverDelay, cacheFor } = resolvePrefetchConfig(prefetch);
 	return `
 import { hydrate, mount, tick } from "svelte";
 import { writable } from "svelte/store";
@@ -467,8 +412,9 @@ const { router, initialPageData, initialComponent, initialLayouts, start, commit
     staticPageData: ${!!staticPageData?.enabled},
     staticPageDataFastPath: ${!!staticPageData?.fastPath},
     viewTransitions: ${!!viewTransitions},
-    prefetchHoverDelay: ${prefetch?.hoverDelay ?? 75},
-    prefetchDefaultCacheFor: parseCacheFor(${JSON.stringify(prefetch?.cacheFor ?? "30s")}),
+    prefetchHoverDelay: ${hoverDelay},
+    prefetchDefaultCacheFor: parseCacheFor(${JSON.stringify(cacheFor)}),
+    prefetchDefaultStrategy: ${JSON.stringify(defaultStrategy)},
     onRouteChange(url) {
       routeUrl = url;
       routeStore.set(url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/svelte",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Svelte pages, server rendering, forms, and navigation for Void.",
   "homepage": "https://void.cloud",
   "bugs": {
@@ -43,12 +43,12 @@
     "svelte": "^5.57.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
     "vite-plus": "1.4.0",
-    "void": "1.5.0"
+    "void": "1.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "vite": "^8.0.0",
-    "void": "1.5.0"
+    "void": "1.6.0"
   },
   "scripts": {
     "build": "vp pack",

package/src/runtime/App.svelte

@@ -28,7 +28,7 @@
   let params = $state(init.params || {});
   let routeUrl = $state(init.routeUrl || "/");
   let navigation = $state(init.navigation || idleNavigationState());
-  const router = createRouterFacade(init.router, () => routeUrl, () => params);
+  const router = init.router ? createRouterFacade(init.router, () => routeUrl, () => params) : null;
 
   // Pages and layouts keep the objects returned by useShared() and useParams()
   // across navigations, so update them in place.

package/src/runtime/Link.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-  import { getContext, onDestroy, onMount, type Snippet } from "svelte";
+  import { getContext, onDestroy, onMount } from "svelte";
   import {
-    isModifiedEvent,
-    mergeDataIntoHref,
-    type PrefetchOptions,
+    handleLinkClick,
+    linkActiveAttributes,
+    linkPendingAttributes,
+    linkPrefetchStrategies,
+    observeLinkVisible,
+    prefetchLink,
+    resolveLink,
+    type NavigationState,
     type VoidRouter,
   } from "void/pages-client";
-
-  type PrefetchStrategy = "hover" | "click" | "mount" | "visible";
-  type LinkMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
-  type NavigateEvent = { preventDefault(): void };
-  type EventHandler<T extends Event> = (event: T) => void;
+  import type { LinkProps } from "./link-props.ts";
 
   let {
     href,
@@ -21,8 +22,9 @@
     replace = false,
     reloadDocument = false,
     viewTransition = undefined,
-    prefetch: prefetchProp = false,
+    prefetch: prefetchProp = undefined,
     cacheFor = undefined,
+    activeMatch = undefined,
     onNavigate = undefined,
     children,
     onclick: onclickProp = undefined,
@@ -33,104 +35,30 @@
     ontouchstart: onTouchStartProp = undefined,
     style = undefined,
     ...rest
-  }: {
-    href: string;
-    method?: LinkMethod | Lowercase<LinkMethod>;
-    data?: Record<string, unknown>;
-    preserveScroll?: boolean;
-    preserveState?: boolean;
-    replace?: boolean;
-    reloadDocument?: boolean;
-    viewTransition?: boolean;
-    prefetch?: boolean | PrefetchStrategy | Array<PrefetchStrategy>;
-    cacheFor?: number | string | [string, string];
-    onNavigate?: (event: NavigateEvent) => void;
-    children?: Snippet;
-    onclick?: EventHandler<MouseEvent>;
-    onmouseenter?: EventHandler<MouseEvent>;
-    onmouseleave?: EventHandler<MouseEvent>;
-    onfocus?: EventHandler<FocusEvent>;
-    onmousedown?: EventHandler<MouseEvent>;
-    ontouchstart?: EventHandler<TouchEvent>;
-    style?: string;
-    [key: string]: unknown;
-  } = $props();
+  }: LinkProps = $props();
 
   const router = getContext<VoidRouter>("__void_router");
-
-  function getStrategies(): Array<PrefetchStrategy> {
-    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.");
-    }
-    if (prefetchProp === false || reloadDocument) {
-      return [];
-    }
-    if (prefetchProp === true) {
-      return ["hover"];
-    }
-    if (typeof prefetchProp === "string") {
-      return [prefetchProp];
-    }
-    return prefetchProp;
-  }
+  const navigation = getContext<{ value: NavigationState } | undefined>("__void_navigation");
 
   function doPrefetch() {
-    if (!router?.prefetch) {
-      return;
-    }
-    const current = window.location.pathname + window.location.search;
-    if (hrefWithData === current) {
-      return;
-    }
-    const options: PrefetchOptions = { method: normalizedMethod };
-    if (cacheFor !== undefined) {
-      options.cacheFor = cacheFor;
-    }
-    router.prefetch(hrefWithData, options);
+    prefetchLink(router, link.href, cacheFor);
   }
 
   function onClick(e: MouseEvent) {
     onclickProp?.(e);
-    if (reloadDocument || !router || e.defaultPrevented || isModifiedEvent(e)) {
-      return;
-    }
-    if ((e.currentTarget as HTMLElement).hasAttribute("download")) {
-      return;
-    }
-    const url = new URL(hrefWithData, window.location.origin);
-    if (url.origin !== window.location.origin) {
-      return;
-    }
-
-    let navigatePrevented = false;
-    onNavigate?.({
-      preventDefault() {
-        navigatePrevented = true;
-      },
-    });
-    if (navigatePrevented) {
-      e.preventDefault();
-      return;
-    }
-
-    e.preventDefault();
-    router.visit(hrefWithData, {
-      method: normalizedMethod,
-      data: isGet ? undefined : data,
+    handleLinkClick(e, router, link, {
+      data,
       preserveScroll,
       preserveState,
       replace,
+      reloadDocument,
       viewTransition,
+      onNavigate,
     });
   }
 
   let hoverTimer: ReturnType<typeof setTimeout> | null = null;
-  let observer: IntersectionObserver | null = null;
+  let stopObserving: (() => void) | null = null;
   let el = $state<HTMLElement | null>(null);
 
   function onMouseEnter(e: MouseEvent) {
@@ -178,17 +106,7 @@
       doPrefetch();
     }
     if (strategies.includes("visible") && el) {
-      observer = new IntersectionObserver(
-        (entries) => {
-          if (entries.some((e) => e.isIntersecting)) {
-            doPrefetch();
-            observer?.disconnect();
-            observer = null;
-          }
-        },
-        { rootMargin: "0px" },
-      );
-      observer.observe(el);
+      stopObserving = observeLinkVisible(el, doPrefetch);
     }
   });
 
@@ -196,25 +114,34 @@
     if (hoverTimer) {
       clearTimeout(hoverTimer);
     }
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
+    stopObserving?.();
   });
 
-  const normalizedMethod = $derived(method.toUpperCase() as LinkMethod);
-  const isGet = $derived(normalizedMethod === "GET");
-  const hrefWithData = $derived(isGet ? mergeDataIntoHref(href, data) : href);
-  const strategies = $derived(getStrategies());
+  const link = $derived(
+    resolveLink({ href, method, data, prefetch: prefetchProp, reloadDocument }),
+  );
+  const strategies = $derived(
+    linkPrefetchStrategies(
+      { prefetch: prefetchProp, reloadDocument },
+      link,
+      router?._prefetchDefaultStrategy,
+    ),
+  );
+  // Reading router.url tracks the route URL, so this follows navigations.
+  const activeAttributes = $derived(linkActiveAttributes(router, link, activeMatch));
+  // Reading navigation.value tracks visits as they start and end.
+  const pendingAttributes = $derived(linkPendingAttributes(router, navigation?.value, link));
   const resolvedStyle = $derived(
     style ? `touch-action: manipulation; ${style}` : "touch-action: manipulation",
   );
 </script>
 
-{#if isGet}
+{#if link.isGet}
   <a
     bind:this={el}
-    href={hrefWithData}
+    href={link.href}
+    {...activeAttributes}
+    {...pendingAttributes}
     {...rest}
     style={resolvedStyle}
     onclick={onClick}
@@ -232,6 +159,7 @@
   <button
     bind:this={el}
     type="button"
+    {...pendingAttributes}
     {...rest}
     style={resolvedStyle}
     onclick={onClick}

package/src/runtime/link-props.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { BaseLinkProps } from 'void/pages-client';
+
+type EventHandler<T extends Event> = (event: T) => void;
+
+export type LinkProps = BaseLinkProps & {
+  children?: Snippet;
+  onclick?: EventHandler<MouseEvent>;
+  onmouseenter?: EventHandler<MouseEvent>;
+  onmouseleave?: EventHandler<MouseEvent>;
+  onfocus?: EventHandler<FocusEvent>;
+  onmousedown?: EventHandler<MouseEvent>;
+  ontouchstart?: EventHandler<TouchEvent>;
+  style?: string;
+  [key: string]: unknown;
+};

package/src/runtime/use-form.svelte.ts

@@ -9,65 +9,32 @@ import {
   parseFormResetArgs,
   submitAction,
   type FormResetOptions,
-  type VisitOptions,
+  type FormState,
+  type FormSubmitOptions,
   type VoidRouter,
 } from 'void/pages-client';
 import type { ActionUrl, ResolveActionBody, ActionFormOptions } from 'void/routes';
 
-type FormSubmitOptions = Omit<VisitOptions, 'method' | 'data'> & {
-  data?: Record<string, unknown>;
-};
-type UntypedForm = {
-  readonly data: Record<string, unknown>;
-  readonly errors: Record<string, string>;
-  readonly error: VoidActionError | null;
-  readonly pending: boolean;
-  readonly hasChanges: boolean;
-  readonly wasSuccessful: boolean;
-  readonly recentlySuccessful: boolean;
-  post(opts?: FormSubmitOptions): Promise<void>;
-  put(opts?: FormSubmitOptions): Promise<void>;
-  patch(opts?: FormSubmitOptions): Promise<void>;
-  delete(opts?: FormSubmitOptions): Promise<void>;
-  reset(options: FormResetOptions, ...fields: ReadonlyArray<string>): void;
-  reset(...fields: ReadonlyArray<string>): void;
-  setError(field: string, message: string): void;
-  clearErrors(...fields: ReadonlyArray<string>): void;
-  clearError(): void;
-};
+type FormReturn<TData> = FormState<TData, 'in-place'> &
+  Readonly<{
+    post(opts?: FormSubmitOptions): Promise<void>;
+    put(opts?: FormSubmitOptions): Promise<void>;
+    patch(opts?: FormSubmitOptions): Promise<void>;
+    delete(opts?: FormSubmitOptions): Promise<void>;
+  }>;
 
 // Typed overload — full inference from PageActionMap (requires codegen)
 export function useForm<U extends ActionUrl & string>(
   url: U,
   defaults: ResolveActionBody<U>,
   options?: ActionFormOptions<U>,
-): {
-  readonly data: ResolveActionBody<U>;
-  readonly errors: Partial<Record<keyof ResolveActionBody<U> & string, string>>;
-  readonly error: VoidActionError | null;
-  readonly pending: boolean;
-  readonly hasChanges: boolean;
-  readonly wasSuccessful: boolean;
-  readonly recentlySuccessful: boolean;
-  post(opts?: FormSubmitOptions): Promise<void>;
-  put(opts?: FormSubmitOptions): Promise<void>;
-  patch(opts?: FormSubmitOptions): Promise<void>;
-  delete(opts?: FormSubmitOptions): Promise<void>;
-  reset(
-    options: FormResetOptions,
-    ...fields: ReadonlyArray<keyof ResolveActionBody<U> & string>
-  ): void;
-  reset(...fields: ReadonlyArray<keyof ResolveActionBody<U> & string>): void;
-  setError(field: keyof ResolveActionBody<U> & string, message: string): void;
-  clearErrors(...fields: ReadonlyArray<keyof ResolveActionBody<U> & string>): void;
-  clearError(): void;
-};
+): FormReturn<ResolveActionBody<U>>;
 
 export function useForm(
   url: string,
   defaults: Record<string, unknown>,
   options?: { params?: Record<string, string>; resetOnSuccess?: boolean },
-): UntypedForm {
+): FormReturn<Record<string, unknown>> {
   const router = getContext<VoidRouter>('__void_router');
 
   const initialDefaults = cloneFormValue(defaults);
@@ -95,6 +62,26 @@ export function useForm(
     });
   });
 
+  // An input handler may validate its new value before the change effect runs.
+  function snapshotField(field: string) {
+    untrack(() => {
+      dataSnapshot = { ...dataSnapshot, [field]: cloneFormValue(data[field]) };
+    });
+  }
+
+  // Handlers may also write `form.errors.field` directly, which needs the same snapshot.
+  // The view is derived because setError and clearErrors replace `errors`.
+  const errorsView = $derived(
+    new Proxy(errors, {
+      set(target, field, message) {
+        if (typeof field === 'string') {
+          snapshotField(field);
+        }
+        return Reflect.set(target, field, message);
+      },
+    }),
+  );
+
   const hasChanges = $derived(
     Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key])),
   );
@@ -123,8 +110,7 @@ export function useForm(
   }
 
   function setError(field: string, message: string) {
-    // An input handler may validate its new value before the change effect runs.
-    dataSnapshot = { ...dataSnapshot, [field]: cloneFormValue(data[field]) };
+    snapshotField(field);
     errors = { ...errors, [field]: message };
   }
 
@@ -189,7 +175,7 @@ export function useForm(
       return data;
     },
     get errors() {
-      return errors;
+      return errorsView;
     },
     get error() {
       return error;

package/src/runtime/use-island-form.svelte.ts

@@ -1,29 +1,19 @@
-import { isEqualFormValue, submitIslandAction, type VoidActionError } from 'void/pages-client';
+import {
+  isEqualFormValue,
+  submitIslandAction,
+  type IslandFormState,
+  type VoidActionError,
+} from 'void/pages-client';
 
-type UntypedIslandForm = {
-  readonly data: Record<string, unknown>;
-  readonly errors: Record<string, string>;
-  readonly error: VoidActionError | null;
-  readonly pending: boolean;
-  readonly hasChanges: boolean;
-  readonly wasSuccessful: boolean;
-  readonly recentlySuccessful: boolean;
-  submit(url: string, method: string): Promise<void>;
-  post(url: string): Promise<void>;
-  put(url: string): Promise<void>;
-  patch(url: string): Promise<void>;
-  delete(url: string): Promise<void>;
-  reset(...fields: ReadonlyArray<string>): void;
-  clearErrors(...fields: ReadonlyArray<string>): void;
-  clearError(): void;
-};
+export type IslandFormReturn<T extends Record<string, unknown>> = IslandFormState<T, 'in-place'> &
+  Readonly<{ submit(url: string, method: string): Promise<void> }>;
 
 /**
  * Form composable for island pages. Uses fetch + page reload instead of the
  * Void Router (which is not available in island mode).
  */
-export function useIslandForm(defaults: Record<string, unknown>): UntypedIslandForm {
-  let data: Record<string, unknown> = $state({ ...defaults });
+export function useIslandForm<T extends Record<string, unknown>>(defaults: T): IslandFormReturn<T> {
+  let data: T = $state({ ...defaults });
   let errors: Record<string, string> = $state({});
   let error: VoidActionError | null = $state(null);
   let pending = $state(false);
@@ -37,7 +27,7 @@ export function useIslandForm(defaults: Record<string, unknown>): UntypedIslandF
     Object.keys(defaults_).some((key) => !isEqualFormValue(data[key], defaults_[key])),
   );
 
-  function reset(...fields: ReadonlyArray<string>) {
+  function reset(...fields: ReadonlyArray<keyof T & string>) {
     if (fields.length === 0) {
       data = { ...defaults_ };
     } else {