Added applyAction: 'never'

Added invalidateAll: 'pessimistic'

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,13 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Added `applyAction: 'never'` option, to prevent load function [invalidation](https://svelte.dev/tutorial/kit/invalidation) from overwriting the form data.
+- Added `invalidateAll: 'pessimistic'` option as an alternative to the `'force'` option (recommended to use instead for clarity).
+
 ## [2.24.1] - 2025-04-06
 
 ### Fixed

src/lib/client/superForm.ts

@@ -82,8 +82,13 @@ export type FormOptions<
 	In extends Record<string, unknown> = T
 > = Partial<{
 	id: string;
-	applyAction: boolean;
-	invalidateAll: boolean | 'force';
+	/**
+	 * If `false`, the form won't react to page state updates, except for page invalidations.
+	 * If `'never'`, not even page invalidations will affect the form.
+	 * @default true
+	 */
+	applyAction: boolean | 'never';
+	invalidateAll: boolean | 'force' | 'pessimistic';
 	resetForm: boolean | (() => boolean);
 	scrollToError: 'auto' | 'smooth' | 'off' | boolean | ScrollIntoViewOptions;
 	autoFocusOnError: boolean | 'detect';
@@ -997,16 +1002,20 @@ export function superForm<
 		};
 	}
 
-	async function Form_updateFromValidation(form: SuperValidated<T, M, In>, successResult: boolean) {
-		if (form.valid && successResult && Form_shouldReset(form.valid, successResult)) {
-			Form_reset({ message: form.message, posted: true });
+	async function Form_updateFromValidation(
+		form2: SuperValidated<T, M, In>,
+		successResult: boolean
+	) {
+		if (form2.valid && successResult && Form_shouldReset(form2.valid, successResult)) {
+			Form_reset({ message: form2.message, posted: true });
 		} else {
 			rebind({
-				form,
+				form: form2,
 				untaint: successResult,
 				keepFiles: true,
 				// Check if the form data should be used for updating, or if the invalidateAll load function should be used:
-				skipFormData: options.invalidateAll == 'force'
+				pessimisticUpdate:
+					options.invalidateAll == 'force' || options.invalidateAll == 'pessimistic'
 			});
 		}
 
@@ -1017,7 +1026,7 @@ export function superForm<
 
 		// But do not await on onUpdated itself, since we're already finished with the request
 		for (const event of formEvents.onUpdated) {
-			event({ form });
+			event({ form: form2 });
 		}
 	}
 
@@ -1429,7 +1438,7 @@ export function superForm<
 		message?: M;
 		keepFiles?: boolean;
 		posted?: boolean;
-		skipFormData?: boolean;
+		pessimisticUpdate?: boolean;
 		resetted?: boolean;
 	}) {
 		//console.log('🚀 ~ file: superForm.ts:721 ~ rebind ~ form:', form.data); //debug
@@ -1444,7 +1453,7 @@ export function superForm<
 		// Prevents object errors from being revalidated after rebind.
 		// Check if form was invalidated (usually with options.invalidateAll) to prevent data from being
 		// overwritten by the load function data
-		if (opts.skipFormData !== true) {
+		if (!opts.pessimisticUpdate) {
 			Form_set(form.data, {
 				taint: 'ignore',
 				keepFiles: opts.keepFiles
@@ -1518,7 +1527,11 @@ export function superForm<
 						initialForms.set(newForm, newForm);
 						await Form_updateFromValidation(newForm as SuperValidated<T, M, In>, successResult);
 					}
-				} else if (pageUpdate.data && typeof pageUpdate.data === 'object') {
+				} else if (
+					options.applyAction !== 'never' &&
+					pageUpdate.data &&
+					typeof pageUpdate.data === 'object'
+				) {
 					// It's a page reload, redirect or error/failure,
 					// so don't trigger any events, just update the data.
 					for (const newForm of Context_findValidationForms(pageUpdate.data)) {
@@ -1528,7 +1541,7 @@ export function superForm<
 							continue;
 						}
 
-						if (options.invalidateAll === 'force') {
+						if (options.invalidateAll === 'force' || options.invalidateAll === 'pessimistic') {
 							initialForm.data = newForm.data as T;
 						}
 

src/routes/(v2)/v2/issue-588/+page.server.ts

@@ -0,0 +1,21 @@
+import type { Actions, PageServerLoad } from './$types.js';
+
+import { superValidate, message } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema.js';
+
+export const load: PageServerLoad = async () => {
+	return { form: await superValidate(zod(schema)), count: Math.random().toString().slice(2) };
+};
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Form posted successfully!');
+	}
+};

src/routes/(v2)/v2/issue-588/+page.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+	import { invalidateAll } from '$app/navigation';
+
+	let { data } = $props();
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			console.log('!~!!! here');
+			invalidateAll();
+		}, 2000);
+		return () => clearInterval(interval);
+	});
+
+	const { form, errors, message, enhance } = superForm(data.form, {
+		applyAction: 'never',
+		resetForm: true,
+		taintedMessage: false
+	});
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>Superforms testing ground</h3>
+
+<p>{data.count}</p>
+
+{#if $message}
+	<!-- eslint-disable-next-line svelte/valid-compile -->
+	<div class="status" class:error={page.status >= 400} class:success={page.status == 200}>
+		{$message}
+	</div>
+{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name<br />
+		<input name="name" aria-invalid={$errors.name ? 'true' : undefined} bind:value={$form.name} />
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+
+	<label>
+		Email<br />
+		<input
+			name="email"
+			type="email"
+			aria-invalid={$errors.email ? 'true' : undefined}
+			bind:value={$form.email}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+
+	<button>Submit</button>
+</form>
+
+<hr />
+<p>
+	💥 <a target="_blank" href="https://superforms.rocks">Created with Superforms for SvelteKit</a> 💥
+</p>
+
+<style>
+	.invalid {
+		color: red;
+	}
+
+	.status {
+		color: white;
+		padding: 4px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	input {
+		background-color: #ddd;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	hr {
+		margin-top: 4rem;
+	}
+
+	form {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>

src/routes/(v2)/v2/issue-588/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});