merge

Author: Rich-Harris

.changeset/honest-shoes-jam.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use `$derived` for form fields

.changeset/petite-lions-heal.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+docs: remove `@example` blocks to allow docs to deploy

.changeset/pink-ghosts-see.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: require a value with `submit` and `hidden` fields

packages/kit/src/exports/public.d.ts

@@ -1886,9 +1886,9 @@ export type RemoteFormFieldValue = string | string[] | number | boolean | File |
 
 type AsArgs<Type extends keyof InputTypeMap, Value> = Type extends 'checkbox'
 	? Value extends string[]
-		? [type: 'checkbox', value: Value[number] | (string & {})]
+		? [type: Type, value: Value[number] | (string & {})]
 		: [type: Type]
-	: Type extends 'radio' | 'submit'
+	: Type extends 'radio' | 'submit' | 'hidden'
 		? [type: Type, value: Value | (string & {})]
 		: [type: Type];
 
@@ -1975,19 +1975,6 @@ type InvalidField<T> =
  * If an issue is a `string`, it applies to the form as a whole (and will show up in `fields.allIssues()`)
  * Access properties to create field-specific issues: `invalid.fieldName('message')`.
  * The type structure mirrors the input data structure for type-safe field access.
- *
- * @example
- * ```ts
- * invalid('Username or password is invalid');
- * ```
- *
- * @example
- * ```ts
- * invalid(
- *   invalid.username('Username is taken'),
- *   invalid.items[0].qty('Insufficient stock')
- * );
- * ```
  */
 export type Invalid<Input = any> = ((...issues: Array<string | StandardSchemaV1.Issue>) => never) &
 	InvalidField<Input>;

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

@@ -189,6 +189,7 @@ export function form(validate_or_fn, maybe_fn) {
 				return create_field_proxy(
 					{},
 					() => data?.input ?? {},
+					() => {},
 					(path, value) => {
 						if (data) {
 							// don't override a submission

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

@@ -16,7 +16,9 @@ import {
 	create_field_proxy,
 	deep_set,
 	set_nested_value,
-	throw_on_old_property_access
+	throw_on_old_property_access,
+	split_path,
+	build_path_string
 } from '../../form-utils.svelte.js';
 
 /**
@@ -62,6 +64,13 @@ export function form(id) {
 		 */
 		let input = $state.raw({});
 
+		// TODO 3.0: Remove versions state and related logic; it's a workaround for $derived not updating when created inside $effects
+		/**
+		 * This allows us to update individual fields granularly
+		 * @type {Record<string, number>}
+		 */
+		const versions = $state({});
+
 		/** @type {Record<string, InternalRemoteFormIssue[]>} */
 		let issues = $state.raw({});
 
@@ -212,6 +221,13 @@ export function form(id) {
 						} else {
 							input = {};
 
+							for (const [key, value] of Object.entries(versions)) {
+								if (value !== undefined) {
+									versions[key] ??= 0;
+									versions[key] += 1;
+								}
+							}
+
 							if (form_result.refreshes) {
 								refresh_queries(form_result.refreshes, updates);
 							} else {
@@ -390,6 +406,18 @@ export function form(id) {
 							element.type === 'checkbox' && !element.checked ? null : element.value
 						);
 					}
+
+					versions[name] ??= 0;
+					versions[name] += 1;
+
+					const path = split_path(name);
+
+					while (path.pop() !== undefined) {
+						const name = build_path_string(path);
+
+						versions[name] ??= 0;
+						versions[name] += 1;
+					}
 				});
 
 				return () => {
@@ -431,6 +459,7 @@ export function form(id) {
 					create_field_proxy(
 						{},
 						() => input,
+						(path) => versions[path],
 						(path, value) => {
 							if (path.length === 0) {
 								input = value;

packages/kit/src/runtime/form-utils.svelte.js

@@ -3,6 +3,7 @@
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
 
 import { DEV } from 'esm-env';
+import { untrack } from 'svelte';
 
 /**
  * Sets a value in a nested object using a path string, not mutating the original object but returning a new object
@@ -174,19 +175,27 @@ export function deep_get(object, path) {
  * 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) => void} depend - Function to make an effect depend on a specific field
  * @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 = []) {
+export function create_field_proxy(target, get_input, depend, set_input, get_issues, path = []) {
+	const path_string = build_path_string(path);
+
+	const get_value = () => {
+		depend(path_string);
+		return untrack(() => deep_get(get_input(), 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, [
+				return create_field_proxy({}, get_input, depend, set_input, get_issues, [
 					...path,
 					parseInt(prop, 10)
 				]);
@@ -199,18 +208,17 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 					set_input(path, newValue);
 					return newValue;
 				};
-				return create_field_proxy(set_func, get_input, set_input, get_issues, [...path, prop]);
+				return create_field_proxy(set_func, get_input, depend, 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]);
+				return create_field_proxy(get_value, get_input, depend, set_input, get_issues, [
+					...path,
+					prop
+				]);
 			}
 
 			if (prop === 'issues' || prop === 'allIssues') {
@@ -230,7 +238,10 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 						}));
 				};
 
-				return create_field_proxy(issues_func, get_input, set_input, get_issues, [...path, prop]);
+				return create_field_proxy(issues_func, get_input, depend, set_input, get_issues, [
+					...path,
+					prop
+				]);
 			}
 
 			if (prop === 'as') {
@@ -266,11 +277,11 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 						base_props.type = type === 'file multiple' ? 'file' : type;
 					}
 
-					// Handle submit inputs
-					if (type === 'submit') {
+					// Handle submit and hidden inputs
+					if (type === 'submit' || type === 'hidden') {
 						if (DEV) {
 							if (!input_value) {
-								throw new Error('Submit inputs must have a value');
+								throw new Error(`\`${type}\` inputs must have a value`);
 							}
 						}
 
@@ -286,8 +297,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 							value: {
 								enumerable: true,
 								get() {
-									const input = get_input();
-									return deep_get(input, path);
+									return get_value();
 								}
 							}
 						});
@@ -310,8 +320,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 							checked: {
 								enumerable: true,
 								get() {
-									const input = get_input();
-									const value = deep_get(input, path);
+									const value = get_value();
 
 									if (type === 'radio') {
 										return value === input_value;
@@ -334,8 +343,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 							files: {
 								enumerable: true,
 								get() {
-									const input = get_input();
-									const value = deep_get(input, path);
+									const value = get_value();
 
 									// Convert File/File[] to FileList-like object
 									if (value instanceof File) {
@@ -375,20 +383,21 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
 						value: {
 							enumerable: true,
 							get() {
-								const input = get_input();
-								const value = deep_get(input, path);
-
+								const value = get_value();
 								return value != null ? String(value) : '';
 							}
 						}
 					});
 				};
 
-				return create_field_proxy(as_func, get_input, set_input, get_issues, [...path, 'as']);
+				return create_field_proxy(as_func, get_input, depend, set_input, get_issues, [
+					...path,
+					'as'
+				]);
 			}
 
 			// Handle property access (nested fields)
-			return create_field_proxy({}, get_input, set_input, get_issues, [...path, prop]);
+			return create_field_proxy({}, get_input, depend, set_input, get_issues, [...path, prop]);
 		}
 	});
 }
@@ -398,7 +407,7 @@ export function create_field_proxy(target, get_input, set_input, get_issues, pat
  * @param {(string | number)[]} path
  * @returns {string}
  */
-function build_path_string(path) {
+export function build_path_string(path) {
 	let result = '';
 
 	for (const segment of path) {

packages/kit/test/apps/basics/src/routes/remote/form/select-untouched/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { myform } from './form.remote.js';
+</script>
+
+<form {...myform}>
+	<input {...myform.fields.message.as('text')} />
+
+	<select {...myform.fields.number.as('select')}>
+		<option>one</option>
+		<option>two</option>
+		<option>three</option>
+	</select>
+
+	<button>submit</button>
+</form>

packages/kit/test/apps/basics/src/routes/remote/form/select-untouched/form.remote.ts

@@ -0,0 +1,10 @@
+import { form } from '$app/server';
+import * as v from 'valibot';
+
+export const myform = form(
+	v.object({
+		message: v.string(),
+		number: v.picklist(['one', 'two', 'three'])
+	}),
+	(_data) => {}
+);

packages/kit/test/apps/basics/test/test.js

@@ -1976,6 +1976,18 @@ test.describe('remote functions', () => {
 		const arrayValue = await page.locator('#array-value').textContent();
 		expect(JSON.parse(arrayValue)).toEqual([{ leaf: 'array-0-leaf' }, { leaf: 'array-1-leaf' }]);
 	});
+
+	test('selects are not nuked when unrelated controls change', async ({
+		page,
+		javaScriptEnabled
+	}) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/remote/form/select-untouched');
+
+		await page.fill('input', 'hello');
+		await expect(page.locator('select')).toHaveValue('one');
+	});
 });
 
 test.describe('params prop', () => {