Fix transitions for each-else blocks (#5179)

Co-authored-by: khang8591 <khang859@gmail.com>

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

@@ -298,6 +298,19 @@ export default class EachBlockWrapper extends Wrapper {
 				}
 			`);
 
+			const has_transitions = !!(this.else.block.has_intro_method || this.else.block.has_outro_method);
+
+			const destroy_block_else = this.else.block.has_outro_method
+				? b`
+					@group_outros();
+					@transition_out(${each_block_else}, 1, 1, () => {
+						${each_block_else} = null;
+					});
+					@check_outros();`
+				: 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}) {
@@ -305,22 +318,22 @@ export default class EachBlockWrapper extends Wrapper {
 					} else if (!${this.vars.data_length}) {
 						${each_block_else} = ${this.else.block.name}(#ctx);
 						${each_block_else}.c();
+						${has_transitions && b`@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;
+						${destroy_block_else};
 					}
 				`);
 			} else {
 				this.updates.push(b`
 					if (${this.vars.data_length}) {
 						if (${each_block_else}) {
-							${each_block_else}.d(1);
-							${each_block_else} = null;
+							${destroy_block_else};
 						}
 					} else if (!${each_block_else}) {
 						${each_block_else} = ${this.else.block.name}(#ctx);
 						${each_block_else}.c();
+						${has_transitions && b`@transition_in(${each_block_else}, 1);`}
 						${each_block_else}.m(${update_mount_node}, ${update_anchor_node});
 					}
 				`);

test/runtime/samples/transition-js-each-else-block-intro-outro/_config.js

@@ -0,0 +1,54 @@
+export default {
+	props: {
+		things: ['a', 'b', 'c']
+	},
+
+	test({ assert, component, target, window, raf }) {
+		component.things = [];
+		let div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(400);
+		assert.equal(div.foo, 1);
+
+		raf.tick(600);
+		component.things = ['a', 'b', 'c'];
+
+		raf.tick(700);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(800);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.5);
+
+		raf.tick(900);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.25);
+
+		// test outro before intro complete
+		raf.tick(1000);
+		component.things = [];
+		div = target.querySelector('div');
+
+		raf.tick(1200);
+		assert.equal(div.foo, 0.5);
+
+		component.things = ['a', 'b', 'c'];
+		raf.tick(1300);
+		assert.equal(div.foo, 0.75);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(1400);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.5);
+
+		raf.tick(2000);
+	}
+};

test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.bar = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div in:foo out:bar>else</div>
+{/each}

test/runtime/samples/transition-js-each-else-block-intro/_config.js

@@ -0,0 +1,22 @@
+export default {
+	props: {
+		things: ['a', 'b', 'c']
+	},
+
+	test({ assert, component, target, window, raf }) {
+		component.things = [];
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(400);
+		assert.equal(div.foo, 1);
+
+		raf.tick(500);
+	}
+};

test/runtime/samples/transition-js-each-else-block-intro/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div in:foo>else</div>
+{/each}

test/runtime/samples/transition-js-each-else-block-outro/_config.js

@@ -0,0 +1,20 @@
+export default {
+	props: {
+		things: []
+	},
+	test({ assert, component, target, window, raf }) {
+		const div = target.querySelector('div');
+		component.things = ['a', 'b', 'c'];
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.25);
+
+		raf.tick(400);
+		assert.equal(div.foo, 0);
+
+		raf.tick(500);
+	}
+};

test/runtime/samples/transition-js-each-else-block-outro/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div out:foo>else</div>
+{/each}