@sveltejs/kit 3.0.0-next.23 → 3.0.0-next.25

package/src/runtime/app/forms/client.js

@@ -0,0 +1,263 @@
+/** @import { ActionResult, SubmitFunction } from './types.js' */
+import { HttpError, SvelteKitError } from '@sveltejs/kit/internal';
+import { DEV } from 'esm-env';
+import { noop } from '../../../utils/functions.js';
+import { refreshAll } from '../navigation/index.js';
+import {
+	applyAction,
+	apply_action_navigation,
+	handle_error,
+	is_current_location
+} from '../../client/client.js';
+import { notify_version } from '#app/state/client';
+import { deserialize } from './shared.js';
+
+export { applyAction, deserialize };
+
+/**
+ * Shallow clone an element, so that we can access e.g. `form.action` without worrying
+ * that someone has added an `<input name="action">` (https://github.com/sveltejs/kit/issues/7593)
+ * @template {HTMLElement} T
+ * @param {T} element
+ * @returns {T}
+ */
+function clone(element) {
+	return /** @type {T} */ (HTMLElement.prototype.cloneNode.call(element));
+}
+
+/**
+ * This action enhances a `<form>` element that otherwise would work without JavaScript.
+ *
+ * The `submit` function is 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.
+ *
+ * If this function or its return value isn't set, it emulates the browser-native behaviour, just without the full-page reload. It
+ * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response
+ * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form
+ * - navigates to the page the submission lands on — populating that page's `form` prop and `page.status` — on success and failure if that isn't the current page, just as a native form submission would, but with the `?/actionName` param stripped from the destination URL
+ * - redirects in case of a redirect response
+ * - renders the nearest error page in case of an unexpected error — the one nearest the action's route, if the action is on a different page
+ *
+ * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
+ * It accepts an options object
+ * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission
+ * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures
+ * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed
+ * @template {Record<string, unknown> | undefined} Success
+ * @template {Record<string, unknown> | undefined} Failure
+ * @param {HTMLFormElement} form_element The form element
+ * @param {SubmitFunction<Success, Failure>} submit Submit callback
+ */
+export function enhance(form_element, submit = noop) {
+	if (DEV && clone(form_element).method !== 'post') {
+		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
+	}
+
+	/**
+	 * @param {{
+	 *   result: ActionResult;
+	 *   reset?: boolean;
+	 *   refreshAll?: boolean;
+	 *   invalidateAll?: boolean;
+	 *   navigate?: boolean;
+	 * }} opts
+	 */
+	const fallback_callback = async ({
+		result,
+		reset = true,
+		refreshAll: should_refresh_all,
+		invalidateAll: deprecated_invalidate_all,
+		navigate = true
+	}) => {
+		if (DEV && deprecated_invalidate_all !== undefined) {
+			console.warn(
+				'The `update({ invalidateAll })` option has been deprecated in favour of `update({ refreshAll })`'
+			);
+		}
+
+		should_refresh_all ??= deprecated_invalidate_all ?? result.type === 'success';
+
+		if (result.type === 'success' && reset) {
+			// We call reset from the prototype to avoid DOM clobbering
+			HTMLFormElement.prototype.reset.call(form_element);
+		}
+
+		const destination =
+			navigate && result.type !== 'redirect' && !is_current_location(result.location)
+				? result.location
+				: undefined;
+
+		if (destination === undefined) {
+			if (should_refresh_all && result.type !== 'redirect') {
+				await refreshAll();
+			}
+
+			await applyAction(result);
+			return;
+		}
+
+		// emulate the browser: navigate to where the submission lands, rendering that
+		// page with this result
+		await apply_action_navigation(destination, result, should_refresh_all);
+	};
+
+	/** @param {SubmitEvent} event */
+	async function handle_submit(event) {
+		const method = event.submitter?.hasAttribute('formmethod')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formMethod
+			: clone(form_element).method;
+		if (method !== 'post') return;
+
+		event.preventDefault();
+
+		const action = new URL(
+			// We can't do submitter.formAction directly because that property is always set
+			event.submitter?.hasAttribute('formaction')
+				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
+				: clone(form_element).action
+		);
+
+		const enctype = event.submitter?.hasAttribute('formenctype')
+			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formEnctype
+			: clone(form_element).enctype;
+
+		const form_data = new FormData(form_element, event.submitter);
+
+		if (DEV && enctype !== 'multipart/form-data') {
+			for (const value of form_data.values()) {
+				if (value instanceof File) {
+					throw new Error(
+						'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
+					);
+				}
+			}
+		}
+
+		const controller = new AbortController();
+
+		let cancelled = false;
+		const cancel = () => (cancelled = true);
+
+		const callback =
+			(await submit({
+				action,
+				cancel,
+				controller,
+				formData: form_data,
+				formElement: form_element,
+				submitter: event.submitter
+			})) ?? fallback_callback;
+		if (cancelled) return;
+
+		/** @type {ActionResult} */
+		let result;
+
+		try {
+			const headers = new Headers({
+				accept: 'application/json',
+				'x-sveltekit-action': 'true'
+			});
+
+			// do not explicitly set the `Content-Type` header when sending `FormData`
+			// or else it will interfere with the browser's header setting
+			// see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects#sect4
+			if (enctype !== 'multipart/form-data') {
+				headers.set(
+					'Content-Type',
+					/^(:?application\/x-www-form-urlencoded|text\/plain)$/.test(enctype)
+						? enctype
+						: 'application/x-www-form-urlencoded'
+				);
+			}
+
+			// @ts-expect-error `URLSearchParams(form_data)` is kosher, but typescript doesn't know that
+			const body = enctype === 'multipart/form-data' ? form_data : new URLSearchParams(form_data);
+
+			const response = await fetch(action, {
+				method: 'POST',
+				headers,
+				cache: 'no-store',
+				body,
+				signal: controller.signal
+			});
+
+			// detect new deployments from the response header
+			notify_version(response.headers.get('x-sveltekit-version'));
+
+			const text = await response.text();
+
+			/** @type {any} */
+			let parsed;
+			try {
+				// an empty body carries no result for an error response
+				parsed = text === '' && !response.ok ? undefined : deserialize(text);
+			} catch (error) {
+				// only an error response may have a non-ActionResult body, e.g. an HTML error page
+				if (response.ok) throw error;
+			}
+
+			if (
+				parsed?.type === 'success' ||
+				parsed?.type === 'failure' ||
+				parsed?.type === 'redirect' ||
+				parsed?.type === 'error'
+			) {
+				result = parsed;
+				if (result.type === 'error' || result.type === 'failure') {
+					result.status = response.status;
+				}
+			} else if (!response.ok) {
+				// the action never ran, e.g. the CSRF check or a proxy rejected the request.
+				// an `App.Error`-shaped body is an expected error, anything else goes through `handleError`
+				throw parsed && typeof parsed === 'object' && typeof parsed.message === 'string'
+					? new HttpError({ ...parsed, status: response.status })
+					: new SvelteKitError(
+							response.status,
+							response.statusText,
+							typeof parsed === 'string' ? parsed : response.statusText
+						);
+			} else {
+				result = parsed;
+			}
+		} catch (error) {
+			if (/** @type {any} */ (error)?.name === 'AbortError') return;
+			result = {
+				type: 'error',
+				error: await handle_error(error, {
+					params: {},
+					route: { id: null },
+					url: new URL(location.href)
+				})
+			};
+		}
+
+		await callback({
+			action,
+			formData: form_data,
+			formElement: form_element,
+			update: (opts) =>
+				fallback_callback({
+					result,
+					reset: opts?.reset,
+					refreshAll: opts?.refreshAll,
+					invalidateAll: opts?.invalidateAll,
+					navigate: opts?.navigate
+				}),
+			// @ts-expect-error generic constraints stuff we don't care about
+			result
+		});
+	}
+
+	// @ts-expect-error
+	HTMLFormElement.prototype.addEventListener.call(form_element, 'submit', handle_submit);
+
+	return {
+		destroy() {
+			// @ts-expect-error
+			HTMLFormElement.prototype.removeEventListener.call(form_element, 'submit', handle_submit);
+		}
+	};
+}

package/src/runtime/app/forms/index.js

@@ -1,263 +1 @@
-/** @import { ActionResult, SubmitFunction } from './types.js' */
-import { DEV } from 'esm-env';
-import { noop } from '../../../utils/functions.js';
-import { refreshAll } from '../navigation/index.js';
-import {
-	applyAction,
-	apply_action_navigation,
-	handle_error,
-	is_current_location
-} from '../../client/client.js';
-import { notify_version } from '../../client/state.svelte.js';
-import { parse } from '#app/internal/transport';
-
-export { applyAction };
-
-/**
- * Use this function to deserialize the response from a form submission.
- * Usage:
- *
- * ```js
- * import { deserialize } from '$app/forms';
- *
- * async function handleSubmit(event) {
- *   const response = await fetch('/form?/action', {
- *     method: 'POST',
- *     body: new FormData(event.target)
- *   });
- *
- *   const result = deserialize(await response.text());
- *   // ...
- * }
- * ```
- * @template {Record<string, unknown> | undefined} Success
- * @template {Record<string, unknown> | undefined} Failure
- * @param {string} result
- * @returns {ActionResult<Success, Failure>}
- */
-export function deserialize(result) {
-	const parsed = JSON.parse(result);
-
-	if (parsed.data) {
-		parsed.data = parse(parsed.data);
-	}
-
-	return parsed;
-}
-
-/**
- * Shallow clone an element, so that we can access e.g. `form.action` without worrying
- * that someone has added an `<input name="action">` (https://github.com/sveltejs/kit/issues/7593)
- * @template {HTMLElement} T
- * @param {T} element
- * @returns {T}
- */
-function clone(element) {
-	return /** @type {T} */ (HTMLElement.prototype.cloneNode.call(element));
-}
-
-/**
- * This action enhances a `<form>` element that otherwise would work without JavaScript.
- *
- * The `submit` function is 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.
- *
- * If this function or its return value isn't set, it emulates the browser-native behaviour, just without the full-page reload. It
- * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response
- * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form
- * - navigates to the page the submission lands on — populating that page's `form` prop and `page.status` — on success and failure if that isn't the current page, just as a native form submission would, but with the `?/actionName` param stripped from the destination URL
- * - redirects in case of a redirect response
- * - renders the nearest error page in case of an unexpected error — the one nearest the action's route, if the action is on a different page
- *
- * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
- * It accepts an options object
- * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission
- * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures
- * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed
- * @template {Record<string, unknown> | undefined} Success
- * @template {Record<string, unknown> | undefined} Failure
- * @param {HTMLFormElement} form_element The form element
- * @param {SubmitFunction<Success, Failure>} submit Submit callback
- */
-export function enhance(form_element, submit = noop) {
-	if (DEV && clone(form_element).method !== 'post') {
-		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
-	}
-
-	/**
-	 * @param {{
-	 *   result: ActionResult;
-	 *   reset?: boolean;
-	 *   refreshAll?: boolean;
-	 *   invalidateAll?: boolean;
-	 *   navigate?: boolean;
-	 * }} opts
-	 */
-	const fallback_callback = async ({
-		result,
-		reset = true,
-		refreshAll: should_refresh_all,
-		invalidateAll: deprecated_invalidate_all,
-		navigate = true
-	}) => {
-		if (DEV && deprecated_invalidate_all !== undefined) {
-			console.warn(
-				'The `update({ invalidateAll })` option has been deprecated in favour of `update({ refreshAll })`'
-			);
-		}
-
-		should_refresh_all ??= deprecated_invalidate_all ?? result.type === 'success';
-
-		if (result.type === 'success' && reset) {
-			// We call reset from the prototype to avoid DOM clobbering
-			HTMLFormElement.prototype.reset.call(form_element);
-		}
-
-		const destination =
-			navigate && result.type !== 'redirect' && !is_current_location(result.location)
-				? result.location
-				: undefined;
-
-		if (destination === undefined) {
-			if (should_refresh_all && result.type !== 'redirect') {
-				await refreshAll();
-			}
-
-			await applyAction(result);
-			return;
-		}
-
-		// emulate the browser: navigate to where the submission lands, rendering that
-		// page with this result
-		await apply_action_navigation(destination, result, should_refresh_all);
-	};
-
-	/** @param {SubmitEvent} event */
-	async function handle_submit(event) {
-		const method = event.submitter?.hasAttribute('formmethod')
-			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formMethod
-			: clone(form_element).method;
-		if (method !== 'post') return;
-
-		event.preventDefault();
-
-		const action = new URL(
-			// We can't do submitter.formAction directly because that property is always set
-			event.submitter?.hasAttribute('formaction')
-				? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formAction
-				: clone(form_element).action
-		);
-
-		const enctype = event.submitter?.hasAttribute('formenctype')
-			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formEnctype
-			: clone(form_element).enctype;
-
-		const form_data = new FormData(form_element, event.submitter);
-
-		if (DEV && enctype !== 'multipart/form-data') {
-			for (const value of form_data.values()) {
-				if (value instanceof File) {
-					throw new Error(
-						'Your form contains <input type="file"> fields, but is missing the necessary `enctype="multipart/form-data"` attribute. This will lead to inconsistent behavior between enhanced and native forms. For more details, see https://github.com/sveltejs/kit/issues/9819.'
-					);
-				}
-			}
-		}
-
-		const controller = new AbortController();
-
-		let cancelled = false;
-		const cancel = () => (cancelled = true);
-
-		const callback =
-			(await submit({
-				action,
-				cancel,
-				controller,
-				formData: form_data,
-				formElement: form_element,
-				submitter: event.submitter
-			})) ?? fallback_callback;
-		if (cancelled) return;
-
-		/** @type {ActionResult} */
-		let result;
-
-		try {
-			const headers = new Headers({
-				accept: 'application/json',
-				'x-sveltekit-action': 'true'
-			});
-
-			// do not explicitly set the `Content-Type` header when sending `FormData`
-			// or else it will interfere with the browser's header setting
-			// see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects#sect4
-			if (enctype !== 'multipart/form-data') {
-				headers.set(
-					'Content-Type',
-					/^(:?application\/x-www-form-urlencoded|text\/plain)$/.test(enctype)
-						? enctype
-						: 'application/x-www-form-urlencoded'
-				);
-			}
-
-			// @ts-expect-error `URLSearchParams(form_data)` is kosher, but typescript doesn't know that
-			const body = enctype === 'multipart/form-data' ? form_data : new URLSearchParams(form_data);
-
-			const response = await fetch(action, {
-				method: 'POST',
-				headers,
-				cache: 'no-store',
-				body,
-				signal: controller.signal
-			});
-
-			// detect new deployments from the response header
-			notify_version(response.headers.get('x-sveltekit-version'));
-
-			result = deserialize(await response.text());
-			if (result.type === 'error' || result.type === 'failure') {
-				result.status = response.status;
-			}
-		} catch (error) {
-			if (/** @type {any} */ (error)?.name === 'AbortError') return;
-			result = {
-				type: 'error',
-				error: await handle_error(error, {
-					params: {},
-					route: { id: null },
-					url: new URL(location.href)
-				})
-			};
-		}
-
-		await callback({
-			action,
-			formData: form_data,
-			formElement: form_element,
-			update: (opts) =>
-				fallback_callback({
-					result,
-					reset: opts?.reset,
-					refreshAll: opts?.refreshAll,
-					invalidateAll: opts?.invalidateAll,
-					navigate: opts?.navigate
-				}),
-			// @ts-expect-error generic constraints stuff we don't care about
-			result
-		});
-	}
-
-	// @ts-expect-error
-	HTMLFormElement.prototype.addEventListener.call(form_element, 'submit', handle_submit);
-
-	return {
-		destroy() {
-			// @ts-expect-error
-			HTMLFormElement.prototype.removeEventListener.call(form_element, 'submit', handle_submit);
-		}
-	};
-}
+export { applyAction, deserialize, enhance } from '#app/forms';

package/src/runtime/app/forms/public.d.ts

@@ -1,2 +1,2 @@
-export * from './index.js';
+export * from './client.js';
 export type { ActionResult, SubmitFunction } from './types.js';

package/src/runtime/app/forms/server.js

@@ -0,0 +1,6 @@
+import { noop, disallow_on_server } from '../../../utils/functions.js';
+
+export { deserialize } from './shared.js';
+
+export const applyAction = disallow_on_server('applyAction');
+export const enhance = noop;

package/src/runtime/app/forms/shared.js

@@ -0,0 +1,34 @@
+/** @import { ActionResult } from './types.js' */
+import { parse } from '#app/internal/transport';
+
+/**
+ * Use this function to deserialize the response from a form submission.
+ * Usage:
+ *
+ * ```js
+ * import { deserialize } from '$app/forms';
+ *
+ * async function handleSubmit(event) {
+ *   const response = await fetch('/form?/action', {
+ *     method: 'POST',
+ *     body: new FormData(event.target)
+ *   });
+ *
+ *   const result = deserialize(await response.text());
+ *   // ...
+ * }
+ * ```
+ * @template {Record<string, unknown> | undefined} Success
+ * @template {Record<string, unknown> | undefined} Failure
+ * @param {string} result
+ * @returns {ActionResult<Success, Failure>}
+ */
+export function deserialize(result) {
+	const parsed = JSON.parse(result);
+
+	if (parsed.data) {
+		parsed.data = parse(parsed.data);
+	}
+
+	return parsed;
+}

package/src/runtime/app/manifest/index.js

@@ -1 +1 @@
-export * from '__sveltekit/manifest-data';
+export * from '<sveltekit:generated>/app-manifest.js';

package/src/runtime/app/navigation/client.js

@@ -0,0 +1,15 @@
+export {
+	afterNavigate,
+	beforeNavigate,
+	disableScrollHandling,
+	goto,
+	invalidate,
+	invalidateAll,
+	refreshAll,
+	onNavigate,
+	preloadCode,
+	preloadData,
+	pushState,
+	replaceState
+} from '../../client/client.js';
+export { snapshot } from '../../client/snapshots.js';

package/src/runtime/app/navigation/index.js

@@ -1,15 +1 @@
-export {
-	afterNavigate,
-	beforeNavigate,
-	disableScrollHandling,
-	goto,
-	invalidate,
-	invalidateAll,
-	refreshAll,
-	onNavigate,
-	preloadCode,
-	preloadData,
-	pushState,
-	replaceState
-} from '../../client/client.js';
-export { snapshot } from '../../client/snapshots.js';
+export * from '#app/navigation';

package/src/runtime/app/navigation/public.d.ts

@@ -1,6 +1,6 @@
 import type { LayoutParams as AppLayoutParams, RouteId as AppRouteId } from '$app/types';
 
-export * from './index.js';
+export * from './client.js';
 
 /**
  * Information about the target of a specific navigation.

package/src/runtime/app/navigation/server.js

@@ -0,0 +1,15 @@
+import { noop, disallow_on_server } from '../../../utils/functions.js';
+
+export const afterNavigate = noop;
+export const beforeNavigate = noop;
+export const disableScrollHandling = disallow_on_server('disableScrollHandling', '()');
+export const goto = disallow_on_server('goto');
+export const invalidate = disallow_on_server('invalidate');
+export const invalidateAll = disallow_on_server('invalidateAll', '()');
+export const onNavigate = noop;
+export const refreshAll = disallow_on_server('refreshAll', '()');
+export const preloadCode = disallow_on_server('preloadCode');
+export const preloadData = disallow_on_server('preloadData');
+export const pushState = disallow_on_server('pushState');
+export const replaceState = disallow_on_server('replaceState');
+export const snapshot = noop;

package/src/runtime/app/paths/server.js

@@ -4,7 +4,7 @@ import { decode_pathname } from '../../../utils/url.js';
 import { add_data_suffix } from '../../../pathname.js';
 import { try_get_request_store } from '@sveltejs/kit/internal/server';
 import { manifest } from '../../server/internal.js';
-import { get_hooks } from '__SERVER__/internal.js';
+import { get_hooks } from '<sveltekit:generated>/server.js';
 import { DEV } from 'esm-env';
 
 export { base, assets, app_dir } from './internal/server.js';

package/src/runtime/app/server/remote/form.js

@@ -11,7 +11,11 @@ import {
 	parse_form_key
 } from '../../../form-utils.js';
 import { get_cache, get_implicit_lookup, run_remote_function } from './shared.js';
-import { ValidationError } from '@sveltejs/kit/internal';
+import { ActionFailure, ValidationError } from '@sveltejs/kit/internal';
+import { DEV } from 'esm-env';
+
+const incorrect_fail_message =
+	'`fail(...)` is for form actions. A remote `form` handler should call `invalid(...)` instead. See https://svelte.dev/docs/kit/remote-functions#form-Programmatic-validation';
 
 /**
  * Creates a form object that can be spread onto a `<form>` element.
@@ -118,9 +122,15 @@ export function form(validate_or_fn, maybe_fn) {
 							() => data,
 							(data) => (!maybe_fn ? fn() : fn(data, issue))
 						);
+
+						if (DEV && output.result instanceof ActionFailure) {
+							throw new Error(incorrect_fail_message);
+						}
 					} catch (e) {
 						if (e instanceof ValidationError) {
 							handle_issues(output, e.issues, form_data, __.id);
+						} else if (DEV && e instanceof ActionFailure) {
+							throw new Error(incorrect_fail_message, { cause: e });
 						} else {
 							throw e;
 						}