Repository navigation
refactor(pages): share adapter build-plugin code that must stay in sync - #673
Merged
cpojer merged 1 commit intoNov 3, 2026
Merged
Conversation
The React, Vue, Svelte and Solid islands and pages plugins each kept their own copy of logic that is tied to core contracts. Move those parts into `void/pages-islands-plugin` and `void/pages` as plain helpers; each adapter keeps its Vite plugin object and its framework rendering and hydration code. - `createIslandManifest`: island id resolution and the island page/layout pre-scan, which follow the page scan model. - `islandCssFiles`, `generateIslandClientEntry`: the islands client entry's CSS strategy and `initIslands` runtime; adapters pass their style-block imports and `hydrateIsland` source. - `islandsBuildConfig`: the `islands-client` build input. - `mdClientScriptIds`: the `void-md` plugin API lookup. - `PrefetchConfig`, `PagesPluginOptions`, `resolvePrefetchConfig`: the public adapter options and their defaults. Adapters re-export `PrefetchConfig`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
yangshun
marked this pull request as draft
November 2, 2026 12:48
yangshun
marked this pull request as ready for review
November 2, 2026 13:13
cpojer
pushed a commit
that referenced
this pull request
Nov 3, 2026
## Summary
Moves the form contracts that every adapter promises into core
(`packages/void/src/pages/form-presentation.ts`, next to
`FormModel`/`FormMethod`). Only contracts that must not drift between
adapters are shared. Framework idioms stay in the adapters.
**Shared in core** (`FormState`, `IslandFormState` and
`FormSubmitOptions` are exported from `void/pages-client`)
| Type | Members | Used by |
| --- | --- | --- |
| `FormStatus` | `error`, `pending`, `hasChanges`, `wasSuccessful`,
`recentlySuccessful` | `useForm` and `useIslandForm` in all four
adapters; `FormModel` takes `pending` and `error` from it |
| `FormState<TData, TEditing>` | `FormStatus` + `data`, `errors`
(field-keyed), `reset` (with the `{ initial }` overload that core's
`parseFormResetArgs` parses), `setError`, `clearErrors`, `clearError` |
`useForm`, all four adapters |
| `IslandFormState<TData, TEditing>` | `FormStatus` + `data`, `errors`
(keyed by any name the action returns), `reset` (field-typed),
`clearErrors`, `clearError`, `post/put/patch/delete(url)` |
`useIslandForm`, all four adapters |
| `FormSubmitOptions` | `Omit<VisitOptions, 'method' \| 'data'> & {
data? }`, previously byte-identical in Vue, Svelte and Solid | `useForm`
in Vue, Svelte and Solid |
Core defines the `data` and `errors` types once, including the rule for
error keys. Each adapter must pick an editing mode, and there is no
default:
- `'in-place'` for Vue and Svelte: apps edit `data` and `errors`
directly.
- `'setters'` for React and Solid: `data` and `errors` are `Readonly`
and change through `setData`, `setError` and `clearErrors`.
**Kept in adapters** (agreed API decisions; no behavior change)
- React's `post/put/patch/delete(formData: FormData)` stay native `<form
action>` callbacks. Vue, Svelte and Solid keep `post(opts?:
FormSubmitOptions)`.
- `setData` stays in React and Solid only. Vue and Svelte bind to
`form.data` directly.
- Island `submit(url, method)` stays in Vue and Svelte only, and island
`setData` stays in React and Solid only.
Each adapter has a local `FormReturn<TData>` alias. The typed overload
and the implementation signature both use it, so they can no longer
drift. It replaces each adapter's `UntypedForm` and its duplicated typed
return object. Vue's `useIslandForm` now uses the same overload pattern.
Its returned object is checked against the island contract; before, it
was cast to it. Svelte's `useIslandForm` is now generic like the other
three adapters, so `form.data` and `reset()` field names are typed from
the defaults instead of `Record<string, unknown>`.
## TypeScript compatibility (release note)
Form types now follow each framework's idiom. Runtime behavior is
unchanged.
- **Top-level form fields are read-only in every adapter**, for both
`useForm()` and `useIslandForm()`: `data`, `errors`, `error`, `pending`,
`hasChanges`, `wasSuccessful` and `recentlySuccessful`. Writing
`form.pending = true` or replacing `form.data = { … }` no longer
compiles, because a replaced `data` or `errors` object is no longer the
one the form submits and updates. Form methods are read-only too. This
is new for `useForm()` in `@void/react`, `@void/vue` and `@void/solid`;
Svelte and island forms already had read-only fields.
- **React and Solid: the contents of `data` and `errors` are read-only**
(both hooks). `form.data.email = …` and `form.errors.email = …` no
longer compile; use `setData()`, `setError()` and `clearErrors()`. In
React these writes changed the submitted data without re-rendering.
Solid stores ignore them. In Solid, a write into `form.errors` also
changed the server errors that every form shares.
- **Vue and Svelte: `data` and `errors` stay editable in place**
(`v-model`, `bind:value`, `form.errors.title = …`). No setters are
required.
- **Island `errors` values are `string | undefined`** in every adapter,
matching `useForm()`. `form.errors.title.length` now needs a guard;
before, it compiled and then crashed when the field had no error.
- **Svelte `useIslandForm()` infers its data type from `defaults`**,
like the other adapters. These now fail to compile: reading a field that
is not in `defaults`, passing an unknown field to `reset()`, and
assigning a value of a different type. A `null` default needs its full
type, for example `{ photo: null as File | null }`, as React, Vue and
Solid already require.
## Risk
- Type-only change, apart from Vue's `useIslandForm` dropping an `as`
cast. The emitted JavaScript is unchanged.
- TypeScript ignores `readonly` when checking assignability, so `<Form
form={form}>` and other consumers are unaffected. The typecheck tests
now assert this.
- No user docs change. `void/pages-client` is adapter-facing, and the
documented form API is unchanged.
## Verification
- `vp run check:sdk`: 12/12 packages pass. Each adapter's
`form-errors.typecheck.ts` and `island-form.typecheck.ts` pin:
- read-only top-level fields and methods;
- that `data` and `errors` are editable in Vue and Svelte and read-only
in React and Solid;
- that `useForm()` is accepted by `<Form form>` (`FormModel`);
- which adapters have `setData` or `submit()`;
- each adapter's submit signature;
- that island errors may be `undefined` and accept any key;
- typed island `data` and `reset` fields.
- The four `*-pages` playgrounds typecheck against the rebuilt adapters.
- Focused form unit tests: 1295 tests pass.
- Earlier on this branch: `vp run test` passed 515 tests with 1 skipped.
The 27 platform-unit failures came from a missing generated
`platform/packages/dashboard/.void/tsconfig.json` in a fresh worktree;
after generating it, all 27 pass. `vp test run` passed 759 of 764 files
with 1 skipped. Four failed only under full-suite load and all pass when
rerun on their own: the astro dev server start timeout, and timeouts in
`db-template`, `deploy-direct-r2` and `zero-trust-service`.
- `vp lint` and `vp fmt --check` are clean on the changed files.
- After merging `main` (including #672 and #673, which share Link and
build-plugin code through the same `void/pages-client` entry), there
were no conflicts. `vp run check:sdk` passes 12/12, the four `*-pages`
playgrounds typecheck, and `vp test run form island` passes 357 files
(7349 tests, 22 skipped).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The React, Vue, Svelte and Solid adapters each kept their own copy of build-plugin logic that is tied to core contracts. This moves those parts into core as plain helpers. Each adapter keeps its own Vite plugin object and its framework rendering and hydration codegen.
void/pages-islands-plugincreateIslandManifest(root, extensions): resolves island imports to ids and pre-scans island pages and layouts. It follows the page scan model, so a new layout kind now needs one change instead of four.islandCssFiles(...)andgenerateIslandClientEntry(...): the islands client entry's CSS strategy (dev skip, server-recorded styles, fallback) and theinitIslandsruntime. Adapters pass in what is framework-specific: style-block imports for Vue and Svelte, and thehydrateIslandsource.islandsBuildConfig(root, pagesDir): theislands-clientbuild input.mdClientScriptIds(resolvedConfig): thevoid-mdplugin API lookup.computePagesNeedingClientJSnow uses it too.void/pagesPrefetchConfig(itscacheForis nowCacheForInput) andPagesPluginOptions. Each adapter'splugin-pages.tsre-exportsPrefetchConfig, so the name stays the same.resolvePrefetchConfig(prefetch): the 75 ms /'30s'defaults, which were repeated in four codegen strings.The adapter
plugin-islands.tsfiles shrink by about 130–180 lines each.Left in the adapters on purpose
Some code is repeated but differs by framework, or isn't tied to a core contract, so it stays where it is:
<script setup>injection)cssScopeTohandlinguseFormwarninghasNonIslandPages(React and Solid use the scan).pages-plugin-adapters.test.tspins this difference, so unifying it would be a separate behavior change.Behavior changes
buildStartinstead of accumulating acrossbuildStartcalls. Invite build --watch, a deleted island page's styles stop being imported. A single build is unchanged.hydrateIslandinstead ofmountIsland. This only changes generated code.resolveSpecifiernow accepts aReadonlyArrayof extensions (type widening only).Generated client and renderer output is otherwise unchanged.
Verification
vp run --filter './packages/**' typecheck: all 12 packages pass. A fullvp run checkalso typechecks playgrounds, which needvp run build:allfirst; I didn't run that locally.plugin-islandsandplugin-pages, pluspages-plugin-adapters,pages-islands-rescanandisland-css-rewrite: 11 files, 175 tests pass.@void/md: 18 files, 259 tests pass.vp test run: 732 files pass and 31 fail. None of the failures come from this change:platform/packages/dashboard/.void/tsconfig.json.cf-build-outputtimed out under full-suite load. All 3 files pass on their own (54 tests).🤖 Generated with Claude Code