fix: preflight schemas apply correctly when chained before for

.changeset/blue-bears-roll.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: add `null` to `RemoteFormInput` type to allow nullable schema validators

.changeset/slow-waves-clean.md

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

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

@@ -2090,7 +2090,7 @@ type RecursiveFormFields = RemoteFormFieldContainer<any> & {
 type MaybeArray<T> = T | T[];
 
 export interface RemoteFormInput {
-	[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput>;
+	[key: string]: MaybeArray<string | number | boolean | File | null | undefined | RemoteFormInput>;
 }
 
 export interface RemoteFormIssue {

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

@@ -54,6 +54,9 @@ export function form(id) {
 	/** @type {Map<any, { count: number, instance: RemoteForm<T, U> }>} */
 	const instances = new Map();
 
+	/** @type {WeakMap<object, StandardSchemaV1>} */
+	const preflight_schemas = new WeakMap();
+
 	/** @param {string | number | boolean} [key] */
 	function create_instance(key) {
 		const action_id_without_key = id;
@@ -588,6 +591,7 @@ export function form(id) {
 				/** @type {RemoteForm<T, U>['preflight']} */
 				value: (schema) => {
 					preflight_schema = schema;
+					preflight_schemas.set(instance, schema);
 					return instance;
 				}
 			},
@@ -680,6 +684,11 @@ export function form(id) {
 		value: (key) => {
 			const entry = instances.get(key) ?? { count: 0, instance: create_instance(key) };
 
+			const caller_preflight = preflight_schemas.get(instance);
+			if (caller_preflight && !preflight_schemas.has(entry.instance)) {
+				entry.instance.preflight(caller_preflight);
+			}
+
 			try {
 				$effect.pre(() => {
 					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

@@ -382,6 +382,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 }) => {
+		if (!javaScriptEnabled) return;
+
+		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;
 

packages/kit/test/types/remote.test.ts

@@ -624,6 +624,27 @@ function form_tests() {
 	f11_field2.propA;
 	// @ts-expect-error
 	f11_field2.propB;
+
+	// schema with nullable values (e.g. Zod nullable())
+	const f12 = form(
+		null as any as StandardSchemaV1<{
+			nullable_string: string | null;
+			nested: { nullable_value: number | null };
+		}>,
+		(data) => {
+			data.nullable_string === '' || data.nullable_string === null;
+			data.nested.nullable_value === 0 || data.nested.nullable_value === null;
+			// @ts-expect-error
+			data.nonexistent;
+			return { success: true };
+		}
+	);
+	// @ts-expect-error
+	f12.fields.as('text');
+	f12.fields.nullable_string.issues();
+	f12.fields.nullable_string.value();
+	f12.fields.nested.nullable_value.issues();
+	f12.fields.nested.nullable_value.value();
 }
 form_tests();
 

packages/kit/types/index.d.ts

@@ -2064,7 +2064,7 @@ declare module '@sveltejs/kit' {
 	type MaybeArray<T> = T | T[];
 
 	export interface RemoteFormInput {
-		[key: string]: MaybeArray<string | number | boolean | File | RemoteFormInput>;
+		[key: string]: MaybeArray<string | number | boolean | File | null | undefined | RemoteFormInput>;
 	}
 
 	export interface RemoteFormIssue {