only fire onrender hooks once component is in the DOM – fixes #18

compiler/generate/index.js

@@ -299,6 +299,12 @@ export default function generate ( parsed, source, options ) {
 		initStatements.push( `if ( !addedCss ) addCss();` );
 	}
 
+	if ( generator.hasComponents ) {
+		initStatements.push( deindent`
+			this.__renderHooks = [];
+		` );
+	}
+
 	if ( generator.hasComplexBindings ) {
 		initStatements.push( deindent`
 			this.__bindings = [];
@@ -311,8 +317,26 @@ export default function generate ( parsed, source, options ) {
 		initStatements.push( `var mainFragment = renderMainFragment( state, this, options.target );` );
 	}
 
+	if ( generator.hasComponents ) {
+		const statement = deindent`
+			while ( this.__renderHooks.length ) {
+				var hook = this.__renderHooks.pop();
+				hook.fn.call( hook.context );
+			}
+		`;
+
+		initStatements.push( statement );
+		setStatements.push( statement );
+	}
+
 	if ( templateProperties.onrender ) {
-		initStatements.push( `template.onrender.call( this );` );
+		initStatements.push( deindent`
+			if ( options.parent ) {
+				options.parent.__renderHooks.push({ fn: template.onrender, context: this });
+			} else {
+				template.onrender.call( this );
+			}
+		` );
 	}
 
 	const initialState = templateProperties.data ? `Object.assign( template.data(), options.data )` : `options.data || {}`;

compiler/generate/visitors/Element.js

@@ -20,6 +20,8 @@ export default {
 		};
 
 		if ( isComponent ) {
+			generator.hasComponents = true;
+
 			addComponentAttributes( generator, node, local );
 
 			if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
@@ -54,13 +56,15 @@ export default {
 
 					var ${name} = new template.components.${node.name}({
 						target: ${generator.current.target},
+						parent: component,
 						data: ${name}_initialData
 					});
 				` );
 			} else {
 				local.init.unshift( deindent`
 					var ${name} = new template.components.${node.name}({
-						target: ${generator.current.target}
+						target: ${generator.current.target},
+						parent: component
 					});
 				` );
 			}

test/compiler/onrender-fires-when-ready/Widget.html

@@ -0,0 +1,9 @@
+<p ref:x>{{inDocument}}</p>
+
+<script>
+	export default {
+		onrender () {
+			this.set({ inDocument: document.contains( this.refs.x ) })
+		}
+	};
+</script>

test/compiler/onrender-fires-when-ready/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: `<div><p>true</p></div>`,
+
+	test ( assert, component, target ) {
+		component.set({ foo: true });
+		assert.htmlEqual( target.innerHTML, `<div><p>true</p>\n<p>true</p></div>` );
+
+		component.teardown();
+	}
+};

test/compiler/onrender-fires-when-ready/main.html

@@ -0,0 +1,17 @@
+<div>
+	<Widget/>
+
+	{{#if foo}}
+		<Widget/>
+	{{/if}}
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: {
+			Widget
+		}
+	};
+</script>