Repository: sveltejs/svelte (JavaScript)
Task type: Refactoring

Issue:
always use `_mount`, even if top-level
Using `this._mount(target, anchor)` instead of `this._fragment.m(target, anchor)` would fix https://github.com/sveltejs/svelte-loader/issues/43. Using a private `_mount` method like this is arguably a bit of a hack, and we could discuss whether we need to make it a public method for the sake of things like this, but for now it's an easy way to get granular HMR working.
always use `_mount`, even if top-level
Using `this._mount(target, anchor)` instead of `this._fragment.m(target, anchor)` would fix https://github.com/sveltejs/svelte-loader/issues/43. Using a private `_mount` method like this is arguably a bit of a hack, and we could discuss whether we need to make it a public method for the sake of things like this, but for now it's an easy way to get granular HMR working.


Discussion:

Solution patch:
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -267,7 +267,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 || null);
+			if (options.target) this._mount(options.target, options.anchor);
 		` : deindent`
 			if (options.target) {
 				${generator.hydratable
@@ -280,7 +280,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._fragment.${block.hasIntroMethod ? 'i' : 'm'}(options.target, options.anchor || null);
+				this._mount(options.target, options.anchor);
 
 				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
 					${generator.hasComponents && `this._lock = true;`}
diff --git a/src/shared/index.js b/src/shared/index.js
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -185,7 +185,7 @@ export function callAll(fns) {
 }
 
 export function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 export function _unmount() {


Test patch:
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
@@ -171,7 +171,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -252,7 +252,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -59,7 +59,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -151,7 +151,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -219,7 +219,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -151,7 +151,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -219,7 +219,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -215,7 +215,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -203,7 +203,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -33,7 +33,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -239,7 +239,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -49,7 +49,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -221,7 +221,7 @@ class SvelteComponent extends HTMLElement {
 		this._fragment.c();
 		this._fragment.m(this.shadowRoot, null);
 
-		if (options.target) this._mount(options.target, options.anchor || null);
+		if (options.target) this._mount(options.target, options.anchor);
 	}
 
 	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 || null);
+		if (options.target) this._mount(options.target, options.anchor);
 	}
 
 	static get observedAttributes() {
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
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -211,7 +211,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -233,7 +233,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -237,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -235,7 +235,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -179,7 +179,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -360,7 +360,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -158,7 +158,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -233,7 +233,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -52,7 +52,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -159,7 +159,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -224,7 +224,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -42,7 +42,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -281,7 +281,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -95,7 +95,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -258,7 +258,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -72,7 +72,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -231,7 +231,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -45,7 +45,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -226,7 +226,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -226,7 +226,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -163,7 +163,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -237,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -51,7 +51,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -237,7 +237,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -47,7 +47,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
diff --git a/test/js/samples/legacy-default/expected-bundle.js b/test/js/samples/legacy-default/expected-bundle.js
--- a/test/js/samples/legacy-default/expected-bundle.js
+++ b/test/js/samples/legacy-default/expected-bundle.js
@@ -181,7 +181,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -275,7 +275,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/legacy-default/expected.js b/test/js/samples/legacy-default/expected.js
--- a/test/js/samples/legacy-default/expected.js
+++ b/test/js/samples/legacy-default/expected.js
@@ -71,7 +71,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);
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
@@ -165,7 +165,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -224,7 +224,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -36,7 +36,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
diff --git a/test/js/samples/legacy-quote-class/expected-bundle.js b/test/js/samples/legacy-quote-class/expected-bundle.js
--- a/test/js/samples/legacy-quote-class/expected-bundle.js
+++ b/test/js/samples/legacy-quote-class/expected-bundle.js
@@ -182,7 +182,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -251,7 +251,7 @@ function SvelteComponent(options) {
 		var nodes = children(options.target);
 		options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
 		nodes.forEach(detachNode);
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
diff --git a/test/js/samples/legacy-quote-class/expected.js b/test/js/samples/legacy-quote-class/expected.js
--- a/test/js/samples/legacy-quote-class/expected.js
+++ b/test/js/samples/legacy-quote-class/expected.js
@@ -46,7 +46,7 @@ function SvelteComponent(options) {
 		var nodes = children(options.target);
 		options.hydrate ? this._fragment.l(nodes) : this._fragment.c();
 		nodes.forEach(detachNode);
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -175,7 +175,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -295,7 +295,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -97,7 +97,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -161,7 +161,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -240,7 +240,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		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
@@ -57,7 +57,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		this._lock = true;
 		callAll(this._beforecreate);
diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
--- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
+++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -206,7 +206,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}
diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js
--- a/test/js/samples/onrender-onteardown-rewritten/expected.js
+++ b/test/js/samples/onrender-onteardown-rewritten/expected.js
@@ -38,7 +38,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 
 		callAll(this._oncreate);
 	}
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
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -210,7 +210,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -40,7 +40,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -225,7 +225,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -147,7 +147,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -201,7 +201,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -31,7 +31,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -171,7 +171,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -448,7 +448,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -254,7 +254,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -167,7 +167,7 @@ function callAll(fns) {
 }
 
 function _mount(target, anchor) {
-	this._fragment.m(target, anchor);
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }
 
 function _unmount() {
@@ -250,7 +250,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
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
@@ -60,7 +60,7 @@ function SvelteComponent(options) {
 
 	if (options.target) {
 		this._fragment.c();
-		this._fragment.m(options.target, options.anchor || null);
+		this._mount(options.target, options.anchor);
 	}
 }
 
diff --git a/test/runtime/samples/transition-js-nested-intro/Child.html b/test/runtime/samples/transition-js-nested-intro/Child.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/Child.html
@@ -0,0 +1,17 @@
+<div transition:foo><slot></slot></div>
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					delay: 50,
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-intro/_config.js b/test/runtime/samples/transition-js-nested-intro/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/_config.js
@@ -0,0 +1,21 @@
+export default {
+	test ( assert, component, target, window, raf ) {
+		component.set({ visible: true });
+		const div = target.querySelector( 'div' );
+		assert.equal( div.foo, 0 );
+
+		raf.tick( 50 );
+		assert.equal( div.foo, 0 );
+
+		raf.tick( 100 );
+		assert.equal( div.foo, 0.5 );
+
+		raf.tick( 125 );
+		assert.equal( div.foo, 0.75 );
+
+		raf.tick( 150 );
+		assert.equal( div.foo, 1 );
+
+		component.destroy();
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-intro/main.html b/test/runtime/samples/transition-js-nested-intro/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/main.html
@@ -0,0 +1,10 @@
+{{#if visible}}
+	<Child>delayed</Child>
+{{/if}}
+
+<script>
+	import Child from './Child.html';
+	export default {
+		components:{ Child }
+	};
+</script>
\ No newline at end of file