From c1ba15875e6bab4d116804c18f4abd6806a8cdf8 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Sat, 3 Dec 2016 11:44:08 +0100 Subject: [PATCH 1/2] various refactorings & fixes * fix some code style issues * refactor around createMountStatement * fix non-toplevel if blocks and elements being detached --- compiler/generate/index.js | 20 +++++++++++++------- compiler/generate/visitors/EachBlock.js | 4 ++-- compiler/generate/visitors/Element.js | 9 ++++----- compiler/generate/visitors/IfBlock.js | 7 +++++-- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/compiler/generate/index.js b/compiler/generate/index.js index 347d7062cf..fdf88c5f60 100644 --- a/compiler/generate/index.js +++ b/compiler/generate/index.js @@ -15,28 +15,34 @@ export default function generate ( parsed, source, options ) { const generator = { addElement ( name, renderStatement, needsIdentifier = false ) { - const needsTeardown = generator.current.localElementDepth === 0; - if ( needsIdentifier || needsTeardown ) { + const isToplevel = generator.current.localElementDepth === 0; + if ( needsIdentifier || isToplevel ) { generator.current.initStatements.push( deindent` var ${name} = ${renderStatement}; - ${generator.appendToTarget( name )}; ` ); + generator.createMountStatement( name ); } else { generator.current.initStatements.push( deindent` ${generator.current.target}.appendChild( ${renderStatement} ); ` ); } - if ( needsTeardown ) { + if ( isToplevel ) { generator.current.teardownStatements.push( deindent` if ( detach ) ${name}.parentNode.removeChild( ${name} ); ` ); } }, - appendToTarget ( name ) { + + createMountStatement ( name ) { if ( generator.current.useAnchor && generator.current.target === 'target' ) { - return `anchor.parentNode.insertBefore( ${name}, anchor )`; + generator.current.initStatements.push( deindent ` + anchor.parentNode.insertBefore( ${name}, anchor ); + ` ); + } else { + generator.current.initStatements.push( deindent ` + ${generator.current.target}.appendChild( ${name} ); + ` ); } - return `${generator.current.target}.appendChild( ${name} )`; }, addRenderer ( fragment ) { diff --git a/compiler/generate/visitors/EachBlock.js b/compiler/generate/visitors/EachBlock.js index c20e9b8320..53b025a6fa 100644 --- a/compiler/generate/visitors/EachBlock.js +++ b/compiler/generate/visitors/EachBlock.js @@ -47,10 +47,10 @@ export default { ${name}_iterations.length = ${listName}.length; ` ); - const needsTeardown = generator.current.localElementDepth === 0; + const isToplevel = generator.current.localElementDepth === 0; generator.current.teardownStatements.push( deindent` for ( var i = 0; i < ${name}_iterations.length; i += 1 ) { - ${name}_iterations[i].teardown( ${needsTeardown ? 'detach' : 'false'} ); + ${name}_iterations[i].teardown( ${isToplevel ? 'detach' : 'false'} ); } ` ); diff --git a/compiler/generate/visitors/Element.js b/compiler/generate/visitors/Element.js index 8f5bf5f861..dda3b31d4f 100644 --- a/compiler/generate/visitors/Element.js +++ b/compiler/generate/visitors/Element.js @@ -19,7 +19,7 @@ export default { teardown: [] }; - const shouldDetach = generator.current.localElementDepth === 0; + const isToplevel = generator.current.localElementDepth === 0; if ( isComponent ) { generator.hasComponents = true; @@ -87,7 +87,7 @@ export default { ` ); } - local.teardown.push( `${name}.teardown( ${shouldDetach} );` ); + local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` ); } else { @@ -132,7 +132,7 @@ export default { } local.init.unshift( render ); - if ( shouldDetach ) { + if ( isToplevel ) { local.teardown.push( `if ( detach ) ${name}.parentNode.removeChild( ${name} );` ); } } @@ -166,7 +166,6 @@ export default { if ( isComponent ) return; - generator.current.initStatements.push( - generator.appendToTarget( name ) ); + generator.createMountStatement( name ); } }; diff --git a/compiler/generate/visitors/IfBlock.js b/compiler/generate/visitors/IfBlock.js index 76ab5255e5..05ff5887b9 100644 --- a/compiler/generate/visitors/IfBlock.js +++ b/compiler/generate/visitors/IfBlock.js @@ -17,12 +17,12 @@ function generateBlock ( generator, node, name ) { counter: counter() }); node.children.forEach( generator.visit ); - //generator.visit( node.children ); generator.addRenderer( generator.current ); generator.pop(); // unset the children, to avoid them being visited again node.children = []; } + function getConditionsAndBlocks ( generator, node, _name, i = 0 ) { generator.addSourcemapLocations( node.expression ); const name = `${_name}_${i}`; @@ -86,6 +86,9 @@ export default { } ` ); - generator.current.teardownStatements.push( `if ( ${name} ) ${name}.teardown( detach );` ); + const isToplevel = generator.current.localElementDepth === 0; + generator.current.teardownStatements.push( deindent` + if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} ); + ` ); } }; From 3f300c9b715cecb0f7e09652ce42f8000aa53c61 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Sat, 3 Dec 2016 11:57:09 +0100 Subject: [PATCH 2/2] add a createAnchor helper --- compiler/generate/index.js | 7 +++++++ compiler/generate/visitors/EachBlock.js | 3 +-- compiler/generate/visitors/IfBlock.js | 3 +-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/compiler/generate/index.js b/compiler/generate/index.js index fdf88c5f60..13bb40c4df 100644 --- a/compiler/generate/index.js +++ b/compiler/generate/index.js @@ -45,6 +45,13 @@ export default function generate ( parsed, source, options ) { } }, + createAnchor ( _name, description = '' ) { + const name = `${_name}_anchor`; + const statement = `document.createComment( ${JSON.stringify( description )} )`; + generator.addElement( name, statement, true ); + return name; + }, + addRenderer ( fragment ) { if ( fragment.autofocus ) { fragment.initStatements.push( `${fragment.autofocus}.focus();` ); diff --git a/compiler/generate/visitors/EachBlock.js b/compiler/generate/visitors/EachBlock.js index 53b025a6fa..53f9a07d7e 100644 --- a/compiler/generate/visitors/EachBlock.js +++ b/compiler/generate/visitors/EachBlock.js @@ -5,7 +5,6 @@ export default { enter ( generator, node ) { const i = generator.counters.each++; const name = `eachBlock_${i}`; - const anchor = `${name}_anchor`; const renderer = `renderEachBlock_${i}`; const listName = `${name}_value`; @@ -14,7 +13,7 @@ export default { const { dependencies, snippet } = generator.contextualise( node.expression ); - generator.addElement( anchor, `document.createComment( ${JSON.stringify( `#each ${generator.source.slice( node.expression.start, node.expression.end )}` )} )`, true ); + const anchor = generator.createAnchor( name, `#each ${generator.source.slice( node.expression.start, node.expression.end )}` ); generator.current.initStatements.push( deindent` var ${name}_value = ${snippet}; diff --git a/compiler/generate/visitors/IfBlock.js b/compiler/generate/visitors/IfBlock.js index 05ff5887b9..2c8fbd30ca 100644 --- a/compiler/generate/visitors/IfBlock.js +++ b/compiler/generate/visitors/IfBlock.js @@ -56,13 +56,12 @@ 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, `renderIfBlock_${i}` ); - generator.addElement( anchor, `document.createComment( ${JSON.stringify( `#if ${generator.source.slice( node.expression.start, node.expression.end )}` )} )`, true ); + const anchor = generator.createAnchor( name, `#if ${generator.source.slice( node.expression.start, node.expression.end )}` ); generator.current.initStatements.push( deindent` function ${getBlock} ( ${params} ) {