only detach nodes if necessary (fixes #26)

compiler/generate/index.js

@@ -25,7 +25,7 @@ export default function generate ( parsed, source, options ) {
 							${fragment.updateStatements.join( '\n\n' )}
 						},
 
-						teardown: function () {
+						teardown: function ( detach ) {
 							${fragment.teardownStatements.join( '\n\n' )}
 						}
 					};
@@ -204,6 +204,7 @@ export default function generate ( parsed, source, options ) {
 		namespace: null,
 		target: 'target',
 		elementDepth: 0,
+		localElementDepth: 0,
 
 		initStatements: [],
 		updateStatements: [],
@@ -424,10 +425,10 @@ export default function generate ( parsed, source, options ) {
 				};
 			};
 
-			this.teardown = function teardown () {
+			this.teardown = function teardown ( detach ) {
 				this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
 
-				mainFragment.teardown();
+				mainFragment.teardown( detach !== false );
 				mainFragment = null;
 
 				state = {};

compiler/generate/visitors/EachBlock.js

@@ -40,7 +40,7 @@ export default {
 			}
 
 			for ( var i = ${name}_value.length; i < ${name}_iterations.length; i += 1 ) {
-				${name}_iterations[i].teardown();
+				${name}_iterations[i].teardown( true );
 			}
 
 			${name}_anchor.parentNode.insertBefore( ${name}_fragment, ${name}_anchor );
@@ -49,7 +49,7 @@ export default {
 
 		generator.current.teardownStatements.push( deindent`
 			for ( let i = 0; i < ${name}_iterations.length; i += 1 ) {
-				${name}_iterations[i].teardown();
+				${name}_iterations[i].teardown( detach );
 			}
 
 			${name}_anchor.parentNode.removeChild( ${name}_anchor );
@@ -78,6 +78,7 @@ export default {
 			target: 'target',
 			expression: node.expression,
 			context: node.context,
+			localElementDepth: 0,
 
 			contextDependencies,
 			contexts,

compiler/generate/visitors/Element.js

@@ -19,6 +19,8 @@ export default {
 			teardown: []
 		};
 
+		const shouldDetach = generator.current.localElementDepth === 0;
+
 		if ( isComponent ) {
 			generator.hasComponents = true;
 
@@ -85,7 +87,7 @@ export default {
 				` );
 			}
 
-			local.teardown.push( `${name}.teardown();` );
+			local.teardown.push( `${name}.teardown( ${shouldDetach} );` );
 		}
 
 		else {
@@ -130,7 +132,9 @@ export default {
 			}
 
 			local.init.unshift( render );
-			local.teardown.push( `${name}.parentNode.removeChild( ${name} );` );
+			if ( shouldDetach ) {
+				local.teardown.push( `if ( detach ) ${name}.parentNode.removeChild( ${name} );` );
+			}
 		}
 
 		// special case – bound <option> without a value attribute
@@ -149,7 +153,8 @@ export default {
 			namespace: local.namespace,
 			target: name,
 			parent: generator.current,
-			elementDepth: generator.current.elementDepth + 1
+			elementDepth: generator.current.elementDepth + 1,
+			localElementDepth: generator.current.localElementDepth + 1
 		});
 	},
 

compiler/generate/visitors/ElseBlock.js

@@ -6,6 +6,7 @@ export default {
 
 		generator.push({
 			name,
+			localElementDepth: 0,
 
 			initStatements: [],
 			updateStatements: [],

compiler/generate/visitors/IfBlock.js

@@ -46,7 +46,7 @@ export default {
 		if ( node.else ) {
 			ifTrue.push( deindent`
 				if ( ${elseName } ) {
-					${elseName}.teardown();
+					${elseName}.teardown( true );
 					${elseName} = null;
 				}
 			` );
@@ -54,7 +54,7 @@ export default {
 
 		const ifFalse = [ deindent`
 			if ( ${name} ) {
-				${name}.teardown();
+				${name}.teardown( true );
 				${name} = null;
 			}
 		` ];
@@ -85,15 +85,25 @@ export default {
 
 		generator.current.updateStatements.push( update );
 
-		generator.current.teardownStatements.push( deindent`
-			if ( ${name} ) ${name}.teardown();${node.else ? `\nif ( ${elseName} ) ${elseName}.teardown();` : ``}
-			${name}_anchor.parentNode.removeChild( ${name}_anchor );
-		` );
+		const teardownStatements = [
+			`if ( ${name} ) ${name}.teardown( detach );`
+		];
+
+		if ( node.else ) {
+			teardownStatements.push( `if ( ${elseName} ) ${elseName}.teardown( detach );` );
+		}
+
+		if ( generator.current.localElementDepth === 0 ) {
+			teardownStatements.push( `if ( detach ) ${name}_anchor.parentNode.removeChild( ${name}_anchor );` );
+		}
+
+		generator.current.teardownStatements.push( teardownStatements.join( '\n' ) );
 
 		generator.push({
 			useAnchor: true,
 			name: renderer,
 			target: 'target',
+			localElementDepth: 0,
 
 			initStatements: [],
 			updateStatements: [],