Skip to content

Commit 2569518

Browse files
Form actions (sveltejs#6469)
* basic actions method * add form store * remove export let errors in favor of form store * make actions an object * implement FilesFormData * restrict values type, fix conversion, switch argument order * validation->invalid * start writing docs * implement handleFile * fix tests * test for files * complete migration message * support validation error thrown in endpoints * infer file type from handleFile hook * add handleFile to build * types, cleanup * $form -> $submitted * woops * allow arbitrary data on invalid, persist data in success case * fix infered FileType * give JSON response a well-defined shape * provide form state through form prop and $page.form * return invalid instead of throwing it * types for actions * fix, skip test * updateForm (simple version) * making a start at enhance * bye bye method overrides * update create-svelte default template * remove handleFile * full blown enhance and updateForm through $app/forms * fix type reference * adjust default template * remove $page.form for now (too much of a footgun due to resets) * tests, ensure form is only reset on page changes * ????? * cleanup * docs about multiple forms * make docs build * lint * fix * add toggle action * rename generated FormData type to ActionData * reset form on navigation, not invalidation * silence missing/unused form prop warnings, DRY out code a bit * Update packages/kit/src/runtime/server/page/actions.js * Update packages/kit/src/runtime/server/page/actions.js * Update packages/kit/src/runtime/server/page/actions.js * change message to reference actions * Update packages/kit/src/runtime/server/page/actions.js * Update packages/kit/src/runtime/server/page/actions.js * be more specific about what content-type is accepted * Update packages/kit/src/runtime/server/page/render.js * Update packages/kit/src/runtime/server/page/render.js * unskip test * fix types * tweak enhance function and make todos example work again * changeset * deduplicate type usage * lint * wording, make updateForm (now applySubmissionResult) more powerful * fix, docs * applySubmissionResult -> applyAction * change enhance function signature * fix template * fix template * Update .changeset/spicy-pugs-applaud.md * Update packages/kit/src/runtime/app/forms.js * Apply suggestions from code review * prettier * rename SubmissionResult to ActionResult * Update packages/kit/types/ambient.d.ts * Update packages/kit/types/ambient.d.ts * updateForm -> applyAction * use RequestEvent instead of ActionEvent * fix * invalidate first, delegate redirect/error handling to applyAction * remove token stuff, simplify a bit * show +error page without reloading route * check action return data can be serialized as JSON * add note to render.js * merge FetchFormResponse and ActionResult * update docs * remove logging * tiny docs tweak Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Rich Harris <[email protected]>
1 parent 4922e26 commit 2569518

File tree

82 files changed

+1603
-788
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+1603
-788
lines changed

.changeset/spicy-pugs-applaud.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'create-svelte': patch
3+
'@sveltejs/kit': patch
4+
---
5+
6+
[breaking] Replace `POST`/`PUT`/`PATCH`/`DELETE` in `+page.server.js` with `export const actions`

.prettierrc

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"files": [
2222
"**/CHANGELOG.md",
2323
"**/.svelte-kit/**",
24+
"documentation/**/*.md",
2425
"packages/package/test/fixtures/**/expected/**/*",
2526
"packages/package/test/watch/expected/**/*",
2627
"packages/package/test/watch/package/**/*",

documentation/docs/03-routing.md

+1-68
Original file line numberDiff line numberDiff line change
@@ -112,74 +112,7 @@ During client-side navigation, SvelteKit will load this data from the server, wh
112112

113113
Like `+page.js`, `+page.server.js` can export [page options](/docs/page-options)`prerender`, `ssr` and `csr`.
114114

115-
#### Actions
116-
117-
`+page.server.js` can also declare _actions_, which correspond to the `POST`, `PATCH`, `PUT` and `DELETE` HTTP methods. A request made to the page with one of these methods will invoke the corresponding action before rendering the page.
118-
119-
An action can return a `{ status?, errors }` object if there are validation errors (`status` defaults to `400`), or an optional `{ location }` object to redirect the user to another page:
120-
121-
```js
122-
/// file: src/routes/login/+page.server.js
123-
124-
// @filename: ambient.d.ts
125-
declare global {
126-
const createSessionCookie: (userid: string) => string;
127-
const hash: (content: string) => string;
128-
const db: {
129-
findUser: (name: string) => Promise<{
130-
id: string;
131-
username: string;
132-
password: string;
133-
}>
134-
}
135-
}
136-
137-
export {};
138-
139-
// @filename: index.js
140-
// ---cut---
141-
import { error } from '@sveltejs/kit';
142-
143-
/** @type {import('./$types').Action} */
144-
export async function POST({ cookies, request, url }) {
145-
const values = await request.formData();
146-
147-
const username = /** @type {string} */ (values.get('username'));
148-
const password = /** @type {string} */ (values.get('password'));
149-
150-
const user = await db.findUser(username);
151-
152-
if (!user) {
153-
return {
154-
status: 403,
155-
errors: {
156-
username: 'No user with this username'
157-
}
158-
};
159-
}
160-
161-
if (user.password !== hash(password)) {
162-
return {
163-
status: 403,
164-
errors: {
165-
password: 'Incorrect password'
166-
}
167-
};
168-
}
169-
170-
cookies.set('sessionid', createSessionCookie(user.id), {
171-
httpOnly: true
172-
});
173-
174-
return {
175-
location: url.searchParams.get('redirectTo') ?? '/'
176-
};
177-
}
178-
```
179-
180-
If validation `errors` are returned, they will be available inside `+page.svelte` as `export let errors`.
181-
182-
> The actions API will likely change in the near future: https://github.com/sveltejs/kit/discussions/5875
115+
A `+page.server.js` file can also export _actions_. If `load` lets you read data from the server, `actions` let you write data _to_ the server using the `<form>` element. To learn how to use them, see the [form actions](/docs/form-actions) section.
183116

184117
### +error
185118

0 commit comments

Comments
 (0)