From 1a40197b43b486c17d1b078864822d5753021e92 Mon Sep 17 00:00:00 2001
From: khang8591 <khang859@gmail.com>
Date: Mon, 8 Jun 2020 19:55:51 -0400
Subject: [PATCH] Added outro when items are added back into each block.

---
 .../compile/render_dom/wrappers/EachBlock.ts  | 21 +++++++++++++++----
 .../_config.js                                | 16 ++++++++++++++
 .../main.svelte                               |  2 +-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 73af43fd84..63dd6af198 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -298,6 +298,21 @@ export default class EachBlockWrapper extends Wrapper {
 				}
 			`);
 
+			const has_transitions = !!(this.else.block.has_intro_method || this.else.block.has_outro_method);
+
+			const destroy_old_block_with_transition = b`
+				@group_outros();
+				@transition_out(${each_block_else}, 1, 1, () => {
+					${each_block_else} = null;
+				});
+				@check_outros();
+			`;
+
+			const destroy_old_block_without_transition = b`
+				${each_block_else}.d(1);
+				${each_block_else} = null;
+			`;
+
 			if (this.else.block.has_update_method) {
 				this.updates.push(b`
 					if (!${this.vars.data_length} && ${each_block_else}) {
@@ -308,16 +323,14 @@ export default class EachBlockWrapper extends Wrapper {
 						@transition_in(${each_block_else}, 1);
 						${each_block_else}.m(${update_mount_node}, ${update_anchor_node});
 					} else if (${each_block_else}) {
-						${each_block_else}.d(1);
-						${each_block_else} = null;
+						${has_transitions ? destroy_old_block_with_transition : destroy_old_block_without_transition}
 					}
 				`);
 			} else {
 				this.updates.push(b`
 					if (${this.vars.data_length}) {
 						if (${each_block_else}) {
-							${each_block_else}.d(1);
-							${each_block_else} = null;
+							${has_transitions ? destroy_old_block_with_transition : destroy_old_block_without_transition}
 						}
 					} else if (!${each_block_else}) {
 						${each_block_else} = ${this.else.block.name}(#ctx);
diff --git a/test/runtime/samples/transitions-trigger-each-else-block/_config.js b/test/runtime/samples/transitions-trigger-each-else-block/_config.js
index 1cd15bbe45..126bb0a91a 100644
--- a/test/runtime/samples/transitions-trigger-each-else-block/_config.js
+++ b/test/runtime/samples/transitions-trigger-each-else-block/_config.js
@@ -5,7 +5,23 @@ export default {
 		component.arr = [];
 		assert.htmlEqual(target.innerHTML, '<div>empty</div>');
 
+		// Transition in
 		raf.tick(50);
 		assert.equal(target.querySelector("div").foo, 0.5);
+
+		raf.tick(100);
+		assert.equal(target.querySelector("div").foo, 1);
+
+		component.arr = ['a'];
+		
+		// Transition out
+		raf.tick(150);
+		assert.equal(target.querySelector("div").foo, 0.5);
+
+		raf.tick(200);
+		assert.equal(target.querySelector("div"), undefined);
+
+		assert.htmlEqual(target.innerHTML, 'a');
+
 	},
 };
diff --git a/test/runtime/samples/transitions-trigger-each-else-block/main.svelte b/test/runtime/samples/transitions-trigger-each-else-block/main.svelte
index 7df5d6b867..5df85b65ac 100644
--- a/test/runtime/samples/transitions-trigger-each-else-block/main.svelte
+++ b/test/runtime/samples/transitions-trigger-each-else-block/main.svelte
@@ -6,6 +6,6 @@
 </script>
 {#each arr as v}
     {v}
-    {:else}
+{:else}
     <div transition:foo>empty</div>
 {/each}
\ No newline at end of file