fix removing elements that are currently transitioning out (#5849)

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Rework SSR store handling to subscribe and unsubscribe as in DOM mode ([#3375](https://github.com/sveltejs/svelte/issues/3375), [#3582](https://github.com/sveltejs/svelte/issues/3582), [#3636](https://github.com/sveltejs/svelte/issues/3636))
+* Fix error when removing elements that are already transitioning out ([#5789](https://github.com/sveltejs/svelte/issues/5789), [#5808](https://github.com/sveltejs/svelte/issues/5808))
 
 ## 3.31.1
 

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -448,7 +448,7 @@ export default class IfBlockWrapper extends Wrapper {
 					${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#ctx);
 					${name}.c();
 				} else {
-					${name}.p(#ctx, #dirty);
+					${dynamic && b`${name}.p(#ctx, #dirty);`}
 				}
 				${has_transitions && b`@transition_in(${name}, 1);`}
 				${name}.m(${update_mount_node}, ${anchor});
@@ -472,10 +472,13 @@ export default class IfBlockWrapper extends Wrapper {
 					}
 				`;
 
-			if (dynamic) {
 			block.chunks.update.push(b`
 				let ${previous_block_index} = ${current_block_type_index};
 				${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
+			`);
+
+			if (dynamic) {
+				block.chunks.update.push(b`
 					if (${current_block_type_index} === ${previous_block_index}) {
 						${if_current_block_type_index(b`${if_blocks}[${current_block_type_index}].p(#ctx, #dirty);`)}
 					} else {
@@ -484,8 +487,6 @@ export default class IfBlockWrapper extends Wrapper {
 				`);
 			} else {
 				block.chunks.update.push(b`
-					let ${previous_block_index} = ${current_block_type_index};
-					${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
 					if (${current_block_type_index} !== ${previous_block_index}) {
 						${change_block}
 					}

test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/_config.js

@@ -0,0 +1,38 @@
+export default {
+	async test({ assert, component, target, window, raf }) {
+		const t = target.querySelector('#t');
+
+		await (component.condition = false);
+
+		let time = 0;
+		raf.tick(time += 25);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="t" foo="0.75">TRUE</div>
+			<div id="f">FALSE</div>
+		`);
+
+		// toggling back in the middle of the out transition
+		// will reuse the previous element
+		await (component.condition = true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="f">FALSE</div>
+			<div id="t" foo="1">TRUE</div>
+		`);
+		assert.equal(target.querySelector('#t'), t);
+
+		raf.tick(time += 25);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="f" foo="0.75">FALSE</div>
+			<div id="t" foo="1">TRUE</div>
+		`);
+
+		raf.tick(time += 75);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="t" foo="1">TRUE</div>
+		`);
+	}
+};

test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let condition = true;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.setAttribute('foo', t);
+			}
+		};
+	}
+</script>
+
+{#if condition}
+	<div id="t" out:foo>TRUE</div>
+{:else}
+	<div id="f" out:foo>FALSE</div>
+{/if}