diff --git a/.changeset/calm-ravens-push.md b/.changeset/calm-ravens-push.md new file mode 100644 index 000000000000..d76a31b13520 --- /dev/null +++ b/.changeset/calm-ravens-push.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': minor +--- + +feat: expose `RemoteFormSubmitFunction` type diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index 745cf149317a..29b38faffe2b 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -2143,6 +2143,18 @@ export interface ValidationError { issues: StandardSchemaV1.Issue[]; } +/** + * The callback passed to a remote form's `enhance` method. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation. + */ +export type RemoteFormSubmitFunction< + Input extends RemoteFormInput | void = RemoteFormInput | void, + Output = any +> = ( + form: Omit, 'enhance' | 'element'> & { + readonly element: HTMLFormElement; + } +) => MaybePromise; + /** * The type of a remote `form` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation. */ @@ -2159,13 +2171,7 @@ export type RemoteForm = { updates: (...updates: RemoteQueryUpdate[]) => Promise; }; /** Use the `enhance` method to influence what happens when the form is submitted. */ - enhance( - callback: ( - form: Omit, 'enhance' | 'element'> & { - readonly element: HTMLFormElement; - } - ) => MaybePromise - ): { + enhance(callback: RemoteFormSubmitFunction): { method: 'POST'; action: string; [attachment: symbol]: (node: HTMLFormElement) => void; diff --git a/packages/kit/test/types/remote.test.ts b/packages/kit/test/types/remote.test.ts index 8c44aa4e3d74..cfa60465ab60 100644 --- a/packages/kit/test/types/remote.test.ts +++ b/packages/kit/test/types/remote.test.ts @@ -2,6 +2,7 @@ import { query, prerender, command, form, requested } from '$app/server'; import { StandardSchemaV1 } from '@standard-schema/spec'; import { RemoteForm, + RemoteFormSubmitFunction, RemoteFormFields, RemoteFormInput, RemoteLiveQueryFunction, @@ -353,6 +354,19 @@ function form_tests() { f.result?.success === true; + const submit: RemoteFormSubmitFunction<{ input: string }, { success: boolean }> = async ( + form + ) => { + const result: { success: boolean } | undefined = form.result; + result; + // @ts-expect-error + form.enhance(() => {}); + const x: boolean = await form.submit(); + x; + }; + + f.enhance(submit); + f.enhance(async (form) => { const x: boolean = await form.submit(); x; diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts index fa15b700a746..7ac53c0c3b31 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -2117,6 +2117,18 @@ declare module '@sveltejs/kit' { issues: StandardSchemaV1.Issue[]; } + /** + * The callback passed to a remote form's `enhance` method. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation. + */ + export type RemoteFormSubmitFunction< + Input extends RemoteFormInput | void = RemoteFormInput | void, + Output = any + > = ( + form: Omit, 'enhance' | 'element'> & { + readonly element: HTMLFormElement; + } + ) => MaybePromise; + /** * The type of a remote `form` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#form) for full documentation. */ @@ -2133,13 +2145,7 @@ declare module '@sveltejs/kit' { updates: (...updates: RemoteQueryUpdate[]) => Promise; }; /** Use the `enhance` method to influence what happens when the form is submitted. */ - enhance( - callback: ( - form: Omit, 'enhance' | 'element'> & { - readonly element: HTMLFormElement; - } - ) => MaybePromise - ): { + enhance(callback: RemoteFormSubmitFunction): { method: 'POST'; action: string; [attachment: symbol]: (node: HTMLFormElement) => void;