Skip to content

Commit

Permalink
Merge pull request #751 from sveltejs/hoist-if-block-selectors
Browse files Browse the repository at this point in the history 
Hoist if block selectors
  • Loading branch information
@Rich-Harris
Rich-Harris authored Aug 6, 2017
2 parents 4be3807 + fef2367 commit f3f8584
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 60 deletions.
2 changes: 1 addition & 1 deletion src/generators/dom/Block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export default class Block {
}
}

render() {
toString() {
let introing;
const hasIntros = !this.builders.intro.isEmpty();
if (hasIntros) {
Expand Down
4 changes: 2 additions & 2 deletions src/generators/dom/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string>;
metaBindings: string[];

Expand Down Expand Up @@ -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
Expand Down
6 changes: 1 addition & 5 deletions src/generators/dom/visitors/Element/EventHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,7 @@ export default function visitEventHandler(
`;

if (shouldHoist) {
generator.blocks.push(
<Block>{
render: () => handler,
}
);
generator.blocks.push(handler);
} else {
block.builders.init.addBlock(handler);
}
Expand Down
70 changes: 36 additions & 34 deletions src/generators/dom/visitors/IfBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -265,22 +267,22 @@ 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}
}
`);
} 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}
}
`);
Expand All @@ -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`
Expand All @@ -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
Expand All @@ -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 );
}
`);
}
Expand All @@ -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`;
Expand All @@ -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} );
Expand All @@ -385,7 +387,7 @@ function compoundWithOutros(
${destroyOldBlock}
}
if ( ~${current_block_index} ) {
if ( ~${current_block_type_index} ) {
${createNewBlock}
} else {
${name} = null;
Expand All @@ -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();
}
`);
}
18 changes: 9 additions & 9 deletions test/js/samples/if-block-no-update/expected-bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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 );
}
Expand Down Expand Up @@ -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 || {};
Expand Down
18 changes: 9 additions & 9 deletions test/js/samples/if-block-no-update/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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 );
}
Expand Down Expand Up @@ -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 || {};
Expand Down

0 comments on commit f3f8584

Please sign in to comment.