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

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

@@ -1,5 +1,5 @@
-/** @import { RemoteFormInput, RemoteForm, InvalidField } from '@sveltejs/kit' */
-/** @import { InternalRemoteFormIssue, MaybePromise, RemoteFormInternals } from 'types' */
+/** @import { RemoteFormInput, RemoteForm, InvalidField } from '$app/server' */
+/** @import { InternalRemoteFormIssue, MaybePromise, HasNonOptionalBoolean, RemoteFormInternals } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import {
@@ -7,9 +7,10 @@ import {
 	set_nested_value,
 	deep_set,
 	normalize_issue,
-	flatten_issues
+	flatten_issues,
+	parse_form_key
 } from '../../../form-utils.js';
-import { get_cache, run_remote_function } from './shared.js';
+import { get_cache, get_implicit_lookup, run_remote_function } from './shared.js';
 import { ValidationError } from '@sveltejs/kit/internal';
 
 /**
@@ -44,7 +45,7 @@ import { ValidationError } from '@sveltejs/kit/internal';
  * @template {StandardSchemaV1<RemoteFormInput, Record<string, any>>} Schema
  * @template Output
  * @overload
- * @param {Schema} validate
+ * @param {true extends HasNonOptionalBoolean<StandardSchemaV1.InferInput<Schema>> ? 'Error: All booleans in form schemas must be optional (e.g. `v.optional(v.boolean(), false)`) because checkbox inputs do not send a false value when unchecked.' : Schema} validate
  * @param {(data: StandardSchemaV1.InferOutput<Schema>, issue: InvalidField<StandardSchemaV1.InferInput<Schema>>) => MaybePromise<Output>} fn
  * @returns {RemoteForm<StandardSchemaV1.InferInput<Schema>, Output>}
  * @since 2.27
@@ -71,8 +72,7 @@ export function form(validate_or_fn, maybe_fn) {
 	 * @param {string | number | boolean} [key]
 	 */
 	function create_instance(key) {
-		/** @type {RemoteForm<Input, Output>} */
-		const instance = {};
+		const instance = /** @type {RemoteForm<Input, Output>} */ ({});
 
 		instance.method = 'POST';
 
@@ -88,8 +88,8 @@ export function form(validate_or_fn, maybe_fn) {
 			name: '',
 			id: '',
 			fn: async (data, meta, form_data) => {
-				/** @type {{ submission: true, input?: Record<string, any>, issues?: InternalRemoteFormIssue[], result: Output }} */
-				const output = {};
+				const output =
+					/** @type {{ submission: true, input?: Record<string, any>, issues?: InternalRemoteFormIssue[], result: Output }} */ ({});
 
 				// make it possible to differentiate between user submission and programmatic `field.set(...)` updates
 				output.submission = true;
@@ -102,15 +102,12 @@ export function form(validate_or_fn, maybe_fn) {
 				}
 
 				if (validated?.issues !== undefined) {
-					handle_issues(output, validated.issues, form_data);
+					handle_issues(output, validated.issues, form_data, __.id);
 				} else {
 					if (validated !== undefined) {
 						data = validated.value;
 					}
 
-					state.remote.refreshes ??= new Map();
-					state.remote.reconnects ??= new Map();
-
 					const issue = create_issues();
 
 					try {
@@ -123,7 +120,7 @@ export function form(validate_or_fn, maybe_fn) {
 						);
 					} catch (e) {
 						if (e instanceof ValidationError) {
-							handle_issues(output, e.issues, form_data);
+							handle_issues(output, e.issues, form_data, __.id);
 						} else {
 							throw e;
 						}
@@ -133,7 +130,12 @@ export function form(validate_or_fn, maybe_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) {
-					get_cache(__, state)[''] ??= { serialize: true, data: output };
+					const cache = get_cache(__, state);
+					cache[''] ??= output;
+
+					// register under the client-side action id so the output is serialized
+					// into the page, allowing the hydrated client to restore `result`/`issues`/`input`
+					get_implicit_lookup(__, state)[__.key ? `${__.id}/${__.key}` : __.id] = () => cache[''];
 				}
 
 				return output;
@@ -143,42 +145,55 @@ export function form(validate_or_fn, maybe_fn) {
 		Object.defineProperty(instance, '__', { value: __ });
 
 		Object.defineProperty(instance, 'action', {
-			get: () => `?/remote=${__.id}`,
+			get: () => {
+				const search = new URLSearchParams(get_request_store().event.url.search);
+				search.delete('/remote');
+
+				const query = search.toString();
+				const action_id = __.key ? `${__.id}/${encodeURIComponent(__.key)}` : __.id;
+
+				return `?${query ? `${query}&` : ''}/remote=${action_id}`;
+			},
 			enumerable: true
 		});
 
 		Object.defineProperty(instance, 'fields', {
 			get() {
-				return create_field_proxy(
-					{},
-					() => get_cache(__)?.['']?.data?.input ?? {},
-					(path, value) => {
-						const cache = get_cache(__);
+				// the form instance is created once per module and shared across requests,
+				// so the current request's state has to be resolved at access time
+				return create_field_proxy({
+					form_id: __.id,
+					get: () => get_cache(__, get_request_store().state)?.['']?.input ?? {},
+					set: (path, value) => {
+						const cache = get_cache(__, get_request_store().state);
 						const entry = cache[''];
 
-						if (entry?.data?.submission) {
+						if (entry?.submission) {
 							// don't override a submission
 							return;
 						}
 
 						if (path.length === 0) {
-							(cache[''] ??= { serialize: true, data: {} }).data.input = value;
+							(cache[''] ??= {}).input = value;
 							return;
 						}
 
-						const input = entry?.data?.input ?? {};
+						const input = entry?.input ?? {};
 						deep_set(input, path.map(String), value);
-						(cache[''] ??= { serialize: true, data: {} }).data.input = input;
+						(cache[''] ??= {}).input = input;
 					},
-					() => flatten_issues(get_cache(__)?.['']?.data?.issues ?? [])
-				);
+					get_issues: () =>
+						flatten_issues(get_cache(__, get_request_store().state)?.['']?.issues ?? []),
+					get_touched: () => ({}),
+					get_dirty: () => ({})
+				});
 			}
 		});
 
 		Object.defineProperty(instance, 'result', {
 			get() {
 				try {
-					return get_cache(__)?.['']?.data?.result;
+					return get_cache(__, get_request_store().state)?.['']?.result;
 				} catch {
 					return undefined;
 				}
@@ -190,6 +205,10 @@ export function form(validate_or_fn, maybe_fn) {
 			get: () => 0
 		});
 
+		Object.defineProperty(instance, 'submitted', {
+			get: () => false
+		});
+
 		Object.defineProperty(instance, 'preflight', {
 			// preflight is a noop on the server
 			value: () => instance
@@ -217,11 +236,15 @@ export function form(validate_or_fn, maybe_fn) {
 				value: (key) => {
 					const { state } = get_request_store();
 					const cache_key = __.id + '|' + JSON.stringify(key);
+					/** @type {RemoteForm<Input, Output> & { __: RemoteFormInternals }} */
 					let instance = (state.remote.forms ??= new Map()).get(cache_key);
 
 					if (!instance) {
-						instance = create_instance(key);
-						instance.__.id = `${__.id}/${encodeURIComponent(JSON.stringify(key))}`;
+						instance = /** @type {RemoteForm<Input, Output> & { __: RemoteFormInternals }} */ (
+							create_instance(key)
+						);
+						instance.__.id = __.id;
+						instance.__.key = JSON.stringify(key);
 						instance.__.name = __.name;
 
 						state.remote.forms.set(cache_key, instance);
@@ -242,8 +265,9 @@ export function form(validate_or_fn, maybe_fn) {
  * @param {{ issues?: InternalRemoteFormIssue[], input?: Record<string, any>, result: any }} output
  * @param {readonly StandardSchemaV1.Issue[]} issues
  * @param {FormData | null} form_data - null if the form is progressively enhanced
+ * @param {string} form_id - hash/name of the form
  */
-function handle_issues(output, issues, form_data) {
+function handle_issues(output, issues, form_data, form_id) {
 	output.issues = issues.map((issue) => normalize_issue(issue, true));
 
 	// if it was a progressively-enhanced submission, we don't need
@@ -251,19 +275,17 @@ function handle_issues(output, issues, form_data) {
 	if (form_data) {
 		output.input = {};
 
-		for (let key of form_data.keys()) {
+		for (const field_name of form_data.keys()) {
 			// redact sensitive fields
-			if (/^[.\]]?_/.test(key)) continue;
-
-			const is_array = key.endsWith('[]');
-			const values = form_data.getAll(key).filter((value) => typeof value === 'string');
+			if (/^[.\]]?_/.test(field_name)) continue;
 
-			if (is_array) key = key.slice(0, -2);
+			const values = form_data.getAll(field_name).filter((value) => typeof value === 'string');
+			const field = parse_form_key(form_id, field_name);
 
 			set_nested_value(
 				/** @type {Record<string, any>} */ (output.input),
-				key,
-				is_array ? values : values[0]
+				field,
+				field.is_array ? values : values[0]
 			);
 		}
 	}

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

@@ -1,19 +1,14 @@
-/** @import { RemoteResource, RemotePrerenderFunction } from '@sveltejs/kit' */
-/** @import { RemotePrerenderInputsGenerator, RemotePrerenderInternals, MaybePromise } from 'types' */
+/** @import { RemoteResource, RemotePrerenderFunction } from '$app/server' */
+/** @import { RemoteFunctionResponse, RemotePrerenderInputsGenerator, RemotePrerenderInternals, MaybePromise } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-import { error, json } from '@sveltejs/kit';
-import { DEV } from 'esm-env';
+import { json } from '@sveltejs/kit';
+import { HandledHttpError } from '@sveltejs/kit/internal';
 import { get_request_store } from '@sveltejs/kit/internal/server';
-import { stringify, stringify_remote_arg } from '../../../shared.js';
+import { stringify_remote_arg } from '../../../shared.js';
+import { parse, stringify } from '#app/internal/transport';
 import { noop } from '../../../../utils/functions.js';
-import { app_dir, base } from '$app/paths/internal/server';
-import {
-	create_validator,
-	get_cache,
-	get_response,
-	parse_remote_response,
-	run_remote_function
-} from './shared.js';
+import { app_dir, base } from '#app/paths';
+import { create_validator, get_response, run_remote_function } from './shared.js';
 
 /**
  * Creates a remote prerender function. When called from the browser, the function will be invoked on the server via a `fetch` call.
@@ -89,50 +84,55 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 
 	/** @type {RemotePrerenderFunction<Input, Output> & { __: RemotePrerenderInternals }} */
 	const wrapper = (arg) => {
+		const { event, state } = get_request_store();
+		const payload = stringify_remote_arg(arg);
+
+		// `get_response` (as opposed to bare `get_cache`) also registers the call in the
+		// implicit lookup, so that the result is inlined into the page payload (`data.p`)
+		// and the client doesn't need to fetch it again upon hydration
 		/** @type {Promise<Output> & Partial<RemoteResource<Output>>} */
-		const promise = (async () => {
-			const { event, state } = get_request_store();
-			const payload = stringify_remote_arg(arg, state.transport);
+		const promise = get_response(__, payload, state, async () => {
 			const id = __.id;
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
 
-			if (!state.prerendering && !DEV && !event.isRemoteRequest) {
+			if (!state.prerendering && !__SVELTEKIT_DEV__ && !event.isRemoteRequest) {
+				/** @type {RemoteFunctionResponse | undefined} */
+				let prerendered;
+
 				try {
-					return await get_response(__, payload, state, async () => {
-						const cache = get_cache(__, state);
-
-						// TODO adapters can provide prerendered data more efficiently than
-						// fetching from the public internet
-						const promise = (cache[payload] ??= {
-							serialize: true,
-							data: fetch(new URL(url, event.url.origin).href).then(async (response) => {
-								if (!response.ok) {
-									throw new Error('Prerendered response not found');
-								}
-
-								const prerendered = await response.json();
-
-								if (prerendered.type === 'error') {
-									error(prerendered.status, prerendered.error);
-								}
-
-								return prerendered.result;
-							})
-						}).data;
-
-						return parse_remote_response(await promise, state.transport);
-					});
+					// TODO adapters can provide prerendered data more efficiently than
+					// fetching from the public internet
+					// `request.url` rather than `event.url`, which throws inside queries
+					const response = await fetch(new URL(url, event.request.url).href);
+
+					if (response.ok) {
+						prerendered = /** @type {RemoteFunctionResponse} */ (await response.json());
+					}
 				} catch {
 					// not available prerendered, fallback to normal function
 				}
+
+				if (prerendered) {
+					if (prerendered.type === 'error') {
+						throw new HandledHttpError(prerendered.error);
+					}
+
+					return parse(prerendered.data)._;
+				}
 			}
 
+			// during a prerender run, the same function might be invoked while rendering
+			// multiple pages — share the result across the entire run
 			if (state.prerendering?.remote_responses.has(url)) {
 				return /** @type {Promise<any>} */ (state.prerendering.remote_responses.get(url));
 			}
 
-			const promise = get_response(__, payload, state, () =>
-				run_remote_function(event, state, false, () => validate(arg), fn)
+			const promise = run_remote_function(
+				event,
+				{ ...state, is_in_remote_prerender: true },
+				false,
+				() => validate(arg),
+				fn
 			);
 
 			if (state.prerendering) {
@@ -142,7 +142,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 			const result = await promise;
 
 			if (state.prerendering) {
-				const body = { type: 'result', result: stringify(result, state.transport) };
+				const body = { type: 'result', data: stringify({ _: result }) };
 				state.prerendering.dependencies.set(url, {
 					body: JSON.stringify(body),
 					response: json(body)
@@ -151,7 +151,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 
 			// TODO this is missing error/loading/current/status
 			return result;
-		})();
+		});
 
 		promise.catch(noop);