@sveltejs/kit 1.0.0-next.477 → 1.0.0-next.478

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.477",
+  "version": "1.0.0-next.478",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",

package/src/runtime/app/forms.js

@@ -16,46 +16,43 @@ const ssr = import.meta.env.SSR;
 export const applyAction = ssr ? guard('applyAction') : client.apply_action;
 
 /** @type {import('$app/forms').enhance} */
-export function enhance(element, submit = () => {}) {
+export function enhance(form, submit = () => {}) {
 	/**
 	 * @param {{
-	 *   element: HTMLFormElement | HTMLButtonElement | HTMLInputElement;
-	 *   form: HTMLFormElement;
+	 *   action: string;
 	 *   result: import('types').ActionResult;
 	 * }} opts
 	 */
-	const fallback_callback = async ({ element, form, result }) => {
+	const fallback_callback = async ({ action, result }) => {
 		if (result.type === 'success') {
 			await invalidateAll();
 		}
 
-		const action = element.formAction ?? form.action;
-
 		if (location.origin + location.pathname === action.split('?')[0]) {
 			applyAction(result);
 		}
 	};
 
-	const form =
-		element instanceof HTMLFormElement ? element : /** @type {HTMLFormElement} */ (element.form);
-	if (!form) throw new Error('Element is not associated with a form');
-
 	/** @param {SubmitEvent} event */
 	async function handle_submit(event) {
 		event.preventDefault();
 
-		const action = element.formAction ?? form.action;
-
+		// We can't do submitter.formAction directly because that property is always set
+		const action = event.submitter?.hasAttribute('formaction')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
+			: form.action;
 		const data = new FormData(form);
+		const controller = new AbortController();
 
 		let cancelled = false;
 		const cancel = () => (cancelled = true);
 
 		const callback =
 			submit({
-				element,
-				data,
+				action,
 				cancel,
+				controller,
+				data,
 				form
 			}) ?? fallback_callback;
 		if (cancelled) return;
@@ -69,16 +66,18 @@ export function enhance(element, submit = () => {}) {
 				headers: {
 					accept: 'application/json'
 				},
-				body: data
+				body: data,
+				signal: controller.signal
 			});
 
 			result = await response.json();
 		} catch (error) {
+			if (/** @type {any} */ (error)?.name === 'AbortError') return;
 			result = { type: 'error', error };
 		}
 
 		callback({
-			element,
+			action,
 			data,
 			form,
 			// @ts-expect-error generic constraints stuff we don't care about

package/src/runtime/client/client.js

@@ -1506,7 +1506,7 @@ async function load_data(url, invalid) {
  * @returns {App.PageError}
  */
 function handle_error(error, event) {
-	return hooks.handleError({ error, event }) ?? /** @type {any} */ ({ error: 'Internal Error' });
+	return hooks.handleError({ error, event }) ?? /** @type {any} */ ({ message: 'Internal Error' });
 }
 
 // TODO remove for 1.0

package/types/ambient.d.ts

@@ -96,20 +96,19 @@ declare module '$app/forms' {
 	import type { ActionResult } from '@sveltejs/kit';
 
 	export type SubmitFunction<
-		Element extends HTMLFormElement | HTMLInputElement | HTMLButtonElement = HTMLFormElement,
 		Success extends Record<string, unknown> | undefined = Record<string, any>,
 		Invalid extends Record<string, unknown> | undefined = Record<string, any>
 	> = (input: {
+		action: string;
 		data: FormData;
 		form: HTMLFormElement;
-		element: Element;
+		controller: AbortController;
 		cancel: () => void;
 	}) =>
 		| void
 		| ((opts: {
-				data: FormData;
 				form: HTMLFormElement;
-				element: Element;
+				action: string;
 				result: ActionResult<Success, Invalid>;
 		  }) => void);
 
@@ -119,14 +118,14 @@ declare module '$app/forms' {
 	 * @param options Callbacks for different states of the form lifecycle
 	 */
 	export function enhance<
-		Element extends HTMLFormElement | HTMLInputElement | HTMLButtonElement = HTMLFormElement,
 		Success extends Record<string, unknown> | undefined = Record<string, any>,
 		Invalid extends Record<string, unknown> | undefined = Record<string, any>
 	>(
-		element: Element,
+		form: HTMLFormElement,
 		/**
-		 * Called upon submission with the given FormData.
+		 * Called upon submission with the given FormData and the `action` that should be triggered.
 		 * If `cancel` is called, the form will not be submitted.
+		 * You can use the abort `controller` to cancel the submission in case another one starts.
 		 * If a function is returned, that function is called with the response from the server.
 		 * If nothing is returned, the fallback will be used.
 		 *
@@ -137,7 +136,7 @@ declare module '$app/forms' {
 		 * - redirects in case of a redirect response
 		 * - redirects to the nearest error page in case of an unexpected error
 		 */
-		submit?: SubmitFunction<Element, Success, Invalid>
+		submit?: SubmitFunction<Success, Invalid>
 	): { destroy: () => void };
 
 	/**