wip

compiler/generate/index.js

@@ -14,6 +14,19 @@ export default function generate ( parsed, source, options ) {
 	const renderers = [];
 
 	const generator = {
+		addElement ( name, definition ) {
+			generator.current.initStatements.push( deindent`
+				var ${name} = instance.${name} = ${definition};
+				${generator.appendToTarget( name )};
+			` );
+
+			if ( generator.current.localElementDepth === 0 ) {
+				generator.current.teardownStatements.push( deindent`
+					if ( detach ) instance.${name}.parentNode.removeChild( instance.${name} );
+				` );
+			}
+		},
+
 		appendToTarget ( name ) {
 			if ( generator.current.useAnchor && generator.current.target === 'target' ) {
 				return `anchor.parentNode.insertBefore( ${name}, anchor )`;
@@ -29,23 +42,15 @@ export default function generate ( parsed, source, options ) {
 			renderers.push( deindent`
 				var ${fragment.name} = {
 					render: function ( ${fragment.params}, component, target${fragment.useAnchor ? ', anchor' : ''} ) {
+						var instance = {};
 						${fragment.initStatements.join( '\n\n' )}
-
+						return instance;
-						return {
+					},
-							update: function ( changed, ${fragment.params} ) {
-								${fragment.updateStatements.join( '\n\n' )}
-							},
-
-							teardown: function ( detach ) {
-								${fragment.teardownStatements.join( '\n\n' )}
-							}
-						};
-						},
 					update: function ( instance, changed, ${fragment.params} ) {
-						instance.update( changed, ${fragment.params} );
+						${fragment.updateStatements.join( '\n\n' )}
 					},
 					teardown: function ( instance, detach ) {
-						instance.teardown( detach );
+						${fragment.teardownStatements.join( '\n\n' )}
 					},
 				};
 			` );

compiler/generate/visitors/IfBlock.js

@@ -56,15 +56,15 @@ export default {
 
 		const { params, target } = generator.current;
 		const name = `ifBlock_${i}`;
+		const anchor = `${name}_anchor`;
 		const getBlock = `getBlock_${i}`;
 		const currentBlock = `currentBlock_${i}`;
 
 		const conditionsAndBlocks = getConditionsAndBlocks( generator, node, `IfBlock_${i}` );
 
-		generator.current.initStatements.push( deindent`
+		generator.addElement( anchor, `document.createComment( ${JSON.stringify( `#if ${generator.source.slice( node.expression.start, node.expression.end )}` )} )` );
-			var ${name}_anchor = document.createComment( ${JSON.stringify( `#if ${generator.source.slice( node.expression.start, node.expression.end )}` )} );
-			${generator.appendToTarget( `${name}_anchor` )};
 
+		generator.current.initStatements.push( deindent`
 			function ${getBlock} ( ${params} ) {
 				${conditionsAndBlocks.map( ({ condition, block }) => {
 					return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
@@ -72,7 +72,7 @@ export default {
 			}
 
 			var ${currentBlock} = ${getBlock}( ${params} );
-			var ${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, ${name}_anchor );
+			var ${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, ${anchor} );
 		` );
 
 		generator.current.updateStatements.push( deindent`
@@ -82,18 +82,11 @@ export default {
 				${currentBlock}.update( ${name}, changed, ${params} );
 			} else {
 				if ( ${name} ) ${name}.teardown( true );
-				${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, ${name}_anchor );
+				${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, instance.${anchor} );
 			}
 		` );
 
-		const teardownStatements = [
+		generator.current.teardownStatements.push(
-			`if ( ${name} ) ${currentBlock}.teardown( ${name}, detach );`
+			`if ( ${name} ) ${currentBlock}.teardown( ${name}, detach );` );
-		];
-
-		if ( generator.current.localElementDepth === 0 ) {
-			teardownStatements.push( `if ( detach ) ${name}_anchor.parentNode.removeChild( ${name}_anchor );` );
-		}
-
-		generator.current.teardownStatements.push( teardownStatements.join( '\n' ) );
 	}
 };

compiler/generate/visitors/MustacheTag.js

@@ -4,23 +4,13 @@ export default {
 	enter ( generator, node ) {
 		const name = generator.current.counter( 'text' );
 
+		generator.addSourcemapLocations( node.expression );
 		const { snippet } = generator.contextualise( node.expression );
 
-		generator.current.initStatements.push( deindent`
+		generator.addElement( name, `document.createTextNode( ${snippet} )` );
-			var ${name} = document.createTextNode( ${snippet} );
-			${generator.appendToTarget( name )};
-		` );
-
-		generator.addSourcemapLocations( node.expression );
 
 		generator.current.updateStatements.push( deindent`
-			${name}.data = ${snippet};
+			instance.${name}.data = ${snippet};
 		` );
-
-		if ( generator.current.localElementDepth === 0 ) {
-			generator.current.teardownStatements.push( deindent`
-				if ( detach ) ${name}.parentNode.removeChild( ${name} );
-			` );
-		}
 	}
 };

compiler/generate/visitors/Text.js

@@ -2,21 +2,7 @@ import deindent from '../utils/deindent.js';
 
 export default {
 	enter ( generator, node ) {
-		if ( generator.elementDepth > 1 ) {
+		const name = generator.current.counter( 'text' );
-			generator.current.initStatements.push( deindent`
+		generator.addElement( name, `document.createTextNode( ${JSON.stringify( node.data )} )` );
-				${generator.current.target}.appendChild( document.createTextNode( ${JSON.stringify( node.data )} ) );
-			` );
-		} else {
-			const name = generator.current.counter( `text` );
-
-			generator.current.initStatements.push( deindent`
-				var ${name} = document.createTextNode( ${JSON.stringify( node.data )} );
-				${generator.appendToTarget( name )};
-			` );
-
-			generator.current.teardownStatements.push( deindent`
-				if ( detach ) ${name}.parentNode.removeChild( ${name} );
-			` );
-		}
 	}
 };