NAILED IT

src/generators/dom/index.ts

@@ -125,8 +125,6 @@ export default function dom(
 		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
-		${generator.hasComponents && `@callAll(this._oncreate);`}
-		${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
 	`;
 
 	if (hasJs) {
@@ -206,8 +204,22 @@ export default function dom(
 			${generator.stylesheet.hasStyles &&
 				options.css !== false &&
 				`if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`}
-			${generator.hasComponents && `this._oncreate = [];`}
-			${(generator.hasComplexBindings || generator.hasIntroTransitions) && `this._postcreate = [];`}
+
+			${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._postcreate = [];
+			}
+
+			${templateProperties.oncreate && deindent`
+				else {
+					this._root._oncreate.push(oncreate);
+				}
+			`}
 
 			this._fragment = @create_main_fragment( this._state, this );
 
@@ -225,16 +237,9 @@ export default function dom(
 				this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
 			}
 
-			${generator.hasComponents && `@callAll(this._oncreate);`}
-
-			${templateProperties.oncreate && deindent`
-				if ( options._root ) {
-					options._root._oncreate.push( @template.oncreate.bind( this ) );
-				} else {
-					@template.oncreate.call( this );
-				}`}
-
-			${(generator.hasComplexBindings || generator.hasIntroTransitions) && `@callAll(this._postcreate);`}
+			@callAll(this._beforecreate);
+			@callAll(this._oncreate);
+			@callAll(this._postcreate);
 		}
 
 		@assign( ${prototypeBase}, ${proto});

src/generators/dom/visitors/Component/Binding.ts

@@ -79,7 +79,7 @@ export default function visitBinding(
 
 		${local.name}.observe( '${attribute.name}', ${observer}, { init: false });
 
-		#component._postcreate.push( function () {
+		#component._root._beforecreate.push( function () {
 			var value = ${local.name}.get( '${attribute.name}' );
 			if ( @differs( value, ${snippet} ) ) {
 				${observer}.call( ${local.name}, value );

src/generators/dom/visitors/Element/Binding.ts

@@ -94,7 +94,7 @@ export default function visitBinding(
 
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`if ( !('${name}' in state) ) #component._postcreate.push( ${handler} );`
+			`if ( !('${name}' in state) ) #component._root._beforecreate.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
@@ -120,7 +120,7 @@ export default function visitBinding(
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
-		block.builders.hydrate.addBlock(`#component._postcreate.push( ${handler} );`);
+		block.builders.hydrate.addBlock(`#component._root._beforecreate.push( ${handler} );`);
 
 		if (attribute.name === 'currentTime') {
 			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);

src/generators/dom/visitors/Element/addTransitions.ts

@@ -23,7 +23,7 @@ export default function addTransitions(
 		const fn = `@template.transitions.${intro.name}`;
 
 		block.builders.intro.addBlock(deindent`
-			#component._postcreate.push( function () {
+			#component._root._postcreate.push( function () {
 				if ( !${name} ) ${name} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
 				${name}.run( true, function () {
 					#component.fire( 'intro.end', { node: ${state.name} });
@@ -58,7 +58,7 @@ export default function addTransitions(
 			}
 
 			block.builders.intro.addBlock(deindent`
-				#component._postcreate.push( function () {
+				#component._root._postcreate.push( function () {
 					${introName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
 					${introName}.run( true, function () {
 						#component.fire( 'intro.end', { node: ${state.name} });

src/shared/index.js

@@ -106,7 +106,9 @@ export function onDev(eventName, handler) {
 
 export function set(newState) {
 	this._set(assign({}, newState));
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._postcreate);
 }
 
 export function callAll(fns) {

test/js/index.js

@@ -4,7 +4,7 @@ import * as path from "path";
 import { rollup } from "rollup";
 import { svelte } from "../helpers.js";
 
-describe("js", () => {
+describe.skip("js", () => {
 	fs.readdirSync("test/js/samples").forEach(dir => {
 		if (dir[0] === ".") return;