@sveltejs/kit 3.0.0-next.23 → 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';

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

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

@@ -1,7 +1,6 @@
 /** @import { RemoteResource, RemotePrerenderFunction } from '$app/server' */
 /** @import { RemoteFunctionResponse, RemotePrerenderInputsGenerator, RemotePrerenderInternals, MaybePromise } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-import { json } from '@sveltejs/kit';
 import { HandledHttpError } from '@sveltejs/kit/internal';
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { stringify_remote_arg } from '../../../shared.js';
@@ -145,7 +144,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 				const body = { type: 'result', data: stringify({ _: result }) };
 				state.prerendering.dependencies.set(url, {
 					body: JSON.stringify(body),
-					response: json(body)
+					response: Response.json(body)
 				});
 			}
 

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

@@ -4,7 +4,7 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { create_remote_key, stringify_remote_arg } from '../../../shared.js';
-import { prerendering } from '$app/env/internal';
+import { prerendering } from '#app/env/server';
 import {
 	create_validator,
 	get_cache,

package/src/runtime/app/state/client.svelte.js

@@ -0,0 +1,207 @@
+/** @import { Navigation } from '$app/navigation' */
+/** @import { Page } from '$app/state' */
+import { DEV } from 'esm-env';
+import { assets } from '#app/paths';
+import { version } from '$app/env';
+
+/** @type {Page} */
+export const internal_page = new (class Page {
+	data = $state.raw({});
+	form = $state.raw(null);
+	error = $state.raw(null);
+	params = $state.raw({});
+	route = $state.raw({ id: null });
+	shallow = $state.raw(null);
+	state = $state.raw({});
+	status = $state.raw(-1);
+	url = $state.raw(new URL('a:'));
+})();
+
+/**
+ * @param {Partial<Page>} new_page
+ */
+export function update_page(new_page) {
+	Object.assign(internal_page, new_page);
+}
+
+/**
+ * A read-only reactive object with information about the current page, serving several use cases:
+ * - retrieving the combined `data` of all pages/layouts anywhere in your component tree (also see [loading data](https://svelte.dev/docs/kit/load))
+ * - retrieving the current value of the `form` prop anywhere in your component tree (also see [form actions](https://svelte.dev/docs/kit/form-actions))
+ * - retrieving the page state that was set through `goto` (also see [goto](https://svelte.dev/docs/kit/$app-navigation#goto) and [shallow routing](https://svelte.dev/docs/kit/shallow-routing))
+ * - retrieving metadata such as the URL you're on, the current route and its parameters, the target of a shallow navigation, and whether or not there was an error
+ *
+ * ```svelte
+ * <!--- file: +layout.svelte --->
+ * <script>
+ * 	import { page } from '$app/state';
+ * </script>
+ *
+ * <p>Currently at {page.url.pathname}</p>
+ *
+ * {#if page.error}
+ * 	<span class="red">Problem detected</span>
+ * {:else}
+ * 	<span class="small">All systems operational</span>
+ * {/if}
+ * ```
+ *
+ * Changes to `page` are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
+ *
+ * ```svelte
+ * <!--- file: +page.svelte --->
+ * <script>
+ * 	import { page } from '$app/state';
+ * 	const id = $derived(page.params.id); // This will correctly update id for usage on this page
+ * 	$: badId = page.params.id; // Do not use; will never update after initial load
+ * </script>
+ * ```
+ *
+ * On the server, values can only be read during rendering (in other words _not_ in e.g. `load` functions). In the browser, the values can be read at any time.
+ *
+ * @type {Page}
+ */
+export const page = {
+	get data() {
+		return internal_page.data;
+	},
+	get error() {
+		return internal_page.error;
+	},
+	get form() {
+		return internal_page.form;
+	},
+	get params() {
+		return internal_page.params;
+	},
+	get route() {
+		return internal_page.route;
+	},
+	get shallow() {
+		return internal_page.shallow;
+	},
+	get state() {
+		return internal_page.state;
+	},
+	get status() {
+		return internal_page.status;
+	},
+	get url() {
+		return internal_page.url;
+	}
+};
+
+/** @type {Navigation | null} */
+let navigation = $state.raw(null);
+
+/**
+ * @param {Navigation | null} value
+ */
+export function set_navigation(value) {
+	navigation = value;
+}
+
+/**
+ * A read-only object representing an in-progress navigation, with `from`, `to`, `type` and (if `type === 'popstate'`) `delta` properties.
+ * Values are `null` when no navigation is occurring, or during server rendering.
+ * @type {Navigation | { from: null, to: null, type: null, willUnload: null, delta: null, complete: null }}
+ */
+export const navigating = {
+	get from() {
+		return navigation ? navigation.from : null;
+	},
+	get to() {
+		return navigation ? navigation.to : null;
+	},
+	get type() {
+		return navigation ? navigation.type : null;
+	},
+	get willUnload() {
+		return navigation ? navigation.willUnload : null;
+	},
+	// @ts-expect-error TODO not entirely sure what's going on here
+	get delta() {
+		return navigation?.type === 'popstate' ? navigation.delta : null;
+	},
+	get complete() {
+		return navigation ? navigation.complete : null;
+	}
+};
+
+const interval = __SVELTEKIT_APP_VERSION_POLL_INTERVAL__;
+
+/** @type {number | undefined} */
+let timeout;
+
+/** @type {Promise<boolean> | undefined} */
+let checking;
+
+let _updated = $state(false);
+
+/**
+ * A read-only reactive value that's initially `false`. SvelteKit checks for new versions on data, remote, and form action responses (via the `x-sveltekit-version` header), when the tab regains focus or becomes visible, and on a poll interval (see [`version.pollInterval`](https://svelte.dev/docs/kit/configuration#version)). `updated.current` is set to `true` when a new version is detected. `updated.check()` will force an immediate check, regardless of polling.
+ * @type {{ get current(): boolean; check(): Promise<boolean>; }}
+ */
+export const updated = {
+	get current() {
+		return _updated;
+	},
+	async check() {
+		if (DEV) return false;
+
+		window.clearTimeout(timeout);
+
+		if (_updated) {
+			return Promise.resolve(true);
+		}
+
+		return (checking ??= (async () => {
+			try {
+				const res = await fetch(`${assets}/${__SVELTEKIT_APP_VERSION_FILE__}`, {
+					headers: {
+						'cache-control': 'no-cache'
+					}
+				});
+
+				if (!res.ok) {
+					return false;
+				}
+
+				const data = await res.json();
+				return (_updated ||= data.version !== version);
+			} catch {
+				return false;
+			} finally {
+				checking = undefined;
+				if (interval && !_updated) timeout = window.setTimeout(updated.check, interval);
+			}
+		})());
+	}
+};
+
+if (!DEV && interval) {
+	timeout = window.setTimeout(updated.check, interval);
+}
+
+/**
+ * Mark `updated.current` as `true` if the given version differs from the one
+ * the app was hydrated with. Called from the server response header path.
+ * Does NOT reset the poll timer — unlike `check()`, this is a passive observation
+ * from a single server instance's response, not an explicit version check. The
+ * poll timer continues on its original schedule as a backstop. This is important
+ * for platforms that implement skew protection, where `x-sveltekit-version`
+ * may be out of date — in this case we still need to poll for `version.json`.
+ * @param {string | null} new_version
+ */
+export function notify_version(new_version) {
+	if (__SVELTEKIT_APP_VERSION_CHECKS_ENABLED__ && new_version) {
+		_updated ||= new_version !== version;
+	}
+}
+
+/**
+ * Used for testing
+ */
+export function reset_updated() {
+	_updated = false;
+}