fix: prevent re-activated stale batches from break reactivity

Author: paoloricciuti

.changeset/rude-vans-retire.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent re-activated stale batches from break reactivity

packages/svelte/src/internal/client/reactivity/batch.js

@@ -421,6 +421,13 @@ export class Batch {
 	}
 
 	static ensure() {
+		if (current_batch !== null && !batches.has(current_batch)) {
+			// A previously committed batch was reactivated via async `restore`.
+			// Treat it as inactive so a new batch can be created to process updates.
+			current_batch = null;
+			batch_values = null;
+		}
+
 		if (current_batch === null) {
 			const batch = (current_batch = new Batch());
 			batches.add(current_batch);

packages/svelte/tests/runtime-runes/samples/async-resolve-stale/_config.js

@@ -21,5 +21,9 @@ export default test({
 		input.dispatchEvent(new Event('input', { bubbles: true }));
 		await macrotask(6);
 		assert.htmlEqual(target.innerHTML, '<input> 3 | 12');
+		input.value = '';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await macrotask();
+		assert.htmlEqual(target.innerHTML, '<input> 4 | ');
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-resolve-stale/main.svelte

@@ -1,28 +1,32 @@
 <script>
 	let count = $state(0);
 	let value = $state('');
-	let prev;
 
-	function asd(v) {
-		const r = Promise.withResolvers();
+	let resolver;
 
-		if (prev || v === '') {
-			Promise.resolve().then(async () => {
-				count++;
-				r.resolve(v);
-				await new Promise(r => setTimeout(r, 0));
-				// TODO with a microtask like below it still throws a mutation error
-				// await Promise.resolve();
-				prev?.resolve();
-			});
-		} else {
-			prev = Promise.withResolvers();
-			prev.promise.then(() => {
-				count++;
-				r.resolve(v)
-			});
+	function asd(v) {		
+		let r = Promise.withResolvers();
+
+		function update_and_resolve(){
+			count++;
+			r.resolve(v);
 		}
 
+		// make sure the second promise resolve before the first one
+		if(resolver){
+			new Promise(r => {
+				setTimeout(r);
+			}).then(update_and_resolve).then(()=>{
+				setTimeout(()=>{
+					resolver();
+					resolver = null;
+				});
+			});
+		}else if(v){
+			resolver = update_and_resolve;
+		}else{
+			Promise.resolve().then(update_and_resolve);
+		}
 		return r.promise;
 	}