From e6965339c26607ca6e82675e5f18755df0e6d122 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Thu, 1 Dec 2016 10:53:31 +0100 Subject: [PATCH] wip --- compiler/generate/index.js | 31 +++++++++++++---------- compiler/generate/visitors/IfBlock.js | 21 +++++---------- compiler/generate/visitors/MustacheTag.js | 16 +++--------- compiler/generate/visitors/Text.js | 18 ++----------- 4 files changed, 30 insertions(+), 56 deletions(-) diff --git a/compiler/generate/index.js b/compiler/generate/index.js index 5afbad7063..3713b0cce7 100644 --- a/compiler/generate/index.js +++ b/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 { - update: function ( changed, ${fragment.params} ) { - ${fragment.updateStatements.join( '\n\n' )} - }, - - teardown: function ( detach ) { - ${fragment.teardownStatements.join( '\n\n' )} - } - }; - }, + return instance; + }, 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' )} }, }; ` ); diff --git a/compiler/generate/visitors/IfBlock.js b/compiler/generate/visitors/IfBlock.js index dc08273245..a7d367aabc 100644 --- a/compiler/generate/visitors/IfBlock.js +++ b/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` - var ${name}_anchor = document.createComment( ${JSON.stringify( `#if ${generator.source.slice( node.expression.start, node.expression.end )}` )} ); - ${generator.appendToTarget( `${name}_anchor` )}; + generator.addElement( anchor, `document.createComment( ${JSON.stringify( `#if ${generator.source.slice( node.expression.start, node.expression.end )}` )} )` ); + 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 = [ - `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' ) ); + generator.current.teardownStatements.push( + `if ( ${name} ) ${currentBlock}.teardown( ${name}, detach );` ); } }; diff --git a/compiler/generate/visitors/MustacheTag.js b/compiler/generate/visitors/MustacheTag.js index cc0c9dbf77..e83fa0f3ca 100644 --- a/compiler/generate/visitors/MustacheTag.js +++ b/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` - var ${name} = document.createTextNode( ${snippet} ); - ${generator.appendToTarget( name )}; - ` ); - - generator.addSourcemapLocations( node.expression ); + generator.addElement( name, `document.createTextNode( ${snippet} )` ); 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} ); - ` ); - } } }; diff --git a/compiler/generate/visitors/Text.js b/compiler/generate/visitors/Text.js index efdb69ff1c..2535572c85 100644 --- a/compiler/generate/visitors/Text.js +++ b/compiler/generate/visitors/Text.js @@ -2,21 +2,7 @@ import deindent from '../utils/deindent.js'; export default { enter ( generator, node ) { - if ( generator.elementDepth > 1 ) { - generator.current.initStatements.push( deindent` - ${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} ); - ` ); - } + const name = generator.current.counter( 'text' ); + generator.addElement( name, `document.createTextNode( ${JSON.stringify( node.data )} )` ); } };