fix: server-render nested form value sets (sveltejs#15378)

Fixes sveltejs#15327
- make getter lazy instead of snapshotting once in advance, so we can
deal with updates to the fields
- deep_set is a "do-something" function that does not return something,
but in the mutation case we just assigned the result of the function
(which is undefined) to the input. Fixed accordingly

Co-authored-by: Tee Ming <chewteeming01@gmail.com>

Author: 2 people

.changeset/nasty-donuts-read.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: server-render nested form value sets

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

@@ -176,24 +176,28 @@ export function form(validate_or_fn, maybe_fn) {
 
 		Object.defineProperty(instance, 'fields', {
 			get() {
-				const data = get_cache(__)?.[''];
-				const issues = flatten_issues(data?.issues ?? []);
-
 				return create_field_proxy(
 					{},
-					() => data?.input ?? {},
+					() => get_cache(__)?.['']?.input ?? {},
 					(path, value) => {
+						const cache = get_cache(__);
+						const data = cache[''];
+
 						if (data?.submission) {
 							// don't override a submission
 							return;
 						}
 
-						const input =
-							path.length === 0 ? value : deep_set(data?.input ?? {}, path.map(String), value);
+						if (path.length === 0) {
+							(cache[''] ??= {}).input = value;
+							return;
+						}
 
-						(get_cache(__)[''] ??= {}).input = input;
+						const input = data?.input ?? {};
+						deep_set(input, path.map(String), value);
+						(cache[''] ??= {}).input = input;
 					},
-					() => issues
+					() => flatten_issues(get_cache(__)?.['']?.issues ?? [])
 				);
 			}
 		});

packages/kit/test/apps/async/src/routes/remote/form/set-ssr/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { editData } from './form.remote';
+
+	const form = editData;
+	form.fields.set({ description: 'ssr' });
+	form.fields.description.set('nested');
+</script>
+
+<div id="description">Description: {form.fields.description.value()}</div>
+
+<form {...form}>
+	<input {...form.fields.name.as('text')} />
+	<button type="submit">Submit</button>
+</form>

packages/kit/test/apps/async/src/routes/remote/form/set-ssr/form.remote.ts

@@ -0,0 +1,12 @@
+import { form } from '$app/server';
+import * as v from 'valibot';
+
+export const editData = form(
+	v.object({
+		name: v.optional(v.string()),
+		description: v.optional(v.string())
+	}),
+	async (data) => {
+		return data;
+	}
+);

packages/kit/test/apps/async/test/test.js

@@ -490,6 +490,11 @@ test.describe('remote functions', () => {
 		expect(JSON.parse(arrayValue)).toEqual([{ leaf: 'array-0-leaf' }, { leaf: 'array-1-leaf' }]);
 	});
 
+	test('nested field set is SSR rendered', async ({ page }) => {
+		await page.goto('/remote/form/set-ssr');
+		await expect(page.locator('#description')).toHaveText('Description: nested');
+	});
+
 	test('selects are not nuked when unrelated controls change', async ({
 		page,
 		javaScriptEnabled