@sveltejs/kit 1.0.0-next.475 → 1.0.0-next.476

package/package.json

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

package/scripts/special-types/$env+dynamic+private.md

@@ -6,3 +6,5 @@ This module cannot be imported into client-side code.
 import { env } from '$env/dynamic/private';
 console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
 ```
+
+> In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.

package/src/runtime/app/forms.js

@@ -16,32 +16,55 @@ const ssr = import.meta.env.SSR;
 export const applyAction = ssr ? guard('applyAction') : client.apply_action;
 
 /** @type {import('$app/forms').enhance} */
-export function enhance(form, submit = () => {}) {
-	/** @param {import('types').ActionResult} result */
-	const fallback_callback = async (result) => {
+export function enhance(element, submit = () => {}) {
+	/**
+	 * @param {{
+	 *   element: HTMLFormElement | HTMLButtonElement | HTMLInputElement;
+	 *   form: HTMLFormElement;
+	 *   result: import('types').ActionResult;
+	 * }} opts
+	 */
+	const fallback_callback = async ({ element, form, result }) => {
 		if (result.type === 'success') {
 			await invalidateAll();
 		}
 
-		if (location.origin + location.pathname === form.action.split('?')[0]) {
+		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;
+
 		const data = new FormData(form);
 
 		let cancelled = false;
 		const cancel = () => (cancelled = true);
 
-		const callback = submit({ form, data, cancel }) ?? fallback_callback;
+		const callback =
+			submit({
+				element,
+				data,
+				cancel,
+				form
+			}) ?? fallback_callback;
 		if (cancelled) return;
 
+		/** @type {import('types').ActionResult} */
+		let result;
+
 		try {
-			const response = await fetch(form.action, {
+			const response = await fetch(action, {
 				method: 'POST',
 				headers: {
 					accept: 'application/json'
@@ -49,10 +72,28 @@ export function enhance(form, submit = () => {}) {
 				body: data
 			});
 
-			callback(await response.json());
+			result = await response.json();
 		} catch (error) {
-			callback({ type: 'error', error });
+			result = { type: 'error', error };
 		}
+
+		callback({
+			element,
+			data,
+			form,
+			// @ts-expect-error generic constraints stuff we don't care about
+			result,
+			// TODO remove for 1.0
+			get type() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			},
+			get location() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			},
+			get error() {
+				throw new Error('(result) => {...} has changed to ({ result }) => {...}');
+			}
+		});
 	}
 
 	form.addEventListener('submit', handle_submit);

package/types/ambient.d.ts

@@ -89,13 +89,22 @@ declare module '$app/forms' {
 	import type { ActionResult } from '@sveltejs/kit';
 
 	export type SubmitFunction<
-		Success extends Record<string, unknown> | undefined,
-		Invalid extends Record<string, unknown> | undefined
+		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: {
 		data: FormData;
 		form: HTMLFormElement;
+		element: Element;
 		cancel: () => void;
-	}) => void | ((result: ActionResult<Success, Invalid>) => void);
+	}) =>
+		| void
+		| ((opts: {
+				data: FormData;
+				form: HTMLFormElement;
+				element: Element;
+				result: ActionResult<Success, Invalid>;
+		  }) => void);
 
 	/**
 	 * This action enhances a `<form>` element that otherwise would work without JavaScript.
@@ -103,10 +112,11 @@ 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>
 	>(
-		form: HTMLFormElement,
+		element: Element,
 		/**
 		 * Called upon submission with the given FormData.
 		 * If `cancel` is called, the form will not be submitted.
@@ -120,7 +130,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<Success, Invalid>
+		submit?: SubmitFunction<Element, Success, Invalid>
 	): { destroy: () => void };
 
 	/**