@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.4

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

@@ -2,10 +2,7 @@
 /** @import { ServerHooks, MaybePromise, RequestState, RemoteInternals, RequestStore, RemoteLiveQueryUserFunctionReturnType } from 'types' */
 import { parse } from 'devalue';
 import { error } from '@sveltejs/kit';
-import { hydratable } from 'svelte';
 import { with_request_store, get_request_store } from '@sveltejs/kit/internal/server';
-import { create_remote_key, stringify } from '../../../shared.js';
-import { noop } from '../../../../utils/functions.js';
 
 /**
  * @param {any} validate_or_fn
@@ -76,24 +73,13 @@ export async function get_response(internals, payload, state, get_result) {
 	await 0;
 
 	const cache = get_cache(internals, state);
-	const entry = (cache[payload] ??= {
-		serialize: false,
-		data: get_result()
-	});
 
-	entry.serialize ||= !!state.is_in_universal_load;
-
-	if (state.is_in_render && internals.id) {
-		const remote_key = create_remote_key(internals.id, payload);
-
-		void Promise.resolve(entry.data)
-			.then((value) => {
-				void hydratable(remote_key, () => stringify(value, state.transport));
-			})
-			.catch(noop);
+	if (!state.is_in_remote_query) {
+		// if this is a top-level (not nested) `await myQuery()`, include it in the serialized response
+		get_implicit_lookup(internals, state)[payload] = get_result;
 	}
 
-	return entry.data;
+	return (cache[payload] ??= get_result());
 }
 
 /**
@@ -239,10 +225,15 @@ function to_iterator(source, name) {
 }
 
 /**
+ * Note that `state` is deliberately not optional: resources that capture the request
+ * state at creation must pass it explicitly, because reading it from the request store
+ * at call time is only equivalent on runtimes with `AsyncLocalStorage` support.
+ * Callers without a captured state (such as the module-level `form` instance getters)
+ * should pass `get_request_store().state` themselves.
  * @param {RemoteInternals} internals
  * @param {RequestState} state
  */
-export function get_cache(internals, state = get_request_store().state) {
+export function get_cache(internals, state) {
 	let cache = state.remote.data?.get(internals);
 
 	if (cache === undefined) {
@@ -252,3 +243,18 @@ export function get_cache(internals, state = get_request_store().state) {
 
 	return cache;
 }
+
+/**
+ * @param {RemoteInternals} internals
+ * @param {RequestState} state
+ */
+export function get_implicit_lookup(internals, state) {
+	let cache = state.remote.implicit?.get(internals);
+
+	if (cache === undefined) {
+		cache = {};
+		(state.remote.implicit ??= new Map()).set(internals, cache);
+	}
+
+	return cache;
+}

package/src/runtime/client/client.js

@@ -1,4 +1,4 @@
-/** @import { ServerNodesResponse, ServerRedirectNode } from 'types' */
+/** @import { RemoteFunctionDataNode, ServerNodesResponse, ServerRedirectNode } from 'types' */
 /** @import { CacheEntry } from './remote-functions/cache.svelte.js' */
 /** @import { Query } from './remote-functions/query/instance.svelte.js' */
 /** @import { LiveQuery } from './remote-functions/query-live/instance.svelte.js' */
@@ -202,18 +202,20 @@ let target;
 export let app;
 
 /**
- * Data that was serialized during SSR for queries/forms/commands.
- * This is cleared before client-side loads run.
- * @type {Record<string, any>}
+ * Data that was serialized during SSR for queries/forms/commands, stored as
+ * `{ v }` (value) or `{ e }` (error) nodes so that failed states survive hydration.
+ * Entries are deleted as they are consumed (when the corresponding resource is created).
+ * @type {Record<string, RemoteFunctionDataNode>}
  */
-export let query_responses = {};
+export const query_responses = {};
 
 /**
- * Data that was serialized during SSR for prerender functions.
+ * Data that was serialized during SSR for prerender functions, stored as
+ * `{ v }` (value) or `{ e }` (error) nodes.
  * This persists across client-side navigations.
- * @type {Record<string, any>}
+ * @type {Record<string, RemoteFunctionDataNode>}
  */
-export let prerender_responses = {};
+export const prerender_responses = {};
 
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
@@ -328,9 +330,15 @@ export async function start(_app, _target, hydrate) {
 		);
 	}
 
-	if (__SVELTEKIT_PAYLOAD__) {
-		query_responses = __SVELTEKIT_PAYLOAD__.query ?? {};
-		prerender_responses = __SVELTEKIT_PAYLOAD__.prerender ?? {};
+	if (__SVELTEKIT_PAYLOAD__.data) {
+		const { q = {}, p = {}, l = {}, f = {} } = __SVELTEKIT_PAYLOAD__.data;
+
+		// store the whole nodes — error records seed the corresponding
+		// resources in a failed state when they are created during hydration
+		for (const k in q) query_responses[k] = q[k];
+		for (const k in l) query_responses[k] = l[k];
+		for (const k in f) query_responses[k] = f[k];
+		for (const k in p) prerender_responses[k] = p[k];
 	}
 
 	// detect basic auth credentials in the current URL
@@ -546,7 +554,11 @@ export async function _goto(url, options, redirect_count, nav_token) {
 				force_invalidation = true;
 				query_keys = new Set();
 				for (const [id, entries] of query_map) {
-					for (const payload of entries.keys()) {
+					for (const [payload, entry] of entries) {
+						// don't refresh yet, as some queries will be unrendered,
+						// but clear caches so that newly rendered queries
+						// don't use stale data. TODO same for `live_query_map`
+						entry.resource?.reset();
 						query_keys.add(create_remote_key(id, payload));
 					}
 				}
@@ -574,7 +586,7 @@ export async function _goto(url, options, redirect_count, nav_token) {
 				for (const [id, entries] of query_map) {
 					for (const [payload, { resource }] of entries) {
 						if (query_keys?.has(create_remote_key(id, payload))) {
-							void resource.refresh();
+							void resource.start();
 						}
 					}
 				}
@@ -3028,8 +3040,6 @@ async function _hydrate(
 
 		target.textContent = '';
 		hydrate = false;
-	} finally {
-		query_responses = {};
 	}
 
 	if (result.props.page) {

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_command_arg } from '../../shared.js';
-import {
-	get_remote_request_headers,
-	apply_refreshes,
-	categorize_updates,
-	apply_reconnections
-} from './shared.svelte.js';
+import { get_remote_request_headers, categorize_updates, remote_request } from './shared.svelte.js';
 
 /**
  * Client-version of the `command` function from `$app/server`.
@@ -53,7 +45,7 @@ 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: await stringify_command_arg(arg, app.hooks.transport),
@@ -62,30 +54,13 @@ export function command(id) {
 					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,
@@ -59,18 +58,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);
@@ -181,77 +187,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());
@@ -630,30 +613,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 { hydratable } from 'svelte';
 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 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 { tick, untrack } from 'svelte';
@@ -63,6 +64,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() {
@@ -70,7 +82,7 @@ export class Query {
 		return /** @type {Promise<T>} */ (this.#promise);
 	}
 
-	#start() {
+	start() {
 		// there is a really weird bug with untrack and writes and initializations
 		// every time you see this comment, try removing the `tick.then` here and see
 		// if all the tests still pass with the latest svelte version
@@ -131,12 +143,12 @@ export class Query {
 	get then() {
 		// TODO this should be unnecessary but due to the bug described
 		// in #start, we need to do this in some circumstances
-		this.#start();
+		this.start();
 		return this.#then;
 	}
 
 	get catch() {
-		this.#start();
+		this.start();
 		this.#then;
 		return (/** @type {any} */ reject) => {
 			return this.#then(undefined, reject);
@@ -144,7 +156,7 @@ export class Query {
 	}
 
 	get finally() {
-		this.#start();
+		this.start();
 		this.#then;
 		return (/** @type {any} */ fn) => {
 			return this.#then(
@@ -161,12 +173,12 @@ export class Query {
 	}
 
 	get current() {
-		this.#start();
+		this.start();
 		return this.#current;
 	}
 
 	get error() {
-		this.#start();
+		this.start();
 		return this.#error;
 	}
 
@@ -174,7 +186,7 @@ export class Query {
 	 * Returns true if the resource is loading or reloading.
 	 */
 	get loading() {
-		this.#start();
+		this.start();
 		return this.#loading;
 	}
 
@@ -182,7 +194,7 @@ export class Query {
 	 * Returns true once the resource has been loaded for the first time.
 	 */
 	get ready() {
-		this.#start();
+		this.start();
 		return this.#ready;
 	}
 
@@ -198,6 +210,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;
@@ -210,6 +226,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;
@@ -242,6 +262,15 @@ export class Query {
 		return release;
 	}
 
+	/**
+	 * Reset ahead of a navigation that invalidates all, to force newly
+	 * rendered queries to get fresh data
+	 */
+	reset() {
+		this.#promise = null;
+		delete query_responses[this.#key];
+	}
+
 	get [Symbol.toStringTag]() {
 		return 'Query';
 	}

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