From 5fa2cd24c43a4c11708958f357ac483688570bcd Mon Sep 17 00:00:00 2001 From: Rich-Harris Date: Sat, 10 Dec 2016 14:38:20 -0500 Subject: [PATCH] use builders everywhere --- src/generate/index.js | 51 +++++++------------ src/generate/visitors/Component.js | 12 +++-- src/generate/visitors/EachBlock.js | 31 ++++++----- src/generate/visitors/Element.js | 8 +-- src/generate/visitors/IfBlock.js | 10 ++-- src/generate/visitors/MustacheTag.js | 2 +- src/generate/visitors/RawMustacheTag.js | 22 ++++---- src/generate/visitors/YieldTag.js | 12 +++-- src/utils/CodeBuilder.js | 4 ++ test/generator/hello-world/_config.js | 6 ++- test/generator/if-block-expression/_config.js | 2 +- 11 files changed, 78 insertions(+), 82 deletions(-) diff --git a/src/generate/index.js b/src/generate/index.js index f9d28bc7bc..a5749ffd27 100644 --- a/src/generate/index.js +++ b/src/generate/index.js @@ -29,18 +29,19 @@ export default function generate ( parsed, source, options, names ) { `${generator.current.target}.appendChild( ${renderStatement} );` ); } + if ( isToplevel ) { - generator.current.detachStatements.push( deindent` - ${name}.parentNode.removeChild( ${name} ); - ` ); + generator.current.builders.detach.addLine( + `${name}.parentNode.removeChild( ${name} );` + ); } }, createMountStatement ( name ) { if ( generator.current.target === 'target' ) { - generator.current.mountStatements.push( deindent` - target.insertBefore( ${name}, anchor ); - ` ); + generator.current.builders.mount.addLine( + `target.insertBefore( ${name}, anchor );` + ); } else { generator.current.builders.init.addLine( `${generator.current.target}.appendChild( ${name} );` ); @@ -59,12 +60,6 @@ export default function generate ( parsed, source, options, names ) { name, target: 'target', localElementDepth: 0, - - mountStatements: [], - updateStatements: [], - detachStatements: [], - teardownStatements: [], - builders: generator.getBuilders(), getUniqueName: generator.getUniqueNameMaker() }); @@ -81,18 +76,13 @@ export default function generate ( parsed, source, options, names ) { fragment.builders.init.addLine( `${fragment.autofocus}.focus();` ); } - const detachStatements = fragment.detachStatements.join( '\n\n' ); - const teardownStatements = fragment.teardownStatements.join( '\n\n' ); - - const detachBlock = deindent` - if ( detach ) { - ${detachStatements} - } - `; - - const teardownBlock = deindent` - ${teardownStatements}${detachStatements ? `\n\n${detachBlock}` : ``} - `; + if ( !fragment.builders.detach.isEmpty() ) { + fragment.builders.teardown.addBlock( deindent` + if ( detach ) { + ${fragment.builders.detach} + } + ` ); + } renderers.push( deindent` function ${fragment.name} ( ${fragment.params}, component ) { @@ -100,15 +90,15 @@ export default function generate ( parsed, source, options, names ) { return { mount: function ( target, anchor ) { - ${fragment.mountStatements.join( '\n\n' )} + ${fragment.builders.mount} }, update: function ( changed, ${fragment.params} ) { - ${fragment.updateStatements.join( '\n\n' )} + ${fragment.builders.update} }, teardown: function ( detach ) { - ${teardownBlock} + ${fragment.builders.teardown} } }; } @@ -303,12 +293,7 @@ export default function generate ( parsed, source, options, names ) { target: 'target', elementDepth: 0, localElementDepth: 0, - - mountStatements: [], - updateStatements: [], - detachStatements: [], - teardownStatements: [], - + contexts: {}, indexes: {}, diff --git a/src/generate/visitors/Component.js b/src/generate/visitors/Component.js index bd6c8f341b..274ea2a583 100644 --- a/src/generate/visitors/Component.js +++ b/src/generate/visitors/Component.js @@ -41,7 +41,9 @@ export default { `var ${name}_yieldFragment = ${yieldName}( root, component );` ); - generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`); + generator.current.builders.update.addLine( + `${name}_yieldFragment.update( changed, root );` + ); componentInitProperties.push(`yield: ${name}_yieldFragment`); } @@ -111,10 +113,10 @@ export default { local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` ); generator.current.builders.init.addBlock( local.init.join( '\n' ) ); - if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) ); - if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) ); - if ( local.detach.length ) generator.current.detachStatements.push( local.detach.join( '\n' ) ); - generator.current.teardownStatements.push( local.teardown.join( '\n' ) ); + if ( local.update.length ) generator.current.builders.update.addBlock( local.update.join( '\n' ) ); + if ( local.mount.length ) generator.current.builders.mount.addBlock( local.mount.join( '\n' ) ); + if ( local.detach.length ) generator.current.builders.detach.addBlock( local.detach.join( '\n' ) ); + generator.current.builders.teardown.addBlock( local.teardown.join( '\n' ) ); generator.push({ namespace: local.namespace, diff --git a/src/generate/visitors/EachBlock.js b/src/generate/visitors/EachBlock.js index 72a7b7fd36..0c6a976728 100644 --- a/src/generate/visitors/EachBlock.js +++ b/src/generate/visitors/EachBlock.js @@ -40,13 +40,13 @@ export default { } if ( isToplevel ) { - generator.current.mountStatements.push( deindent` + generator.current.builders.mount.addBlock( deindent` for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) { ${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} ); } ` ); if ( node.else ) { - generator.current.mountStatements.push( deindent` + generator.current.builders.mount.addBlock( deindent` if ( ${elseName} ) { ${elseName}.mount( ${anchor}.parentNode, ${anchor} ); } @@ -54,7 +54,7 @@ export default { } } - generator.current.updateStatements.push( deindent` + generator.current.builders.update.addBlock( deindent` var ${name}_value = ${snippet}; for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) { @@ -74,7 +74,7 @@ export default { ` ); if ( node.else ) { - generator.current.updateStatements.push( deindent` + generator.current.builders.update.addBlock( deindent` if ( !${name}_value.length && ${elseName} ) { ${elseName}.update( changed, ${params} ); } else if ( !${name}_value.length ) { @@ -86,14 +86,14 @@ export default { ` ); } - generator.current.teardownStatements.push( deindent` + generator.current.builders.teardown.addBlock( deindent` for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) { ${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} ); } ` ); if ( node.else ) { - generator.current.teardownStatements.push( deindent` + generator.current.builders.teardown.addBlock( deindent` if ( ${elseName} ) { ${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} ); } @@ -136,19 +136,18 @@ export default { listNames, params: blockParams, - mountStatements: [], - updateStatements: [ Object.keys( contexts ).map( contextName => { - const listName = listNames[ contextName ]; - const indexName = indexNames[ contextName ]; - - return `var ${contextName} = ${listName}[${indexName}];`; - }).join( '\n' ) ], - detachStatements: [], - teardownStatements: [], - builders: generator.getBuilders(), getUniqueName: generator.getUniqueNameMaker() }); + + Object.keys( contexts ).forEach( contextName => { + const listName = listNames[ contextName ]; + const indexName = indexNames[ contextName ]; + + generator.current.builders.update.addLine( + `var ${contextName} = ${listName}[${indexName}];` + ); + }); }, leave ( generator ) { diff --git a/src/generate/visitors/Element.js b/src/generate/visitors/Element.js index 3373ba3aee..4154c810a7 100644 --- a/src/generate/visitors/Element.js +++ b/src/generate/visitors/Element.js @@ -80,10 +80,10 @@ export default { } generator.current.builders.init.addBlock( local.init.join( '\n' ) ); - if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) ); - if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) ); - if ( local.detach.length ) generator.current.detachStatements.push( local.detach.join( '\n' ) ); - generator.current.teardownStatements.push( local.teardown.join( '\n' ) ); + if ( local.update.length ) generator.current.builders.update.addBlock( local.update.join( '\n' ) ); + if ( local.mount.length ) generator.current.builders.mount.addBlock( local.mount.join( '\n' ) ); + if ( local.detach.length ) generator.current.builders.detach.addBlock( local.detach.join( '\n' ) ); + generator.current.builders.teardown.addBlock( local.teardown.join( '\n' ) ); generator.createMountStatement( name ); diff --git a/src/generate/visitors/IfBlock.js b/src/generate/visitors/IfBlock.js index 8440559447..bf4cd96953 100644 --- a/src/generate/visitors/IfBlock.js +++ b/src/generate/visitors/IfBlock.js @@ -52,12 +52,12 @@ export default { const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`; if ( isToplevel ) { - generator.current.mountStatements.push( mountStatement ); + generator.current.builders.mount.addLine( mountStatement ); } else { generator.current.builders.init.addLine( mountStatement ); } - generator.current.updateStatements.push( deindent` + generator.current.builders.update.addBlock( deindent` var _${currentBlock} = ${currentBlock}; ${currentBlock} = ${getBlock}( ${params} ); if ( _${currentBlock} === ${currentBlock} && ${name}) { @@ -69,8 +69,8 @@ export default { } ` ); - generator.current.teardownStatements.push( deindent` - if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} ); - ` ); + generator.current.builders.teardown.addLine( + `if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` + ); } }; diff --git a/src/generate/visitors/MustacheTag.js b/src/generate/visitors/MustacheTag.js index eb5b10bf73..0222d714b6 100644 --- a/src/generate/visitors/MustacheTag.js +++ b/src/generate/visitors/MustacheTag.js @@ -9,7 +9,7 @@ export default { generator.addElement( name, `document.createTextNode( ${snippet} )`, true ); - generator.current.updateStatements.push( deindent` + generator.current.builders.update.addBlock( deindent` ${name}.data = ${snippet}; ` ); } diff --git a/src/generate/visitors/RawMustacheTag.js b/src/generate/visitors/RawMustacheTag.js index cc989dc5e1..68314c9a23 100644 --- a/src/generate/visitors/RawMustacheTag.js +++ b/src/generate/visitors/RawMustacheTag.js @@ -24,22 +24,20 @@ export default { `; if ( isToplevel ) { - generator.current.mountStatements.push(mountStatement); + generator.current.builders.mount.addLine( mountStatement ); } else { generator.current.builders.init.addLine( mountStatement ); } - generator.current.updateStatements.push( deindent` - ${detachStatement} - ${mountStatement} - ` ); + generator.current.builders.update.addBlock( detachStatement ); + generator.current.builders.update.addBlock( mountStatement ); - if ( isToplevel ) { - const { detachStatements } = generator.current; - // we need `before` and `after` to still be in the DOM when running the - // detach code, so splice in the detach code *before* detaching - // `before`/`after`. - detachStatements.splice( detachStatements.length - 2, 0, detachStatement); - } + // if ( isToplevel ) { + // const { detachStatements } = generator.current; + // // we need `before` and `after` to still be in the DOM when running the + // // detach code, so splice in the detach code *before* detaching + // // `before`/`after`. + // detachStatements.splice( detachStatements.length - 2, 0, detachStatement); + // } } }; diff --git a/src/generate/visitors/YieldTag.js b/src/generate/visitors/YieldTag.js index 5ec8727ad1..68c850b66b 100644 --- a/src/generate/visitors/YieldTag.js +++ b/src/generate/visitors/YieldTag.js @@ -1,7 +1,13 @@ export default { enter ( generator ) { - const anchor = generator.createAnchor( 'yield', 'yield' ); - generator.current.mountStatements.push(`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`); - generator.current.teardownStatements.push(`component.yield && component.yield.teardown( detach );`); + const anchor = generator.createAnchor( 'yield', 'yield' ); + + generator.current.builders.mount.addLine( + `component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );` + ); + + generator.current.builders.teardown.addLine( + `component.yield && component.yield.teardown( detach );` + ); } }; diff --git a/src/utils/CodeBuilder.js b/src/utils/CodeBuilder.js index 269b413538..33abf15f9c 100644 --- a/src/utils/CodeBuilder.js +++ b/src/utils/CodeBuilder.js @@ -23,6 +23,10 @@ export default class CodeBuilder { this.last = BLOCK; } + isEmpty () { + return this.result === ''; + } + toString () { return this.result.trim(); } diff --git a/test/generator/hello-world/_config.js b/test/generator/hello-world/_config.js index 3771a01231..cc4f568358 100644 --- a/test/generator/hello-world/_config.js +++ b/test/generator/hello-world/_config.js @@ -2,12 +2,14 @@ export default { data: { name: 'world' }, + html: '

Hello world!

', test ( assert, component, target ) { component.set({ name: 'everybody' }); - assert.equal( target.innerHTML, '

Hello everybody!

' ); + assert.htmlEqual( target.innerHTML, '

Hello everybody!

' ); + component.teardown(); - assert.equal( target.innerHTML, '' ); + assert.htmlEqual( target.innerHTML, '' ); } }; diff --git a/test/generator/if-block-expression/_config.js b/test/generator/if-block-expression/_config.js index 489261e2af..9ce3ff2b52 100644 --- a/test/generator/if-block-expression/_config.js +++ b/test/generator/if-block-expression/_config.js @@ -1,3 +1,3 @@ export default { - html: '

two is greater than one

' + html: '

two is greater than one

' };