@sveltejs/kit 2.63.1 → 2.65.0

package/src/runtime/client/remote-functions/command.svelte.js

@@ -1,16 +1,8 @@
 /** @import { RemoteCommand, RemoteQueryUpdate } from '@sveltejs/kit' */
-/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
-import * as devalue from 'devalue';
-import { HttpError } from '@sveltejs/kit/internal';
 import { app } from '../client.js';
-import { stringify_remote_arg } from '../../shared.js';
-import {
-	get_remote_request_headers,
-	apply_refreshes,
-	categorize_updates,
-	apply_reconnections
-} from './shared.svelte.js';
+import { stringify_command_arg } from '../../shared.js';
+import { get_remote_request_headers, categorize_updates, remote_request } from './shared.svelte.js';
 
 /**
  * Client-version of the `command` function from `$app/server`.
@@ -53,39 +45,22 @@ export function command(id) {
 					throw updates_error;
 				}
 
-				const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
+				const response = await remote_request(`${base}/${app_dir}/remote/${id}`, {
 					method: 'POST',
 					body: JSON.stringify({
-						payload: stringify_remote_arg(arg, app.hooks.transport, false),
+						payload: await stringify_command_arg(arg, app.hooks.transport),
 						refreshes: Array.from(refreshes ?? [])
 					}),
 					headers
 				});
 
-				if (!response.ok) {
-					// We only end up here in case of a network error or if the server has an internal error
-					// (which shouldn't happen because we handle errors on the server and always send a 200 response)
-					throw new Error('Failed to execute remote function');
-				}
-
-				const result = /** @type {RemoteFunctionResponse} */ (await response.json());
-				if (result.type === 'redirect') {
+				if (response.redirect) {
 					throw new Error(
 						'Redirects are not allowed in commands. Return a result instead and use goto on the client'
 					);
-				} else if (result.type === 'error') {
-					throw new HttpError(result.status ?? 500, result.error);
-				} else {
-					if (result.refreshes) {
-						apply_refreshes(result.refreshes);
-					}
-
-					if (result.reconnects) {
-						apply_reconnections(result.reconnects);
-					}
-
-					return devalue.parse(result.result, app.decoders);
 				}
+
+				return response._;
 			} finally {
 				overrides?.forEach((fn) => fn());
 

package/src/runtime/client/remote-functions/form.svelte.js

@@ -1,13 +1,12 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 /** @import { RemoteFormInput, RemoteForm, RemoteQueryUpdate } from '@sveltejs/kit' */
-/** @import { InternalRemoteFormIssue, RemoteFunctionResponse } from 'types' */
+/** @import { InternalRemoteFormIssue } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
-import * as devalue from 'devalue';
 import { DEV } from 'esm-env';
 import { HttpError } from '@sveltejs/kit/internal';
-import { app, query_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
+import { query_responses, _goto, set_nearest_error_page, invalidateAll } from '../client.js';
 import { tick } from 'svelte';
-import { apply_refreshes, categorize_updates, apply_reconnections } from './shared.svelte.js';
+import { categorize_updates, remote_request } from './shared.svelte.js';
 import { createAttachmentKey } from 'svelte/attachments';
 import {
 	convert_formdata,
@@ -60,18 +59,25 @@ export function form(id) {
 		const action_id = id + (key != undefined ? `/${JSON.stringify(key)}` : '');
 		const action = '?/remote=' + encodeURIComponent(action_id);
 
+		// the output of a non-enhanced submission that resulted in this page —
+		// consume it so the form's state survives hydration (form outputs are
+		// always value nodes; the server never serializes them as errors)
+		/** @type {{ input?: Record<string, any>, issues?: InternalRemoteFormIssue[], result?: any } | undefined} */
+		const initial = query_responses[action_id]?.v;
+		delete query_responses[action_id];
+
 		/**
 		 * @type {Record<string, string | string[] | File | File[]>}
 		 */
-		let input = $state({});
+		let input = $state(initial?.input ?? {});
 
 		/** @type {InternalRemoteFormIssue[]} */
-		let raw_issues = $state.raw([]);
+		let raw_issues = $state.raw(initial?.issues ?? []);
 
 		const issues = $derived(flatten_issues(raw_issues));
 
 		/** @type {any} */
-		let result = $state.raw(query_responses[action_id]);
+		let result = $state.raw(initial?.result);
 
 		/** @type {number} */
 		let pending_count = $state(0);
@@ -182,77 +188,54 @@ export function form(id) {
 						remote_refreshes: Array.from(refreshes ?? [])
 					});
 
-					const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
-						method: 'POST',
-						headers: {
-							'Content-Type': BINARY_FORM_CONTENT_TYPE,
-							// Forms cannot be called during rendering, so it's save to use location here
-							'x-sveltekit-pathname': location.pathname,
-							'x-sveltekit-search': location.search
-						},
-						body: blob
-					});
-
-					if (!response.ok) {
-						// We only end up here in case of a network error or if the server has an internal error
-						// (which shouldn't happen because we handle errors on the server and always send a 200 response)
-						throw new Error('Failed to execute remote function');
-					}
-
-					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
-
-					// reset issues in case it's a redirect or error (but issues passed in that case)
-					raw_issues = [];
-					result = undefined;
-
-					if (form_result.type === 'result') {
-						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
-						const succeeded = raw_issues.length === 0;
-
-						if (succeeded) {
-							if (refreshes === null && !form_result.refreshes && !form_result.reconnects) {
-								void invalidateAll();
-							} else {
-								if (form_result.refreshes) {
-									apply_refreshes(form_result.refreshes);
-								}
-								if (form_result.reconnects) {
-									apply_reconnections(form_result.reconnects);
-								}
-							}
-						} else {
-							if (DEV) {
-								warn_on_missing_issue_reads();
-							}
+					const response = await remote_request(
+						`${base}/${app_dir}/remote/${action_id_without_key}`,
+						{
+							method: 'POST',
+							headers: {
+								'Content-Type': BINARY_FORM_CONTENT_TYPE,
+								// Forms cannot be called during rendering, so it's save to use location here
+								'x-sveltekit-pathname': location.pathname,
+								'x-sveltekit-search': location.search
+							},
+							body: blob
 						}
+					);
 
-						return succeeded;
-					} else if (form_result.type === 'redirect') {
-						const stringified_refreshes = form_result.refreshes ?? '';
-						const stringified_reconnects = form_result.reconnects ?? '';
-						if (stringified_refreshes) {
-							apply_refreshes(stringified_refreshes);
-						}
+					({ issues: raw_issues = [], result } = response._ ?? {});
 
-						if (stringified_reconnects) {
-							apply_reconnections(stringified_reconnects);
-						}
+					// if the developer took control of updates via `.updates(...)` (even with
+					// no arguments), or the server performed explicit refreshes, don't invalidateAll
+					const should_invalidate = refreshes === null && !response.r;
 
+					if (response.redirect) {
 						// Use internal version to allow redirects to external URLs
 						void _goto(
-							form_result.location,
+							response.redirect,
 							{
-								invalidateAll:
-									refreshes === null && !stringified_refreshes && !stringified_reconnects
+								invalidateAll: should_invalidate
 							},
 							0
 						);
 						return true;
+					}
+
+					const succeeded = raw_issues.length === 0;
+
+					if (succeeded) {
+						if (should_invalidate) {
+							void invalidateAll();
+						}
 					} else {
-						throw new HttpError(form_result.status ?? 500, form_result.error);
+						if (DEV) {
+							warn_on_missing_issue_reads();
+						}
 					}
+
+					return succeeded;
 				} catch (e) {
 					result = undefined;
+					raw_issues = [];
 					throw e;
 				} finally {
 					overrides?.forEach((fn) => fn());
@@ -661,30 +644,27 @@ export function form(id) {
 					if (validated?.issues) {
 						array = validated.issues.map((issue) => normalize_issue(issue, false));
 					} else if (!preflightOnly) {
-						const response = await fetch(`${base}/${app_dir}/remote/${action_id_without_key}`, {
-							method: 'POST',
-							headers: {
-								'Content-Type': BINARY_FORM_CONTENT_TYPE,
-								// Validation should not be and will not be called during rendering, so it's save to use location here
-								'x-sveltekit-pathname': location.pathname,
-								'x-sveltekit-search': location.search
-							},
-							body: serialize_binary_form(data, {
-								validate_only: true
-							}).blob
-						});
-
-						const result = await response.json();
+						const result = await remote_request(
+							`${base}/${app_dir}/remote/${action_id_without_key}`,
+							{
+								method: 'POST',
+								headers: {
+									'Content-Type': BINARY_FORM_CONTENT_TYPE,
+									// Validation should not be and will not be called during rendering, so it's save to use location here
+									'x-sveltekit-pathname': location.pathname,
+									'x-sveltekit-search': location.search
+								},
+								body: serialize_binary_form(data, {
+									validate_only: true
+								}).blob
+							}
+						);
 
 						if (validate_id !== id) {
 							return;
 						}
 
-						if (result.type === 'result') {
-							array = /** @type {InternalRemoteFormIssue[]} */ (
-								devalue.parse(result.result, app.decoders)
-							);
-						}
+						array = /** @type {InternalRemoteFormIssue[]} */ (result._);
 					}
 
 					if (!includeUntouched && !submitted) {

package/src/runtime/client/remote-functions/prerender.svelte.js

@@ -2,8 +2,8 @@
 import { app_dir, base } from '$app/paths/internal/client';
 import { version } from '$app/env';
 import * as devalue from 'devalue';
-import { app, prerender_responses } from '../client.js';
-import { get_remote_request_headers, remote_request } from './shared.svelte.js';
+import { app, goto, prerender_responses } from '../client.js';
+import { get_remote_request_headers, remote_request, unwrap_node } from './shared.svelte.js';
 import { create_remote_key, stringify_remote_arg } from '../../shared.js';
 
 // Initialize Cache API for prerender functions
@@ -67,7 +67,7 @@ export function prerender(id) {
 				const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
 
 				if (Object.hasOwn(prerender_responses, cache_key)) {
-					const data = prerender_responses[cache_key];
+					const data = unwrap_node(prerender_responses[cache_key]);
 
 					if (prerender_cache) {
 						void put(url, devalue.stringify(data, app.encoders));
@@ -77,6 +77,7 @@ export function prerender(id) {
 				}
 
 				// Do this here, after await Svelte' reactivity context is gone.
+				// TODO we really don't want to be sending these specific headers here?
 				const headers = get_remote_request_headers();
 
 				// Check the Cache API first
@@ -93,14 +94,21 @@ export function prerender(id) {
 					}
 				}
 
-				const encoded = await remote_request(url, headers);
+				const result = await remote_request(url, { headers });
+
+				if (result.redirect) {
+					void goto(result.redirect);
+					return;
+				}
+
+				const data = result._;
 
 				// For successful prerender requests, save to cache
 				if (prerender_cache) {
-					void put(url, encoded);
+					void put(url, devalue.stringify(data, app.encoders));
 				}
 
-				return devalue.parse(encoded, app.decoders);
+				return data;
 			});
 
 			prerender_resources.set(cache_key, new WeakRef(resource));

package/src/runtime/client/remote-functions/query/index.js

@@ -1,10 +1,8 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { app, query_map, query_responses } from '../../client.js';
+import { goto, query_map } from '../../client.js';
 import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from '../shared.svelte.js';
-import * as devalue from 'devalue';
 import { DEV } from 'esm-env';
-import { unfriendly_hydratable } from '../../../shared.js';
 import { QueryProxy } from './proxy.js';
 
 /**
@@ -25,20 +23,14 @@ export function query(id) {
 
 	/** @type {RemoteQueryFunction<any, any>} */
 	const wrapper = (arg) => {
-		return new QueryProxy(id, arg, async (key, payload) => {
-			if (Object.hasOwn(query_responses, key)) {
-				const value = query_responses[key];
-				delete query_responses[key];
-				return value;
-			}
-
+		return new QueryProxy(id, arg, async (payload) => {
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
-			const serialized = await unfriendly_hydratable(key, () =>
-				remote_request(url, get_remote_request_headers())
-			);
+			const result = await remote_request(url, { headers: get_remote_request_headers() });
 
-			return devalue.parse(serialized, app.decoders);
+			if (result.redirect) {
+				await goto(result.redirect);
+			}
 		});
 	};
 

package/src/runtime/client/remote-functions/query/instance.svelte.js

@@ -1,4 +1,5 @@
 import { query_responses } from '../../client.js';
+import { HttpError } from '@sveltejs/kit/internal';
 import { QUERY_OVERRIDE_KEY } from '../shared.svelte.js';
 import { noop } from '../../../../utils/functions.js';
 import { with_resolvers } from '../../../../utils/promise.js';
@@ -64,6 +65,17 @@ export class Query {
 	constructor(key, fn) {
 		this.#key = key;
 		this.#fn = fn;
+
+		if (Object.hasOwn(query_responses, key)) {
+			const node = query_responses[key];
+			delete query_responses[key];
+
+			if (node.e) {
+				this.fail(new HttpError(node.e[0] ?? 500, node.e[1]));
+			} else {
+				this.set(/** @type {T} */ (node.v));
+			}
+		}
 	}
 
 	#get_promise() {
@@ -199,6 +211,10 @@ export class Query {
 	 * @param {T} value
 	 */
 	set(value) {
+		// normally consumed in the constructor, but make sure a leftover
+		// SSR record can never shadow the newly-set value
+		delete query_responses[this.#key];
+
 		this.#clear_pending();
 		this.#ready = true;
 		this.#loading = false;
@@ -211,6 +227,10 @@ export class Query {
 	 * @param {unknown} error
 	 */
 	fail(error) {
+		// normally consumed in the constructor, but make sure a leftover
+		// SSR record can never shadow the newly-set error
+		delete query_responses[this.#key];
+
 		this.#clear_pending();
 		this.#loading = false;
 		this.#error = error;

package/src/runtime/client/remote-functions/query/proxy.js

@@ -25,7 +25,7 @@ export class QueryProxy {
 	/**
 	 * @param {string} id
 	 * @param {any} arg
-	 * @param {(key: string, payload: string) => Promise<T>} fn
+	 * @param {(payload: string) => Promise<T>} fn
 	 */
 	constructor(id, arg, fn) {
 		this.#id = id;
@@ -41,7 +41,7 @@ export class QueryProxy {
 			this.#payload,
 			// IMPORTANT: This cannot close over `this` or it becomes impossible to
 			// garbage collect the QueryProxy and thus impossible to evict cache entries.
-			() => new Query(key, () => fn(key, payload))
+			() => new Query(key, () => fn(payload))
 		);
 
 		cache.ref(this, entry, this.#id, this.#payload);
@@ -98,7 +98,7 @@ export class QueryProxy {
 			this.#payload,
 			// IMPORTANT: This cannot close over `this` or it becomes impossible to
 			// garbage collect the QueryProxy and thus impossible to evict cache entries.
-			() => new Query(key_ref, () => fn_ref(key_ref, payload_ref))
+			() => new Query(key_ref, () => fn_ref(payload_ref))
 		);
 
 		const deref = cache.manual_ref(entry, this.#id, this.#payload);

package/src/runtime/client/remote-functions/query-batch.svelte.js

@@ -1,12 +1,9 @@
 /** @import { RemoteQueryFunction } from '@sveltejs/kit' */
-/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
-import { app, goto } from '../client.js';
-import { get_remote_request_headers, QUERY_FUNCTION_ID } from './shared.svelte.js';
+import { goto } from '../client.js';
+import { get_remote_request_headers, QUERY_FUNCTION_ID, remote_request } from './shared.svelte.js';
 import { QueryProxy } from './query/proxy.js';
-import * as devalue from 'devalue';
-import { HttpError, Redirect } from '@sveltejs/kit/internal';
-import { unfriendly_hydratable } from '../../shared.js';
+import { HttpError } from '@sveltejs/kit/internal';
 
 /**
  * @param {string} id
@@ -18,84 +15,78 @@ export function query_batch(id) {
 
 	/** @type {RemoteQueryFunction<any, any>} */
 	const wrapper = (arg) => {
-		return new QueryProxy(id, arg, async (key, payload) => {
-			const serialized = await unfriendly_hydratable(key, () => {
-				return new Promise((resolve, reject) => {
-					// create_remote_function caches identical calls, but in case a refresh to the same query is called multiple times this function
-					// is invoked multiple times with the same payload, so we need to deduplicate here
-					const entry = batching.get(payload) ?? [];
-					entry.push({ resolve, reject });
-					batching.set(payload, entry);
+		return new QueryProxy(id, arg, async (payload) => {
+			return await new Promise((resolve, reject) => {
+				// create_remote_function caches identical calls, but in case a refresh to the same query is called multiple times this function
+				// is invoked multiple times with the same payload, so we need to deduplicate here
+				const entry = batching.get(payload) ?? [];
+				entry.push({ resolve, reject });
+				batching.set(payload, entry);
 
-					if (batching.size > 1) return;
+				if (batching.size > 1) return;
 
-					// Do this here, after await Svelte' reactivity context is gone.
-					// TODO is it possible to have batches of the same key
-					// but in different forks/async contexts and in the same macrotask?
-					// If so this would potentially be buggy
-					const headers = {
-						'Content-Type': 'application/json',
-						...get_remote_request_headers()
-					};
+				// Do this here, after await Svelte' reactivity context is gone.
+				// TODO is it possible to have batches of the same key
+				// but in different forks/async contexts and in the same macrotask?
+				// If so this would potentially be buggy
+				const headers = {
+					'Content-Type': 'application/json',
+					...get_remote_request_headers()
+				};
 
-					// Wait for the next macrotask - don't use microtask as Svelte runtime uses these to collect changes and flush them,
-					// and flushes could reveal more queries that should be batched.
-					setTimeout(async () => {
-						const batched = batching;
-						batching = new Map();
+				// Wait for the next macrotask - don't use microtask as Svelte runtime uses these to collect changes and flush them,
+				// and flushes could reveal more queries that should be batched.
+				setTimeout(async () => {
+					const batched = batching;
+					batching = new Map();
 
-						try {
-							const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
-								method: 'POST',
-								body: JSON.stringify({
-									payloads: Array.from(batched.keys())
-								}),
-								headers
-							});
+					try {
+						const response = await remote_request(`${base}/${app_dir}/remote/${id}`, {
+							method: 'POST',
+							body: JSON.stringify({
+								payloads: Array.from(batched.keys())
+							}),
+							headers
+						});
 
-							if (!response.ok) {
-								throw new Error('Failed to execute batch query');
-							}
+						if (response.redirect) {
+							await goto(response.redirect);
 
-							const result = /** @type {RemoteFunctionResponse} */ (await response.json());
-							if (result.type === 'error') {
-								throw new HttpError(result.status ?? 500, result.error);
+							// settle all batched promises (with `undefined`, like a redirect
+							// from a non-batched query) so that callers don't hang forever
+							for (const resolvers of batched.values()) {
+								for (const { resolve } of resolvers) {
+									resolve(undefined);
+								}
 							}
 
-							if (result.type === 'redirect') {
-								await goto(result.location);
-								throw new Redirect(307, result.location);
-							}
+							return;
+						}
 
-							const results = devalue.parse(result.result, app.decoders);
+						const results = response._;
+						let i = 0;
 
-							// Resolve individual queries
-							// Maps guarantee insertion order so we can do it like this
-							let i = 0;
+						for (const resolvers of batched.values()) {
+							const result = results[i];
 
-							for (const resolvers of batched.values()) {
-								for (const { resolve, reject } of resolvers) {
-									if (results[i].type === 'error') {
-										reject(new HttpError(results[i].status, results[i].error));
-									} else {
-										resolve(results[i].data);
-									}
+							for (const { resolve, reject } of resolvers) {
+								if (result.type === 'error') {
+									reject(new HttpError(result.status, result.error));
+								} else {
+									resolve(result.data);
 								}
-								i++;
 							}
-						} catch (error) {
-							// Reject all queries in the batch
-							for (const resolver of batched.values()) {
-								for (const { reject } of resolver) {
-									reject(error);
-								}
+							i++;
+						}
+					} catch (e) {
+						for (const resolvers of batched.values()) {
+							for (const { reject } of resolvers) {
+								reject(e);
 							}
 						}
-					}, 0);
-				});
+					}
+				}, 0);
 			});
-
-			return devalue.parse(serialized, app.decoders);
 		});
 	};
 

package/src/runtime/client/remote-functions/query-live/instance.svelte.js

@@ -1,12 +1,10 @@
 /** @import { PromiseWithResolvers } from '../../../../utils/promise.js' */
-import { app } from '../../client.js';
-import * as devalue from 'devalue';
+import { query_responses } from '../../client.js';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
 import { noop, once } from '../../../../utils/functions.js';
 import { with_resolvers } from '../../../../utils/promise.js';
 import { SharedIterator } from '../../../../utils/shared-iterator.js';
 import { tick } from 'svelte';
-import { unfriendly_hydratable } from '../../../shared.js';
 import { create_live_iterator } from './iterator.js';
 
 /**
@@ -87,9 +85,25 @@ export class LiveQuery {
 		this.#resolve_first = resolve;
 		this.#reject_first = reject;
 
-		const serialized = unfriendly_hydratable(key, () => undefined);
-		if (serialized !== undefined) {
-			this.set(devalue.parse(serialized, app.decoders));
+		if (Object.hasOwn(query_responses, key)) {
+			const node = query_responses[key];
+			delete query_responses[key];
+
+			if (node.e) {
+				// the query failed during SSR — seed the failed state (mirroring `fail()`,
+				// minus its terminal `#done`), so the main loop still connects as usual
+				// and the query can recover
+				const error = new HttpError(node.e[0] ?? 500, node.e[1]);
+				this.#loading = false;
+				this.#error = error;
+
+				promise.catch(noop);
+				this.#reject_first?.(error);
+				this.#resolve_first = null;
+				this.#reject_first = null;
+			} else {
+				this.set(node.v);
+			}
 		}
 	}