[WIP] outroing update flow

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

@@ -520,57 +520,36 @@ export default class IfBlockWrapper extends Wrapper {
 		if (branch.dependencies.length > 0) {
 			const update_mount_node = this.get_update_mount_node(anchor);
 
-			const enter = dynamic
-				? b`
-					if (${name}) {
-						${name}.p(#ctx, #dirty);
-						${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});
-					}
-				`
-				: 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);`}
-					}
-				`;
-
 			if (branch.snippet) {
-				block.chunks.update.push(b`if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${branch.snippet}`);
+				block.chunks.update.push(
+					b`if (${block.renderer.dirty(branch.dependencies)}) ${
+						branch.condition
+					} = ${branch.snippet}`
+				);
 			}
+			const outro =
+				branch.block.has_outro_method &&
+				b`@group_outros();
+				@transition_out(${name}, 1, 1, () => { ${name} = null; });
+				@check_outros();`;
 
-			// no `p()` here — we don't want to update outroing nodes,
-			// as that will typically result in glitching
-			if (branch.block.has_outro_method) {
-				block.chunks.update.push(b`
-					if (${branch.condition}) {
-						${enter}
-					} else if (${name}) {
-						@group_outros();
-						@transition_out(${name}, 1, 1, () => {
-							${name} = null;
-						});
-						@check_outros();
-					}
-				`);
-			} else {
-				block.chunks.update.push(b`
+			block.chunks.update.push(b`
+				if (${name}) {
+					${dynamic && b`${name}.p(#ctx, #dirty);`}
 					if (${branch.condition}) {
-						${enter}
-					} else if (${name}) {
-						${name}.d(1);
-						${name} = null;
-					}
-				`);
-			}
+						${
+							has_transitions &&
+							b`if (${block.renderer.dirty(branch.dependencies)}) {
+								@transition_in(${name}, 1);
+							}`
+						}
+					} else {${outro ? outro : b`${name}.d(1);${name} = null;`}}
+				} else {
+					${name} = ${branch.block.name}(#ctx);
+					${name}.c();
+					${has_transitions && b`@transition_in(${name}, 1);`}
+					${name}.m(${update_mount_node}, ${anchor});
+				}`);
 		} else if (dynamic) {
 			block.chunks.update.push(b`
 				if (${branch.condition}) ${name}.p(#ctx, #dirty);

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,64 +157,64 @@ 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);
 				if_block0 = null;
 			}
 
 			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);
 				if_block1 = null;
 			}
 
 			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);
 				if_block2 = null;
 			}
 
 			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);
 				if_block3 = null;
 			}
 
 			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-else-in-if-outro-cancelled/Component.svelte

@@ -0,0 +1 @@
+A

test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js

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

test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Component from "./Component.svelte";
+  function foo(node, params) {
+    return {
+      duration: 100,
+      tick: t => {
+        node.foo = t;
+      }
+    };
+  }
+  let isFirst = true;
+  let animationActive = false;
+
+  const toggle = () => {
+    if (animationActive) {
+      return;
+    }
+
+    animationActive = true;
+    Promise.resolve().then(() => {
+      isFirst = !isFirst;
+      animationActive = false;
+    });
+  };
+</script>
+
+<button on:click={toggle}>TOGGLE</button>
+{#if !animationActive}
+  <div out:foo>
+    {#if isFirst}
+      <Component {isFirst} />
+    {:else}
+      <Component {isFirst} />
+    {/if}
+  </div>
+{/if}

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}