nested component transitions

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;
 	}
 

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) {

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) {

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() {

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`
+		if (this.compiler.options.nestedTransitions) {
-			#outrocallback = @callAfter(#outrocallback, ${blocks}.length);
+			block.builders.outro.addBlock(deindent`
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(#outrocallback);
+				#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);`

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();
 		}
 

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);
 

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' });
 

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);
 

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 = [];

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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);
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Widget.js","sources":["../src/Widget.html"],"sourcesContent":["<p>widget</p>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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 = [];

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);
 

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 = [];

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);
 

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);
 

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

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);
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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];
 

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);
 

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);
 

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 = [];

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 = [];

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();
 

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();
 

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 = [];

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 = [];

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 = [];

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 = [];

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 = [];

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 = [];

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 = [];

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 = [];

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);
 

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);
 

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();
 

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();
 

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>`;

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>`;

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);
 

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);
 

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 = [];

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 = [];

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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 = [];

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 = [];

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 = [];

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 = [];

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 

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);
 				});
 		});
 	}

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>

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, '');
+	}
+};

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>