Repository: sveltejs/svelte (JavaScript) — Feature

Issue:
Skip transitions on initial render
Particularly in the case of components that are replacing server-rendered HTML, you might want transitions to only run when data changes, rather than running when the component is first rendered.

Best way to do this is presumably with a directive along these lines...

```html
<div in:fade initialintro:skip>...</div>
```

...except a little bit more concise. Any ideas?


Discussion:
Could skip be an optional property on the animation similar to delay, duration, etc.?

`<div in:fade='{ initial: false }'>...</div>`

or maybe more generic

`<div in:fade='{ enabled: false }'>...</div>`
The `component.observe` method takes the parameter `{ init: false }` to skip the initial trigger. We could go with consistency here: `<div in:fade='{ init: false }'>...</div>`.
Leaving this here: https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

`<div appear in:fade></div>`

I would expect no initial transition by default because how can something transition if there were no state/route changes?
I agree with @thgh and was going to add a comment about the same. The *default* should be no transition on initial render. Transitions are mostly used to help the user of an app track changes and are not used for initial render as often.
While I do think the default ought to be skipping the initial render transition, I would really like to have this soon and am ok with the default being no skip. I'm almost done with refactoring over to Svelte and this is the last user-visible issue I need fixed before I can launch in a few weeks. If there is a workaround I am open to that too.

Update: I can help out with it too! I'll check things out in a couple weeks when I'm done and see what I can contribute.
Yeah, my plan is for no initial transitions to be the default (enabled with `intro: true` in the init options for your top-level component, and `<WIdget in:true/>` below that). It'd be a breaking change though, so in the interim there probably needs to be a compiler option, just like we had with `cascade: false` and `store: true` prior to v2.

Am hoping to work on transitions again this weekend.
What would be amazing.

Resolving patch:
diff --git a/src/compile/dom/index.ts b/src/compile/dom/index.ts
--- a/src/compile/dom/index.ts
+++ b/src/compile/dom/index.ts
@@ -227,7 +227,7 @@ export default function dom(
 			this._fragment.c();
 			this._fragment.${block.hasIntroMethod ? 'i' : 'm'}(this.shadowRoot, null);
 
-			if (options.target) this._mount(options.target, options.anchor);
+			if (options.target) this._mount(options.target, options.anchor, ${options.skipIntroByDefault ? `options.intro` : 'true'});
 		` : deindent`
 			if (options.target) {
 				${compiler.options.hydratable
@@ -240,7 +240,7 @@ export default function dom(
 						${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
 						this._fragment.c();
 					`}
-				this._mount(options.target, options.anchor);
+				this._mount(options.target, options.anchor, ${options.skipIntroByDefault ? `options.intro` : 'true'});
 
 				${(compiler.hasComponents || target.hasComplexBindings || hasInitHooks || target.hasIntroTransitions) && deindent`
 					${compiler.hasComponents && `this._lock = true;`}
diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts
--- a/src/compile/nodes/Component.ts
+++ b/src/compile/nodes/Component.ts
@@ -383,7 +383,7 @@ export default class Component extends Node {
 
 			block.builders.mount.addBlock(deindent`
 				if (${name}) {
-					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
+					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
 					${this.ref && `#component.refs.${this.ref} = ${name};`}
 				}
 			`);
@@ -405,7 +405,7 @@ export default class Component extends Node {
 						${name}._fragment.c();
 
 						${this.children.map(child => child.remount(name))}
-						${name}._mount(${updateMountNode}, ${anchor});
+						${name}._mount(${updateMountNode}, ${anchor}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});
 
 						${this.handlers.map(handler => deindent`
 							${name}.on("${handler.name}", ${handler.var});
@@ -464,7 +464,7 @@ export default class Component extends Node {
 			}
 
 			block.builders.mount.addLine(
-				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
+				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}, ${compiler.options.skipIntroByDefault ? 'false' : 'true'});`
 			);
 
 			if (updates.length) {
@@ -483,7 +483,7 @@ export default class Component extends Node {
 	}
 
 	remount(name: string) {
-		return `${this.var}._mount(${name}._slotted.default, null);`;
+		return `${this.var}._mount(${name}._slotted.default, null, ${this.compiler.options.skipIntroByDefault ? 'false' : 'true'});`;
 	}
 
 	ssr() {
diff --git a/src/interfaces.ts b/src/interfaces.ts
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -64,6 +64,9 @@ export interface CompileOptions {
 
 	onerror?: (error: Error) => void;
 	onwarn?: (warning: Warning) => void;
+
+	// to remove in v3
+	skipIntroByDefault?: boolean;
 }
 
 export interface GenerateOptions {
diff --git a/src/shared/index.js b/src/shared/index.js
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -128,8 +128,8 @@ export function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-export function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+export function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 export var PENDING = {};


Test patch:
diff --git a/test/cli/samples/basic/expected/Main.js b/test/cli/samples/basic/expected/Main.js
--- a/test/cli/samples/basic/expected/Main.js
+++ b/test/cli/samples/basic/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/custom-element/expected/Main.js b/test/cli/samples/custom-element/expected/Main.js
--- a/test/cli/samples/custom-element/expected/Main.js
+++ b/test/cli/samples/custom-element/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -37,7 +37,7 @@ class Main extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor);
+		if (options.target) this._mount(options.target, options.anchor, true);
 	}
 
 	static get observedAttributes() {
@@ -170,8 +170,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dev/expected/Main.js b/test/cli/samples/dev/expected/Main.js
--- a/test/cli/samples/dev/expected/Main.js
+++ b/test/cli/samples/dev/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -34,7 +34,7 @@ function Main(options) {
 	if (options.target) {
 		if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -153,8 +153,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir-sourcemap/expected/Main.js b/test/cli/samples/dir-sourcemap/expected/Main.js
--- a/test/cli/samples/dir-sourcemap/expected/Main.js
+++ b/test/cli/samples/dir-sourcemap/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 import Widget from './Widget.html';
 
 
@@ -15,7 +15,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			widget._mount(target, anchor);
+			widget._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -40,7 +40,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
@@ -156,8 +156,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir-sourcemap/expected/Widget.js b/test/cli/samples/dir-sourcemap/expected/Widget.js
--- a/test/cli/samples/dir-sourcemap/expected/Widget.js
+++ b/test/cli/samples/dir-sourcemap/expected/Widget.js
@@ -1,4 +1,4 @@
-/* src/Widget.html generated by Svelte v2.4.4 */
+/* src/Widget.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Widget(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir-subdir/expected/Main.js b/test/cli/samples/dir-subdir/expected/Main.js
--- a/test/cli/samples/dir-subdir/expected/Main.js
+++ b/test/cli/samples/dir-subdir/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 import Widget from './widget/Widget.html';
 
 
@@ -15,7 +15,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			widget._mount(target, anchor);
+			widget._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -40,7 +40,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
@@ -156,8 +156,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir-subdir/expected/widget/Widget.js b/test/cli/samples/dir-subdir/expected/widget/Widget.js
--- a/test/cli/samples/dir-subdir/expected/widget/Widget.js
+++ b/test/cli/samples/dir-subdir/expected/widget/Widget.js
@@ -1,4 +1,4 @@
-/* src/widget/Widget.html generated by Svelte v2.4.4 */
+/* src/widget/Widget.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Widget(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir/expected/Main.js b/test/cli/samples/dir/expected/Main.js
--- a/test/cli/samples/dir/expected/Main.js
+++ b/test/cli/samples/dir/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 import Widget from './Widget.html';
 
 
@@ -15,7 +15,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			widget._mount(target, anchor);
+			widget._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -40,7 +40,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
@@ -156,8 +156,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/dir/expected/Widget.js b/test/cli/samples/dir/expected/Widget.js
--- a/test/cli/samples/dir/expected/Widget.js
+++ b/test/cli/samples/dir/expected/Widget.js
@@ -1,4 +1,4 @@
-/* src/Widget.html generated by Svelte v2.4.4 */
+/* src/Widget.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Widget(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/globals/expected/Main.js b/test/cli/samples/globals/expected/Main.js
--- a/test/cli/samples/globals/expected/Main.js
+++ b/test/cli/samples/globals/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 var Main = (function(answer) { "use strict";
 	answer = (answer && answer.__esModule) ? answer["default"] : answer;
 
@@ -46,7 +46,7 @@ var Main = (function(answer) { "use strict";
 
 		if (options.target) {
 			this._fragment.c();
-			this._mount(options.target, options.anchor);
+			this._mount(options.target, options.anchor, true);
 		}
 	}
 
@@ -170,8 +170,8 @@ var Main = (function(answer) { "use strict";
 		}
 	}
 
-	function _mount(target, anchor) {
-		this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+	function _mount(target, anchor, intro) {
+		this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 	}
 
 	function _differs(a, b) {
diff --git a/test/cli/samples/sourcemap-inline/expected/Main.js b/test/cli/samples/sourcemap-inline/expected/Main.js
--- a/test/cli/samples/sourcemap-inline/expected/Main.js
+++ b/test/cli/samples/sourcemap-inline/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/sourcemap/expected/Main.js b/test/cli/samples/sourcemap/expected/Main.js
--- a/test/cli/samples/sourcemap/expected/Main.js
+++ b/test/cli/samples/sourcemap/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var p;
@@ -31,7 +31,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -149,8 +149,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/cli/samples/store/expected/Main.js b/test/cli/samples/store/expected/Main.js
--- a/test/cli/samples/store/expected/Main.js
+++ b/test/cli/samples/store/expected/Main.js
@@ -1,4 +1,4 @@
-/* src/Main.html generated by Svelte v2.4.4 */
+/* src/Main.html generated by Svelte v2.5.1 */
 
 function create_main_fragment(component, ctx) {
 	var h1, text, text_1;
@@ -41,7 +41,7 @@ function Main(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
@@ -169,8 +169,8 @@ function _set(newState) {
 	}
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _differs(a, b) {
diff --git a/test/js/samples/action/expected-bundle.js b/test/js/samples/action/expected-bundle.js
--- a/test/js/samples/action/expected-bundle.js
+++ b/test/js/samples/action/expected-bundle.js
@@ -111,8 +111,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -179,7 +179,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js
--- a/test/js/samples/action/expected.js
+++ b/test/js/samples/action/expected.js
@@ -52,7 +52,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
--- a/test/js/samples/bind-width-height/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -143,8 +143,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -205,7 +205,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(this._beforecreate);
 	}
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(this._beforecreate);
 	}
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -119,8 +119,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -186,7 +186,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -51,7 +51,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/component-static-array/expected-bundle.js b/test/js/samples/component-static-array/expected-bundle.js
--- a/test/js/samples/component-static-array/expected-bundle.js
+++ b/test/js/samples/component-static-array/expected-bundle.js
@@ -99,8 +99,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -133,7 +133,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -158,7 +158,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js
--- a/test/js/samples/component-static-array/expected.js
+++ b/test/js/samples/component-static-array/expected.js
@@ -17,7 +17,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static-immutable/expected-bundle.js b/test/js/samples/component-static-immutable/expected-bundle.js
--- a/test/js/samples/component-static-immutable/expected-bundle.js
+++ b/test/js/samples/component-static-immutable/expected-bundle.js
@@ -103,8 +103,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -137,7 +137,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -162,7 +162,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js
--- a/test/js/samples/component-static-immutable/expected.js
+++ b/test/js/samples/component-static-immutable/expected.js
@@ -17,7 +17,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static-immutable2/expected-bundle.js b/test/js/samples/component-static-immutable2/expected-bundle.js
--- a/test/js/samples/component-static-immutable2/expected-bundle.js
+++ b/test/js/samples/component-static-immutable2/expected-bundle.js
@@ -103,8 +103,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -137,7 +137,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -162,7 +162,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js
--- a/test/js/samples/component-static-immutable2/expected.js
+++ b/test/js/samples/component-static-immutable2/expected.js
@@ -17,7 +17,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static/expected-bundle.js b/test/js/samples/component-static/expected-bundle.js
--- a/test/js/samples/component-static/expected-bundle.js
+++ b/test/js/samples/component-static/expected-bundle.js
@@ -99,8 +99,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -133,7 +133,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -158,7 +158,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js
--- a/test/js/samples/component-static/expected.js
+++ b/test/js/samples/component-static/expected.js
@@ -17,7 +17,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			nested._mount(target, anchor);
+			nested._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js
--- a/test/js/samples/computed-collapsed-if/expected-bundle.js
+++ b/test/js/samples/computed-collapsed-if/expected-bundle.js
@@ -99,8 +99,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -147,7 +147,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js
--- a/test/js/samples/computed-collapsed-if/expected.js
+++ b/test/js/samples/computed-collapsed-if/expected.js
@@ -31,7 +31,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js
--- a/test/js/samples/css-media-query/expected-bundle.js
+++ b/test/js/samples/css-media-query/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -173,7 +173,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js
--- a/test/js/samples/css-media-query/expected.js
+++ b/test/js/samples/css-media-query/expected.js
@@ -41,7 +41,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
--- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
@@ -111,8 +111,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -167,7 +167,7 @@ class SvelteComponent extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor);
+		if (options.target) this._mount(options.target, options.anchor, true);
 	}
 
 	static get observedAttributes() {
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js
--- a/test/js/samples/css-shadow-dom-keyframes/expected.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -39,7 +39,7 @@ class SvelteComponent extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor);
+		if (options.target) this._mount(options.target, options.anchor, true);
 	}
 
 	static get observedAttributes() {
diff --git a/test/js/samples/deconflict-builtins/expected-bundle.js b/test/js/samples/deconflict-builtins/expected-bundle.js
--- a/test/js/samples/deconflict-builtins/expected-bundle.js
+++ b/test/js/samples/deconflict-builtins/expected-bundle.js
@@ -129,8 +129,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -253,7 +253,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js
--- a/test/js/samples/deconflict-builtins/expected.js
+++ b/test/js/samples/deconflict-builtins/expected.js
@@ -107,7 +107,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/deconflict-globals/expected-bundle.js b/test/js/samples/deconflict-globals/expected-bundle.js
--- a/test/js/samples/deconflict-globals/expected-bundle.js
+++ b/test/js/samples/deconflict-globals/expected-bundle.js
@@ -104,8 +104,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -161,7 +161,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(this._oncreate);
 	}
diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js
--- a/test/js/samples/deconflict-globals/expected.js
+++ b/test/js/samples/deconflict-globals/expected.js
@@ -41,7 +41,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(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
--- a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
@@ -137,8 +137,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var protoDev = {
@@ -208,7 +208,7 @@ function SvelteComponent(options) {
 	if (options.target) {
 		if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -54,7 +54,7 @@ function SvelteComponent(options) {
 	if (options.target) {
 		if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/do-use-dataset/expected-bundle.js b/test/js/samples/do-use-dataset/expected-bundle.js
--- a/test/js/samples/do-use-dataset/expected-bundle.js
+++ b/test/js/samples/do-use-dataset/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -175,7 +175,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/do-use-dataset/expected.js b/test/js/samples/do-use-dataset/expected.js
--- a/test/js/samples/do-use-dataset/expected.js
+++ b/test/js/samples/do-use-dataset/expected.js
@@ -43,7 +43,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
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
--- a/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
@@ -119,8 +119,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -179,7 +179,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected.js b/test/js/samples/dont-use-dataset-in-legacy/expected.js
--- a/test/js/samples/dont-use-dataset-in-legacy/expected.js
+++ b/test/js/samples/dont-use-dataset-in-legacy/expected.js
@@ -43,7 +43,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
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
--- a/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
@@ -119,8 +119,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -177,7 +177,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/dont-use-dataset-in-svg/expected.js b/test/js/samples/dont-use-dataset-in-svg/expected.js
--- a/test/js/samples/dont-use-dataset-in-svg/expected.js
+++ b/test/js/samples/dont-use-dataset-in-svg/expected.js
@@ -41,7 +41,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
--- a/test/js/samples/each-block-changed-check/expected-bundle.js
+++ b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -131,8 +131,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -294,7 +294,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
--- a/test/js/samples/each-block-changed-check/expected.js
+++ b/test/js/samples/each-block-changed-check/expected.js
@@ -146,7 +146,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js
--- a/test/js/samples/event-handlers-custom/expected-bundle.js
+++ b/test/js/samples/event-handlers-custom/expected-bundle.js
@@ -111,8 +111,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -177,7 +177,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js
--- a/test/js/samples/event-handlers-custom/expected.js
+++ b/test/js/samples/event-handlers-custom/expected.js
@@ -50,7 +50,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/head-no-whitespace/expected-bundle.js b/test/js/samples/head-no-whitespace/expected-bundle.js
--- a/test/js/samples/head-no-whitespace/expected-bundle.js
+++ b/test/js/samples/head-no-whitespace/expected-bundle.js
@@ -111,8 +111,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -164,7 +164,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js
--- a/test/js/samples/head-no-whitespace/expected.js
+++ b/test/js/samples/head-no-whitespace/expected.js
@@ -36,7 +36,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js
--- a/test/js/samples/if-block-no-update/expected-bundle.js
+++ b/test/js/samples/if-block-no-update/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -225,7 +225,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js
--- a/test/js/samples/if-block-no-update/expected.js
+++ b/test/js/samples/if-block-no-update/expected.js
@@ -93,7 +93,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js
--- a/test/js/samples/if-block-simple/expected-bundle.js
+++ b/test/js/samples/if-block-simple/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -201,7 +201,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js
--- a/test/js/samples/if-block-simple/expected.js
+++ b/test/js/samples/if-block-simple/expected.js
@@ -69,7 +69,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
--- a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -173,7 +173,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js
--- a/test/js/samples/inline-style-optimized-multiple/expected.js
+++ b/test/js/samples/inline-style-optimized-multiple/expected.js
@@ -41,7 +41,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized-url/expected-bundle.js b/test/js/samples/inline-style-optimized-url/expected-bundle.js
--- a/test/js/samples/inline-style-optimized-url/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-url/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -168,7 +168,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js
--- a/test/js/samples/inline-style-optimized-url/expected.js
+++ b/test/js/samples/inline-style-optimized-url/expected.js
@@ -36,7 +36,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized/expected-bundle.js b/test/js/samples/inline-style-optimized/expected-bundle.js
--- a/test/js/samples/inline-style-optimized/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -168,7 +168,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js
--- a/test/js/samples/inline-style-optimized/expected.js
+++ b/test/js/samples/inline-style-optimized/expected.js
@@ -36,7 +36,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-unoptimized/expected-bundle.js b/test/js/samples/inline-style-unoptimized/expected-bundle.js
--- a/test/js/samples/inline-style-unoptimized/expected-bundle.js
+++ b/test/js/samples/inline-style-unoptimized/expected-bundle.js
@@ -115,8 +115,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -179,7 +179,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js
--- a/test/js/samples/inline-style-unoptimized/expected.js
+++ b/test/js/samples/inline-style-unoptimized/expected.js
@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/input-range/expected-bundle.js b/test/js/samples/input-range/expected-bundle.js
--- a/test/js/samples/input-range/expected-bundle.js
+++ b/test/js/samples/input-range/expected-bundle.js
@@ -127,8 +127,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -189,7 +189,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js
--- a/test/js/samples/input-range/expected.js
+++ b/test/js/samples/input-range/expected.js
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js
--- a/test/js/samples/input-without-blowback-guard/expected-bundle.js
+++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js
@@ -123,8 +123,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -183,7 +183,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js
--- a/test/js/samples/input-without-blowback-guard/expected.js
+++ b/test/js/samples/input-without-blowback-guard/expected.js
@@ -43,7 +43,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/legacy-input-type/expected-bundle.js b/test/js/samples/legacy-input-type/expected-bundle.js
--- a/test/js/samples/legacy-input-type/expected-bundle.js
+++ b/test/js/samples/legacy-input-type/expected-bundle.js
@@ -117,8 +117,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -166,7 +166,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js
--- a/test/js/samples/legacy-input-type/expected.js
+++ b/test/js/samples/legacy-input-type/expected.js
@@ -32,7 +32,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/media-bindings/expected-bundle.js b/test/js/samples/media-bindings/expected-bundle.js
--- a/test/js/samples/media-bindings/expected-bundle.js
+++ b/test/js/samples/media-bindings/expected-bundle.js
@@ -127,8 +127,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -237,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(this._beforecreate);
 	}
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -93,7 +93,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		callAll(this._beforecreate);
 	}
diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
--- a/test/js/samples/non-imported-component/expected-bundle.js
+++ b/test/js/samples/non-imported-component/expected-bundle.js
@@ -113,8 +113,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -152,9 +152,9 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			imported._mount(target, anchor);
+			imported._mount(target, anchor, true);
 			insertNode(text, target, anchor);
-			nonimported._mount(target, anchor);
+			nonimported._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -184,7 +184,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
--- a/test/js/samples/non-imported-component/expected.js
+++ b/test/js/samples/non-imported-component/expected.js
@@ -23,9 +23,9 @@ function create_main_fragment(component, ctx) {
 		},
 
 		m(target, anchor) {
-			imported._mount(target, anchor);
+			imported._mount(target, anchor, true);
 			insertNode(text, target, anchor);
-			nonimported._mount(target, anchor);
+			nonimported._mount(target, anchor, true);
 		},
 
 		p: noop,
@@ -55,7 +55,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/setup-method/expected-bundle.js b/test/js/samples/setup-method/expected-bundle.js
--- a/test/js/samples/setup-method/expected-bundle.js
+++ b/test/js/samples/setup-method/expected-bundle.js
@@ -99,8 +99,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -154,7 +154,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js
--- a/test/js/samples/setup-method/expected.js
+++ b/test/js/samples/setup-method/expected.js
@@ -38,7 +38,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/svg-title/expected-bundle.js b/test/js/samples/svg-title/expected-bundle.js
--- a/test/js/samples/svg-title/expected-bundle.js
+++ b/test/js/samples/svg-title/expected-bundle.js
@@ -119,8 +119,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -171,7 +171,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js
--- a/test/js/samples/svg-title/expected.js
+++ b/test/js/samples/svg-title/expected.js
@@ -35,7 +35,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/title/expected-bundle.js b/test/js/samples/title/expected-bundle.js
--- a/test/js/samples/title/expected-bundle.js
+++ b/test/js/samples/title/expected-bundle.js
@@ -99,8 +99,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -145,7 +145,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js
--- a/test/js/samples/title/expected.js
+++ b/test/js/samples/title/expected.js
@@ -29,7 +29,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js
--- a/test/js/samples/use-elements-as-anchors/expected-bundle.js
+++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js
@@ -123,8 +123,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -389,7 +389,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js
--- a/test/js/samples/use-elements-as-anchors/expected.js
+++ b/test/js/samples/use-elements-as-anchors/expected.js
@@ -249,7 +249,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js
--- a/test/js/samples/window-binding-scroll/expected-bundle.js
+++ b/test/js/samples/window-binding-scroll/expected-bundle.js
@@ -119,8 +119,8 @@ function callAll(fns) {
 	while (fns && fns.length) fns.shift()();
 }
 
-function _mount(target, anchor) {
-	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+function _mount(target, anchor, intro) {
+	this._fragment[intro && this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 var proto = {
@@ -198,7 +198,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
--- a/test/js/samples/window-binding-scroll/expected.js
+++ b/test/js/samples/window-binding-scroll/expected.js
@@ -62,7 +62,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._mount(options.target, options.anchor);
+		this._mount(options.target, options.anchor, true);
 	}
 }
 
diff --git a/test/runtime/index.js b/test/runtime/index.js
--- a/test/runtime/index.js
+++ b/test/runtime/index.js
@@ -72,6 +72,7 @@ describe("runtime", () => {
 			compileOptions.dev = config.dev;
 			compileOptions.store = !!config.store;
 			compileOptions.immutable = config.immutable;
+			compileOptions.skipIntroByDefault = config.skipIntroByDefault;
 
 			Object.keys(require.cache)
 				.filter(x => x.endsWith(".html"))
@@ -134,7 +135,8 @@ describe("runtime", () => {
 						target,
 						hydrate,
 						data: config.data,
-						store: (config.store !== true && config.store)
+						store: (config.store !== true && config.store),
+						intro: config.intro
 					}, config.options || {});
 
 					const component = new SvelteComponent(options);
diff --git a/test/runtime/samples/transition-js-initial/_config.js b/test/runtime/samples/transition-js-initial/_config.js
--- a/test/runtime/samples/transition-js-initial/_config.js
+++ b/test/runtime/samples/transition-js-initial/_config.js
@@ -1,11 +1,9 @@
 export default {
-	test ( assert, component, target, window, raf ) {
-		const div = target.querySelector( 'div' );
-		assert.equal( div.foo, 0 );
+	test(assert, component, target, window, raf) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
 
 		raf.tick(50);
-		assert.equal( div.foo, 0.5 );
-
-		component.destroy();
+		assert.equal(div.foo, 0.5);
 	}
-};
\ No newline at end of file
+};
diff --git a/test/runtime/samples/transition-js-initial/main.html b/test/runtime/samples/transition-js-initial/main.html
--- a/test/runtime/samples/transition-js-initial/main.html
+++ b/test/runtime/samples/transition-js-initial/main.html
@@ -3,7 +3,7 @@
 <script>
 	export default {
 		transitions: {
-			foo: function ( node, params ) {
+			foo(node, params) {
 				return {
 					duration: 100,
 					tick: t => {
diff --git a/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js b/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js
@@ -0,0 +1,12 @@
+export default {
+	skipIntroByDefault: true,
+	intro: true,
+
+	test(assert, component, target, window, raf) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+	},
+};
diff --git a/test/runtime/samples/transition-js-intro-enabled-by-option/main.html b/test/runtime/samples/transition-js-intro-enabled-by-option/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-enabled-by-option/main.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-intro-skipped-by-default/_config.js b/test/runtime/samples/transition-js-intro-skipped-by-default/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default/_config.js
@@ -0,0 +1,11 @@
+export default {
+	skipIntroByDefault: true,
+
+	test(assert, component, target, window, raf) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		raf.tick(50);
+		assert.equal(div.foo, undefined);
+	},
+};
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default/main.html b/test/runtime/samples/transition-js-intro-skipped-by-default/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default/main.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