ensure if_block dependency is dirty to cancel outro (#4634)

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

@@ -520,28 +520,22 @@ export default class IfBlockWrapper extends Wrapper {
 		if (branch.dependencies.length > 0) {
 			const update_mount_node = this.get_update_mount_node(anchor);
 
-			const enter = dynamic
+			const enter = b`
-				? b`
+				if (${name}) {
-					if (${name}) {
+					${dynamic && b`${name}.p(#ctx, #dirty);`}
-						${name}.p(#ctx, #dirty);
+					${
-						${has_transitions && b`@transition_in(${name}, 1);`}
+						has_transitions &&
-					} else {
+						b`if (${block.renderer.dirty(branch.dependencies)}) {
-						${name} = ${branch.block.name}(#ctx);
+							@transition_in(${name}, 1);
-						${name}.c();
+						}`
-						${has_transitions && b`@transition_in(${name}, 1);`}
-						${name}.m(${update_mount_node}, ${anchor});
-					}
-				`
-				: b`
-					if (!${name}) {
-						${name} = ${branch.block.name}(#ctx);
-						${name}.c();
-						${has_transitions && b`@transition_in(${name}, 1);`}
-						${name}.m(${update_mount_node}, ${anchor});
-					} else {
-						${has_transitions && b`@transition_in(${name}, 1);`}
 					}
-				`;
+				} else {
+					${name} = ${branch.block.name}(#ctx);
+					${name}.c();
+					${has_transitions && b`@transition_in(${name}, 1);`}
+					${name}.m(${update_mount_node}, ${anchor});
+				}
+			`;
 
 			if (branch.snippet) {
 				block.chunks.update.push(b`if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${branch.snippet}`);

test/js/samples/if-block-simple/expected.js

@@ -42,12 +42,12 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (/*foo*/ ctx[0]) {
-				if (!if_block) {
+				if (if_block) {
+					
+				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				} else {
-					
 				}
 			} else if (if_block) {
 				if_block.d(1);

test/js/samples/transition-local/expected.js

@@ -28,13 +28,15 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			if (/*y*/ ctx[1]) {
-				if (!if_block) {
+				if (if_block) {
+					if (dirty & /*y*/ 2) {
+						transition_in(if_block, 1);
+					}
+				} else {
 					if_block = create_if_block_1(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				} else {
-					transition_in(if_block, 1);
 				}
 			} else if (if_block) {
 				if_block.d(1);

test/js/samples/transition-repeated-outro/expected.js

@@ -63,13 +63,15 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (/*num*/ ctx[0] < 5) {
-				if (!if_block) {
+				if (if_block) {
+					if (dirty & /*num*/ 1) {
+						transition_in(if_block, 1);
+					}
+				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
 					transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				} else {
-					transition_in(if_block, 1);
 				}
 			} else if (if_block) {
 				group_outros();

test/js/samples/use-elements-as-anchors/expected.js

@@ -157,12 +157,12 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (/*a*/ ctx[0]) {
-				if (!if_block0) {
+				if (if_block0) {
+					
+				} else {
 					if_block0 = create_if_block_4(ctx);
 					if_block0.c();
 					if_block0.m(div, t0);
-				} else {
-					
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
@@ -170,12 +170,12 @@ function create_fragment(ctx) {
 			}
 
 			if (/*b*/ ctx[1]) {
-				if (!if_block1) {
+				if (if_block1) {
+					
+				} else {
 					if_block1 = create_if_block_3(ctx);
 					if_block1.c();
 					if_block1.m(div, t3);
-				} else {
-					
 				}
 			} else if (if_block1) {
 				if_block1.d(1);
@@ -183,12 +183,12 @@ function create_fragment(ctx) {
 			}
 
 			if (/*c*/ ctx[2]) {
-				if (!if_block2) {
+				if (if_block2) {
+					
+				} else {
 					if_block2 = create_if_block_2(ctx);
 					if_block2.c();
 					if_block2.m(div, t4);
-				} else {
-					
 				}
 			} else if (if_block2) {
 				if_block2.d(1);
@@ -196,12 +196,12 @@ function create_fragment(ctx) {
 			}
 
 			if (/*d*/ ctx[3]) {
-				if (!if_block3) {
+				if (if_block3) {
+					
+				} else {
 					if_block3 = create_if_block_1(ctx);
 					if_block3.c();
 					if_block3.m(div, null);
-				} else {
-					
 				}
 			} else if (if_block3) {
 				if_block3.d(1);
@@ -209,12 +209,12 @@ function create_fragment(ctx) {
 			}
 
 			if (/*e*/ ctx[4]) {
-				if (!if_block4) {
+				if (if_block4) {
+					
+				} else {
 					if_block4 = create_if_block(ctx);
 					if_block4.c();
 					if_block4.m(if_block4_anchor.parentNode, if_block4_anchor);
-				} else {
-					
 				}
 			} else if (if_block4) {
 				if_block4.d(1);

test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let condition;
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+	let bool = true;
+</script>
+
+<button on:click={() => (condition = false)} />
+<button on:click={() => (bool = !bool)} />
+{#if bool}
+	<div out:foo />
+{/if}

test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js

@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, target, window, raf }) {
+		const button = target.querySelector("button");
+		const event = new window.MouseEvent("click");
+		await button.dispatchEvent(event);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, "");
+	},
+};

test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Component from "./Component.svelte";
+	let condition = true;
+</script>
+
+{#if condition}
+	<Component bind:condition />
+{/if}

test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let condition;
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+	$condition;
+	let bool = true;
+</script>
+
+<button on:click={() => (bool = !bool)} />
+{#if bool}
+	<div out:foo />
+{/if}

test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js

@@ -0,0 +1,7 @@
+export default {
+	async test({ assert, target, component, raf }) {
+		await component.condition.set(false);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, "");
+	},
+};

test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { writable } from "svelte/store";
+	import Component from "./Component.svelte";
+	export let condition = writable(true);
+</script>
+
+{#if $condition}
+	<button on:click={() => ($condition = false)} id="1" />
+	<Component {condition} />
+{/if}