svelte, angular and lit adapters have no SSR-safe default formId
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
FormApi falls back to uuid() when no formId is passed:
// packages/form-core/src/FormApi.ts
this._formId = opts?.formId ?? uuid()
That value is random per instance, so the server render and the client render disagree on it. Binding it (id={form.formId}) then produces a hydration mismatch.
React and Preact have always passed an SSR-safe id. #2259 and #2263 added one for Vue and Solid. Three adapters still pass options straight through and never supply a fallback:
| Adapter | SSR-safe default formId |
|---|---|
| react-form | yes, React.useId |
| preact-form | yes, useId |
| vue-form | yes, since #2259 |
| solid-form | yes, since #2263 |
| svelte-form | no |
| angular-form | no |
| lit-form | no |
grep -r formId packages/<adapter>/src returns nothing for those three, and each returns the FormApi instance directly, so form.formId is reachable from user code.
SvelteKit is the case I'd worry about, since SSR is on by default there.
Before I send anything: do you want the same treatment for these three? Svelte is the awkward one. $props.id() needs Svelte 5.20 while the peer range is ^5.0.0, and it is a compile-time rune so it cannot be feature-detected off the namespace the way vue-form does with Vue.useId. I would rather agree on the approach than guess. Happy to leave angular and lit out if their hydration does not care about a mismatched id.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/form-core/src/FormApi.ts and inspect the Svelte, Angular, and Lit adapter sources under their packages//src directories. Compare how React, Preact, Vue, and Solid provide SSR-safe formId values. Done means the affected adapters have an agreed SSR-safe approach that avoids server/client hydration mismatches, including a compatibility decision for Svelte.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100