feat: programmatic form submissions#15657
Conversation
🦋 Changeset detectedLatest commit: 9a41c75 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
|
Hi! Is it a correct assessment that these changes would allow submission of forms without a dedicated Separately, in scenarios where you have multiple instances of a form using the pattern described here, can each instance of the form with its respective separate Thank you for the work on SvelteKit. |
Yes, but it's still a good practice to have one. I'm curious as to why your form wouldn't have one.
Yes, you would simply access |
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @sveltejs/kit@2.61.0 ### Minor Changes - breaking: the `.run()` method has been removed from remote queries on both the client and the server. Use `await query()` directly instead — it now works everywhere ([#15779](#15779)) - feat: remote queries can now be awaited in any context (event handlers, module scope, async callbacks), not just inside reactive contexts. The cache is shared across reactive and non-reactive subscribers, so awaiting a query in an event handler will dedupe with components that have already subscribed to the same query. ([#15779](#15779)) - feat: live query instances are now themselves async-iterable ([#15878](#15878)) - feat: add programmatic `submit` method to `form` remote function instances ([#15657](#15657)) - feat: pass `form` remote function instance into `enhance` callback ([#15657](#15657)) ### Patch Changes - fix: resolve the app payload without using `process.env.NODE_ENV` ([#15852](#15852)) - fix: support `exactOptionalPropertyTypes` for optional route params ([#15825](#15825)) - fix: correctly send `true` value to the server for 'submit' and 'hidden' form fields ([#15858](#15858)) - fix: avoid build warnings about undefined universal hooks ([#15895](#15895)) - fix: prefer default error page when failing to decode the URL pathname ([#15744](#15744)) - fix: disable link prefetching on slow internet connections ([#15885](#15885)) - fix: allow routes ending with optional parameters next to more specific routes ([#15861](#15861)) - fix: remove reliance on Content-Length header in deserialize_binary_form, which caused failures when proxies (e.g. Vercel, Azure) strip the header and use chunked transfer encoding ([#15796](#15796)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
## Summary - Bumps deps (commit c861d37). - Adapts the codebase to API changes that landed in SvelteKit 2.61: - **RemoteForm enhance callback** ([kit#15657](sveltejs/kit#15657)): the callback now receives the form instance directly. The old `form` field on the callback arg is gone; the underlying `HTMLFormElement` is now `element`. Migrated `konto/+page.svelte` (changeName, changeEmail, changePassword) and `admin/[username]/+page.svelte` (updateUserName, updateUserEmail). - **Calendar prop drop**: bits-ui's Calendar no longer accepts the `slotCount` prop. Removed the unused derived value and prop pass in `BookingPage.svelte`. Other SvelteKit changes reviewed but no code changes needed here: - [kit#15779](sveltejs/kit#15779) (isomorphic query caching, `.run` removal): we don't call `.run` anywhere. - [kit#15878](sveltejs/kit#15878) (LiveQuery self-iterability): additive; existing `await live` pattern still works. - [kit#15802](sveltejs/kit#15802) (hidden/submit accept numbers/booleans): no `as('hidden'|'submit')` call sites today. - [kit#15653](sveltejs/kit#15653) (warn on unread validation issues): every form already renders `fields.allIssues()`. ## Test plan - [x] `pnpm check` — 0 errors / 0 warnings - [x] `pnpm test` — 55 unit tests passed, 36 e2e tests passed
|
Now that |
This implements #14082 (comment):
submit()method (await myform.submit())enhancecallbackPromisewith anupdatesmethod that can be used for optimistic updates{ form, data, submit }object. (It's a copy because we don't want people to just callinstance.submit()inside theenhancecallback, since that would result in preflight validation running twice)To facilitate this I made a small change to the implementation — instead of
enhance(...)returning a fresh object, it just stashes away the callback for later. This is simpler and more consistent with howpreflightworks — it means you can do this, for example, without having to stash away a reference in order to spread it:Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.Edits