fix: further improve reconciliation of inert each block rows (#13527)

Inert effects are currently outroing and will be removed once the transition is finished
Fixes #13302

Author: trueadm

.changeset/friendly-dryers-jog.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: further improve reconciliation of inert each block rows

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -398,7 +398,10 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 		var to_destroy = seen === undefined ? [] : array_from(seen);
 
 		while (current !== null) {
-			to_destroy.push(current);
+			// Inert effects are currently outroing and will be removed once the transition is finished
+			if ((current.e.f & INERT) === 0) {
+				to_destroy.push(current);
+			}
 			current = current.next;
 		}
 

packages/svelte/tests/runtime-runes/samples/transition-each-2/_config.js

@@ -0,0 +1,34 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1?.click();
+		btn1?.click();
+		btn1?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li></ul>'
+		);
+
+		btn2?.click();
+		flushSync();
+		raf.tick(50);
+
+		const li = /** @type {HTMLElement & { foo: number }} */ (target.querySelector('ul > li'));
+
+		assert.equal(li.foo, 0.5);
+
+		btn1?.click();
+		flushSync();
+
+		assert.equal(li.foo, 0.5);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Push</button><button>Remove</button><ul><li>3</li><li>0</li><li>1</li><li>2</li></ul>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-each-2/main.svelte

@@ -0,0 +1,30 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.foo = t;
+			}
+		};
+	}
+
+	let list = $state([]);
+	let id = 0;
+
+	function push() {
+		list.push({ id: id++ })
+	}
+
+	function remove() {
+		list = [];
+	}
+</script>
+
+<button onclick={push}>Push</button>
+<button onclick={remove}>Remove</button>
+
+<ul>
+	{#each list as item (item.id)}
+		<li out:foo>{item.id}</li>
+	{/each}
+</ul>

packages/svelte/tests/runtime-runes/samples/transition-each/_config.js

@@ -11,7 +11,7 @@ export default test({
 		flushSync();
 		assert.htmlEqual(
 			target.innerHTML,
-			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li></ul'
+			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li></ul>'
 		);
 
 		btn2?.click();
@@ -28,7 +28,7 @@ export default test({
 		assert.equal(li.foo, 0.5);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li><li>3</li></ul'
+			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li><li>3</li></ul>'
 		);
 	}
 });