From 6bf97270813aa68ab73cc9ca849a5020f7aae969 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 09:27:14 -0400
Subject: [PATCH 1/7] feat: add `pending` property to forms and commands

---
 .changeset/purple-hotels-prove.md             |  5 ++
 packages/kit/src/exports/public.d.ts          | 12 ++-
 .../src/runtime/app/server/remote/command.js  |  5 ++
 .../kit/src/runtime/app/server/remote/form.js | 10 +++
 .../client/remote-functions/command.js        | 71 ---------------
 .../client/remote-functions/command.svelte.js | 87 +++++++++++++++++++
 .../client/remote-functions/form.svelte.js    | 16 ++++
 .../runtime/client/remote-functions/index.js  |  2 +-
 .../basics/src/routes/remote/+page.svelte     |  5 ++
 .../src/routes/remote/form/+page.svelte       |  4 +
 10 files changed, 143 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/purple-hotels-prove.md
 delete mode 100644 packages/kit/src/runtime/client/remote-functions/command.js
 create mode 100644 packages/kit/src/runtime/client/remote-functions/command.svelte.js

diff --git a/.changeset/purple-hotels-prove.md b/.changeset/purple-hotels-prove.md
new file mode 100644
index 000000000000..dabdad0f3ef7
--- /dev/null
+++ b/.changeset/purple-hotels-prove.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: add `pending` property to forms and commands
diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts
index 1982000eb2f9..c323bc0fd76d 100644
--- a/packages/kit/src/exports/public.d.ts
+++ b/packages/kit/src/exports/public.d.ts
@@ -1565,6 +1565,8 @@ export type RemoteForm<Result> = {
 	for(key: string | number | boolean): Omit<RemoteForm<Result>, 'for'>;
 	/** The result of the form submission */
 	get result(): Result | undefined;
+	/** The number of pending submissions */
+	get pending(): number;
 	/** Spread this onto a `<button>` or `<input type="submit">` */
 	buttonProps: {
 		type: 'submit';
@@ -1586,14 +1588,20 @@ export type RemoteForm<Result> = {
 			formaction: string;
 			onclick: (event: Event) => void;
 		};
+		/** The number of pending submissions */
+		get pending(): number;
 	};
 };
 
 /**
  * The return value of a remote `command` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#command) for full documentation.
  */
-export type RemoteCommand<Input, Output> = (arg: Input) => Promise<Awaited<Output>> & {
-	updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+export type RemoteCommand<Input, Output> = {
+	(arg: Input): Promise<Awaited<Output>> & {
+		updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+	};
+	/** The number of pending command executions */
+	get pending(): number;
 };
 
 export type RemoteResource<T> = Promise<Awaited<T>> & {
diff --git a/packages/kit/src/runtime/app/server/remote/command.js b/packages/kit/src/runtime/app/server/remote/command.js
index 951ab3ab6ff8..3e3a2cba228d 100644
--- a/packages/kit/src/runtime/app/server/remote/command.js
+++ b/packages/kit/src/runtime/app/server/remote/command.js
@@ -87,5 +87,10 @@ export function command(validate_or_fn, maybe_fn) {
 
 	Object.defineProperty(wrapper, '__', { value: __ });
 
+	// On the server, pending is always 0
+	Object.defineProperty(wrapper, 'pending', {
+		get: () => 0
+	});
+
 	return wrapper;
 }
diff --git a/packages/kit/src/runtime/app/server/remote/form.js b/packages/kit/src/runtime/app/server/remote/form.js
index 8c6081bb8d27..6f41e84dc57c 100644
--- a/packages/kit/src/runtime/app/server/remote/form.js
+++ b/packages/kit/src/runtime/app/server/remote/form.js
@@ -97,6 +97,16 @@ export function form(fn) {
 			}
 		});
 
+		// On the server, pending is always 0
+		Object.defineProperty(instance, 'pending', {
+			get: () => 0
+		});
+
+		// On the server, buttonProps.pending is always 0
+		Object.defineProperty(button_props, 'pending', {
+			get: () => 0
+		});
+
 		if (key == undefined) {
 			Object.defineProperty(instance, 'for', {
 				/** @type {RemoteForm<any>['for']} */
diff --git a/packages/kit/src/runtime/client/remote-functions/command.js b/packages/kit/src/runtime/client/remote-functions/command.js
deleted file mode 100644
index d9351a289f72..000000000000
--- a/packages/kit/src/runtime/client/remote-functions/command.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/** @import { RemoteCommand, RemoteQueryOverride } from '@sveltejs/kit' */
-/** @import { RemoteFunctionResponse } from 'types' */
-/** @import { Query } from './query.svelte.js' */
-import { app_dir } from '__sveltekit/paths';
-import * as devalue from 'devalue';
-import { HttpError } from '@sveltejs/kit/internal';
-import { app } from '../client.js';
-import { stringify_remote_arg } from '../../shared.js';
-import { refresh_queries, release_overrides } from './shared.svelte.js';
-
-/**
- * Client-version of the `command` function from `$app/server`.
- * @param {string} id
- * @returns {RemoteCommand<any, any>}
- */
-export function command(id) {
-	// Careful: This function MUST be synchronous (can't use the async keyword) because the return type has to be a promise with an updates() method.
-	// If we make it async, the return type will be a promise that resolves to a promise with an updates() method, which is not what we want.
-	return (arg) => {
-		/** @type {Array<Query<any> | RemoteQueryOverride>} */
-		let updates = [];
-
-		/** @type {Promise<any> & { updates: (...args: any[]) => any }} */
-		const promise = (async () => {
-			// Wait a tick to give room for the `updates` method to be called
-			await Promise.resolve();
-
-			const response = await fetch(`/${app_dir}/remote/${id}`, {
-				method: 'POST',
-				body: JSON.stringify({
-					payload: stringify_remote_arg(arg, app.hooks.transport),
-					refreshes: updates.map((u) => u._key)
-				}),
-				headers: {
-					'Content-Type': 'application/json'
-				}
-			});
-
-			if (!response.ok) {
-				release_overrides(updates);
-				// We only end up here in case of a network error or if the server has an internal error
-				// (which shouldn't happen because we handle errors on the server and always send a 200 response)
-				throw new Error('Failed to execute remote function');
-			}
-
-			const result = /** @type {RemoteFunctionResponse} */ (await response.json());
-			if (result.type === 'redirect') {
-				release_overrides(updates);
-				throw new Error(
-					'Redirects are not allowed in commands. Return a result instead and use goto on the client'
-				);
-			} else if (result.type === 'error') {
-				release_overrides(updates);
-				throw new HttpError(result.status ?? 500, result.error);
-			} else {
-				refresh_queries(result.refreshes, updates);
-
-				return devalue.parse(result.result, app.decoders);
-			}
-		})();
-
-		promise.updates = (/** @type {any} */ ...args) => {
-			updates = args;
-			// @ts-expect-error Don't allow updates to be called multiple times
-			delete promise.updates;
-			return promise;
-		};
-
-		return promise;
-	};
-}
diff --git a/packages/kit/src/runtime/client/remote-functions/command.svelte.js b/packages/kit/src/runtime/client/remote-functions/command.svelte.js
new file mode 100644
index 000000000000..1923eb7163f6
--- /dev/null
+++ b/packages/kit/src/runtime/client/remote-functions/command.svelte.js
@@ -0,0 +1,87 @@
+/** @import { RemoteCommand, RemoteQueryOverride } from '@sveltejs/kit' */
+/** @import { RemoteFunctionResponse } from 'types' */
+/** @import { Query } from './query.svelte.js' */
+import { app_dir } from '__sveltekit/paths';
+import * as devalue from 'devalue';
+import { HttpError } from '@sveltejs/kit/internal';
+import { app } from '../client.js';
+import { stringify_remote_arg } from '../../shared.js';
+import { refresh_queries, release_overrides } from './shared.svelte.js';
+
+/**
+ * Client-version of the `command` function from `$app/server`.
+ * @param {string} id
+ * @returns {RemoteCommand<any, any>}
+ */
+export function command(id) {
+	/** @type {number} */
+	let pending_count = $state(0);
+
+	/** @type {RemoteCommand<any, any>} */
+	const command_function = (arg) => {
+		/** @type {Array<Query<any> | RemoteQueryOverride>} */
+		let updates = [];
+
+		// Increment pending count when command starts
+		pending_count++;
+
+		/** @type {Promise<any> & { updates: (...args: any[]) => any }} */
+		const promise = (async () => {
+			try {
+				// Wait a tick to give room for the `updates` method to be called
+				await Promise.resolve();
+
+				const response = await fetch(`/${app_dir}/remote/${id}`, {
+					method: 'POST',
+					body: JSON.stringify({
+						payload: stringify_remote_arg(arg, app.hooks.transport),
+						refreshes: updates.map((u) => u._key)
+					}),
+					headers: {
+						'Content-Type': 'application/json'
+					}
+				});
+
+				if (!response.ok) {
+					release_overrides(updates);
+					// We only end up here in case of a network error or if the server has an internal error
+					// (which shouldn't happen because we handle errors on the server and always send a 200 response)
+					throw new Error('Failed to execute remote function');
+				}
+
+				const result = /** @type {RemoteFunctionResponse} */ (await response.json());
+				if (result.type === 'redirect') {
+					release_overrides(updates);
+					throw new Error(
+						'Redirects are not allowed in commands. Return a result instead and use goto on the client'
+					);
+				} else if (result.type === 'error') {
+					release_overrides(updates);
+					throw new HttpError(result.status ?? 500, result.error);
+				} else {
+					refresh_queries(result.refreshes, updates);
+
+					return devalue.parse(result.result, app.decoders);
+				}
+			} finally {
+				// Decrement pending count when command completes
+				pending_count--;
+			}
+		})();
+
+		promise.updates = (/** @type {any} */ ...args) => {
+			updates = args;
+			// @ts-expect-error Don't allow updates to be called multiple times
+			delete promise.updates;
+			return promise;
+		};
+
+		return promise;
+	};
+
+	Object.defineProperty(command_function, 'pending', {
+		get: () => pending_count
+	});
+
+	return command_function;
+}
diff --git a/packages/kit/src/runtime/client/remote-functions/form.svelte.js b/packages/kit/src/runtime/client/remote-functions/form.svelte.js
index 67b62e226b91..fb1e823af328 100644
--- a/packages/kit/src/runtime/client/remote-functions/form.svelte.js
+++ b/packages/kit/src/runtime/client/remote-functions/form.svelte.js
@@ -30,6 +30,9 @@ export function form(id) {
 			!started ? (remote_responses[create_remote_cache_key(action, '')] ?? undefined) : undefined
 		);
 
+		/** @type {number} */
+		let pending_count = $state(0);
+
 		/**
 		 * @param {FormData} data
 		 * @returns {Promise<any> & { updates: (...args: any[]) => any }}
@@ -45,6 +48,9 @@ export function form(id) {
 				entry.count++;
 			}
 
+			// Increment pending count when submission starts
+			pending_count++;
+
 			/** @type {Array<Query<any> | RemoteQueryOverride>} */
 			let updates = [];
 
@@ -97,6 +103,9 @@ export function form(id) {
 					release_overrides(updates);
 					throw e;
 				} finally {
+					// Decrement pending count when submission completes
+					pending_count--;
+
 					void tick().then(() => {
 						if (entry) {
 							entry.count--;
@@ -245,6 +254,10 @@ export function form(id) {
 			}
 		});
 
+		Object.defineProperty(button_props, 'pending', {
+			get: () => pending_count
+		});
+
 		Object.defineProperties(instance, {
 			buttonProps: {
 				value: button_props
@@ -252,6 +265,9 @@ export function form(id) {
 			result: {
 				get: () => result
 			},
+			pending: {
+				get: () => pending_count
+			},
 			enhance: {
 				/** @type {RemoteForm<any>['enhance']} */
 				value: (callback) => {
diff --git a/packages/kit/src/runtime/client/remote-functions/index.js b/packages/kit/src/runtime/client/remote-functions/index.js
index fb2e41c21472..ec6ad0f6f344 100644
--- a/packages/kit/src/runtime/client/remote-functions/index.js
+++ b/packages/kit/src/runtime/client/remote-functions/index.js
@@ -1,4 +1,4 @@
-export { command } from './command.js';
+export { command } from './command.svelte.js';
 export { form } from './form.svelte.js';
 export { prerender } from './prerender.svelte.js';
 export { query } from './query.svelte.js';
diff --git a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
index a05f83efb528..464d9dd46e37 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
@@ -22,6 +22,11 @@
 {/if}
 <p id="command-result">{command_result}</p>
 
+<!-- Test pending state for commands -->
+{#if browser}
+	<p id="command-pending">Command pending: {set_count.pending}</p>
+{/if}
+
 <button onclick={() => set_count_server(0)} id="reset-btn">reset</button>
 
 <button onclick={() => count.refresh()} id="refresh-btn">Refresh</button>
diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
index d6929d0f3fc3..2641c958e34a 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
@@ -6,6 +6,10 @@
 <!-- TODO use await here once async lands -->
 <p id="get-task">{#await current_task then task}{task}{/await}</p>
 
+<!-- Test pending state for forms -->
+<p id="form-pending">Form pending: {task_one.pending}</p>
+<p id="form-button-pending">Button pending: {task_two.buttonProps.pending}</p>
+
 <form {...task_one}>
 	<input id="input-task" name="task" />
 	<button id="submit-btn-one">Task One</button>

From 99334f3cf8f24b9facdd52277d7d1a0dd1f3949f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 09:30:07 -0400
Subject: [PATCH 2/7] reinstate comment

---
 .../kit/src/runtime/client/remote-functions/command.svelte.js   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/kit/src/runtime/client/remote-functions/command.svelte.js b/packages/kit/src/runtime/client/remote-functions/command.svelte.js
index 1923eb7163f6..6c5698a369a6 100644
--- a/packages/kit/src/runtime/client/remote-functions/command.svelte.js
+++ b/packages/kit/src/runtime/client/remote-functions/command.svelte.js
@@ -17,6 +17,8 @@ export function command(id) {
 	/** @type {number} */
 	let pending_count = $state(0);
 
+	// Careful: This function MUST be synchronous (can't use the async keyword) because the return type has to be a promise with an updates() method.
+	// If we make it async, the return type will be a promise that resolves to a promise with an updates() method, which is not what we want.
 	/** @type {RemoteCommand<any, any>} */
 	const command_function = (arg) => {
 		/** @type {Array<Query<any> | RemoteQueryOverride>} */

From aa451e37ff068a607a34cce0c9bdc3cc0bfd3876 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 10:29:21 -0400
Subject: [PATCH 3/7] tests

---
 .../basics/src/routes/remote/+page.svelte     | 12 +++-
 .../src/routes/remote/form/+page.svelte       |  6 +-
 .../src/routes/remote/form/form.remote.js     | 21 +++++-
 .../src/routes/remote/query-command.remote.js | 16 ++++-
 .../kit/test/apps/basics/test/client.test.js  | 68 +++++++++++++++++++
 5 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
index 464d9dd46e37..7ff8d760bb61 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { browser } from '$app/environment';
 	import { refreshAll } from '$app/navigation';
-	import { add, get_count, set_count, set_count_server } from './query-command.remote.js';
+	import { add, get_count, set_count, set_count_server, resolve_deferreds } from './query-command.remote.js';
 
 	let { data } = $props();
 
@@ -65,8 +65,18 @@
 >
 	command (override + refresh)
 </button>
+<button
+	onclick={async () => {
+		// deferred for pending state testing
+		command_result = await set_count({ c: 7, deferred: true });
+	}}
+	id="command-deferred-btn"
+>
+	command (deferred)
+</button>
 
 <button id="refresh-all" onclick={() => refreshAll()}>refreshAll</button>
 <button id="refresh-remote-only" onclick={() => refreshAll({ includeLoadFunctions: false })}>
 	refreshAll (remote functions only)
 </button>
+<button id="resolve-deferreds" onclick={() => resolve_deferreds()}>Resolve Deferreds</button>
diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
index 2641c958e34a..82412d82e7fc 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/remote/form/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { get_task, task_one, task_two } from './form.remote.js';
+	import { get_task, task_one, task_two, resolve_deferreds } from './form.remote.js';
 	const current_task = get_task();
 </script>
 
@@ -55,6 +55,10 @@
 <p id="form-result-1">{task_one.result}</p>
 <p id="form-result-2">{task_two.result}</p>
 
+<form {...resolve_deferreds}>
+	<button id="resolve-deferreds" type="submit">Resolve Deferreds</button>
+</form>
+
 {#each ['foo', 'bar'] as item}
 	<form {...task_one.for(item)}>
 		<span id="form-result-{item}">{task_one.for(item).result}</span>
diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js b/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
index 213b525b6880..f5bb0699758d 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
+++ b/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
@@ -2,11 +2,20 @@ import { form, query } from '$app/server';
 import { error, redirect } from '@sveltejs/kit';
 
 let task;
+const deferreds = [];
 
 export const get_task = query(() => {
 	return task;
 });
 
+export const resolve_deferreds = form(async () => {
+	for (const deferred of deferreds) {
+		deferred.resolve();
+	}
+	deferreds.length = 0; // Clear the array
+	return 'resolved';
+});
+
 export const task_one = form(async (form_data) => {
 	task = /** @type {string} */ (form_data.get('task'));
 
@@ -16,7 +25,11 @@ export const task_one = form(async (form_data) => {
 	if (task === 'redirect') {
 		redirect(303, '/remote');
 	}
-	if (task === 'override') {
+	if (task === 'deferred') {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		await deferred.promise;
+	} else if (task === 'override') {
 		await new Promise((resolve) => setTimeout(resolve, 500));
 	}
 
@@ -29,7 +42,11 @@ export const task_two = form(async (form_data) => {
 	if (task === 'error') {
 		throw new Error('Unexpected error');
 	}
-	if (task === 'override') {
+	if (task === 'deferred') {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		await deferred.promise;
+	} else if (task === 'override') {
 		await new Promise((resolve) => setTimeout(resolve, 500));
 	}
 
diff --git a/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js b/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
index f1eb258b84e0..147bc6c6eb0e 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
+++ b/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
@@ -4,16 +4,28 @@ export const echo = query('unchecked', (value) => value);
 export const add = query('unchecked', ({ a, b }) => a + b);
 
 let count = 0;
+const deferreds = [];
 
 export const get_count = query(() => count);
 
-export const set_count = command('unchecked', async ({ c, slow = false }) => {
-	if (slow) {
+export const set_count = command('unchecked', async ({ c, slow = false, deferred = false }) => {
+	if (deferred) {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		await deferred.promise;
+	} else if (slow) {
 		await new Promise((resolve) => setTimeout(resolve, 500));
 	}
 	return (count = c);
 });
 
+export const resolve_deferreds = command(() => {
+	for (const deferred of deferreds) {
+		deferred.resolve();
+	}
+	deferreds.length = 0; // Clear the array
+});
+
 export const set_count_server = command('unchecked', async (c) => {
 	count = c;
 	await get_count().refresh();
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
index 1c4db540aef4..d55d7f860447 100644
--- a/packages/kit/test/apps/basics/test/client.test.js
+++ b/packages/kit/test/apps/basics/test/client.test.js
@@ -1815,6 +1815,25 @@ test.describe('remote functions', () => {
 		expect(request_count).toBe(2);
 	});
 
+	test('command tracks pending state', async ({ page }) => {
+		await page.goto('/remote');
+
+		// Initial pending should be 0
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
+
+		// Start a slow command - this will hang until we resolve it
+		await page.click('#command-deferred-btn');
+
+		// Check that pending has incremented to 1
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 1');
+
+		// Resolve the deferred command
+		await page.click('#resolve-deferreds');
+
+		// Wait for the command to complete and pending to go back to 0
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
+	});
+
 	test('validation works', async ({ page }) => {
 		await page.goto('/remote/validation');
 		await expect(page.locator('p')).toHaveText('pending');
@@ -1834,4 +1853,53 @@ test.describe('remote functions', () => {
 		await page.click('button:nth-of-type(4)');
 		await expect(page.locator('p')).toHaveText('success');
 	});
+
+	test('command pending state is tracked correctly', async ({ page }) => {
+		await page.goto('/remote');
+		
+		// Initially no pending commands
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
+		
+		// Start a slow command - this will hang until we resolve it
+		await page.click('#command-deferred-btn');
+		
+		// Check that pending has incremented to 1
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 1');
+		
+		// Resolve the deferred command
+		await page.click('#resolve-deferreds');
+		
+		// Wait for the command to complete and verify results
+		await expect(page.locator('#command-result')).toHaveText('7');
+		
+		// Verify pending count returns to 0
+		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
+	});
+
+	test('form pending state is tracked correctly', async ({ page }) => {
+		await page.goto('/remote/form');
+		
+		// Initially no pending forms
+		await expect(page.locator('#form-pending')).toHaveText('Form pending: 0');
+		await expect(page.locator('#form-button-pending')).toHaveText('Button pending: 0');
+		
+		// Fill form with slow operation
+		await page.fill('#input-task', 'deferred');
+		
+		// Submit form - this will hang until we resolve it
+		await page.click('#submit-btn-one');
+		
+		// Check that pending has incremented to 1
+		await expect(page.locator('#form-pending')).toHaveText('Form pending: 1');
+		
+		// Resolve the deferred form submission
+		await page.click('#resolve-deferreds');
+		
+		// Wait for form submission to complete and verify results
+		await expect(page.locator('#get-task')).toHaveText('deferred');
+		
+		// Verify pending count returns to 0
+		await expect(page.locator('#form-pending')).toHaveText('Form pending: 0');
+		await expect(page.locator('#form-button-pending')).toHaveText('Button pending: 0');
+	});
 });

From a428ee3b335c43d95f1bdd01431900d257cb3992 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 12:05:58 -0400
Subject: [PATCH 4/7] prettier

---
 .../basics/src/routes/remote/+page.svelte     |  8 +++++-
 .../kit/test/apps/basics/test/client.test.js  | 26 +++++++++----------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
index 7ff8d760bb61..64e3183ac235 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/remote/+page.svelte
@@ -1,7 +1,13 @@
 <script>
 	import { browser } from '$app/environment';
 	import { refreshAll } from '$app/navigation';
-	import { add, get_count, set_count, set_count_server, resolve_deferreds } from './query-command.remote.js';
+	import {
+		add,
+		get_count,
+		set_count,
+		set_count_server,
+		resolve_deferreds
+	} from './query-command.remote.js';
 
 	let { data } = $props();
 
diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
index d55d7f860447..cc92292a5b3e 100644
--- a/packages/kit/test/apps/basics/test/client.test.js
+++ b/packages/kit/test/apps/basics/test/client.test.js
@@ -1856,48 +1856,48 @@ test.describe('remote functions', () => {
 
 	test('command pending state is tracked correctly', async ({ page }) => {
 		await page.goto('/remote');
-		
+
 		// Initially no pending commands
 		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
-		
+
 		// Start a slow command - this will hang until we resolve it
 		await page.click('#command-deferred-btn');
-		
+
 		// Check that pending has incremented to 1
 		await expect(page.locator('#command-pending')).toHaveText('Command pending: 1');
-		
+
 		// Resolve the deferred command
 		await page.click('#resolve-deferreds');
-		
+
 		// Wait for the command to complete and verify results
 		await expect(page.locator('#command-result')).toHaveText('7');
-		
+
 		// Verify pending count returns to 0
 		await expect(page.locator('#command-pending')).toHaveText('Command pending: 0');
 	});
 
 	test('form pending state is tracked correctly', async ({ page }) => {
 		await page.goto('/remote/form');
-		
+
 		// Initially no pending forms
 		await expect(page.locator('#form-pending')).toHaveText('Form pending: 0');
 		await expect(page.locator('#form-button-pending')).toHaveText('Button pending: 0');
-		
+
 		// Fill form with slow operation
 		await page.fill('#input-task', 'deferred');
-		
+
 		// Submit form - this will hang until we resolve it
 		await page.click('#submit-btn-one');
-		
+
 		// Check that pending has incremented to 1
 		await expect(page.locator('#form-pending')).toHaveText('Form pending: 1');
-		
+
 		// Resolve the deferred form submission
 		await page.click('#resolve-deferreds');
-		
+
 		// Wait for form submission to complete and verify results
 		await expect(page.locator('#get-task')).toHaveText('deferred');
-		
+
 		// Verify pending count returns to 0
 		await expect(page.locator('#form-pending')).toHaveText('Form pending: 0');
 		await expect(page.locator('#form-button-pending')).toHaveText('Button pending: 0');

From 5cf4f44facf14d06ae75992d57a80dd34000266a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 12:18:53 -0400
Subject: [PATCH 5/7]  fix

---
 .../kit/test/apps/basics/src/hooks.server.js  | 10 +++++++++
 packages/kit/types/index.d.ts                 | 22 +++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/kit/test/apps/basics/src/hooks.server.js b/packages/kit/test/apps/basics/src/hooks.server.js
index fdbd0e63e997..64fb6bf07f21 100644
--- a/packages/kit/test/apps/basics/src/hooks.server.js
+++ b/packages/kit/test/apps/basics/src/hooks.server.js
@@ -6,6 +6,16 @@ import { COOKIE_NAME } from './routes/cookies/shared';
 import { _set_from_init } from './routes/init-hooks/+page.server';
 import { getRequestEvent } from '$app/server';
 
+// @ts-ignore this doesn't exist in old Node
+Promise.withResolvers ??= () => {
+	const d = {};
+	d.promise = new Promise((resolve, reject) => {
+		d.resolve = resolve;
+		d.reject = reject;
+	});
+	return d;
+};
+
 /**
  * Transform an error into a POJO, by copying its `name`, `message`
  * and (in dev) `stack`, plus any custom properties, plus recursively
diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts
index 5458c54e9715..2e07e6d2cf98 100644
--- a/packages/kit/types/index.d.ts
+++ b/packages/kit/types/index.d.ts
@@ -1542,6 +1542,8 @@ declare module '@sveltejs/kit' {
 		for(key: string | number | boolean): Omit<RemoteForm<Result>, 'for'>;
 		/** The result of the form submission */
 		get result(): Result | undefined;
+		/** The number of pending submissions */
+		get pending(): number;
 		/** Spread this onto a `<button>` or `<input type="submit">` */
 		buttonProps: {
 			type: 'submit';
@@ -1563,14 +1565,20 @@ declare module '@sveltejs/kit' {
 				formaction: string;
 				onclick: (event: Event) => void;
 			};
+			/** The number of pending submissions */
+			get pending(): number;
 		};
 	};
 
 	/**
 	 * The return value of a remote `command` function. See [Remote functions](https://svelte.dev/docs/kit/remote-functions#command) for full documentation.
 	 */
-	export type RemoteCommand<Input, Output> = (arg: Input) => Promise<Awaited<Output>> & {
-		updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+	export type RemoteCommand<Input, Output> = {
+		(arg: Input): Promise<Awaited<Output>> & {
+			updates(...queries: Array<RemoteQuery<any> | RemoteQueryOverride>): Promise<Awaited<Output>>;
+		};
+		/** The number of pending command executions */
+		get pending(): number;
 	};
 
 	export type RemoteResource<T> = Promise<Awaited<T>> & {
@@ -2120,7 +2128,7 @@ declare module '@sveltejs/kit' {
 	 * Checks whether this is an error thrown by {@link error}.
 	 * @param status The status to filter for.
 	 * */
-	export function isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {
+	export function isHttpError<T extends number>(e: unknown, status?: T | undefined): e is (HttpError_1 & {
 		status: T extends undefined ? never : T;
 	});
 	/**
@@ -2150,13 +2158,13 @@ declare module '@sveltejs/kit' {
 	 * @param data The value that will be serialized as JSON.
 	 * @param init Options such as `status` and `headers` that will be added to the response. `Content-Type: application/json` and `Content-Length` headers will be added automatically.
 	 */
-	export function json(data: any, init?: ResponseInit): Response;
+	export function json(data: any, init?: ResponseInit | undefined): Response;
 	/**
 	 * Create a `Response` object from the supplied body.
 	 * @param body The value that will be used as-is.
 	 * @param init Options such as `status` and `headers` that will be added to the response. A `Content-Length` header will be added automatically.
 	 */
-	export function text(body: string, init?: ResponseInit): Response;
+	export function text(body: string, init?: ResponseInit | undefined): Response;
 	/**
 	 * Create an `ActionFailure` object. Call when form submission fails.
 	 * @param status The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses). Must be in the range 400-599.
@@ -2455,7 +2463,7 @@ declare module '$app/navigation' {
 		invalidateAll?: boolean | undefined;
 		invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
 		state?: App.PageState | undefined;
-	}): Promise<void>;
+	} | undefined): Promise<void>;
 	/**
 	 * Causes any `load` functions belonging to the currently active page to re-run if they depend on the `url` in question, via `fetch` or `depends`. Returns a `Promise` that resolves when the page is subsequently updated.
 	 *
@@ -2484,7 +2492,7 @@ declare module '$app/navigation' {
 	 * */
 	export function refreshAll({ includeLoadFunctions }?: {
 		includeLoadFunctions?: boolean;
-	}): Promise<void>;
+	} | undefined): Promise<void>;
 	/**
 	 * Programmatically preloads the given page, which means
 	 *  1. ensuring that the code for the page is loaded, and

From efd59d5e40e0ac784d6ccb40c87fb729e30e4d08 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 7 Aug 2025 12:26:41 -0400
Subject: [PATCH 6/7] wat

---
 packages/kit/types/index.d.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts
index 2e07e6d2cf98..9dbb552a51a0 100644
--- a/packages/kit/types/index.d.ts
+++ b/packages/kit/types/index.d.ts
@@ -2128,7 +2128,7 @@ declare module '@sveltejs/kit' {
 	 * Checks whether this is an error thrown by {@link error}.
 	 * @param status The status to filter for.
 	 * */
-	export function isHttpError<T extends number>(e: unknown, status?: T | undefined): e is (HttpError_1 & {
+	export function isHttpError<T extends number>(e: unknown, status?: T): e is (HttpError_1 & {
 		status: T extends undefined ? never : T;
 	});
 	/**
@@ -2158,13 +2158,13 @@ declare module '@sveltejs/kit' {
 	 * @param data The value that will be serialized as JSON.
 	 * @param init Options such as `status` and `headers` that will be added to the response. `Content-Type: application/json` and `Content-Length` headers will be added automatically.
 	 */
-	export function json(data: any, init?: ResponseInit | undefined): Response;
+	export function json(data: any, init?: ResponseInit): Response;
 	/**
 	 * Create a `Response` object from the supplied body.
 	 * @param body The value that will be used as-is.
 	 * @param init Options such as `status` and `headers` that will be added to the response. A `Content-Length` header will be added automatically.
 	 */
-	export function text(body: string, init?: ResponseInit | undefined): Response;
+	export function text(body: string, init?: ResponseInit): Response;
 	/**
 	 * Create an `ActionFailure` object. Call when form submission fails.
 	 * @param status The [HTTP status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses). Must be in the range 400-599.
@@ -2463,7 +2463,7 @@ declare module '$app/navigation' {
 		invalidateAll?: boolean | undefined;
 		invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
 		state?: App.PageState | undefined;
-	} | undefined): Promise<void>;
+	}): Promise<void>;
 	/**
 	 * Causes any `load` functions belonging to the currently active page to re-run if they depend on the `url` in question, via `fetch` or `depends`. Returns a `Promise` that resolves when the page is subsequently updated.
 	 *
@@ -2492,7 +2492,7 @@ declare module '$app/navigation' {
 	 * */
 	export function refreshAll({ includeLoadFunctions }?: {
 		includeLoadFunctions?: boolean;
-	} | undefined): Promise<void>;
+	}): Promise<void>;
 	/**
 	 * Programmatically preloads the given page, which means
 	 *  1. ensuring that the code for the page is loaded, and

From 24464a57425808eec2213661056496b1412a8e79 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 11 Aug 2025 11:21:17 -0400
Subject: [PATCH 7/7] Apply suggestions from code review

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .../kit/test/apps/basics/src/routes/remote/form/form.remote.js  | 2 +-
 .../test/apps/basics/src/routes/remote/query-command.remote.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js b/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
index f5bb0699758d..b28aa69addf7 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
+++ b/packages/kit/test/apps/basics/src/routes/remote/form/form.remote.js
@@ -12,7 +12,7 @@ export const resolve_deferreds = form(async () => {
 	for (const deferred of deferreds) {
 		deferred.resolve();
 	}
-	deferreds.length = 0; // Clear the array
+	deferreds.length = 0;
 	return 'resolved';
 });
 
diff --git a/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js b/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
index 147bc6c6eb0e..13d8ccbf9e74 100644
--- a/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
+++ b/packages/kit/test/apps/basics/src/routes/remote/query-command.remote.js
@@ -23,7 +23,7 @@ export const resolve_deferreds = command(() => {
 	for (const deferred of deferreds) {
 		deferred.resolve();
 	}
-	deferreds.length = 0; // Clear the array
+	deferreds.length = 0;
 });
 
 export const set_count_server = command('unchecked', async (c) => {