nested await block outros

src/compile/dom/Block.ts

@@ -257,6 +257,9 @@ export default class Block {
 						this.m(#target, anchor);
 					},
 				`);
+			} else {
+				if (this.builders.mount.isEmpty()) {
+					properties.addBlock(`i: @noop,`);
 				} else {
 					properties.addBlock(deindent`
 						${dev ? 'i: function intro' : 'i'}(#target, anchor) {
@@ -264,6 +267,7 @@ export default class Block {
 						},
 					`);
 				}
+			}
 
 			if (hasOutros) {
 				properties.addBlock(deindent`

src/compile/nodes/AwaitBlock.ts

@@ -76,6 +76,8 @@ export default class AwaitBlock extends Node {
 		this.pending.block.hasOutroMethod = hasOutros;
 		this.then.block.hasOutroMethod = hasOutros;
 		this.catch.block.hasOutroMethod = hasOutros;
+
+		if (hasOutros) block.addOutro();
 	}
 
 	build(
@@ -169,6 +171,17 @@ export default class AwaitBlock extends Node {
 			`);
 		}
 
+		if (this.pending.block.hasOutroMethod) {
+			block.builders.outro.addBlock(deindent`
+				#outrocallback = @callAfter(#outrocallback, 3);
+				for (let #i = 0; #i < 3; #i += 1) {
+					const block = ${info}.blocks[#i];
+					if (block) block.o(#outrocallback);
+					else #outrocallback();
+				}
+			`);
+		}
+
 		block.builders.destroy.addBlock(deindent`
 			${info}.block.d(${parentNode ? '' : 'detach'});
 			${info} = null;

src/compile/nodes/EachBlock.ts

@@ -322,17 +322,8 @@ export default class EachBlock extends Node {
 		`);
 
 		block.builders.outro.addBlock(deindent`
-			const keys = Object.keys(${lookup}).filter(key => ${lookup}[key]);
+			#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
-			#outrocallback = @callAfter(#outrocallback, keys.length);
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
-
-			function outro(key) {
-				${lookup}[key].o(() => {
-					${lookup}[key] = null;
-					#outrocallback();
-				});
-			}
-
-			for (let #i = 0; #i < keys.length; #i += 1) outro(keys[#i]);
 		`)
 
 		block.builders.destroy.addBlock(deindent`

test/runtime/samples/transition-js-nested-await/_config.js

@@ -0,0 +1,37 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		promise
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+		fulfil();
+
+		return promise.then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(100);
+			assert.equal(div.foo, 1);
+
+			component.set({ x: false });
+			assert.htmlEqual(target.innerHTML, '<div></div>');
+
+			raf.tick(150);
+			assert.equal(div.foo, 0.5);
+
+			raf.tick(200);
+			assert.htmlEqual(target.innerHTML, '');
+		});
+	}
+};

test/runtime/samples/transition-js-nested-await/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#await promise then value}
+		<div transition:foo></div>
+	{/await}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>