From 177e7d09c3ab71d854615e351168c46afaf7ece6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 5 Aug 2017 10:53:23 -0400 Subject: [PATCH 1/2] hoist if block selectors --- src/generators/dom/Block.ts | 2 +- src/generators/dom/index.ts | 4 +-- .../dom/visitors/Element/EventHandler.ts | 6 +---- src/generators/dom/visitors/IfBlock.ts | 26 ++++++++++--------- .../if-block-no-update/expected-bundle.js | 14 +++++----- .../js/samples/if-block-no-update/expected.js | 14 +++++----- 6 files changed, 32 insertions(+), 34 deletions(-) diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 70323ae5cf..c0c32a45aa 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -184,7 +184,7 @@ export default class Block { } } - render() { + toString() { let introing; const hasIntros = !this.builders.intro.isEmpty(); if (hasIntros) { diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index e2cbc4751c..de7ff1fc96 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -15,7 +15,7 @@ import Block from './Block'; import { Parsed, CompileOptions, Node } from '../../interfaces'; export class DomGenerator extends Generator { - blocks: Block[]; + blocks: (Block|string)[]; readonly: Set; metaBindings: string[]; @@ -160,7 +160,7 @@ export default function dom( } generator.blocks.forEach(block => { - builder.addBlock(block.render()); + builder.addBlock(block.toString()); }); const sharedPath = options.shared === true diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts index 56fdb42a87..9e7df71143 100644 --- a/src/generators/dom/visitors/Element/EventHandler.ts +++ b/src/generators/dom/visitors/Element/EventHandler.ts @@ -94,11 +94,7 @@ export default function visitEventHandler( `; if (shouldHoist) { - generator.blocks.push( - { - render: () => handler, - } - ); + generator.blocks.push(handler); } else { block.builders.init.addBlock(handler); } diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index 75b88e363f..42fe054439 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -226,20 +226,22 @@ function compound( dynamic, { name, anchor, params, hasElse, if_name } ) { - const get_block = block.getUniqueName(`get_block`); + const select_block = generator.getUniqueName(`select_block`); const current_block = block.getUniqueName(`current_block`); const current_block_and = hasElse ? '' : `${current_block} && `; - block.builders.init.addBlock(deindent` - function ${get_block} ( ${params} ) { + generator.blocks.push(deindent` + function ${select_block} ( ${params} ) { ${branches .map(({ condition, block }) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`; }) .join('\n')} } + `); - var ${current_block} = ${get_block}( ${params} ); + block.builders.init.addBlock(deindent` + var ${current_block} = ${select_block}( ${params} ); var ${name} = ${current_block_and}${current_block}( ${params}, #component ); `); @@ -272,7 +274,7 @@ function compound( if (dynamic) { block.builders.update.addBlock(deindent` - if ( ${current_block} === ( ${current_block} = ${get_block}( ${params} ) ) && ${name} ) { + if ( ${current_block} === ( ${current_block} = ${select_block}( ${params} ) ) && ${name} ) { ${name}.update( changed, ${params} ); } else { ${changeBlock} @@ -280,7 +282,7 @@ function compound( `); } else { block.builders.update.addBlock(deindent` - if ( ${current_block} !== ( ${current_block} = ${get_block}( ${params} ) ) ) { + if ( ${current_block} !== ( ${current_block} = ${select_block}( ${params} ) ) ) { ${changeBlock} } `); @@ -302,7 +304,7 @@ function compoundWithOutros( dynamic, { name, anchor, params, hasElse } ) { - const get_block = block.getUniqueName(`get_block`); + const select_block = block.getUniqueName(`select_block`); const current_block_index = block.getUniqueName(`current_block_index`); const previous_block_index = block.getUniqueName(`previous_block_index`); const if_block_creators = block.getUniqueName(`if_block_creators`); @@ -322,7 +324,7 @@ function compoundWithOutros( var ${if_blocks} = []; - function ${get_block} ( ${params} ) { + function ${select_block} ( ${params} ) { ${branches .map(({ condition, block }, i) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block @@ -335,12 +337,12 @@ function compoundWithOutros( if (hasElse) { block.builders.init.addBlock(deindent` - ${current_block_index} = ${get_block}( ${params} ); + ${current_block_index} = ${select_block}( ${params} ); ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component ); `); } else { block.builders.init.addBlock(deindent` - if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) { + if ( ~( ${current_block_index} = ${select_block}( ${params} ) ) ) { ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component ); } `); @@ -395,7 +397,7 @@ function compoundWithOutros( if (dynamic) { block.builders.update.addBlock(deindent` var ${previous_block_index} = ${current_block_index}; - ${current_block_index} = ${get_block}( ${params} ); + ${current_block_index} = ${select_block}( ${params} ); if ( ${current_block_index} === ${previous_block_index} ) { ${if_current_block_index}${if_blocks}[ ${current_block_index} ].update( changed, ${params} ); } else { @@ -405,7 +407,7 @@ function compoundWithOutros( } else { block.builders.update.addBlock(deindent` var ${previous_block_index} = ${current_block_index}; - ${current_block_index} = ${get_block}( ${params} ); + ${current_block_index} = ${select_block}( ${params} ); if ( ${current_block_index} !== ${previous_block_index} ) { ${changeBlock} } diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js index 51895c4d5b..bc0a724ccf 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -138,12 +138,7 @@ var proto = { function create_main_fragment ( state, component ) { var if_block_anchor; - function get_block ( state ) { - if ( state.foo ) return create_if_block; - return create_if_block_1; - } - - var current_block = get_block( state ); + var current_block = select_block( state ); var if_block = current_block( state, component ); return { @@ -158,7 +153,7 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = get_block( state ) ) ) { + if ( current_block !== ( current_block = select_block( state ) ) ) { if_block.unmount(); if_block.destroy(); if_block = current_block( state, component ); @@ -222,6 +217,11 @@ function create_if_block_1 ( state, component ) { }; } +function select_block ( state ) { + if ( state.foo ) return create_if_block; + return create_if_block_1; +} + function SvelteComponent ( options ) { options = options || {}; this._state = options.data || {}; diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 2d8972ad5e..795dc8f200 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -3,12 +3,7 @@ import { appendNode, assign, createComment, createElement, createText, detachNod function create_main_fragment ( state, component ) { var if_block_anchor; - function get_block ( state ) { - if ( state.foo ) return create_if_block; - return create_if_block_1; - } - - var current_block = get_block( state ); + var current_block = select_block( state ); var if_block = current_block( state, component ); return { @@ -23,7 +18,7 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = get_block( state ) ) ) { + if ( current_block !== ( current_block = select_block( state ) ) ) { if_block.unmount(); if_block.destroy(); if_block = current_block( state, component ); @@ -87,6 +82,11 @@ function create_if_block_1 ( state, component ) { }; } +function select_block ( state ) { + if ( state.foo ) return create_if_block; + return create_if_block_1; +} + function SvelteComponent ( options ) { options = options || {}; this._state = options.data || {}; From fef2367c1189fa2ede0d8b8574cb11c3ecb69e8a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 5 Aug 2017 10:58:39 -0400 Subject: [PATCH 2/2] rename to select_block_type and current_block_type --- src/generators/dom/visitors/IfBlock.ts | 66 +++++++++---------- .../if-block-no-update/expected-bundle.js | 10 +-- .../js/samples/if-block-no-update/expected.js | 10 +-- 3 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index 42fe054439..dfb6b3bfcd 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -226,12 +226,12 @@ function compound( dynamic, { name, anchor, params, hasElse, if_name } ) { - const select_block = generator.getUniqueName(`select_block`); - const current_block = block.getUniqueName(`current_block`); - const current_block_and = hasElse ? '' : `${current_block} && `; + const select_block_type = generator.getUniqueName(`select_block_type`); + const current_block_type = block.getUniqueName(`current_block_type`); + const current_block_type_and = hasElse ? '' : `${current_block_type} && `; generator.blocks.push(deindent` - function ${select_block} ( ${params} ) { + function ${select_block_type} ( ${params} ) { ${branches .map(({ condition, block }) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`; @@ -241,8 +241,8 @@ function compound( `); block.builders.init.addBlock(deindent` - var ${current_block} = ${select_block}( ${params} ); - var ${name} = ${current_block_and}${current_block}( ${params}, #component ); + var ${current_block_type} = ${select_block_type}( ${params} ); + var ${name} = ${current_block_type_and}${current_block_type}( ${params}, #component ); `); const isTopLevel = !state.parentNode; @@ -267,14 +267,14 @@ function compound( ${name}.unmount(); ${name}.destroy(); }`} - ${name} = ${current_block_and}${current_block}( ${params}, #component ); + ${name} = ${current_block_type_and}${current_block_type}( ${params}, #component ); ${if_name}${name}.create(); ${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); `; if (dynamic) { block.builders.update.addBlock(deindent` - if ( ${current_block} === ( ${current_block} = ${select_block}( ${params} ) ) && ${name} ) { + if ( ${current_block_type} === ( ${current_block_type} = ${select_block_type}( ${params} ) ) && ${name} ) { ${name}.update( changed, ${params} ); } else { ${changeBlock} @@ -282,7 +282,7 @@ function compound( `); } else { block.builders.update.addBlock(deindent` - if ( ${current_block} !== ( ${current_block} = ${select_block}( ${params} ) ) ) { + if ( ${current_block_type} !== ( ${current_block_type} = ${select_block_type}( ${params} ) ) ) { ${changeBlock} } `); @@ -304,17 +304,17 @@ function compoundWithOutros( dynamic, { name, anchor, params, hasElse } ) { - const select_block = block.getUniqueName(`select_block`); - const current_block_index = block.getUniqueName(`current_block_index`); + const select_block_type = block.getUniqueName(`select_block_type`); + const current_block_type_index = block.getUniqueName(`current_block_type_index`); const previous_block_index = block.getUniqueName(`previous_block_index`); const if_block_creators = block.getUniqueName(`if_block_creators`); const if_blocks = block.getUniqueName(`if_blocks`); - const if_current_block_index = hasElse + const if_current_block_type_index = hasElse ? '' - : `if ( ~${current_block_index} ) `; + : `if ( ~${current_block_type_index} ) `; - block.addVariable(current_block_index); + block.addVariable(current_block_type_index); block.addVariable(name); block.builders.init.addBlock(deindent` @@ -324,7 +324,7 @@ function compoundWithOutros( var ${if_blocks} = []; - function ${select_block} ( ${params} ) { + function ${select_block_type} ( ${params} ) { ${branches .map(({ condition, block }, i) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block @@ -337,13 +337,13 @@ function compoundWithOutros( if (hasElse) { block.builders.init.addBlock(deindent` - ${current_block_index} = ${select_block}( ${params} ); - ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component ); + ${current_block_type_index} = ${select_block_type}( ${params} ); + ${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component ); `); } else { block.builders.init.addBlock(deindent` - if ( ~( ${current_block_index} = ${select_block}( ${params} ) ) ) { - ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component ); + if ( ~( ${current_block_type_index} = ${select_block_type}( ${params} ) ) ) { + ${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component ); } `); } @@ -354,7 +354,7 @@ function compoundWithOutros( const anchorNode = state.parentNode ? 'null' : 'anchor'; block.builders.mount.addLine( - `${if_current_block_index}${if_blocks}[ ${current_block_index} ].${mountOrIntro}( ${targetNode}, ${anchorNode} );` + `${if_current_block_type_index}${if_blocks}[ ${current_block_type_index} ].${mountOrIntro}( ${targetNode}, ${anchorNode} );` ); const parentNode = state.parentNode || `${anchor}.parentNode`; @@ -368,9 +368,9 @@ function compoundWithOutros( `; const createNewBlock = deindent` - ${name} = ${if_blocks}[ ${current_block_index} ]; + ${name} = ${if_blocks}[ ${current_block_type_index} ]; if ( !${name} ) { - ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component ); + ${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component ); ${name}.create(); } ${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); @@ -387,7 +387,7 @@ function compoundWithOutros( ${destroyOldBlock} } - if ( ~${current_block_index} ) { + if ( ~${current_block_type_index} ) { ${createNewBlock} } else { ${name} = null; @@ -396,28 +396,28 @@ function compoundWithOutros( if (dynamic) { block.builders.update.addBlock(deindent` - var ${previous_block_index} = ${current_block_index}; - ${current_block_index} = ${select_block}( ${params} ); - if ( ${current_block_index} === ${previous_block_index} ) { - ${if_current_block_index}${if_blocks}[ ${current_block_index} ].update( changed, ${params} ); + var ${previous_block_index} = ${current_block_type_index}; + ${current_block_type_index} = ${select_block_type}( ${params} ); + if ( ${current_block_type_index} === ${previous_block_index} ) { + ${if_current_block_type_index}${if_blocks}[ ${current_block_type_index} ].update( changed, ${params} ); } else { ${changeBlock} } `); } else { block.builders.update.addBlock(deindent` - var ${previous_block_index} = ${current_block_index}; - ${current_block_index} = ${select_block}( ${params} ); - if ( ${current_block_index} !== ${previous_block_index} ) { + var ${previous_block_index} = ${current_block_type_index}; + ${current_block_type_index} = ${select_block_type}( ${params} ); + if ( ${current_block_type_index} !== ${previous_block_index} ) { ${changeBlock} } `); } block.builders.destroy.addLine(deindent` - ${if_current_block_index}{ - ${if_blocks}[ ${current_block_index} ].unmount(); - ${if_blocks}[ ${current_block_index} ].destroy(); + ${if_current_block_type_index}{ + ${if_blocks}[ ${current_block_type_index} ].unmount(); + ${if_blocks}[ ${current_block_type_index} ].destroy(); } `); } diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js index bc0a724ccf..73ac6bcf63 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -138,8 +138,8 @@ var proto = { function create_main_fragment ( state, component ) { var if_block_anchor; - var current_block = select_block( state ); - var if_block = current_block( state, component ); + var current_block_type = select_block_type( state ); + var if_block = current_block_type( state, component ); return { create: function () { @@ -153,10 +153,10 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = select_block( state ) ) ) { + if ( current_block_type !== ( current_block_type = select_block_type( state ) ) ) { if_block.unmount(); if_block.destroy(); - if_block = current_block( state, component ); + if_block = current_block_type( state, component ); if_block.create(); if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } @@ -217,7 +217,7 @@ function create_if_block_1 ( state, component ) { }; } -function select_block ( state ) { +function select_block_type ( state ) { if ( state.foo ) return create_if_block; return create_if_block_1; } diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 795dc8f200..e346847b37 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -3,8 +3,8 @@ import { appendNode, assign, createComment, createElement, createText, detachNod function create_main_fragment ( state, component ) { var if_block_anchor; - var current_block = select_block( state ); - var if_block = current_block( state, component ); + var current_block_type = select_block_type( state ); + var if_block = current_block_type( state, component ); return { create: function () { @@ -18,10 +18,10 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = select_block( state ) ) ) { + if ( current_block_type !== ( current_block_type = select_block_type( state ) ) ) { if_block.unmount(); if_block.destroy(); - if_block = current_block( state, component ); + if_block = current_block_type( state, component ); if_block.create(); if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } @@ -82,7 +82,7 @@ function create_if_block_1 ( state, component ) { }; } -function select_block ( state ) { +function select_block_type ( state ) { if ( state.foo ) return create_if_block; return create_if_block_1; }