diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 4c494de794..f851727276 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 b9500e3491..825b5e2a2e 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..dfb6b3bfcd 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -226,21 +226,23 @@ function compound( dynamic, { name, anchor, params, hasElse, if_name } ) { - const get_block = block.getUniqueName(`get_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} && `; - block.builders.init.addBlock(deindent` - function ${get_block} ( ${params} ) { + generator.blocks.push(deindent` + function ${select_block_type} ( ${params} ) { ${branches .map(({ condition, block }) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`; }) .join('\n')} } + `); - var ${current_block} = ${get_block}( ${params} ); - var ${name} = ${current_block_and}${current_block}( ${params}, #component ); + block.builders.init.addBlock(deindent` + var ${current_block_type} = ${select_block_type}( ${params} ); + var ${name} = ${current_block_type_and}${current_block_type}( ${params}, #component ); `); const isTopLevel = !state.parentNode; @@ -265,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} = ${get_block}( ${params} ) ) && ${name} ) { + if ( ${current_block_type} === ( ${current_block_type} = ${select_block_type}( ${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_type} !== ( ${current_block_type} = ${select_block_type}( ${params} ) ) ) { ${changeBlock} } `); @@ -302,17 +304,17 @@ function compoundWithOutros( dynamic, { name, anchor, params, hasElse } ) { - const get_block = block.getUniqueName(`get_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` @@ -322,7 +324,7 @@ function compoundWithOutros( var ${if_blocks} = []; - function ${get_block} ( ${params} ) { + function ${select_block_type} ( ${params} ) { ${branches .map(({ condition, block }, i) => { return `${condition ? `if ( ${condition} ) ` : ''}return ${block @@ -335,13 +337,13 @@ function compoundWithOutros( if (hasElse) { block.builders.init.addBlock(deindent` - ${current_block_index} = ${get_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} = ${get_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 ); } `); } @@ -352,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`; @@ -366,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} ); @@ -385,7 +387,7 @@ function compoundWithOutros( ${destroyOldBlock} } - if ( ~${current_block_index} ) { + if ( ~${current_block_type_index} ) { ${createNewBlock} } else { ${name} = null; @@ -394,28 +396,28 @@ function compoundWithOutros( if (dynamic) { block.builders.update.addBlock(deindent` - var ${previous_block_index} = ${current_block_index}; - ${current_block_index} = ${get_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} = ${get_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 51895c4d5b..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,13 +138,8 @@ 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 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 () { @@ -158,10 +153,10 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = get_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 ); } @@ -222,6 +217,11 @@ function create_if_block_1 ( state, component ) { }; } +function select_block_type ( 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..e346847b37 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -3,13 +3,8 @@ 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 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 () { @@ -23,10 +18,10 @@ function create_main_fragment ( state, component ) { }, update: function ( changed, state ) { - if ( current_block !== ( current_block = get_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 ); } @@ -87,6 +82,11 @@ function create_if_block_1 ( state, component ) { }; } +function select_block_type ( state ) { + if ( state.foo ) return create_if_block; + return create_if_block_1; +} + function SvelteComponent ( options ) { options = options || {}; this._state = options.data || {};