add test (#9917)

.changeset/wild-foxes-wonder.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup each block animations on destroy

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

@@ -744,17 +744,27 @@ export function destroy_each_item_block(
 	const transitions = block.s;
 
 	if (apply_transitions && transitions !== null) {
-		trigger_transitions(transitions, 'out');
-		if (transition_block !== null) {
-			transition_block.push(block);
+		// We might have pending key transitions, if so remove them first
+		for (let other of transitions) {
+			if (other.r === 'key') {
+				transitions.delete(other);
+			}
 		}
-	} else {
-		const dom = block.d;
-		if (!controlled && dom !== null) {
-			remove(dom);
+		if (transitions.size === 0) {
+			block.s = null;
+		} else {
+			trigger_transitions(transitions, 'out');
+			if (transition_block !== null) {
+				transition_block.push(block);
+			}
+			return;
 		}
-		destroy_signal(/** @type {import('./types.js').EffectSignal} */ (block.e));
 	}
+	const dom = block.d;
+	if (!controlled && dom !== null) {
+		remove(dom);
+	}
+	destroy_signal(/** @type {import('./types.js').EffectSignal} */ (block.e));
 }
 
 /**

packages/svelte/tests/runtime-legacy/samples/animation-flip-2/_config.js

@@ -0,0 +1,60 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		ok(button);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Remove last</button><div class="list"><label><input type="checkbox">
+			write
+			some
+			docs</label><label><input type="checkbox">
+			start
+			writing
+			JSConf
+			talk</label><label><input type="checkbox">
+			buy
+			some
+			milk</label><label><input type="checkbox">
+			mow
+			the
+			lawn</label><label><input type="checkbox">
+			feed
+			the
+			turtle</label><label><input type="checkbox">
+			fix
+			some
+			bugs</label></div>`
+		);
+
+		flushSync(() => {
+			button.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Remove last</button><div class="list"><label><input type="checkbox">
+			write
+			some
+			docs</label><label><input type="checkbox">
+			start
+			writing
+			JSConf
+			talk</label><label><input type="checkbox">
+			buy
+			some
+			milk</label><label><input type="checkbox">
+			mow
+			the
+			lawn</label><label><input type="checkbox">
+			feed
+			the
+			turtle</label></div>`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/animation-flip-2/main.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { flip } from 'svelte/animate';
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
+	];
+
+	function update() {
+		todos = [...todos]
+		todos.pop();
+	}
+</script>
+
+<button on:click={update}>Remove last</button>
+
+<div class="list">
+	{#each todos as todo (todo.id)}
+		<label animate:flip>
+			<input type="checkbox" bind:checked={todo.done} />
+			{todo.description}
+		</label>
+	{/each}
+</div>