msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #751 from sveltejs/hoist-if-block-selectors

Browse Source 
Hoist if block selectors
pull/754/head
Rich Harris 7 years ago committed by GitHub
parent 4be380744f fef2367c11
commit f3f85841a5
6 changed files with 58 additions and 60 deletions
Show Stats Download Patch File Download Diff File

2
src/generators/dom/Block.ts
Unescape View File

@ -184,7 +184,7 @@ export default class Block {
} }
} }
render() { toString() {
let introing; let introing;
const hasIntros = !this.builders.intro.isEmpty(); const hasIntros = !this.builders.intro.isEmpty();
if (hasIntros) { if (hasIntros) {

4
src/generators/dom/index.ts
Unescape View File

@ -15,7 +15,7 @@ import Block from './Block';
import { Parsed, CompileOptions, Node } from '../../interfaces'; import { Parsed, CompileOptions, Node } from '../../interfaces';
export class DomGenerator extends Generator { export class DomGenerator extends Generator {
blocks: Block[]; blocks: (Block|string)[];
readonly: Set<string>; readonly: Set<string>;
metaBindings: string[]; metaBindings: string[];
@ -160,7 +160,7 @@ export default function dom(
} }
generator.blocks.forEach(block => { generator.blocks.forEach(block => {
builder.addBlock(block.render()); builder.addBlock(block.toString());
}); });
const sharedPath = options.shared === true const sharedPath = options.shared === true

6
src/generators/dom/visitors/Element/EventHandler.ts
Unescape View File

@ -94,11 +94,7 @@ export default function visitEventHandler(
`; `;
if (shouldHoist) { if (shouldHoist) {
generator.blocks.push( generator.blocks.push(handler);
<Block>{
render: () => handler,
}
);
} else { } else {
block.builders.init.addBlock(handler); block.builders.init.addBlock(handler);
} }

70
src/generators/dom/visitors/IfBlock.ts
Unescape View File

@ -226,21 +226,23 @@ function compound(
dynamic, dynamic,
{ name, anchor, params, hasElse, if_name } { name, anchor, params, hasElse, if_name }
) { ) {
const get_block = block.getUniqueName(`get_block`); const select_block_type = generator.getUniqueName(`select_block_type`);
const current_block = block.getUniqueName(`current_block`); const current_block_type = block.getUniqueName(`current_block_type`);
const current_block_and = hasElse ? '' : `${current_block} && `; const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
block.builders.init.addBlock(deindent` generator.blocks.push(deindent`
function ${get_block} ( ${params} ) { function ${select_block_type} ( ${params} ) {
${branches ${branches
.map(({ condition, block }) => { .map(({ condition, block }) => {
return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`; return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
}) })
.join('\n')} .join('\n')}
} }
`);
var ${current_block} = ${get_block}( ${params} ); block.builders.init.addBlock(deindent`
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; const isTopLevel = !state.parentNode;
@ -265,14 +267,14 @@ function compound(
${name}.unmount(); ${name}.unmount();
${name}.destroy(); ${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}.create();
${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
`; `;
if (dynamic) { if (dynamic) {
block.builders.update.addBlock(deindent` 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} ); ${name}.update( changed, ${params} );
} else { } else {
${changeBlock} ${changeBlock}
@ -280,7 +282,7 @@ function compound(
`); `);
} else { } else {
block.builders.update.addBlock(deindent` 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} ${changeBlock}
} }
`); `);
@ -302,17 +304,17 @@ function compoundWithOutros(
dynamic, dynamic,
{ name, anchor, params, hasElse } { name, anchor, params, hasElse }
) { ) {
const get_block = block.getUniqueName(`get_block`); const select_block_type = block.getUniqueName(`select_block_type`);
const current_block_index = block.getUniqueName(`current_block_index`); const current_block_type_index = block.getUniqueName(`current_block_type_index`);
const previous_block_index = block.getUniqueName(`previous_block_index`); const previous_block_index = block.getUniqueName(`previous_block_index`);
const if_block_creators = block.getUniqueName(`if_block_creators`); const if_block_creators = block.getUniqueName(`if_block_creators`);
const if_blocks = block.getUniqueName(`if_blocks`); 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.addVariable(name);
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
@ -322,7 +324,7 @@ function compoundWithOutros(
var ${if_blocks} = []; var ${if_blocks} = [];
function ${get_block} ( ${params} ) { function ${select_block_type} ( ${params} ) {
${branches ${branches
.map(({ condition, block }, i) => { .map(({ condition, block }, i) => {
return `${condition ? `if ( ${condition} ) ` : ''}return ${block return `${condition ? `if ( ${condition} ) ` : ''}return ${block
@ -335,13 +337,13 @@ function compoundWithOutros(
if (hasElse) { if (hasElse) {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
${current_block_index} = ${get_block}( ${params} ); ${current_block_type_index} = ${select_block_type}( ${params} );
${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 );
`); `);
} else { } else {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) { if ( ~( ${current_block_type_index} = ${select_block_type}( ${params} ) ) ) {
${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 );
} }
`); `);
} }
@ -352,7 +354,7 @@ function compoundWithOutros(
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.mount.addLine( 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`; const parentNode = state.parentNode || `${anchor}.parentNode`;
@ -366,9 +368,9 @@ function compoundWithOutros(
`; `;
const createNewBlock = deindent` const createNewBlock = deindent`
${name} = ${if_blocks}[ ${current_block_index} ]; ${name} = ${if_blocks}[ ${current_block_type_index} ];
if ( !${name} ) { 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}.create();
} }
${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
@ -385,7 +387,7 @@ function compoundWithOutros(
${destroyOldBlock} ${destroyOldBlock}
} }
if ( ~${current_block_index} ) { if ( ~${current_block_type_index} ) {
${createNewBlock} ${createNewBlock}
} else { } else {
${name} = null; ${name} = null;
@ -394,28 +396,28 @@ function compoundWithOutros(
if (dynamic) { if (dynamic) {
block.builders.update.addBlock(deindent` block.builders.update.addBlock(deindent`
var ${previous_block_index} = ${current_block_index}; var ${previous_block_index} = ${current_block_type_index};
${current_block_index} = ${get_block}( ${params} ); ${current_block_type_index} = ${select_block_type}( ${params} );
if ( ${current_block_index} === ${previous_block_index} ) { if ( ${current_block_type_index} === ${previous_block_index} ) {
${if_current_block_index}${if_blocks}[ ${current_block_index} ].update( changed, ${params} ); ${if_current_block_type_index}${if_blocks}[ ${current_block_type_index} ].update( changed, ${params} );
} else { } else {
${changeBlock} ${changeBlock}
} }
`); `);
} else { } else {
block.builders.update.addBlock(deindent` block.builders.update.addBlock(deindent`
var ${previous_block_index} = ${current_block_index}; var ${previous_block_index} = ${current_block_type_index};
${current_block_index} = ${get_block}( ${params} ); ${current_block_type_index} = ${select_block_type}( ${params} );
if ( ${current_block_index} !== ${previous_block_index} ) { if ( ${current_block_type_index} !== ${previous_block_index} ) {
${changeBlock} ${changeBlock}
} }
`); `);
} }
block.builders.destroy.addLine(deindent` block.builders.destroy.addLine(deindent`
${if_current_block_index}{ ${if_current_block_type_index}{
${if_blocks}[ ${current_block_index} ].unmount(); ${if_blocks}[ ${current_block_type_index} ].unmount();
${if_blocks}[ ${current_block_index} ].destroy(); ${if_blocks}[ ${current_block_type_index} ].destroy();
} }
`); `);
} }

18
test/js/samples/if-block-no-update/expected-bundle.js
Unescape View File

@ -138,13 +138,8 @@ var proto = {
function create_main_fragment ( state, component ) { function create_main_fragment ( state, component ) {
var if_block_anchor; var if_block_anchor;
function get_block ( state ) { var current_block_type = select_block_type( state );
if ( state.foo ) return create_if_block; var if_block = current_block_type( state, component );
return create_if_block_1;
}
var current_block = get_block( state );
var if_block = current_block( state, component );
return { return {
create: function () { create: function () {
@ -158,10 +153,10 @@ function create_main_fragment ( state, component ) {
}, },
update: function ( changed, state ) { 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.unmount();
if_block.destroy(); if_block.destroy();
if_block = current_block( state, component ); if_block = current_block_type( state, component );
if_block.create(); if_block.create();
if_block.mount( if_block_anchor.parentNode, if_block_anchor ); 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 ) { function SvelteComponent ( options ) {
options = options || {}; options = options || {};
this._state = options.data || {}; this._state = options.data || {};

18
test/js/samples/if-block-no-update/expected.js
Unescape View File

@ -3,13 +3,8 @@ import { appendNode, assign, createComment, createElement, createText, detachNod
function create_main_fragment ( state, component ) { function create_main_fragment ( state, component ) {
var if_block_anchor; var if_block_anchor;
function get_block ( state ) { var current_block_type = select_block_type( state );
if ( state.foo ) return create_if_block; var if_block = current_block_type( state, component );
return create_if_block_1;
}
var current_block = get_block( state );
var if_block = current_block( state, component );
return { return {
create: function () { create: function () {
@ -23,10 +18,10 @@ function create_main_fragment ( state, component ) {
}, },
update: function ( changed, state ) { 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.unmount();
if_block.destroy(); if_block.destroy();
if_block = current_block( state, component ); if_block = current_block_type( state, component );
if_block.create(); if_block.create();
if_block.mount( if_block_anchor.parentNode, if_block_anchor ); 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 ) { function SvelteComponent ( options ) {
options = options || {}; options = options || {};
this._state = options.data || {}; this._state = options.data || {};

Write Preview
Loading…
Cancel
Save