fix: preflight schemas apply correctly when chained before for

.changeset/slow-waves-clean.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: `preflight` schemas apply correctly when chained before `for`

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

@@ -53,6 +53,9 @@ export function form(id) {
 	/** @type {Map<any, { count: number, instance: RemoteForm<T, U> }>} */
 	const instances = new Map();
 
+	/** @type {StandardSchemaV1 | null} */
+	let shared_preflight_schema = null;
+
 	/** @param {string | number | boolean} [key] */
 	function create_instance(key) {
 		const action_id_without_key = id;
@@ -320,7 +323,8 @@ export function form(id) {
 		 */
 		async function preflight(form_data) {
 			const data = convert(form_data);
-			const validated = await preflight_schema?.['~standard'].validate(data);
+			const schema = preflight_schema ?? shared_preflight_schema;
+			const validated = await schema?.['~standard'].validate(data);
 
 			if (validated?.issues) {
 				raw_issues = merge_with_server_issues(
@@ -521,7 +525,6 @@ export function form(id) {
 				form.removeEventListener('input', handle_input);
 				form.removeEventListener('reset', handle_reset);
 				element = null;
-				preflight_schema = undefined;
 			};
 		};
 
@@ -613,6 +616,11 @@ export function form(id) {
 				/** @type {RemoteForm<T, U>['preflight']} */
 				value: (schema) => {
 					preflight_schema = schema;
+
+					if (key === undefined) {
+						shared_preflight_schema = schema;
+					}
+
 					return instance;
 				}
 			},
@@ -636,8 +644,8 @@ export function form(id) {
 					let array = [];
 
 					const data = convert(form_data);
-
-					const validated = await preflight_schema?.['~standard'].validate(data);
+					const schema = preflight_schema ?? shared_preflight_schema;
+					const validated = await schema?.['~standard'].validate(data);
 
 					if (validate_id !== id) {
 						return;

packages/kit/test/apps/async/src/routes/remote/form/preflight-for/+page.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { get_value, set_value } from './form.remote.ts';
+	import * as v from 'valibot';
+
+	const value = get_value();
+
+	const schema = v.object({
+		value: v.pipe(v.number(), v.maxValue(20, 'too big'))
+	});
+
+	// preflight().for() ordering — the bug: preflight was lost when chained before for
+	const form = set_value.preflight(schema).for('a');
+</script>
+
+<p>value.current: {value.current}</p>
+
+<form data-preflight-for {...form}>
+	{#each form.fields.value.issues() as issue}
+		<p>{issue.message}</p>
+	{/each}
+
+	<input data-preflight-for-input {...form.fields.value.as('number')} />
+	<button>submit</button>
+</form>
+
+<p data-preflight-for-pending>form.pending: {form.pending}</p>
+<p data-preflight-for-result>form.result: {form.result}</p>

packages/kit/test/apps/async/src/routes/remote/form/preflight-for/form.remote.ts

@@ -0,0 +1,18 @@
+import { form, query } from '$app/server';
+import * as v from 'valibot';
+
+let value = 0;
+
+export const get_value = query(() => {
+	return value;
+});
+
+export const set_value = form(
+	v.object({
+		value: v.pipe(v.number(), v.maxValue(20, 'too big'))
+	}),
+	async (data) => {
+		value = data.value;
+		get_value().refresh();
+	}
+);

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

@@ -428,6 +428,26 @@ test.describe('remote functions', () => {
 		await expect(page.locator('[data-failing-issue]')).toHaveText('async check failed');
 	});
 
+	test('form preflight before for ordering works', async ({ page, javaScriptEnabled }) => {
+		test.skip(!javaScriptEnabled);
+
+		await page.goto('/remote/form/preflight-for');
+
+		const form = page.locator('[data-preflight-for]');
+		const input = form.locator('input');
+		const button = form.locator('button');
+
+		// Preflight should catch oversized value
+		await input.fill('21');
+		await button.click();
+		await form.getByText('too big').waitFor();
+
+		// After fixing, submission should succeed
+		await input.fill('5');
+		await button.click();
+		await expect(page.getByText('value.current')).toHaveText('value.current: 5');
+	});
+
 	test('form preflight-only validation works', async ({ page, javaScriptEnabled }) => {
 		if (!javaScriptEnabled) return;