@sveltejs/kit 2.43.8 → 2.45.0

package/src/runtime/form-utils.svelte.js

@@ -0,0 +1,439 @@
+/** @import { RemoteForm } from '@sveltejs/kit' */
+/** @import { InternalRemoteFormIssue } from 'types' */
+/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
+
+import { DEV } from 'esm-env';
+
+/**
+ * Sets a value in a nested object using a path string, not mutating the original object but returning a new object
+ * @param {Record<string, any>} object
+ * @param {string} path_string
+ * @param {any} value
+ */
+export function set_nested_value(object, path_string, value) {
+	if (path_string.startsWith('n:')) {
+		path_string = path_string.slice(2);
+		value = value === '' ? undefined : parseFloat(value);
+	} else if (path_string.startsWith('b:')) {
+		path_string = path_string.slice(2);
+		value = value === 'on';
+	}
+
+	return deep_set(object, split_path(path_string), value);
+}
+
+/**
+ * Convert `FormData` into a POJO
+ * @param {FormData} data
+ */
+export function convert_formdata(data) {
+	/** @type {Record<string, any>} */
+	let result = Object.create(null); // guard against prototype pollution
+
+	for (let key of data.keys()) {
+		if (key.startsWith('sveltekit:')) {
+			continue;
+		}
+
+		const is_array = key.endsWith('[]');
+		/** @type {any[]} */
+		let values = data.getAll(key);
+
+		if (is_array) key = key.slice(0, -2);
+
+		if (values.length > 1 && !is_array) {
+			throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`);
+		}
+
+		// an empty `<input type="file">` will submit a non-existent file, bizarrely
+		values = values.filter(
+			(entry) => typeof entry === 'string' || entry.name !== '' || entry.size > 0
+		);
+
+		if (key.startsWith('n:')) {
+			key = key.slice(2);
+			values = values.map((v) => (v === '' ? undefined : parseFloat(/** @type {string} */ (v))));
+		} else if (key.startsWith('b:')) {
+			key = key.slice(2);
+			values = values.map((v) => v === 'on');
+		}
+
+		result = set_nested_value(result, key, is_array ? values : values[0]);
+	}
+
+	return result;
+}
+
+const path_regex = /^[a-zA-Z_$]\w*(\.[a-zA-Z_$]\w*|\[\d+\])*$/;
+
+/**
+ * @param {string} path
+ */
+export function split_path(path) {
+	if (!path_regex.test(path)) {
+		throw new Error(`Invalid path ${path}`);
+	}
+
+	return path.split(/\.|\[|\]/).filter(Boolean);
+}
+
+/**
+ * Sets a value in a nested object using an array of keys.
+ * Does not mutate the original object; returns a new object.
+ * @param {Record<string, any>} object
+ * @param {string[]} keys
+ * @param {any} value
+ */
+export function deep_set(object, keys, value) {
+	const result = Object.assign(Object.create(null), object); // guard against prototype pollution
+	let current = result;
+
+	for (let i = 0; i < keys.length - 1; i += 1) {
+		const key = keys[i];
+		const is_array = /^\d+$/.test(keys[i + 1]);
+		const exists = key in current;
+		const inner = current[key];
+
+		if (exists && is_array !== Array.isArray(inner)) {
+			throw new Error(`Invalid array key ${keys[i + 1]}`);
+		}
+
+		current[key] = is_array
+			? exists
+				? [...inner]
+				: []
+			: // guard against prototype pollution
+				Object.assign(Object.create(null), inner);
+
+		current = current[key];
+	}
+
+	current[keys[keys.length - 1]] = value;
+	return result;
+}
+
+/**
+ * @param {readonly StandardSchemaV1.Issue[]} issues
+ * @param {boolean} [server=false] - Whether these issues come from server validation
+ */
+export function flatten_issues(issues, server = false) {
+	/** @type {Record<string, InternalRemoteFormIssue[]>} */
+	const result = {};
+
+	for (const issue of issues) {
+		/** @type {InternalRemoteFormIssue} */
+		const normalized = { name: '', path: [], message: issue.message, server };
+
+		(result.$ ??= []).push(normalized);
+
+		let name = '';
+
+		if (issue.path !== undefined) {
+			for (const segment of issue.path) {
+				const key = /** @type {string | number} */ (
+					typeof segment === 'object' ? segment.key : segment
+				);
+
+				normalized.path.push(key);
+
+				if (typeof key === 'number') {
+					name += `[${key}]`;
+				} else if (typeof key === 'string') {
+					name += name === '' ? key : '.' + key;
+				}
+
+				(result[name] ??= []).push(normalized);
+			}
+
+			normalized.name = name;
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Gets a nested value from an object using a path array
+ * @param {Record<string, any>} object
+ * @param {(string | number)[]} path
+ * @returns {any}
+ */
+
+export function deep_get(object, path) {
+	let current = object;
+	for (const key of path) {
+		if (current == null || typeof current !== 'object') {
+			return current;
+		}
+		current = current[key];
+	}
+	return current;
+}
+
+/**
+ * Creates a proxy-based field accessor for form data
+ * @param {any} target - Function or empty POJO
+ * @param {() => Record<string, any>} get_input - Function to get current input data
+ * @param {(path: (string | number)[], value: any) => void} set_input - Function to set input data
+ * @param {() => Record<string, InternalRemoteFormIssue[]>} get_issues - Function to get current issues
+ * @param {(string | number)[]} path - Current access path
+ * @returns {any} Proxy object with name(), value(), and issues() methods
+ */
+export function create_field_proxy(target, get_input, set_input, get_issues, path = []) {
+	return new Proxy(target, {
+		get(target, prop) {
+			if (typeof prop === 'symbol') return target[prop];
+
+			// Handle array access like jobs[0]
+			if (/^\d+$/.test(prop)) {
+				return create_field_proxy({}, get_input, set_input, get_issues, [
+					...path,
+					parseInt(prop, 10)
+				]);
+			}
+
+			const key = build_path_string(path);
+
+			if (prop === 'set') {
+				const set_func = function (/** @type {any} */ newValue) {
+					set_input(path, newValue);
+					return newValue;
+				};
+				return create_field_proxy(set_func, get_input, set_input, get_issues, [...path, prop]);
+			}
+
+			if (prop === 'value') {
+				const value_func = function () {
+					// TODO Ideally we'd create a $derived just above and use it here but we can't because of push_reaction which prevents
+					// changes to deriveds created within an effect to rerun the effect - an argument for
+					// reverting that change in async mode?
+					// TODO we did that in Svelte now; bump Svelte version and use $derived here
+					return deep_get(get_input(), path);
+				};
+				return create_field_proxy(value_func, get_input, set_input, get_issues, [...path, prop]);
+			}
+
+			if (prop === 'issues' || prop === 'allIssues') {
+				const issues_func = () => {
+					const all_issues = get_issues()[key === '' ? '$' : key];
+
+					if (prop === 'allIssues') {
+						return all_issues?.map((issue) => ({
+							message: issue.message
+						}));
+					}
+
+					return all_issues
+						?.filter((issue) => issue.name === key)
+						?.map((issue) => ({
+							message: issue.message
+						}));
+				};
+
+				return create_field_proxy(issues_func, get_input, set_input, get_issues, [...path, prop]);
+			}
+
+			if (prop === 'as') {
+				/**
+				 * @param {string} type
+				 * @param {string} [input_value]
+				 */
+				const as_func = (type, input_value) => {
+					const is_array =
+						type === 'file multiple' ||
+						type === 'select multiple' ||
+						(type === 'checkbox' && typeof input_value === 'string');
+
+					const prefix =
+						type === 'number' || type === 'range'
+							? 'n:'
+							: type === 'checkbox' && !is_array
+								? 'b:'
+								: '';
+
+					// Base properties for all input types
+					/** @type {Record<string, any>} */
+					const base_props = {
+						name: prefix + key + (is_array ? '[]' : ''),
+						get 'aria-invalid'() {
+							const issues = get_issues();
+							return key in issues ? 'true' : undefined;
+						}
+					};
+
+					// Add type attribute only for non-text inputs and non-select elements
+					if (type !== 'text' && type !== 'select' && type !== 'select multiple') {
+						base_props.type = type === 'file multiple' ? 'file' : type;
+					}
+
+					// Handle select inputs
+					if (type === 'select' || type === 'select multiple') {
+						return Object.defineProperties(base_props, {
+							multiple: { value: is_array, enumerable: true },
+							value: {
+								enumerable: true,
+								get() {
+									const input = get_input();
+									return deep_get(input, path);
+								}
+							}
+						});
+					}
+
+					// Handle checkbox inputs
+					if (type === 'checkbox' || type === 'radio') {
+						if (DEV) {
+							if (type === 'radio' && !input_value) {
+								throw new Error('Radio inputs must have a value');
+							}
+
+							if (type === 'checkbox' && is_array && !input_value) {
+								throw new Error('Checkbox array inputs must have a value');
+							}
+						}
+
+						return Object.defineProperties(base_props, {
+							value: { value: input_value ?? 'on', enumerable: true },
+							checked: {
+								enumerable: true,
+								get() {
+									const input = get_input();
+									const value = deep_get(input, path);
+
+									if (type === 'radio') {
+										return value === input_value;
+									}
+
+									if (is_array) {
+										return (value ?? []).includes(input_value);
+									}
+
+									return value;
+								}
+							}
+						});
+					}
+
+					// Handle file inputs
+					if (type === 'file' || type === 'file multiple') {
+						return Object.defineProperties(base_props, {
+							multiple: { value: is_array, enumerable: true },
+							files: {
+								enumerable: true,
+								get() {
+									const input = get_input();
+									const value = deep_get(input, path);
+
+									// Convert File/File[] to FileList-like object
+									if (value instanceof File) {
+										// In browsers, we can create a proper FileList using DataTransfer
+										if (typeof DataTransfer !== 'undefined') {
+											const fileList = new DataTransfer();
+											fileList.items.add(value);
+											return fileList.files;
+										}
+										// Fallback for environments without DataTransfer
+										return { 0: value, length: 1 };
+									}
+
+									if (Array.isArray(value) && value.every((f) => f instanceof File)) {
+										if (typeof DataTransfer !== 'undefined') {
+											const fileList = new DataTransfer();
+											value.forEach((file) => fileList.items.add(file));
+											return fileList.files;
+										}
+										// Fallback for environments without DataTransfer
+										/** @type {any} */
+										const fileListLike = { length: value.length };
+										value.forEach((file, index) => {
+											fileListLike[index] = file;
+										});
+										return fileListLike;
+									}
+
+									return null;
+								}
+							}
+						});
+					}
+
+					// Handle all other input types (text, number, etc.)
+					return Object.defineProperties(base_props, {
+						value: {
+							enumerable: true,
+							get() {
+								const input = get_input();
+								const value = deep_get(input, path);
+
+								return value != null ? String(value) : '';
+							}
+						}
+					});
+				};
+
+				return create_field_proxy(as_func, get_input, set_input, get_issues, [...path, 'as']);
+			}
+
+			// Handle property access (nested fields)
+			return create_field_proxy({}, get_input, set_input, get_issues, [...path, prop]);
+		}
+	});
+}
+
+/**
+ * Builds a path string from an array of path segments
+ * @param {(string | number)[]} path
+ * @returns {string}
+ */
+function build_path_string(path) {
+	let result = '';
+
+	for (const segment of path) {
+		if (typeof segment === 'number') {
+			result += `[${segment}]`;
+		} else {
+			result += result === '' ? segment : '.' + segment;
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @param {RemoteForm<any, any>} instance
+ * @deprecated remove in 3.0
+ */
+export function throw_on_old_property_access(instance) {
+	Object.defineProperty(instance, 'field', {
+		value: (/** @type {string} */ name) => {
+			const new_name = name.endsWith('[]') ? name.slice(0, -2) : name;
+			throw new Error(
+				`\`form.field\` has been removed: Instead of \`<input name={form.field('${name}')} />\` do \`<input {...form.fields.${new_name}.as(type)} />\``
+			);
+		}
+	});
+
+	for (const property of ['input', 'issues']) {
+		Object.defineProperty(instance, property, {
+			get() {
+				const new_name = property === 'issues' ? 'issues' : 'value';
+				return new Proxy(
+					{},
+					{
+						get(_, prop) {
+							const prop_string = typeof prop === 'string' ? prop : String(prop);
+							const old =
+								prop_string.includes('[') || prop_string.includes('.')
+									? `['${prop_string}']`
+									: `.${prop_string}`;
+							const replacement = `.${prop_string}.${new_name}()`;
+							throw new Error(
+								`\`form.${property}\` has been removed: Instead of \`form.${property}${old}\` write \`form.fields${replacement}\``
+							);
+						}
+					}
+				);
+			}
+		});
+	}
+}

package/src/runtime/server/page/render.js

@@ -13,7 +13,7 @@ import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { SCHEME } from '../../../utils/url.js';
 import { create_server_routing_response, generate_route_object } from './server_routing.js';
 import { add_resolution_suffix } from '../../pathname.js';
-import { with_request_store } from '@sveltejs/kit/internal/server';
+import { try_get_request_store, with_request_store } from '@sveltejs/kit/internal/server';
 import { text_encoder } from '../../utils.js';
 import { get_global_name } from '../utils.js';
 import { create_remote_cache_key } from '../../shared.js';
@@ -190,7 +190,7 @@ export async function render_response({
 						throw new Error(
 							`Cannot call \`fetch\` eagerly during server-side rendering with relative URL (${info}) — put your \`fetch\` calls inside \`onMount\` or a \`load\` function instead`
 						);
-					} else if (!warned) {
+					} else if (!warned && !try_get_request_store()?.state.is_in_remote_function) {
 						console.warn(
 							'Avoid calling `fetch` eagerly during server-side rendering — put your `fetch` calls inside `onMount` or a `load` function instead'
 						);

package/src/runtime/server/remote.js

@@ -12,7 +12,6 @@ import { normalize_error } from '../../utils/error.js';
 import { check_incorrect_fail_use } from './page/actions.js';
 import { DEV } from 'esm-env';
 import { record_span } from '../telemetry/record_span.js';
-import { file_transport } from '../utils.js';
 
 /** @type {typeof handle_remote_call_internal} */
 export async function handle_remote_call(event, state, options, manifest, id) {
@@ -38,7 +37,7 @@ export async function handle_remote_call(event, state, options, manifest, id) {
  * @param {string} id
  */
 async function handle_remote_call_internal(event, state, options, manifest, id) {
-	const [hash, name, prerender_args] = id.split('/');
+	const [hash, name, additional_args] = id.split('/');
 	const remotes = manifest._.remotes;
 
 	if (!remotes[hash]) error(404);
@@ -123,13 +122,18 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 			);
 			form_data.delete('sveltekit:remote_refreshes');
 
+			// If this is a keyed form instance (created via form.for(key)), add the key to the form data (unless already set)
+			if (additional_args) {
+				form_data.set('sveltekit:id', decodeURIComponent(additional_args));
+			}
+
 			const fn = info.fn;
 			const data = await with_request_store({ event, state }, () => fn(form_data));
 
 			return json(
 				/** @type {RemoteFunctionResponse} */ ({
 					type: 'result',
-					result: stringify(data, { ...transport, File: file_transport }),
+					result: stringify(data, transport),
 					refreshes: data.issues ? {} : await serialize_refreshes(form_client_refreshes)
 				})
 			);
@@ -152,7 +156,7 @@ async function handle_remote_call_internal(event, state, options, manifest, id)
 
 		const payload =
 			info.type === 'prerender'
-				? prerender_args
+				? additional_args
 				: /** @type {string} */ (
 						// new URL(...) necessary because we're hiding the URL from the user in the event object
 						new URL(event.request.url).searchParams.get('payload')
@@ -290,6 +294,12 @@ async function handle_remote_form_post_internal(event, state, manifest, id) {
 		const form_data = await event.request.formData();
 		const fn = /** @type {RemoteInfo & { type: 'form' }} */ (/** @type {any} */ (form).__).fn;
 
+		// If this is a keyed form instance (created via form.for(key)), add the key to the form data (unless already set)
+		if (action_id && !form_data.has('id')) {
+			// The action_id is URL-encoded JSON, decode and parse it
+			form_data.set('sveltekit:id', decodeURIComponent(action_id));
+		}
+
 		await with_request_store({ event, state }, () => fn(form_data));
 
 		// We don't want the data to appear on `let { form } = $props()`, which is why we're not returning it.

package/src/runtime/server/respond.js

@@ -129,8 +129,8 @@ export async function internal_respond(request, options, manifest, state) {
 			.map((node) => node === '1');
 		url.searchParams.delete(INVALIDATED_PARAM);
 	} else if (remote_id) {
-		url.pathname = base;
-		url.search = '';
+		url.pathname = request.headers.get('x-sveltekit-pathname') ?? base;
+		url.search = request.headers.get('x-sveltekit-search') ?? '';
 	}
 
 	/** @type {Record<string, string>} */
@@ -148,7 +148,8 @@ export async function internal_respond(request, options, manifest, state) {
 		handleValidationError: options.hooks.handleValidationError,
 		tracing: {
 			record_span
-		}
+		},
+		is_in_remote_function: false
 	};
 
 	/** @type {import('@sveltejs/kit').RequestEvent} */
@@ -294,7 +295,7 @@ export async function internal_respond(request, options, manifest, state) {
 		return text('Not found', { status: 404, headers });
 	}
 
-	if (!state.prerendering?.fallback && !remote_id) {
+	if (!state.prerendering?.fallback) {
 		// TODO this could theoretically break — should probably be inside a try-catch
 		const matchers = await manifest._.matchers();
 
@@ -329,7 +330,7 @@ export async function internal_respond(request, options, manifest, state) {
 			: undefined;
 
 		// determine whether we need to redirect to add/remove a trailing slash
-		if (route) {
+		if (route && !remote_id) {
 			// if `paths.base === '/a/b/c`, then the root route is `/a/b/c/`,
 			// regardless of the `trailingSlash` route option
 			if (url.pathname === base || url.pathname === base + '/') {

package/src/runtime/utils.js

@@ -1,5 +1,3 @@
-/** @import { RemoteFormIssue } from '@sveltejs/kit' */
-/** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 import { BROWSER } from 'esm-env';
 
 export const text_encoder = new TextEncoder();
@@ -65,124 +63,3 @@ export function base64_decode(encoded) {
 
 	return bytes;
 }
-
-/**
- * Convert `FormData` into a POJO
- * @param {FormData} data
- */
-export function convert_formdata(data) {
-	/** @type {Record<string, any>} */
-	const result = Object.create(null); // guard against prototype pollution
-
-	for (let key of data.keys()) {
-		const is_array = key.endsWith('[]');
-		let values = data.getAll(key);
-
-		if (is_array) key = key.slice(0, -2);
-
-		if (values.length > 1 && !is_array) {
-			throw new Error(`Form cannot contain duplicated keys — "${key}" has ${values.length} values`);
-		}
-
-		// an empty `<input type="file">` will submit a non-existent file, bizarrely
-		values = values.filter(
-			(entry) => typeof entry === 'string' || entry.name !== '' || entry.size > 0
-		);
-
-		deep_set(result, split_path(key), is_array ? values : values[0]);
-	}
-
-	return result;
-}
-
-const path_regex = /^[a-zA-Z_$]\w*(\.[a-zA-Z_$]\w*|\[\d+\])*$/;
-
-/**
- * @param {string} path
- */
-export function split_path(path) {
-	if (!path_regex.test(path)) {
-		throw new Error(`Invalid path ${path}`);
-	}
-
-	return path.split(/\.|\[|\]/).filter(Boolean);
-}
-
-/**
- * @param {Record<string, any>} object
- * @param {string[]} keys
- * @param {any} value
- */
-export function deep_set(object, keys, value) {
-	for (let i = 0; i < keys.length - 1; i += 1) {
-		const key = keys[i];
-		const is_array = /^\d+$/.test(keys[i + 1]);
-
-		if (object[key]) {
-			if (is_array !== Array.isArray(object[key])) {
-				throw new Error(`Invalid array key ${keys[i + 1]}`);
-			}
-		} else {
-			object[key] ??= is_array ? [] : Object.create(null); // guard against prototype pollution
-		}
-		object = object[key];
-	}
-
-	object[keys[keys.length - 1]] = value;
-}
-
-/**
- * @param {readonly StandardSchemaV1.Issue[]} issues
- */
-export function flatten_issues(issues) {
-	/** @type {Record<string, RemoteFormIssue[]>} */
-	const result = {};
-
-	for (const issue of issues) {
-		/** @type {RemoteFormIssue} */
-		const normalized = { name: '', path: [], message: issue.message };
-
-		(result.$ ??= []).push(normalized);
-
-		let name = '';
-
-		if (issue.path !== undefined) {
-			for (const segment of issue.path) {
-				const key = /** @type {string | number} */ (
-					typeof segment === 'object' ? segment.key : segment
-				);
-
-				normalized.path.push(key);
-
-				if (typeof key === 'number') {
-					name += `[${key}]`;
-				} else if (typeof key === 'string') {
-					name += name === '' ? key : '.' + key;
-				}
-
-				(result[name] ??= []).push(normalized);
-			}
-
-			normalized.name = name;
-		}
-	}
-
-	return result;
-}
-
-/**
- * We need to encode `File` objects when returning `issues` from a `form` submission,
- * because some validators include the original value in the issue. It doesn't
- * need to deserialize to a `File` object
- * @type {import('@sveltejs/kit').Transporter}
- */
-export const file_transport = {
-	encode: (file) =>
-		file instanceof File && {
-			size: file.size,
-			type: file.type,
-			name: file.name,
-			lastModified: file.lastModified
-		},
-	decode: (data) => data
-};