From 139030cd053b3a2c434aa6ab035539e6e620fa41 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Thu, 1 Dec 2016 10:26:28 +0100 Subject: [PATCH] first steps toward making the fragment api functional --- compiler/generate/index.js | 42 +++++++++++++++---------- compiler/generate/visitors/EachBlock.js | 12 +++---- compiler/generate/visitors/IfBlock.js | 10 +++--- 3 files changed, 36 insertions(+), 28 deletions(-) diff --git a/compiler/generate/index.js b/compiler/generate/index.js index fa2ba7816a..5afbad7063 100644 --- a/compiler/generate/index.js +++ b/compiler/generate/index.js @@ -27,19 +27,27 @@ export default function generate ( parsed, source, options ) { } renderers.push( deindent` - function ${fragment.name} ( ${fragment.params}, component, target${fragment.useAnchor ? ', anchor' : ''} ) { - ${fragment.initStatements.join( '\n\n' )} - - return { - update: function ( changed, ${fragment.params} ) { - ${fragment.updateStatements.join( '\n\n' )} + var ${fragment.name} = { + render: function ( ${fragment.params}, component, target${fragment.useAnchor ? ', anchor' : ''} ) { + ${fragment.initStatements.join( '\n\n' )} + + return { + update: function ( changed, ${fragment.params} ) { + ${fragment.updateStatements.join( '\n\n' )} + }, + + teardown: function ( detach ) { + ${fragment.teardownStatements.join( '\n\n' )} + } + }; }, - - teardown: function ( detach ) { - ${fragment.teardownStatements.join( '\n\n' )} - } - }; - } + update: function ( instance, changed, ${fragment.params} ) { + instance.update( changed, ${fragment.params} ); + }, + teardown: function ( instance, detach ) { + instance.teardown( detach ); + }, + }; ` ); }, @@ -211,7 +219,7 @@ export default function generate ( parsed, source, options ) { generator.push({ useAnchor: false, - name: 'renderMainFragment', + name: 'MainFragment', namespace: null, target: 'target', elementDepth: 0, @@ -285,7 +293,7 @@ export default function generate ( parsed, source, options ) { setStatements.push( deindent` dispatchObservers( observers.immediate, newState, oldState ); - if ( mainFragment ) mainFragment.update( newState, state ); + if ( mainFragment ) MainFragment.update( mainFragment, newState, state ); dispatchObservers( observers.deferred, newState, oldState ); ` ); @@ -346,13 +354,13 @@ export default function generate ( parsed, source, options ) { if ( generator.hasComplexBindings ) { initStatements.push( deindent` this.__bindings = []; - var mainFragment = renderMainFragment( state, this, options.target ); + var mainFragment = MainFragment.render( state, this, options.target ); while ( this.__bindings.length ) this.__bindings.pop()(); ` ); setStatements.push( `while ( this.__bindings.length ) this.__bindings.pop()();` ); } else { - initStatements.push( `var mainFragment = renderMainFragment( state, this, options.target );` ); + initStatements.push( `var mainFragment = MainFragment.render( state, this, options.target );` ); } if ( generator.hasComponents ) { @@ -465,7 +473,7 @@ export default function generate ( parsed, source, options ) { this.teardown = function teardown ( detach ) { this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``} - mainFragment.teardown( detach !== false ); + MainFragment.teardown( mainFragment, detach !== false ); mainFragment = null; state = {}; diff --git a/compiler/generate/visitors/EachBlock.js b/compiler/generate/visitors/EachBlock.js index 474eabce64..cf9ddb55ec 100644 --- a/compiler/generate/visitors/EachBlock.js +++ b/compiler/generate/visitors/EachBlock.js @@ -5,7 +5,7 @@ export default { enter ( generator, node ) { const i = generator.counters.each++; const name = `eachBlock_${i}`; - const renderer = `renderEachBlock_${i}`; + const renderer = `EachBlock_${i}`; const listName = `${name}_value`; @@ -22,7 +22,7 @@ export default { var ${name}_iterations = []; for ( var i = 0; i < ${name}_value.length; i += 1 ) { - ${name}_iterations[i] = ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, component, ${name}_fragment ); + ${name}_iterations[i] = ${renderer}.render( ${generator.current.params}, ${listName}, ${listName}[i], i, component, ${name}_fragment ); } ${name}_anchor.parentNode.insertBefore( ${name}_fragment, ${name}_anchor ); @@ -33,14 +33,14 @@ export default { for ( var i = 0; i < ${name}_value.length; i += 1 ) { if ( !${name}_iterations[i] ) { - ${name}_iterations[i] = ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, component, ${name}_fragment ); + ${name}_iterations[i] = ${renderer}.render( ${generator.current.params}, ${listName}, ${listName}[i], i, component, ${name}_fragment ); } else { - ${name}_iterations[i].update( changed, ${generator.current.params}, ${listName}, ${listName}[i], i ); + ${renderer}.update( ${name}_iterations[i], changed, ${generator.current.params}, ${listName}, ${listName}[i], i ); } } for ( var i = ${name}_value.length; i < ${name}_iterations.length; i += 1 ) { - ${name}_iterations[i].teardown( true ); + ${renderer}.teardown( ${name}_iterations[i], 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( detach ); + ${renderer}.teardown( ${name}_iterations[i], detach ); } if ( detach ) ${name}_anchor.parentNode.removeChild( ${name}_anchor ); diff --git a/compiler/generate/visitors/IfBlock.js b/compiler/generate/visitors/IfBlock.js index db6de77729..dc08273245 100644 --- a/compiler/generate/visitors/IfBlock.js +++ b/compiler/generate/visitors/IfBlock.js @@ -59,7 +59,7 @@ export default { const getBlock = `getBlock_${i}`; const currentBlock = `currentBlock_${i}`; - const conditionsAndBlocks = getConditionsAndBlocks( generator, node, `renderIfBlock_${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 )}` )} ); @@ -72,22 +72,22 @@ export default { } var ${currentBlock} = ${getBlock}( ${params} ); - var ${name} = ${currentBlock} && ${currentBlock}( ${params}, component, ${target}, ${name}_anchor ); + var ${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, ${name}_anchor ); ` ); generator.current.updateStatements.push( deindent` var _${currentBlock} = ${currentBlock}; ${currentBlock} = ${getBlock}( ${params} ); if ( _${currentBlock} === ${currentBlock} && ${name}) { - ${name}.update( changed, ${params} ); + ${currentBlock}.update( ${name}, changed, ${params} ); } else { if ( ${name} ) ${name}.teardown( true ); - ${name} = ${currentBlock} && ${currentBlock}( ${params}, component, ${target}, ${name}_anchor ); + ${name} = ${currentBlock} && ${currentBlock}.render( ${params}, component, ${target}, ${name}_anchor ); } ` ); const teardownStatements = [ - `if ( ${name} ) ${name}.teardown( detach );` + `if ( ${name} ) ${currentBlock}.teardown( ${name}, detach );` ]; if ( generator.current.localElementDepth === 0 ) {