fix: use __SVELTEKIT_PAYLOAD__ to reference boot payload (#14127)

* fix

* changeset

* reference the proxied object instead

* use __SVELTEKIT_PAYLOAD__ to reference boot object

* couple more comments

* couple more comments

* fix

* remove unused property

---------

Co-authored-by: Chew Tee Ming <[email protected]>

Author: Rich-Harris

.changeset/cute-boats-hide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure `form()` remote functions work when the app is configured to a single output

packages/kit/src/exports/vite/index.js

@@ -331,7 +331,10 @@ async function kit({ svelte_config }) {
 					__SVELTEKIT_DEV__: 'false',
 					__SVELTEKIT_EMBEDDED__: s(kit.embedded),
 					__SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: s(kit.experimental.remoteFunctions),
-					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
+					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false',
+					__SVELTEKIT_PAYLOAD__: new_config.build.ssr
+						? '{}'
+						: `globalThis.__sveltekit_${version_hash}`
 				};
 
 				if (!secondary_build_started) {
@@ -343,9 +346,13 @@ async function kit({ svelte_config }) {
 					__SVELTEKIT_DEV__: 'true',
 					__SVELTEKIT_EMBEDDED__: s(kit.embedded),
 					__SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: s(kit.experimental.remoteFunctions),
-					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false'
+					__SVELTEKIT_CLIENT_ROUTING__: kit.router.resolution === 'client' ? 'true' : 'false',
+					__SVELTEKIT_PAYLOAD__: 'globalThis.__sveltekit_dev'
 				};
 
+				// @ts-ignore this prevents a reference error if `client.js` is imported on the server
+				globalThis.__sveltekit_dev = {};
+
 				// These Kit dependencies are packaged as CommonJS, which means they must always be externalized.
 				// Without this, the tests will still pass but `pnpm dev` will fail in projects that link `@sveltejs/kit`.
 				/** @type {NonNullable<import('vite').UserConfig['ssr']>} */ (new_config.ssr).external = [

packages/kit/src/runtime/app/server/remote/form.js

@@ -67,7 +67,7 @@ export function form(fn) {
 				// We don't need to care about args or deduplicating calls, because uneval results are only relevant in full page reloads
 				// where only one form submission is active at the same time
 				if (!event.isRemoteRequest) {
-					state.form_result = [key, result];
+					(state.remote_data ??= {})[__.id] = result;
 				}
 
 				return result;
@@ -89,8 +89,8 @@ export function form(fn) {
 		Object.defineProperty(instance, 'result', {
 			get() {
 				try {
-					const { form_result } = get_event_state(getRequestEvent());
-					return form_result && form_result[0] === key ? form_result[1] : undefined;
+					const { remote_data } = get_event_state(getRequestEvent());
+					return remote_data?.[__.id];
 				} catch {
 					return undefined;
 				}

packages/kit/src/runtime/client/client.js

@@ -178,7 +178,7 @@ let target;
 export let app;
 
 /** @type {Record<string, any>} */
-export let remote_responses;
+export const remote_responses = __SVELTEKIT_PAYLOAD__.data ?? {};
 
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];
@@ -288,7 +288,6 @@ export async function start(_app, _target, hydrate) {
 	}
 
 	app = _app;
-	remote_responses = hydrate?.remote ?? {};
 
 	await _app.hooks.init?.();
 

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -6,7 +6,6 @@ import * as devalue from 'devalue';
 import { DEV } from 'esm-env';
 import { HttpError } from '@sveltejs/kit/internal';
 import { app, remote_responses, started, goto, set_nearest_error_page } from '../client.js';
-import { create_remote_cache_key } from '../../shared.js';
 import { tick } from 'svelte';
 import { refresh_queries, release_overrides } from './shared.svelte.js';
 
@@ -26,9 +25,7 @@ export function form(id) {
 		const action = '?/remote=' + encodeURIComponent(action_id);
 
 		/** @type {any} */
-		let result = $state(
-			!started ? (remote_responses[create_remote_cache_key(action, '')] ?? undefined) : undefined
-		);
+		let result = $state(started ? undefined : remote_responses[action_id]);
 
 		/**
 		 * @param {FormData} data

packages/kit/src/runtime/server/event-state.js

@@ -1,5 +1,5 @@
 /** @import { RequestEvent } from '@sveltejs/kit' */
-/** @import { PrerenderOptions, ServerHooks, SSROptions, SSRState } from 'types' */
+/** @import { MaybePromise, PrerenderOptions, ServerHooks, SSROptions, SSRState } from 'types' */
 
 export const EVENT_STATE = Symbol('remote');
 
@@ -11,8 +11,7 @@ export const EVENT_STATE = Symbol('remote');
  *  transport: ServerHooks['transport'];
  *  handleValidationError: ServerHooks['handleValidationError'];
  *  form_instances?: Map<any, any>;
- *  form_result?: [key: any, value: any];
- * 	remote_data?: Record<string, Promise<any>>;
+ * 	remote_data?: Record<string, MaybePromise<any>>;
  *  refreshes?: Record<string, any>;
  * }} RequestEventState
  */

packages/kit/src/runtime/server/page/render.js

@@ -378,6 +378,29 @@ export async function render_response({
 						}`);
 		}
 
+		const { remote_data } = get_event_state(event);
+
+		if (remote_data) {
+			/** @type {Record<string, any>} */
+			const remote = {};
+
+			for (const key in remote_data) {
+				remote[key] = await remote_data[key];
+			}
+
+			// TODO this is repeated in a few places — dedupe it
+			const replacer = (/** @type {any} */ thing) => {
+				for (const key in options.hooks.transport) {
+					const encoded = options.hooks.transport[key].encode(thing);
+					if (encoded) {
+						return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
+					}
+				}
+			};
+
+			properties.push(`data: ${devalue.uneval(remote, replacer)}`);
+		}
+
 		// create this before declaring `data`, which may contain references to `${global}`
 		blocks.push(`${global} = {
 						${properties.join(',\n\t\t\t\t\t\t')}
@@ -388,7 +411,7 @@ export async function render_response({
 		blocks.push('const element = document.currentScript.parentElement;');
 
 		if (page_config.ssr) {
-			const serialized = { form: 'null', error: 'null', remote: 'null' };
+			const serialized = { form: 'null', error: 'null' };
 
 			if (form_value) {
 				serialized.form = uneval_action_response(
@@ -402,35 +425,11 @@ export async function render_response({
 				serialized.error = devalue.uneval(error);
 			}
 
-			const { remote_data } = get_event_state(event);
-
-			if (remote_data) {
-				/** @type {Record<string, any>} */
-				const remote = {};
-
-				for (const key in remote_data) {
-					remote[key] = await remote_data[key];
-				}
-
-				// TODO this is repeated in a few places — dedupe it
-				const replacer = (/** @type {any} */ thing) => {
-					for (const key in options.hooks.transport) {
-						const encoded = options.hooks.transport[key].encode(thing);
-						if (encoded) {
-							return `app.decode('${key}', ${devalue.uneval(encoded, replacer)})`;
-						}
-					}
-				};
-
-				serialized.remote = devalue.uneval(remote, replacer);
-			}
-
 			const hydrate = [
 				`node_ids: [${branch.map(({ node }) => node.index).join(', ')}]`,
 				`data: ${data}`,
 				`form: ${serialized.form}`,
-				`error: ${serialized.error}`,
-				`remote: ${serialized.remote}`
+				`error: ${serialized.error}`
 			];
 
 			if (status !== 200) {

packages/kit/src/types/global-private.d.ts

@@ -8,6 +8,21 @@ declare global {
 	const __SVELTEKIT_EXPERIMENTAL__REMOTE_FUNCTIONS__: boolean;
 	/** True if `config.kit.router.resolution === 'client'` */
 	const __SVELTEKIT_CLIENT_ROUTING__: boolean;
+	/** The `__sveltekit_abc123` object in the init `<script>` */
+	const __SVELTEKIT_PAYLOAD__: {
+		/** The basepath, usually relative to the current page */
+		base: string;
+		/** Path to externally-hosted assets */
+		assets?: string;
+		/** Public environment variables */
+		env?: Record<string, string>;
+		/** Serialized data from remote functions */
+		data?: Record<string, any>;
+		/** Create a placeholder promise */
+		defer?: (id: number) => Promise<any>;
+		/** Resolve a placeholder promise */
+		resolve?: (data: { id: number; data: any; error: any }) => void;
+	};
 	/**
 	 * This makes the use of specific features visible at both dev and build time, in such a
 	 * way that we can error when they are not supported by the target platform.