Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hoist if block selectors #751

Merged
merged 3 commits into from
Aug 6, 2017
+58 −60
Merged

Hoist if block selectors #751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
177e7d0
hoist if block selectors
Rich-Harris Aug 5, 2017
c84f120
Merge branch 'master' into hoist-if-block-selectors
Rich-Harris Aug 5, 2017
fef2367
rename to select_block_type and current_block_type
Rich-Harris Aug 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/generators/dom/Block.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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