Skip to content

fix(web): keep form input entered before hydration - #359

Merged
botandbang merged 2 commits into
mainfrom
bnb/hydration-form-input
Nov 1, 2026
Merged

botandbang merged 2 commits into
mainfrom
bnb/hydration-form-input

Conversation

@botandbang

Copy link
Copy Markdown
Contributor

What and why

Anything typed or ticked before the page's scripts loaded was lost when the page hydrated. That covered the directory's search and filters, the profile, press kit, show and claim editors, and the admin forms. Svelte writes a one-way value={...} or checked={...} over the control while hydrating (sveltejs/svelte#18951, with a select's value the same in sveltejs/svelte#18928), while its bind: directives keep the control's value. Each form now binds to a copy of its values from a small shared helper, formFields() (a deep $state copy that starts over on new values, so navigations and failed submits reset the form as before). Selects mark their options selected instead of binding. 12 pages and 8 components changed.

Stacked on #357.

How it was tested

Two e2e tests fill the directory and the editors before hydration by holding the page's scripts. They fail on the parent commit and pass 10 of 10 runs now. Unit tests cover formFields() and the editors starting over. The Chromium e2e suite (26/26), format, lint, check, test, knip and coverage pass. Coverage dropped 0.18 points in statements and 0.19 in branches from compiler-generated binding code, still above the thresholds.

Not fixed

A place typed into the location field before hydration keeps the old hidden coordinates, which was already the case.

Hydration writes a one-way `value={...}` or `checked={...}` over what the
control holds (sveltejs/svelte#18951), and a select's value the same way
(sveltejs/svelte#18928), so anything typed or ticked before the scripts
loaded was lost: the directory's search and filters, the profile, press
kit, show and claim editors, and the admin forms. Svelte's `bind:`
directives take the control's value while hydrating instead, so each form
now binds to a copy of its values from formFields() (a deep $state copy
that starts over on new values), and selects mark their options
`selected` instead of binding.

The e2e tests fill the directory and the editors before hydration, by
holding the page's scripts, and check the values are still there after.
@botandbang
botandbang requested a review from bnb as a code owner November 1, 2026 17:58
@github-actions

github-actions Bot commented Nov 1, 2026 •

Copy link
Copy Markdown

Coverage Report for apps/web

Status Category Percentage Covered / Total
🟢 Lines 95.54% (🎯 93%)
⬆️ +0.03 pp
8257 / 8642
🟢 Statements 93.97% (🎯 91%)
⬇️ -0.20 pp
12581 / 13387
🟢 Functions 94.3% (🎯 92%)
⬆️ +0.17 pp
3377 / 3581
🟢 Branches 84.75% (🎯 80%)
⬇️ -0.18 pp
5887 / 6946
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
apps/web/src/lib/form-fields.svelte.ts 100% 100% 100% 100%
apps/web/src/lib/components/BugReportForm.svelte 92.47%
⬇️ -1.78 pp
80.76%
⬇️ -2.57 pp
88%
⬆️ +4.67 pp
88.88%
⬆️ +0.31 pp
39-43, 62, 78-82
apps/web/src/lib/components/ChannelTopics.svelte 86.95%
⬇️ -3.52 pp
50%
⬇️ -50.00 pp
62.5%
⬇️ -8.92 pp
100%
🟰 ±0 pp
27, 23
apps/web/src/lib/components/ClaimFields.svelte 97.5%
⬇️ -2.50 pp
66.66%
⬇️ -33.34 pp
100%
🟰 ±0 pp
100%
🟰 ±0 pp
24
apps/web/src/lib/components/GenreInput.svelte 95.65%
⬇️ -1.40 pp
52.94%
🟰 ±0 pp
100%
🟰 ±0 pp
93.93%
⬆️ +0.18 pp
42-43, 69
apps/web/src/lib/components/ProfileSetupCard.svelte 83.33%
⬇️ -2.38 pp
50%
🟰 ±0 pp
71.42%
⬆️ +11.42 pp
75%
⬆️ +1.67 pp
30-34, 40
apps/web/src/lib/components/ProjectForm.svelte 81.57%
⬇️ -3.57 pp
50%
🟰 ±0 pp
85.36%
⬆️ +2.61 pp
84%
⬆️ +0.33 pp
94-112, 118-123, 120, 76-80
apps/web/src/lib/components/ShowForm.svelte 90%
⬇️ -10.00 pp
100%
🟰 ±0 pp
100%
🟰 ±0 pp
100%
🟰 ±0 pp
31, 17-27, 36
apps/web/src/lib/components/epk/AccessMatrix.svelte 98.98%
⬆️ +0.12 pp
60%
⬇️ -6.66 pp
100%
⬆️ +3.85 pp
100%
🟰 ±0 pp
61
apps/web/src/lib/components/epk/EpkForm.svelte 94.71%
⬇️ -3.00 pp
61.53%
⬇️ -10.47 pp
93.75%
⬆️ +0.28 pp
94.93%
⬆️ +0.20 pp
96, 111, 131, 147, 185-186, 63-67, 78-197
apps/web/src/lib/components/form/BasicsFields.svelte 94.23%
⬆️ +4.87 pp
81.81%
⬆️ +1.81 pp
94.73%
⬆️ +3.83 pp
100%
⬆️ +2.71 pp
18, 58-62, 86-89, 96
apps/web/src/lib/components/form/PerformerFields.svelte 91.55%
⬇️ -3.68 pp
81.48%
⬇️ -3.02 pp
91.52%
⬆️ +2.77 pp
98.27%
🟰 ±0 pp
16, 57, 110, 118, 128, 146-162, 178, 181-183, 187, 198, 207, 196-197, 227, 239-244
apps/web/src/lib/components/form/PromoterFields.svelte 86.04%
⬇️ -5.85 pp
83.33%
🟰 ±0 pp
86.95%
⬆️ +8.38 pp
100%
🟰 ±0 pp
31, 28-30, 35
Generated in workflow #78 for commit 48dfe6b by the Vitest Coverage Report Action

Size

Compared with main. KiB are 1,024 bytes.

This pull request main Change
Client JavaScript 718.3 KiB 715 KiB +3.3 KiB (+0.5%)
Client JavaScript, brotli 241.4 KiB 240.3 KiB +1.1 KiB (+0.5%)
Client CSS 90.2 KiB 90.2 KiB 0 B (0%)
Client CSS, brotli 12.9 KiB 12.9 KiB 0 B (0%)

bnb
bnb previously approved these changes Nov 1, 2026
Base automatically changed from bnb/e2e-tracklist-flake to main November 1, 2026 18:38
@botandbang
botandbang dismissed bnb’s stale review November 1, 2026 18:38

The base branch was changed.

bnb
bnb previously approved these changes Nov 1, 2026
# Conflicts:
#	apps/web/src/lib/components/ProjectForm.svelte
#	apps/web/src/routes/projects/+page.svelte
@github-actions github-actions Bot added web The Local Network website (apps/web) web: directory Directory search, the show matcher, genres and places web: projects Project profiles, claims, and the DJ stats and sets on them web: epk Press kits and who can see them web: bookings Booking inquiries and their threads web: planner Promoters' private planner web: staff Admin, moderation and the audit log web: accounts Signing in, sessions and the account pages web: ui Shared components, design tokens, layout and the static pages tests Tests, fixtures and test harnesses labels Nov 1, 2026
@botandbang
botandbang enabled auto-merge November 1, 2026 20:20
@botandbang
botandbang added this pull request to the merge queue Nov 1, 2026
Merged via the queue into main with commit b6b75c3 Nov 1, 2026
25 checks passed
@botandbang
botandbang deleted the bnb/hydration-form-input branch November 1, 2026 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

tests Tests, fixtures and test harnesses web: accounts Signing in, sessions and the account pages web: bookings Booking inquiries and their threads web: directory Directory search, the show matcher, genres and places web: epk Press kits and who can see them web: planner Promoters' private planner web: projects Project profiles, claims, and the DJ stats and sets on them web: staff Admin, moderation and the audit log web: ui Shared components, design tokens, layout and the static pages web The Local Network website (apps/web)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants