Merge pull request #1693 from sveltejs/gh-1617

Fix for each-blocks preventing outros from completing

src/compile/nodes/EachBlock.ts

@@ -480,6 +480,7 @@ export default class EachBlock extends Node {
 		if (outroBlock && this.compiler.options.nestedTransitions) {
 			const countdown = block.getUniqueName('countdown');
 			block.builders.outro.addBlock(deindent`
+				${iterations} = ${iterations}.filter(Boolean);
 				const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
 				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
 			);

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

@@ -12,5 +12,8 @@ export default {
 		assert.equal( divs[0].foo, undefined );
 		assert.equal( divs[1].foo, 0.5 );
 		assert.equal( divs[2].foo, 0.5 );
+
+		raf.tick( 100 );
+		assert.htmlEqual(target.innerHTML, '<div>a</div>');
 	}
 };

test/runtime/samples/transition-js-nested-each-delete/_config.js

@@ -0,0 +1,29 @@
+export default {
+	nestedTransitions: true,
+	skipIntroByDefault: true,
+
+	data: {
+		visible: true,
+		things: [ 'a', 'b', 'c' ]
+	},
+
+	test ( assert, component, target, window, raf ) {
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		`);
+
+		component.set({ things: [ 'a' ] });
+
+		raf.tick( 100 );
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+		`);
+
+		component.set({ visible: false });
+
+		raf.tick( 200 );
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};

test/runtime/samples/transition-js-nested-each-delete/main.html

@@ -0,0 +1,20 @@
+{#if visible}
+	{#each things as thing}
+		<div transition:foo>{thing}</div>
+	{/each}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>