@sveltejs/kit 3.0.0-next.22 → 3.0.0-next.24

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';