diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 79fc94f2ee..de59578f31 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -207,18 +207,16 @@ export default function dom(
 
 			${templateProperties.oncreate && `var oncreate = @template.oncreate.bind( this );`}
 
-			// TODO maybe only nec if we have components...
-			if ( !options._root ) {
-				// this._bindings = [];
-				this._beforecreate = [];
-				this._oncreate = [${templateProperties.oncreate && `oncreate`}];
-				this._aftercreate = [];
-			}
-
-			${templateProperties.oncreate && deindent`
-				else {
-					this._root._oncreate.push(oncreate);
-				}
+			${(templateProperties.oncreate || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
+				if ( !options._root ) {
+					this._oncreate = [${templateProperties.oncreate && `oncreate`}];
+					${(generator.hasComponents || generator.hasComplexBindings) && `this._beforecreate = [];`}
+					${(generator.hasComponents || generator.hasIntroTransitions) && `this._aftercreate = [];`}
+				} ${templateProperties.oncreate && deindent`
+					else {
+						this._root._oncreate.push(oncreate);
+					}
+				`}
 			`}
 
 			this._fragment = @create_main_fragment( this._state, this );
@@ -237,9 +235,9 @@ export default function dom(
 				this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
 			}
 
-			@callAll(this._beforecreate);
-			@callAll(this._oncreate);
-			@callAll(this._aftercreate);
+			${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
+			${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+			${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
 		}
 
 		@assign( ${prototypeBase}, ${proto});
diff --git a/test/js/index.js b/test/js/index.js
index c8afdbc2c3..512cba41fa 100644
--- a/test/js/index.js
+++ b/test/js/index.js
@@ -4,7 +4,7 @@ import * as path from "path";
 import { rollup } from "rollup";
 import { svelte } from "../helpers.js";
 
-describe.skip("js", () => {
+describe("js", () => {
 	fs.readdirSync("test/js/samples").forEach(dir => {
 		if (dir[0] === ".") return;
 
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index ea478745cd..c6c7723883 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -115,7 +115,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js
index 5cd719b372..35b70e4100 100644
--- a/test/js/samples/computed-collapsed-if/expected-bundle.js
+++ b/test/js/samples/computed-collapsed-if/expected-bundle.js
@@ -91,7 +91,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
index d98ac1db37..b5a15f5630 100644
--- a/test/js/samples/each-block-changed-check/expected-bundle.js
+++ b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -124,7 +124,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js
index 3912710a15..6019667c51 100644
--- a/test/js/samples/event-handlers-custom/expected-bundle.js
+++ b/test/js/samples/event-handlers-custom/expected-bundle.js
@@ -109,7 +109,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js
index f00e3816a9..53cca6fa20 100644
--- a/test/js/samples/if-block-no-update/expected-bundle.js
+++ b/test/js/samples/if-block-no-update/expected-bundle.js
@@ -115,7 +115,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js
index 2e2e7e7c09..9636f3d99a 100644
--- a/test/js/samples/if-block-simple/expected-bundle.js
+++ b/test/js/samples/if-block-simple/expected-bundle.js
@@ -115,7 +115,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
index 878bdf223e..04bd9f8588 100644
--- a/test/js/samples/non-imported-component/expected-bundle.js
+++ b/test/js/samples/non-imported-component/expected-bundle.js
@@ -103,7 +103,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
@@ -178,7 +180,12 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	this._oncreate = [];
+
+	if ( !options._root ) {
+		this._oncreate = [];
+		this._beforecreate = [];
+		this._aftercreate = [];
+	}
 
 	this._fragment = create_main_fragment( this._state, this );
 
@@ -187,7 +194,9 @@ function SvelteComponent ( options ) {
 		this._fragment.mount( options.target, null );
 	}
 
+	callAll(this._beforecreate);
 	callAll(this._oncreate);
+	callAll(this._aftercreate);
 }
 
 assign( SvelteComponent.prototype, proto );
@@ -197,7 +206,6 @@ SvelteComponent.prototype._set = function _set ( newState ) {
 	this._state = assign( {}, oldState, newState );
 	dispatchObservers( this, this._observers.pre, newState, oldState );
 	dispatchObservers( this, this._observers.post, newState, oldState );
-	callAll(this._oncreate);
 };
 
 SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
index c154930593..61c2cceee1 100644
--- a/test/js/samples/non-imported-component/expected.js
+++ b/test/js/samples/non-imported-component/expected.js
@@ -62,7 +62,12 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	this._oncreate = [];
+
+	if ( !options._root ) {
+		this._oncreate = [];
+		this._beforecreate = [];
+		this._aftercreate = [];
+	}
 
 	this._fragment = create_main_fragment( this._state, this );
 
@@ -71,7 +76,9 @@ function SvelteComponent ( options ) {
 		this._fragment.mount( options.target, null );
 	}
 
+	callAll(this._beforecreate);
 	callAll(this._oncreate);
+	callAll(this._aftercreate);
 }
 
 assign( SvelteComponent.prototype, proto );
@@ -81,7 +88,6 @@ SvelteComponent.prototype._set = function _set ( newState ) {
 	this._state = assign( {}, oldState, newState );
 	dispatchObservers( this, this._observers.pre, newState, oldState );
 	dispatchObservers( this, this._observers.post, newState, oldState );
-	callAll(this._oncreate);
 };
 
 SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
index e74522a945..02ccad5144 100644
--- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
+++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
@@ -91,7 +91,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {
@@ -143,18 +145,21 @@ function SvelteComponent ( options ) {
 
 	this._torndown = false;
 
+	var oncreate = template.oncreate.bind( this );
+
+	if ( !options._root ) {
+		this._oncreate = [oncreate];
+	} else {
+	 	this._root._oncreate.push(oncreate);
+	 }
+
 	this._fragment = create_main_fragment( this._state, this );
 
 	if ( options.target ) {
 		this._fragment.create();
 		this._fragment.mount( options.target, null );
 	}
-
-	if ( options._root ) {
-		options._root._oncreate.push( template.oncreate.bind( this ) );
-	} else {
-		template.oncreate.call( this );
-	}
+	callAll(this._oncreate);
 }
 
 assign( SvelteComponent.prototype, proto );
diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js
index 96aa37d766..ff00f93928 100644
--- a/test/js/samples/onrender-onteardown-rewritten/expected.js
+++ b/test/js/samples/onrender-onteardown-rewritten/expected.js
@@ -1,4 +1,4 @@
-import { assign, dispatchObservers, noop, proto } from "svelte/shared.js";
+import { assign, callAll, dispatchObservers, noop, proto } from "svelte/shared.js";
 
 var template = (function () {
 	return {
@@ -37,18 +37,21 @@ function SvelteComponent ( options ) {
 
 	this._torndown = false;
 
+	var oncreate = template.oncreate.bind( this );
+
+	if ( !options._root ) {
+		this._oncreate = [oncreate];
+	} else {
+	 	this._root._oncreate.push(oncreate);
+	 }
+
 	this._fragment = create_main_fragment( this._state, this );
 
 	if ( options.target ) {
 		this._fragment.create();
 		this._fragment.mount( options.target, null );
 	}
-
-	if ( options._root ) {
-		options._root._oncreate.push( template.oncreate.bind( this ) );
-	} else {
-		template.oncreate.call( this );
-	}
+	callAll(this._oncreate);
 }
 
 assign( SvelteComponent.prototype, proto );
diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js
index 62a6ac86e0..ec2ceaf4af 100644
--- a/test/js/samples/use-elements-as-anchors/expected-bundle.js
+++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js
@@ -115,7 +115,9 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
 }
 
 function callAll(fns) {