From 0a230d1c9d03b575430a13145da1bd4486ef53ed Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 12 May 2018 14:28:39 -0400
Subject: [PATCH 1/4] WIP towards nested transitions

---
 src/compile/dom/Block.ts                      | 12 ++++++++
 src/compile/nodes/Element.ts                  |  7 +++--
 src/compile/nodes/IfBlock.ts                  | 17 +++++++++++
 src/interfaces.ts                             |  1 +
 test/runtime/index.js                         |  1 +
 .../transition-js-nested-if/_config.js        | 28 +++++++++++++++++++
 .../samples/transition-js-nested-if/main.html | 20 +++++++++++++
 7 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-nested-if/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-if/main.html

diff --git a/src/compile/dom/Block.ts b/src/compile/dom/Block.ts
index 4e88d27a1855..71d85bba771b 100644
--- a/src/compile/dom/Block.ts
+++ b/src/compile/dom/Block.ts
@@ -5,6 +5,7 @@ import Compiler from '../Compiler';
 import { Node } from '../../interfaces';
 
 export interface BlockOptions {
+	parent?: Block;
 	name: string;
 	compiler?: Compiler;
 	comment?: string;
@@ -14,6 +15,7 @@ export interface BlockOptions {
 }
 
 export default class Block {
+	parent?: Block;
 	compiler: Compiler;
 	name: string;
 	comment?: string;
@@ -50,6 +52,7 @@ export default class Block {
 	autofocus: string;
 
 	constructor(options: BlockOptions) {
+		this.parent = options.parent;
 		this.compiler = options.compiler;
 		this.name = options.name;
 		this.comment = options.comment;
@@ -115,6 +118,15 @@ export default class Block {
 		}
 	}
 
+	addIntro() {
+		this.hasIntroMethod = true;
+	}
+
+	addOutro() {
+		this.hasOutroMethod = true;
+		this.outros += 1;
+	}
+
 	addVariable(name: string, init?: string) {
 		if (this.variables.has(name) && this.variables.get(name) !== init) {
 			throw new Error(
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index ec166a8130c8..28d01ae9382c 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -182,13 +182,14 @@ export default class Element extends Node {
 
 		if (this.intro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasIntroTransitions = block.hasIntroMethod = true;
+			this.compiler.target.hasIntroTransitions = true;
+			block.addIntro();
 		}
 
 		if (this.outro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasOutroTransitions = block.hasOutroMethod = true;
-			block.outros += 1;
+			this.compiler.target.hasOutroTransitions = true;
+			block.addOutro();
 		}
 
 		if (this.ref) {
diff --git a/src/compile/nodes/IfBlock.ts b/src/compile/nodes/IfBlock.ts
index dd6e98a82a0e..87727e5b9ee9 100644
--- a/src/compile/nodes/IfBlock.ts
+++ b/src/compile/nodes/IfBlock.ts
@@ -95,6 +95,11 @@ export default class IfBlock extends Node {
 
 		attachBlocks(this);
 
+		if (compiler.options.nestedTransitions) {
+			if (hasIntros) block.addIntro();
+			if (hasOutros) block.addOutro();
+		}
+
 		blocks.forEach(block => {
 			block.hasUpdateMethod = dynamic;
 			block.hasIntroMethod = hasIntros;
@@ -129,11 +134,23 @@ export default class IfBlock extends Node {
 		if (this.else) {
 			if (hasOutros) {
 				this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
+
+				if (this.compiler.options.nestedTransitions) {
+					block.builders.outro.addLine(
+						`${name}.o(#outrocallback);`
+					);
+				}
 			} else {
 				this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
 			}
 		} else {
 			this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
+
+			if (hasOutros && this.compiler.options.nestedTransitions) {
+				block.builders.outro.addLine(
+					`if (${name}) ${name}.o(#outrocallback);`
+				);
+			}
 		}
 
 		block.builders.create.addLine(`${if_name}${name}.c();`);
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 1a5c356404c9..a30a67a91f44 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -67,6 +67,7 @@ export interface CompileOptions {
 
 	// to remove in v3
 	skipIntroByDefault?: boolean;
+	nestedTransitions: boolean;
 }
 
 export interface GenerateOptions {
diff --git a/test/runtime/index.js b/test/runtime/index.js
index 1ae37afd612b..ceed2bfb0f31 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -73,6 +73,7 @@ describe("runtime", () => {
 			compileOptions.store = !!config.store;
 			compileOptions.immutable = config.immutable;
 			compileOptions.skipIntroByDefault = config.skipIntroByDefault;
+			compileOptions.nestedTransitions = config.nestedTransitions;
 
 			Object.keys(require.cache)
 				.filter(x => x.endsWith(".html"))
diff --git a/test/runtime/samples/transition-js-nested-if/_config.js b/test/runtime/samples/transition-js-nested-if/_config.js
new file mode 100644
index 000000000000..c8f624b2c755
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-if/_config.js
@@ -0,0 +1,28 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		y: true
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		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, '');
+	},
+};
diff --git a/test/runtime/samples/transition-js-nested-if/main.html b/test/runtime/samples/transition-js-nested-if/main.html
new file mode 100644
index 000000000000..cd10c9118fe3
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-if/main.html
@@ -0,0 +1,20 @@
+{#if x}
+	{#if y}
+		<div transition:foo></div>
+	{/if}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file

From 64fa48e699c58d2cc03c2735e9d5c56f1cbfe674 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 12 May 2018 15:46:01 -0400
Subject: [PATCH 2/4] outroing each blocks

---
 src/compile/dom/Block.ts                      |  2 +-
 src/compile/nodes/EachBlock.ts                | 63 ++++++++++++++-----
 src/compile/nodes/Element.ts                  |  6 +-
 src/shared/keyed-each.js                      |  3 -
 src/shared/utils.js                           |  6 ++
 .../_config.js                                | 28 +++++++++
 .../transition-js-nested-each-keyed/main.html | 20 ++++++
 .../transition-js-nested-each/_config.js      | 28 +++++++++
 .../transition-js-nested-each/main.html       | 20 ++++++
 9 files changed, 154 insertions(+), 22 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed/main.html
 create mode 100644 test/runtime/samples/transition-js-nested-each/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each/main.html

diff --git a/src/compile/dom/Block.ts b/src/compile/dom/Block.ts
index 71d85bba771b..69a6736fcda1 100644
--- a/src/compile/dom/Block.ts
+++ b/src/compile/dom/Block.ts
@@ -272,7 +272,7 @@ export default class Block {
 						${outroing} = true;
 						${hasIntros && `${introing} = false;`}
 
-						${this.outros > 1 && `var #outros = ${this.outros};`}
+						${this.outros > 1 && `#outrocallback = @callAfter(#outrocallback, ${this.outros});`}
 
 						${this.builders.outro}
 					},
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
index 78a9e4d48c72..e55ecd811931 100644
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -118,6 +118,10 @@ export default class EachBlock extends Node {
 			);
 			this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
 		}
+
+		if (this.block.hasOutroMethod || (this.else && this.else.block.hasOutroMethod)) {
+			block.addOutro();
+		}
 	}
 
 	build(
@@ -313,9 +317,24 @@ export default class EachBlock extends Node {
 		block.builders.update.addBlock(deindent`
 			var ${this.each_block_value} = ${snippet};
 
+			${this.block.hasOutroMethod && `@transitionManager.groupOutros();`}
 			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
 		`);
 
+		block.builders.outro.addBlock(deindent`
+			const keys = Object.keys(${lookup}).filter(key => ${lookup}[key]);
+			#outrocallback = @callAfter(#outrocallback, keys.length);
+
+			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`
 			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
 		`);
@@ -372,6 +391,21 @@ export default class EachBlock extends Node {
 			allDependencies.add(dependency);
 		});
 
+		const outro = this.block.hasOutroMethod && block.getUniqueName('outro')
+		if (outro) {
+			block.builders.init.addBlock(deindent`
+				function ${outro}(i, detach, fn) {
+					if (${iterations}[i]) {
+						${iterations}[i].o(() => {
+							${iterations}[i].d(detach);
+							if (detach) ${iterations}[i] = null;
+							if (fn) fn();
+						});
+					}
+				}
+			`);
+		}
+
 		// TODO do this for keyed blocks as well
 		const condition = Array.from(allDependencies)
 			.map(dependency => `changed.${dependency}`)
@@ -406,27 +440,21 @@ export default class EachBlock extends Node {
 
 			const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
 
-			const outro = block.getUniqueName('outro');
-			const destroy = this.block.hasOutroMethod
-				? deindent`
-					function ${outro}(i) {
-						if (${iterations}[i]) {
-							${iterations}[i].o(function() {
-								${iterations}[i].d(1);
-								${iterations}[i] = null;
-							});
-						}
-					}
+			let destroy;
 
+			if (this.block.hasOutroMethod) {
+				destroy = deindent`
 					@transitionManager.groupOutros();
-					for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
-				`
-				: deindent`
+					for (; #i < ${iterations}.length; #i += 1) ${outro}(#i, 1);
+				`;
+			} else {
+				destroy = deindent`
 					for (; #i < ${iterations}.length; #i += 1) {
 						${iterations}[#i].d(1);
 					}
 					${iterations}.length = ${this.each_block_value}.${length};
 				`;
+			}
 
 			block.builders.update.addBlock(deindent`
 				if (${condition}) {
@@ -443,6 +471,13 @@ export default class EachBlock extends Node {
 			`);
 		}
 
+		if (outro) {
+			block.builders.outro.addBlock(deindent`
+				#outrocallback = @callAfter(#outrocallback, #i);
+				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outro}(#i, 0, #outrocallback);`
+			);
+		}
+
 		block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
 	}
 
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 28d01ae9382c..cdfe1926df6a 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -712,7 +712,7 @@ export default class Element extends Node {
 
 			block.builders.outro.addBlock(deindent`
 				${name}.run(0, () => {
-					${block.outros > 1 ? `if (--#outros === 0) #outrocallback();` : `#outrocallback();`}
+					#outrocallback();
 					${name} = null;
 				});
 			`);
@@ -759,9 +759,7 @@ export default class Element extends Node {
 				// group) prior to their removal from the DOM
 				block.builders.outro.addBlock(deindent`
 					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
-					${outroName}.run(0, () => {
-						${block.outros > 1 ? `if (--#outros === 0) #outrocallback();` : `#outrocallback();`}
-					});
+					${outroName}.run(0, #outrocallback);
 				`);
 			}
 		}
diff --git a/src/shared/keyed-each.js b/src/shared/keyed-each.js
index 60b0fe8bcd85..dac16930ee08 100644
--- a/src/shared/keyed-each.js
+++ b/src/shared/keyed-each.js
@@ -1,5 +1,3 @@
-import { transitionManager } from './transitions.js';
-
 export function destroyBlock(block, lookup) {
 	block.d(1);
 	lookup[block.key] = null;
@@ -45,7 +43,6 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic
 	var did_move = {};
 
 	var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
-	if (has_outro) transitionManager.groupOutros();
 
 	function insert(block) {
 		block[intro_method](node, next);
diff --git a/src/shared/utils.js b/src/shared/utils.js
index f9fbf80e66a9..d1f2c7f5e587 100644
--- a/src/shared/utils.js
+++ b/src/shared/utils.js
@@ -12,4 +12,10 @@ export function assignTrue(tar, src) {
 
 export function isPromise(value) {
 	return value && typeof value.then === 'function';
+}
+
+export function callAfter(fn, i) {
+	return () => {
+		if (!--i) fn();
+	};
 }
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-each-keyed/_config.js b/test/runtime/samples/transition-js-nested-each-keyed/_config.js
new file mode 100644
index 000000000000..7011ada5aa51
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed/_config.js
@@ -0,0 +1,28 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		things: ['a']
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		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, '');
+	},
+};
diff --git a/test/runtime/samples/transition-js-nested-each-keyed/main.html b/test/runtime/samples/transition-js-nested-each-keyed/main.html
new file mode 100644
index 000000000000..335380695d3a
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed/main.html
@@ -0,0 +1,20 @@
+{#if x}
+	{#each things as thing (thing)}
+		<div transition:foo></div>
+	{/each}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-each/_config.js b/test/runtime/samples/transition-js-nested-each/_config.js
new file mode 100644
index 000000000000..7011ada5aa51
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each/_config.js
@@ -0,0 +1,28 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		things: ['a']
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		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, '');
+	},
+};
diff --git a/test/runtime/samples/transition-js-nested-each/main.html b/test/runtime/samples/transition-js-nested-each/main.html
new file mode 100644
index 000000000000..c47940c1cfff
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each/main.html
@@ -0,0 +1,20 @@
+{#if x}
+	{#each things as thing}
+		<div transition:foo></div>
+	{/each}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file

From 3623c4abc9d709679c66b6de179b1c72250a4e5d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 12 May 2018 16:08:46 -0400
Subject: [PATCH 3/4] nested await block outros

---
 src/compile/dom/Block.ts                      | 14 ++++---
 src/compile/nodes/AwaitBlock.ts               | 13 +++++++
 src/compile/nodes/EachBlock.ts                | 13 +------
 .../transition-js-nested-await/_config.js     | 37 +++++++++++++++++++
 .../transition-js-nested-await/main.html      | 20 ++++++++++
 5 files changed, 81 insertions(+), 16 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-nested-await/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-await/main.html

diff --git a/src/compile/dom/Block.ts b/src/compile/dom/Block.ts
index 69a6736fcda1..a0330c888cf4 100644
--- a/src/compile/dom/Block.ts
+++ b/src/compile/dom/Block.ts
@@ -258,11 +258,15 @@ export default class Block {
 					},
 				`);
 			} else {
-				properties.addBlock(deindent`
-					${dev ? 'i: function intro' : 'i'}(#target, anchor) {
-						this.m(#target, anchor);
-					},
-				`);
+				if (this.builders.mount.isEmpty()) {
+					properties.addBlock(`i: @noop,`);
+				} else {
+					properties.addBlock(deindent`
+						${dev ? 'i: function intro' : 'i'}(#target, anchor) {
+							this.m(#target, anchor);
+						},
+					`);
+				}
 			}
 
 			if (hasOutros) {
diff --git a/src/compile/nodes/AwaitBlock.ts b/src/compile/nodes/AwaitBlock.ts
index 0d74dc608bce..097aea3d0dc2 100644
--- a/src/compile/nodes/AwaitBlock.ts
+++ b/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;
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
index e55ecd811931..7af6bfbec368 100644
--- a/src/compile/nodes/EachBlock.ts
+++ b/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, keys.length);
-
-			function outro(key) {
-				${lookup}[key].o(() => {
-					${lookup}[key] = null;
-					#outrocallback();
-				});
-			}
-
-			for (let #i = 0; #i < keys.length; #i += 1) outro(keys[#i]);
+			#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
 		`)
 
 		block.builders.destroy.addBlock(deindent`
diff --git a/test/runtime/samples/transition-js-nested-await/_config.js b/test/runtime/samples/transition-js-nested-await/_config.js
new file mode 100644
index 000000000000..d688c55cf1c1
--- /dev/null
+++ b/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, '');
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-await/main.html b/test/runtime/samples/transition-js-nested-await/main.html
new file mode 100644
index 000000000000..039051a8bdb6
--- /dev/null
+++ b/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>
\ No newline at end of file

From 042ec54f7f513bdbd574e5235c11fd5748d48cb9 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 12 May 2018 16:48:05 -0400
Subject: [PATCH 4/4] nested component transitions

---
 src/compile/dom/Block.ts                      |  4 +--
 src/compile/dom/index.ts                      |  3 +++
 src/compile/nodes/AwaitBlock.ts               |  4 +--
 src/compile/nodes/Component.ts                | 18 ++++++++++---
 src/compile/nodes/EachBlock.ts                | 12 +++++----
 src/compile/nodes/Element.ts                  |  2 --
 test/cli/samples/basic/expected/Main.js       |  1 +
 .../samples/custom-element/expected/Main.js   |  1 +
 test/cli/samples/dev/expected/Main.js         |  1 +
 .../samples/dir-sourcemap/expected/Main.js    |  1 +
 .../dir-sourcemap/expected/Main.js.map        |  2 +-
 .../samples/dir-sourcemap/expected/Widget.js  |  1 +
 .../dir-sourcemap/expected/Widget.js.map      |  2 +-
 test/cli/samples/dir-subdir/expected/Main.js  |  1 +
 .../dir-subdir/expected/widget/Widget.js      |  1 +
 test/cli/samples/dir/expected/Main.js         |  1 +
 test/cli/samples/dir/expected/Widget.js       |  1 +
 test/cli/samples/globals/expected/Main.js     |  1 +
 .../samples/sourcemap-inline/expected/Main.js |  3 ++-
 test/cli/samples/sourcemap/expected/Main.js   |  1 +
 .../samples/sourcemap/expected/Main.js.map    |  2 +-
 test/cli/samples/store/expected/Main.js       |  1 +
 test/js/samples/action/expected-bundle.js     |  1 +
 test/js/samples/action/expected.js            |  1 +
 .../bind-width-height/expected-bundle.js      |  1 +
 test/js/samples/bind-width-height/expected.js |  1 +
 .../expected-bundle.js                        |  1 +
 .../expected.js                               |  1 +
 .../component-static-array/expected-bundle.js |  1 +
 .../component-static-array/expected.js        |  1 +
 .../expected-bundle.js                        |  1 +
 .../component-static-immutable/expected.js    |  1 +
 .../expected-bundle.js                        |  1 +
 .../component-static-immutable2/expected.js   |  1 +
 .../component-static/expected-bundle.js       |  1 +
 test/js/samples/component-static/expected.js  |  1 +
 .../computed-collapsed-if/expected-bundle.js  |  1 +
 .../samples/computed-collapsed-if/expected.js |  1 +
 .../css-media-query/expected-bundle.js        |  1 +
 test/js/samples/css-media-query/expected.js   |  1 +
 .../expected-bundle.js                        |  1 +
 .../css-shadow-dom-keyframes/expected.js      |  1 +
 .../deconflict-builtins/expected-bundle.js    |  1 +
 .../samples/deconflict-builtins/expected.js   |  1 +
 .../deconflict-globals/expected-bundle.js     |  1 +
 .../js/samples/deconflict-globals/expected.js |  1 +
 .../expected-bundle.js                        |  1 +
 .../expected.js                               |  1 +
 .../samples/do-use-dataset/expected-bundle.js |  1 +
 test/js/samples/do-use-dataset/expected.js    |  1 +
 .../expected-bundle.js                        |  1 +
 .../dont-use-dataset-in-legacy/expected.js    |  1 +
 .../expected-bundle.js                        |  1 +
 .../dont-use-dataset-in-svg/expected.js       |  1 +
 .../expected-bundle.js                        |  1 +
 .../each-block-changed-check/expected.js      |  1 +
 .../event-handlers-custom/expected-bundle.js  |  1 +
 .../samples/event-handlers-custom/expected.js |  1 +
 .../head-no-whitespace/expected-bundle.js     |  1 +
 .../js/samples/head-no-whitespace/expected.js |  1 +
 .../if-block-no-update/expected-bundle.js     |  1 +
 .../js/samples/if-block-no-update/expected.js |  1 +
 .../if-block-simple/expected-bundle.js        |  1 +
 test/js/samples/if-block-simple/expected.js   |  1 +
 .../expected-bundle.js                        |  1 +
 .../expected.js                               |  1 +
 .../expected-bundle.js                        |  1 +
 .../inline-style-optimized-url/expected.js    |  1 +
 .../inline-style-optimized/expected-bundle.js |  1 +
 .../inline-style-optimized/expected.js        |  1 +
 .../expected-bundle.js                        |  1 +
 .../inline-style-unoptimized/expected.js      |  1 +
 .../js/samples/input-range/expected-bundle.js |  1 +
 test/js/samples/input-range/expected.js       |  1 +
 .../expected-bundle.js                        |  1 +
 .../input-without-blowback-guard/expected.js  |  1 +
 .../legacy-input-type/expected-bundle.js      |  1 +
 test/js/samples/legacy-input-type/expected.js |  1 +
 .../samples/media-bindings/expected-bundle.js |  1 +
 test/js/samples/media-bindings/expected.js    |  1 +
 .../non-imported-component/expected-bundle.js |  1 +
 .../non-imported-component/expected.js        |  1 +
 .../samples/setup-method/expected-bundle.js   |  1 +
 test/js/samples/setup-method/expected.js      |  1 +
 test/js/samples/svg-title/expected-bundle.js  |  1 +
 test/js/samples/svg-title/expected.js         |  1 +
 test/js/samples/title/expected-bundle.js      |  1 +
 test/js/samples/title/expected.js             |  1 +
 .../expected-bundle.js                        |  1 +
 .../use-elements-as-anchors/expected.js       |  1 +
 .../window-binding-scroll/expected-bundle.js  |  1 +
 .../samples/window-binding-scroll/expected.js |  1 +
 test/runtime/index.js                         |  6 ++---
 .../Widget.html                               | 16 +++++++++++
 .../transition-js-nested-component/_config.js | 27 +++++++++++++++++++
 .../transition-js-nested-component/main.html  | 13 +++++++++
 96 files changed, 174 insertions(+), 22 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-nested-component/Widget.html
 create mode 100644 test/runtime/samples/transition-js-nested-component/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-component/main.html

diff --git a/src/compile/dom/Block.ts b/src/compile/dom/Block.ts
index a0330c888cf4..6730d416b01e 100644
--- a/src/compile/dom/Block.ts
+++ b/src/compile/dom/Block.ts
@@ -119,11 +119,11 @@ export default class Block {
 	}
 
 	addIntro() {
-		this.hasIntroMethod = true;
+		this.hasIntroMethod = this.compiler.target.hasIntroTransitions = true;
 	}
 
 	addOutro() {
-		this.hasOutroMethod = true;
+		this.hasOutroMethod = this.compiler.target.hasOutroTransitions = true;
 		this.outros += 1;
 	}
 
diff --git a/src/compile/dom/index.ts b/src/compile/dom/index.ts
index 35a6ca17114c..4a70ed06caab 100644
--- a/src/compile/dom/index.ts
+++ b/src/compile/dom/index.ts
@@ -182,6 +182,7 @@ export default function dom(
 			})}
 		${compiler.bindingGroups.length &&
 			`this._bindingGroups = [${Array(compiler.bindingGroups.length).fill('[]').join(', ')}];`}
+		this._intro = ${compiler.options.skipIntroByDefault ? 'options.intro' : 'true'};
 
 		${templateProperties.onstate && `this._handlers.state = [%onstate];`}
 		${templateProperties.onupdate && `this._handlers.update = [%onupdate];`}
@@ -251,6 +252,8 @@ export default function dom(
 				`}
 			}
 		`}
+
+		${compiler.options.skipIntroByDefault && `this._intro = true;`}
 	`;
 
 	if (compiler.customElement) {
diff --git a/src/compile/nodes/AwaitBlock.ts b/src/compile/nodes/AwaitBlock.ts
index 097aea3d0dc2..9a8aa51020b5 100644
--- a/src/compile/nodes/AwaitBlock.ts
+++ b/src/compile/nodes/AwaitBlock.ts
@@ -77,7 +77,7 @@ export default class AwaitBlock extends Node {
 		this.then.block.hasOutroMethod = hasOutros;
 		this.catch.block.hasOutroMethod = hasOutros;
 
-		if (hasOutros) block.addOutro();
+		if (hasOutros && this.compiler.options.nestedTransitions) block.addOutro();
 	}
 
 	build(
@@ -171,7 +171,7 @@ export default class AwaitBlock extends Node {
 			`);
 		}
 
-		if (this.pending.block.hasOutroMethod) {
+		if (this.pending.block.hasOutroMethod && this.compiler.options.nestedTransitions) {
 			block.builders.outro.addBlock(deindent`
 				#outrocallback = @callAfter(#outrocallback, 3);
 				for (let #i = 0; #i < 3; #i += 1) {
diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts
index 9b14a294524b..6020825f4ae7 100644
--- a/src/compile/nodes/Component.ts
+++ b/src/compile/nodes/Component.ts
@@ -108,6 +108,10 @@ export default class Component extends Node {
 				child.init(block, stripWhitespace, nextSibling);
 			});
 		}
+
+		if (this.compiler.options.nestedTransitions) {
+			block.addOutro();
+		}
 	}
 
 	build(
@@ -383,7 +387,7 @@ export default class Component extends Node {
 
 			block.builders.mount.addBlock(deindent`
 				if (${name}) {
-					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
+					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? '#component._intro' : 'true'});
 					${this.ref && `#component.refs.${this.ref} = ${name};`}
 				}
 			`);
@@ -405,7 +409,7 @@ export default class Component extends Node {
 						${name}._fragment.c();
 
 						${this.children.map(child => child.remount(name))}
-						${name}._mount(${updateMountNode}, ${anchor}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
+						${name}._mount(${updateMountNode}, ${anchor}, true);
 
 						${this.handlers.map(handler => deindent`
 							${name}.on("${handler.name}", ${handler.var});
@@ -464,7 +468,7 @@ export default class Component extends Node {
 			}
 
 			block.builders.mount.addLine(
-				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});`
+				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? '#component._intro' : 'true'});`
 			);
 
 			if (updates.length) {
@@ -480,10 +484,16 @@ export default class Component extends Node {
 				${this.ref && `if (#component.refs.${this.ref} === ${name}) #component.refs.${this.ref} = null;`}
 			`);
 		}
+
+		if (this.compiler.options.nestedTransitions) {
+			block.builders.outro.addLine(
+				`${name}._fragment.o(#outrocallback);`
+			);
+		}
 	}
 
 	remount(name: string) {
-		return `${this.var}._mount(${name}._slotted.default, null, ${this.compiler.options.skipIntroByDefault ? 'false' : 'true'});`;
+		return `${this.var}._mount(${name}._slotted.default, null, false);`;
 	}
 
 	ssr() {
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
index 7af6bfbec368..cee550d5fe24 100644
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -321,10 +321,12 @@ export default class EachBlock extends Node {
 			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
 		`);
 
-		block.builders.outro.addBlock(deindent`
-			#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
-		`)
+		if (this.compiler.options.nestedTransitions) {
+			block.builders.outro.addBlock(deindent`
+				#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
+				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
+			`);
+		}
 
 		block.builders.destroy.addBlock(deindent`
 			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
@@ -462,7 +464,7 @@ export default class EachBlock extends Node {
 			`);
 		}
 
-		if (outro) {
+		if (outro && this.compiler.options.nestedTransitions) {
 			block.builders.outro.addBlock(deindent`
 				#outrocallback = @callAfter(#outrocallback, #i);
 				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outro}(#i, 0, #outrocallback);`
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index cdfe1926df6a..a2f12858c7da 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -182,13 +182,11 @@ export default class Element extends Node {
 
 		if (this.intro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasIntroTransitions = true;
 			block.addIntro();
 		}
 
 		if (this.outro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasOutroTransitions = true;
 			block.addOutro();
 		}
 
diff --git a/test/cli/samples/basic/expected/Main.js b/test/cli/samples/basic/expected/Main.js
index b4b737bb766d..f7aa8f698a41 100644
--- a/test/cli/samples/basic/expected/Main.js
+++ b/test/cli/samples/basic/expected/Main.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/custom-element/expected/Main.js b/test/cli/samples/custom-element/expected/Main.js
index 6fcf0aa394db..bf393c995ced 100644
--- a/test/cli/samples/custom-element/expected/Main.js
+++ b/test/cli/samples/custom-element/expected/Main.js
@@ -29,6 +29,7 @@ class Main extends HTMLElement {
 		super();
 		init(this, options);
 		this._state = assign({}, options.data);
+		this._intro = true;
 
 		this.attachShadow({ mode: 'open' });
 
diff --git a/test/cli/samples/dev/expected/Main.js b/test/cli/samples/dev/expected/Main.js
index 9c8394917ce6..477b3f1635e0 100644
--- a/test/cli/samples/dev/expected/Main.js
+++ b/test/cli/samples/dev/expected/Main.js
@@ -28,6 +28,7 @@ function Main(options) {
 	if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/dir-sourcemap/expected/Main.js b/test/cli/samples/dir-sourcemap/expected/Main.js
index ccedf5a18ade..9933db03f460 100644
--- a/test/cli/samples/dir-sourcemap/expected/Main.js
+++ b/test/cli/samples/dir-sourcemap/expected/Main.js
@@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/cli/samples/dir-sourcemap/expected/Main.js.map b/test/cli/samples/dir-sourcemap/expected/Main.js.map
index 6e2eb7d0b0bd..e164b7b845bc 100644
--- a/test/cli/samples/dir-sourcemap/expected/Main.js.map
+++ b/test/cli/samples/dir-sourcemap/expected/Main.js.map
@@ -1 +1 @@
-{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<Widget/>\n\n<script>\n\timport Widget from './Widget.html';\n\n\texport default {\n\t\tcomponents: {\n\t\t\tWidget\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<Widget/>\n\n<script>\n\timport Widget from './Widget.html';\n\n\texport default {\n\t\tcomponents: {\n\t\t\tWidget\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/test/cli/samples/dir-sourcemap/expected/Widget.js b/test/cli/samples/dir-sourcemap/expected/Widget.js
index 702f6ee812a1..5c57d9dae69d 100644
--- a/test/cli/samples/dir-sourcemap/expected/Widget.js
+++ b/test/cli/samples/dir-sourcemap/expected/Widget.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Widget(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/dir-sourcemap/expected/Widget.js.map b/test/cli/samples/dir-sourcemap/expected/Widget.js.map
index 8d57bc3c9a19..1fb22cb1e4a5 100644
--- a/test/cli/samples/dir-sourcemap/expected/Widget.js.map
+++ b/test/cli/samples/dir-sourcemap/expected/Widget.js.map
@@ -1 +1 @@
-{"version":3,"file":"Widget.js","sources":["../src/Widget.html"],"sourcesContent":["<p>widget</p>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"Widget.js","sources":["../src/Widget.html"],"sourcesContent":["<p>widget</p>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/test/cli/samples/dir-subdir/expected/Main.js b/test/cli/samples/dir-subdir/expected/Main.js
index c43c92222022..23591bd0a076 100644
--- a/test/cli/samples/dir-subdir/expected/Main.js
+++ b/test/cli/samples/dir-subdir/expected/Main.js
@@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/cli/samples/dir-subdir/expected/widget/Widget.js b/test/cli/samples/dir-subdir/expected/widget/Widget.js
index df8b286b2926..e33859eccd30 100644
--- a/test/cli/samples/dir-subdir/expected/widget/Widget.js
+++ b/test/cli/samples/dir-subdir/expected/widget/Widget.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Widget(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/dir/expected/Main.js b/test/cli/samples/dir/expected/Main.js
index 501d7d8e9f7a..633832809471 100644
--- a/test/cli/samples/dir/expected/Main.js
+++ b/test/cli/samples/dir/expected/Main.js
@@ -29,6 +29,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/cli/samples/dir/expected/Widget.js b/test/cli/samples/dir/expected/Widget.js
index ad7f1ce7edb2..66eeb2a895cd 100644
--- a/test/cli/samples/dir/expected/Widget.js
+++ b/test/cli/samples/dir/expected/Widget.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Widget(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/globals/expected/Main.js b/test/cli/samples/globals/expected/Main.js
index 72daf778fbc6..46f3fa25946c 100644
--- a/test/cli/samples/globals/expected/Main.js
+++ b/test/cli/samples/globals/expected/Main.js
@@ -41,6 +41,7 @@ var Main = (function(answer) { "use strict";
 	function Main(options) {
 		init(this, options);
 		this._state = assign(data(), options.data);
+		this._intro = true;
 
 		this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/sourcemap-inline/expected/Main.js b/test/cli/samples/sourcemap-inline/expected/Main.js
index b357420353de..0a7463533a8e 100644
--- a/test/cli/samples/sourcemap-inline/expected/Main.js
+++ b/test/cli/samples/sourcemap-inline/expected/Main.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
@@ -165,4 +166,4 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 export default Main;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWFpbi5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL01haW4uaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IZWxsbyB3b3JsZCE8L3A+XG5cbjxzY3JpcHQ+XG5cdGV4cG9ydCBkZWZhdWx0IHtcblx0XHRvbnJlbmRlciAoKSB7XG5cdFx0XHRjb25zb2xlLmxvZyggJ2hlcmUnICk7XG5cdFx0fVxuXHR9O1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWFpbi5qcyIsInNvdXJjZXMiOlsiLi4vc3JjL01haW4uaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8cD5IZWxsbyB3b3JsZCE8L3A+XG5cbjxzY3JpcHQ+XG5cdGV4cG9ydCBkZWZhdWx0IHtcblx0XHRvbnJlbmRlciAoKSB7XG5cdFx0XHRjb25zb2xlLmxvZyggJ2hlcmUnICk7XG5cdFx0fVxuXHR9O1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
diff --git a/test/cli/samples/sourcemap/expected/Main.js b/test/cli/samples/sourcemap/expected/Main.js
index 14c1518dd09b..1c40d1fa585e 100644
--- a/test/cli/samples/sourcemap/expected/Main.js
+++ b/test/cli/samples/sourcemap/expected/Main.js
@@ -26,6 +26,7 @@ function create_main_fragment(component, ctx) {
 function Main(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/cli/samples/sourcemap/expected/Main.js.map b/test/cli/samples/sourcemap/expected/Main.js.map
index c8777bdd112e..e5a7f2a16291 100644
--- a/test/cli/samples/sourcemap/expected/Main.js.map
+++ b/test/cli/samples/sourcemap/expected/Main.js.map
@@ -1 +1 @@
-{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<p>Hello world!</p>\n\n<script>\n\texport default {\n\t\tonrender () {\n\t\t\tconsole.log( 'here' );\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"Main.js","sources":["../src/Main.html"],"sourcesContent":["<p>Hello world!</p>\n\n<script>\n\texport default {\n\t\tonrender () {\n\t\t\tconsole.log( 'here' );\n\t\t}\n\t};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/test/cli/samples/store/expected/Main.js b/test/cli/samples/store/expected/Main.js
index 45ea6ea81451..a16131512f18 100644
--- a/test/cli/samples/store/expected/Main.js
+++ b/test/cli/samples/store/expected/Main.js
@@ -34,6 +34,7 @@ function Main(options) {
 	init(this, options);
 	this._state = assign(this.store._init(["name"]), options.data);
 	this.store._add(this, ["name"]);
+	this._intro = true;
 
 	this._handlers.destroy = [removeFromStore];
 
diff --git a/test/js/samples/action/expected-bundle.js b/test/js/samples/action/expected-bundle.js
index 8828faba1393..d90836bd065c 100644
--- a/test/js/samples/action/expected-bundle.js
+++ b/test/js/samples/action/expected-bundle.js
@@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js
index dab9d0d9db57..8ae971178c4e 100644
--- a/test/js/samples/action/expected.js
+++ b/test/js/samples/action/expected.js
@@ -47,6 +47,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
index 11a932ee3f6f..037a3e351d09 100644
--- a/test/js/samples/bind-width-height/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -195,6 +195,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
index 12eb1e8c37f0..45eea9462086 100644
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -35,6 +35,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index a8a0b6f76ba9..2abdb35ad3cc 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -179,6 +179,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data(), options.data);
+	this._intro = true;
 
 	if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
 
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
index 78e957933fb5..77b9ecda686f 100644
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -44,6 +44,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data(), options.data);
+	this._intro = true;
 
 	if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
 
diff --git a/test/js/samples/component-static-array/expected-bundle.js b/test/js/samples/component-static-array/expected-bundle.js
index 24e739c61af4..47534baf71bb 100644
--- a/test/js/samples/component-static-array/expected-bundle.js
+++ b/test/js/samples/component-static-array/expected-bundle.js
@@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js
index 667fa7f4869f..dd94dfbe1b23 100644
--- a/test/js/samples/component-static-array/expected.js
+++ b/test/js/samples/component-static-array/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static-immutable/expected-bundle.js b/test/js/samples/component-static-immutable/expected-bundle.js
index f272d7e11a65..55f31adaa302 100644
--- a/test/js/samples/component-static-immutable/expected-bundle.js
+++ b/test/js/samples/component-static-immutable/expected-bundle.js
@@ -151,6 +151,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js
index 877cbd5eda18..01c61db843a5 100644
--- a/test/js/samples/component-static-immutable/expected.js
+++ b/test/js/samples/component-static-immutable/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static-immutable2/expected-bundle.js b/test/js/samples/component-static-immutable2/expected-bundle.js
index f272d7e11a65..55f31adaa302 100644
--- a/test/js/samples/component-static-immutable2/expected-bundle.js
+++ b/test/js/samples/component-static-immutable2/expected-bundle.js
@@ -151,6 +151,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js
index 877cbd5eda18..01c61db843a5 100644
--- a/test/js/samples/component-static-immutable2/expected.js
+++ b/test/js/samples/component-static-immutable2/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static/expected-bundle.js b/test/js/samples/component-static/expected-bundle.js
index 04bd0982b57c..ed27d441370f 100644
--- a/test/js/samples/component-static/expected-bundle.js
+++ b/test/js/samples/component-static/expected-bundle.js
@@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js
index 631d2e781459..c4308b66e3d1 100644
--- a/test/js/samples/component-static/expected.js
+++ b/test/js/samples/component-static/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js
index c40522136571..f389a4a99139 100644
--- a/test/js/samples/computed-collapsed-if/expected-bundle.js
+++ b/test/js/samples/computed-collapsed-if/expected-bundle.js
@@ -142,6 +142,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 	this._recompute({ x: 1 }, this._state);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js
index 05f6ae2bff60..208b2503f2d5 100644
--- a/test/js/samples/computed-collapsed-if/expected.js
+++ b/test/js/samples/computed-collapsed-if/expected.js
@@ -26,6 +26,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 	this._recompute({ x: 1 }, this._state);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js
index 0c864a18ec10..deaed19d8f60 100644
--- a/test/js/samples/css-media-query/expected-bundle.js
+++ b/test/js/samples/css-media-query/expected-bundle.js
@@ -166,6 +166,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!document.getElementById("svelte-1slhpfn-style")) add_css();
 
diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js
index 9b8c88b3ef6e..8addd3e49473 100644
--- a/test/js/samples/css-media-query/expected.js
+++ b/test/js/samples/css-media-query/expected.js
@@ -34,6 +34,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!document.getElementById("svelte-1slhpfn-style")) add_css();
 
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
index 8277f96654ae..9c7e0c14b196 100644
--- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
@@ -158,6 +158,7 @@ class SvelteComponent extends HTMLElement {
 		super();
 		init(this, options);
 		this._state = assign({}, options.data);
+		this._intro = true;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js
index 085cccb8d705..1832bac488b7 100644
--- a/test/js/samples/css-shadow-dom-keyframes/expected.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -30,6 +30,7 @@ class SvelteComponent extends HTMLElement {
 		super();
 		init(this, options);
 		this._state = assign({}, options.data);
+		this._intro = true;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;
diff --git a/test/js/samples/deconflict-builtins/expected-bundle.js b/test/js/samples/deconflict-builtins/expected-bundle.js
index 4767d5ccecb1..6ea32ad693d3 100644
--- a/test/js/samples/deconflict-builtins/expected-bundle.js
+++ b/test/js/samples/deconflict-builtins/expected-bundle.js
@@ -248,6 +248,7 @@ function get_each_context(ctx, list, i) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js
index 50a8aa2b43ca..afc357605ce8 100644
--- a/test/js/samples/deconflict-builtins/expected.js
+++ b/test/js/samples/deconflict-builtins/expected.js
@@ -102,6 +102,7 @@ function get_each_context(ctx, list, i) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/deconflict-globals/expected-bundle.js b/test/js/samples/deconflict-globals/expected-bundle.js
index 9983368542ff..b68330a2f5ce 100644
--- a/test/js/samples/deconflict-globals/expected-bundle.js
+++ b/test/js/samples/deconflict-globals/expected-bundle.js
@@ -147,6 +147,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data_1(), options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js
index f19fe3af9cb9..fd110588dae3 100644
--- a/test/js/samples/deconflict-globals/expected.js
+++ b/test/js/samples/deconflict-globals/expected.js
@@ -27,6 +27,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data_1(), options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
index 0d93b49f8f36..70a240dfab51 100644
--- a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
@@ -202,6 +202,7 @@ function SvelteComponent(options) {
 	this._state = assign({ Math : Math }, options.data);
 	this._recompute({ foo: 1 }, this._state);
 	if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'");
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
index 7ef01fe7961f..877cbddebc90 100644
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -48,6 +48,7 @@ function SvelteComponent(options) {
 	this._state = assign({ Math : Math }, options.data);
 	this._recompute({ foo: 1 }, this._state);
 	if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'");
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/do-use-dataset/expected-bundle.js b/test/js/samples/do-use-dataset/expected-bundle.js
index 056964765dc3..8b160e19ea69 100644
--- a/test/js/samples/do-use-dataset/expected-bundle.js
+++ b/test/js/samples/do-use-dataset/expected-bundle.js
@@ -170,6 +170,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/do-use-dataset/expected.js b/test/js/samples/do-use-dataset/expected.js
index 4d3773a37a25..72b2d6318066 100644
--- a/test/js/samples/do-use-dataset/expected.js
+++ b/test/js/samples/do-use-dataset/expected.js
@@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js b/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
index dd7e1117257a..0560f2095f6c 100644
--- a/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
@@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected.js b/test/js/samples/dont-use-dataset-in-legacy/expected.js
index 266cc25e96b6..8dda681218a7 100644
--- a/test/js/samples/dont-use-dataset-in-legacy/expected.js
+++ b/test/js/samples/dont-use-dataset-in-legacy/expected.js
@@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js b/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
index 810683ae14fe..76cfc5d9fbcf 100644
--- a/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
@@ -172,6 +172,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/dont-use-dataset-in-svg/expected.js b/test/js/samples/dont-use-dataset-in-svg/expected.js
index 359de3a16cf1..a65ef2003343 100644
--- a/test/js/samples/dont-use-dataset-in-svg/expected.js
+++ b/test/js/samples/dont-use-dataset-in-svg/expected.js
@@ -36,6 +36,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
index fb82c1ef93c4..f1327b51cae2 100644
--- a/test/js/samples/each-block-changed-check/expected-bundle.js
+++ b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -289,6 +289,7 @@ function get_each_context(ctx, list, i) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
index 82c588c9390f..b58e5bfc1781 100644
--- a/test/js/samples/each-block-changed-check/expected.js
+++ b/test/js/samples/each-block-changed-check/expected.js
@@ -141,6 +141,7 @@ function get_each_context(ctx, list, i) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js
index 661c52fcf4f1..985c7f830521 100644
--- a/test/js/samples/event-handlers-custom/expected-bundle.js
+++ b/test/js/samples/event-handlers-custom/expected-bundle.js
@@ -172,6 +172,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js
index 3e8b5b528b67..5d0e2746a364 100644
--- a/test/js/samples/event-handlers-custom/expected.js
+++ b/test/js/samples/event-handlers-custom/expected.js
@@ -45,6 +45,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/head-no-whitespace/expected-bundle.js b/test/js/samples/head-no-whitespace/expected-bundle.js
index a39755bdd5da..4f513c2e1097 100644
--- a/test/js/samples/head-no-whitespace/expected-bundle.js
+++ b/test/js/samples/head-no-whitespace/expected-bundle.js
@@ -159,6 +159,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js
index 3be9e7938971..f01f233fe6c4 100644
--- a/test/js/samples/head-no-whitespace/expected.js
+++ b/test/js/samples/head-no-whitespace/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js
index 54712a53957d..747a0e3e3138 100644
--- a/test/js/samples/if-block-no-update/expected-bundle.js
+++ b/test/js/samples/if-block-no-update/expected-bundle.js
@@ -220,6 +220,7 @@ function create_if_block_1(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js
index f6a3f03c03b2..78f9e45fd845 100644
--- a/test/js/samples/if-block-no-update/expected.js
+++ b/test/js/samples/if-block-no-update/expected.js
@@ -88,6 +88,7 @@ function create_if_block_1(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js
index 1d1d2088ed0d..c59f7155d7a3 100644
--- a/test/js/samples/if-block-simple/expected-bundle.js
+++ b/test/js/samples/if-block-simple/expected-bundle.js
@@ -196,6 +196,7 @@ function create_if_block(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js
index d35299a94dd5..02b672075807 100644
--- a/test/js/samples/if-block-simple/expected.js
+++ b/test/js/samples/if-block-simple/expected.js
@@ -64,6 +64,7 @@ function create_if_block(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
index cad82c33ca6b..04632dde4b32 100644
--- a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
@@ -168,6 +168,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js
index 0be17478ef70..dce0d97032b6 100644
--- a/test/js/samples/inline-style-optimized-multiple/expected.js
+++ b/test/js/samples/inline-style-optimized-multiple/expected.js
@@ -36,6 +36,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized-url/expected-bundle.js b/test/js/samples/inline-style-optimized-url/expected-bundle.js
index 250878e4d781..b19fecc8a0a9 100644
--- a/test/js/samples/inline-style-optimized-url/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-url/expected-bundle.js
@@ -163,6 +163,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js
index d31dec9c815c..3a1eaaa6fbe3 100644
--- a/test/js/samples/inline-style-optimized-url/expected.js
+++ b/test/js/samples/inline-style-optimized-url/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized/expected-bundle.js b/test/js/samples/inline-style-optimized/expected-bundle.js
index ec403776a751..5656d88734f0 100644
--- a/test/js/samples/inline-style-optimized/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized/expected-bundle.js
@@ -163,6 +163,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js
index a4f7da55459d..b6d4d82530fe 100644
--- a/test/js/samples/inline-style-optimized/expected.js
+++ b/test/js/samples/inline-style-optimized/expected.js
@@ -31,6 +31,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-unoptimized/expected-bundle.js b/test/js/samples/inline-style-unoptimized/expected-bundle.js
index cba448597908..45a7ea369650 100644
--- a/test/js/samples/inline-style-unoptimized/expected-bundle.js
+++ b/test/js/samples/inline-style-unoptimized/expected-bundle.js
@@ -174,6 +174,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js
index b0a1f77b667c..fba1c75c2fdc 100644
--- a/test/js/samples/inline-style-unoptimized/expected.js
+++ b/test/js/samples/inline-style-unoptimized/expected.js
@@ -42,6 +42,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/input-range/expected-bundle.js b/test/js/samples/input-range/expected-bundle.js
index 3df312e184f8..56b257441177 100644
--- a/test/js/samples/input-range/expected-bundle.js
+++ b/test/js/samples/input-range/expected-bundle.js
@@ -184,6 +184,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js
index 4468c4c92d58..00e886aec603 100644
--- a/test/js/samples/input-range/expected.js
+++ b/test/js/samples/input-range/expected.js
@@ -40,6 +40,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js
index 265fc37de50b..ee6c38a0aee0 100644
--- a/test/js/samples/input-without-blowback-guard/expected-bundle.js
+++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js
@@ -178,6 +178,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js
index 9b74212e6835..afdc22e5fb95 100644
--- a/test/js/samples/input-without-blowback-guard/expected.js
+++ b/test/js/samples/input-without-blowback-guard/expected.js
@@ -38,6 +38,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/legacy-input-type/expected-bundle.js b/test/js/samples/legacy-input-type/expected-bundle.js
index 69238bd3a00c..eea8f6cb2c79 100644
--- a/test/js/samples/legacy-input-type/expected-bundle.js
+++ b/test/js/samples/legacy-input-type/expected-bundle.js
@@ -161,6 +161,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js
index bbdf477d4963..238dafdcf47f 100644
--- a/test/js/samples/legacy-input-type/expected.js
+++ b/test/js/samples/legacy-input-type/expected.js
@@ -27,6 +27,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/media-bindings/expected-bundle.js b/test/js/samples/media-bindings/expected-bundle.js
index 0d6da357e1d0..d85fbc083c3c 100644
--- a/test/js/samples/media-bindings/expected-bundle.js
+++ b/test/js/samples/media-bindings/expected-bundle.js
@@ -227,6 +227,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 049662796874..143d67845715 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -83,6 +83,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
index 04347d853a32..cd89e51cd757 100644
--- a/test/js/samples/non-imported-component/expected-bundle.js
+++ b/test/js/samples/non-imported-component/expected-bundle.js
@@ -173,6 +173,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
index cb22b9704037..c7c19efe2d60 100644
--- a/test/js/samples/non-imported-component/expected.js
+++ b/test/js/samples/non-imported-component/expected.js
@@ -44,6 +44,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	if (!options.root) {
 		this._oncreate = [];
diff --git a/test/js/samples/setup-method/expected-bundle.js b/test/js/samples/setup-method/expected-bundle.js
index d2801647e5e9..eef49483af7e 100644
--- a/test/js/samples/setup-method/expected-bundle.js
+++ b/test/js/samples/setup-method/expected-bundle.js
@@ -149,6 +149,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js
index 0dc82648fb11..bcb05faf3878 100644
--- a/test/js/samples/setup-method/expected.js
+++ b/test/js/samples/setup-method/expected.js
@@ -33,6 +33,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/svg-title/expected-bundle.js b/test/js/samples/svg-title/expected-bundle.js
index 28f5220935c0..b5a8a998cd9d 100644
--- a/test/js/samples/svg-title/expected-bundle.js
+++ b/test/js/samples/svg-title/expected-bundle.js
@@ -166,6 +166,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js
index b5f7caf1983a..2a3cb38e42a3 100644
--- a/test/js/samples/svg-title/expected.js
+++ b/test/js/samples/svg-title/expected.js
@@ -30,6 +30,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/title/expected-bundle.js b/test/js/samples/title/expected-bundle.js
index bd918afa0da1..9778eff64668 100644
--- a/test/js/samples/title/expected-bundle.js
+++ b/test/js/samples/title/expected-bundle.js
@@ -140,6 +140,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js
index 6b9d49466d1c..961140ab9fa0 100644
--- a/test/js/samples/title/expected.js
+++ b/test/js/samples/title/expected.js
@@ -24,6 +24,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js
index 66a472d56d52..fe52babbf384 100644
--- a/test/js/samples/use-elements-as-anchors/expected-bundle.js
+++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js
@@ -384,6 +384,7 @@ function create_if_block_4(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js
index 20cf05be0c02..a9cd7cd6d2e9 100644
--- a/test/js/samples/use-elements-as-anchors/expected.js
+++ b/test/js/samples/use-elements-as-anchors/expected.js
@@ -244,6 +244,7 @@ function create_if_block_4(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js
index 5b7e8ad96c51..99267100163d 100644
--- a/test/js/samples/window-binding-scroll/expected-bundle.js
+++ b/test/js/samples/window-binding-scroll/expected-bundle.js
@@ -193,6 +193,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 	this._state.y = window.pageYOffset;
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
index eb0904d9c72a..1216ede5364f 100644
--- a/test/js/samples/window-binding-scroll/expected.js
+++ b/test/js/samples/window-binding-scroll/expected.js
@@ -57,6 +57,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 	this._state.y = window.pageYOffset;
+	this._intro = true;
 
 	this._fragment = create_main_fragment(this, this._state);
 
diff --git a/test/runtime/index.js b/test/runtime/index.js
index ceed2bfb0f31..c59aa72d5443 100644
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -115,7 +115,7 @@ describe("runtime", () => {
 					try {
 						SvelteComponent = require(`./samples/${dir}/main.html`);
 					} catch (err) {
-						showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile); // eslint-disable-line no-console
+						showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile); // eslint-disable-line no-console
 						throw err;
 					}
 
@@ -174,12 +174,12 @@ describe("runtime", () => {
 						config.error(assert, err);
 					} else {
 						failed.add(dir);
-						showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile); // eslint-disable-line no-console
+						showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile); // eslint-disable-line no-console
 						throw err;
 					}
 				})
 				.then(() => {
-					if (config.show) showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store }, compile);
+					if (config.show) showOutput(cwd, { shared, format: 'cjs', hydratable: hydrate, store: !!compileOptions.store, skipIntroByDefault: compileOptions.skipIntroByDefault, nestedTransitions: compileOptions.nestedTransitions }, compile);
 				});
 		});
 	}
diff --git a/test/runtime/samples/transition-js-nested-component/Widget.html b/test/runtime/samples/transition-js-nested-component/Widget.html
new file mode 100644
index 000000000000..16ced20bc3be
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/Widget.html
@@ -0,0 +1,16 @@
+<div transition:foo></div>
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-component/_config.js b/test/runtime/samples/transition-js-nested-component/_config.js
new file mode 100644
index 000000000000..6f2c039a4095
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/_config.js
@@ -0,0 +1,27 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		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, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-component/main.html b/test/runtime/samples/transition-js-nested-component/main.html
new file mode 100644
index 000000000000..2930f4dc16a7
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/main.html
@@ -0,0 +1,13 @@
+{#if x}
+	<Widget/>
+{/if}
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: {
+			Widget: './Widget.html'
+		}
+	};
+</script>
\ No newline at end of file