Skip to content

Commit f3f8584

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #751 from sveltejs/hoist-if-block-selectors
Hoist if block selectors
2 parents 4be3807 + fef2367 commit f3f8584

File tree

6 files changed

+58
-60
lines changed

6 files changed

+58
-60
lines changed

‎src/generators/dom/Block.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export default class Block {
184184
}
185185
}
186186

187-
render() {
187+
toString() {
188188
let introing;
189189
const hasIntros = !this.builders.intro.isEmpty();
190190
if (hasIntros) {

‎src/generators/dom/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Block from './Block';
1515
import { Parsed, CompileOptions, Node } from '../../interfaces';
1616

1717
export class DomGenerator extends Generator {
18-
blocks: Block[];
18+
blocks: (Block|string)[];
1919
readonly: Set<string>;
2020
metaBindings: string[];
2121

@@ -160,7 +160,7 @@ export default function dom(
160160
}
161161

162162
generator.blocks.forEach(block => {
163-
builder.addBlock(block.render());
163+
builder.addBlock(block.toString());
164164
});
165165

166166
const sharedPath = options.shared === true

‎src/generators/dom/visitors/Element/EventHandler.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,7 @@ export default function visitEventHandler(
9494
`;
9595

9696
if (shouldHoist) {
97-
generator.blocks.push(
98-
<Block>{
99-
render: () => handler,
100-
}
101-
);
97+
generator.blocks.push(handler);
10298
} else {
10399
block.builders.init.addBlock(handler);
104100
}

‎src/generators/dom/visitors/IfBlock.ts

+36-34
Original file line numberDiff line numberDiff line change
@@ -226,21 +226,23 @@ function compound(
226226
dynamic,
227227
{ name, anchor, params, hasElse, if_name }
228228
) {
229-
const get_block = block.getUniqueName(`get_block`);
230-
const current_block = block.getUniqueName(`current_block`);
231-
const current_block_and = hasElse ? '' : `${current_block} && `;
229+
const select_block_type = generator.getUniqueName(`select_block_type`);
230+
const current_block_type = block.getUniqueName(`current_block_type`);
231+
const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
232232

233-
block.builders.init.addBlock(deindent`
234-
function ${get_block} ( ${params} ) {
233+
generator.blocks.push(deindent`
234+
function ${select_block_type} ( ${params} ) {
235235
${branches
236236
.map(({ condition, block }) => {
237237
return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
238238
})
239239
.join('\n')}
240240
}
241+
`);
241242

242-
var ${current_block} = ${get_block}( ${params} );
243-
var ${name} = ${current_block_and}${current_block}( ${params}, #component );
243+
block.builders.init.addBlock(deindent`
244+
var ${current_block_type} = ${select_block_type}( ${params} );
245+
var ${name} = ${current_block_type_and}${current_block_type}( ${params}, #component );
244246
`);
245247

246248
const isTopLevel = !state.parentNode;
@@ -265,22 +267,22 @@ function compound(
265267
${name}.unmount();
266268
${name}.destroy();
267269
}`}
268-
${name} = ${current_block_and}${current_block}( ${params}, #component );
270+
${name} = ${current_block_type_and}${current_block_type}( ${params}, #component );
269271
${if_name}${name}.create();
270272
${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
271273
`;
272274

273275
if (dynamic) {
274276
block.builders.update.addBlock(deindent`
275-
if ( ${current_block} === ( ${current_block} = ${get_block}( ${params} ) ) && ${name} ) {
277+
if ( ${current_block_type} === ( ${current_block_type} = ${select_block_type}( ${params} ) ) && ${name} ) {
276278
${name}.update( changed, ${params} );
277279
} else {
278280
${changeBlock}
279281
}
280282
`);
281283
} else {
282284
block.builders.update.addBlock(deindent`
283-
if ( ${current_block} !== ( ${current_block} = ${get_block}( ${params} ) ) ) {
285+
if ( ${current_block_type} !== ( ${current_block_type} = ${select_block_type}( ${params} ) ) ) {
284286
${changeBlock}
285287
}
286288
`);
@@ -302,17 +304,17 @@ function compoundWithOutros(
302304
dynamic,
303305
{ name, anchor, params, hasElse }
304306
) {
305-
const get_block = block.getUniqueName(`get_block`);
306-
const current_block_index = block.getUniqueName(`current_block_index`);
307+
const select_block_type = block.getUniqueName(`select_block_type`);
308+
const current_block_type_index = block.getUniqueName(`current_block_type_index`);
307309
const previous_block_index = block.getUniqueName(`previous_block_index`);
308310
const if_block_creators = block.getUniqueName(`if_block_creators`);
309311
const if_blocks = block.getUniqueName(`if_blocks`);
310312

311-
const if_current_block_index = hasElse
313+
const if_current_block_type_index = hasElse
312314
? ''
313-
: `if ( ~${current_block_index} ) `;
315+
: `if ( ~${current_block_type_index} ) `;
314316

315-
block.addVariable(current_block_index);
317+
block.addVariable(current_block_type_index);
316318
block.addVariable(name);
317319

318320
block.builders.init.addBlock(deindent`
@@ -322,7 +324,7 @@ function compoundWithOutros(
322324
323325
var ${if_blocks} = [];
324326
325-
function ${get_block} ( ${params} ) {
327+
function ${select_block_type} ( ${params} ) {
326328
${branches
327329
.map(({ condition, block }, i) => {
328330
return `${condition ? `if ( ${condition} ) ` : ''}return ${block
@@ -335,13 +337,13 @@ function compoundWithOutros(
335337

336338
if (hasElse) {
337339
block.builders.init.addBlock(deindent`
338-
${current_block_index} = ${get_block}( ${params} );
339-
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
340+
${current_block_type_index} = ${select_block_type}( ${params} );
341+
${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component );
340342
`);
341343
} else {
342344
block.builders.init.addBlock(deindent`
343-
if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) {
344-
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
345+
if ( ~( ${current_block_type_index} = ${select_block_type}( ${params} ) ) ) {
346+
${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component );
345347
}
346348
`);
347349
}
@@ -352,7 +354,7 @@ function compoundWithOutros(
352354
const anchorNode = state.parentNode ? 'null' : 'anchor';
353355

354356
block.builders.mount.addLine(
355-
`${if_current_block_index}${if_blocks}[ ${current_block_index} ].${mountOrIntro}( ${targetNode}, ${anchorNode} );`
357+
`${if_current_block_type_index}${if_blocks}[ ${current_block_type_index} ].${mountOrIntro}( ${targetNode}, ${anchorNode} );`
356358
);
357359

358360
const parentNode = state.parentNode || `${anchor}.parentNode`;
@@ -366,9 +368,9 @@ function compoundWithOutros(
366368
`;
367369

368370
const createNewBlock = deindent`
369-
${name} = ${if_blocks}[ ${current_block_index} ];
371+
${name} = ${if_blocks}[ ${current_block_type_index} ];
370372
if ( !${name} ) {
371-
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
373+
${name} = ${if_blocks}[ ${current_block_type_index} ] = ${if_block_creators}[ ${current_block_type_index} ]( ${params}, #component );
372374
${name}.create();
373375
}
374376
${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
@@ -385,7 +387,7 @@ function compoundWithOutros(
385387
${destroyOldBlock}
386388
}
387389
388-
if ( ~${current_block_index} ) {
390+
if ( ~${current_block_type_index} ) {
389391
${createNewBlock}
390392
} else {
391393
${name} = null;
@@ -394,28 +396,28 @@ function compoundWithOutros(
394396

395397
if (dynamic) {
396398
block.builders.update.addBlock(deindent`
397-
var ${previous_block_index} = ${current_block_index};
398-
${current_block_index} = ${get_block}( ${params} );
399-
if ( ${current_block_index} === ${previous_block_index} ) {
400-
${if_current_block_index}${if_blocks}[ ${current_block_index} ].update( changed, ${params} );
399+
var ${previous_block_index} = ${current_block_type_index};
400+
${current_block_type_index} = ${select_block_type}( ${params} );
401+
if ( ${current_block_type_index} === ${previous_block_index} ) {
402+
${if_current_block_type_index}${if_blocks}[ ${current_block_type_index} ].update( changed, ${params} );
401403
} else {
402404
${changeBlock}
403405
}
404406
`);
405407
} else {
406408
block.builders.update.addBlock(deindent`
407-
var ${previous_block_index} = ${current_block_index};
408-
${current_block_index} = ${get_block}( ${params} );
409-
if ( ${current_block_index} !== ${previous_block_index} ) {
409+
var ${previous_block_index} = ${current_block_type_index};
410+
${current_block_type_index} = ${select_block_type}( ${params} );
411+
if ( ${current_block_type_index} !== ${previous_block_index} ) {
410412
${changeBlock}
411413
}
412414
`);
413415
}
414416

415417
block.builders.destroy.addLine(deindent`
416-
${if_current_block_index}{
417-
${if_blocks}[ ${current_block_index} ].unmount();
418-
${if_blocks}[ ${current_block_index} ].destroy();
418+
${if_current_block_type_index}{
419+
${if_blocks}[ ${current_block_type_index} ].unmount();
420+
${if_blocks}[ ${current_block_type_index} ].destroy();
419421
}
420422
`);
421423
}

‎test/js/samples/if-block-no-update/expected-bundle.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,8 @@ var proto = {
138138
function create_main_fragment ( state, component ) {
139139
var if_block_anchor;
140140

141-
function get_block ( state ) {
142-
if ( state.foo ) return create_if_block;
143-
return create_if_block_1;
144-
}
145-
146-
var current_block = get_block( state );
147-
var if_block = current_block( state, component );
141+
var current_block_type = select_block_type( state );
142+
var if_block = current_block_type( state, component );
148143

149144
return {
150145
create: function () {
@@ -158,10 +153,10 @@ function create_main_fragment ( state, component ) {
158153
},
159154

160155
update: function ( changed, state ) {
161-
if ( current_block !== ( current_block = get_block( state ) ) ) {
156+
if ( current_block_type !== ( current_block_type = select_block_type( state ) ) ) {
162157
if_block.unmount();
163158
if_block.destroy();
164-
if_block = current_block( state, component );
159+
if_block = current_block_type( state, component );
165160
if_block.create();
166161
if_block.mount( if_block_anchor.parentNode, if_block_anchor );
167162
}
@@ -222,6 +217,11 @@ function create_if_block_1 ( state, component ) {
222217
};
223218
}
224219

220+
function select_block_type ( state ) {
221+
if ( state.foo ) return create_if_block;
222+
return create_if_block_1;
223+
}
224+
225225
function SvelteComponent ( options ) {
226226
options = options || {};
227227
this._state = options.data || {};

‎test/js/samples/if-block-no-update/expected.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ import { appendNode, assign, createComment, createElement, createText, detachNod
33
function create_main_fragment ( state, component ) {
44
var if_block_anchor;
55

6-
function get_block ( state ) {
7-
if ( state.foo ) return create_if_block;
8-
return create_if_block_1;
9-
}
10-
11-
var current_block = get_block( state );
12-
var if_block = current_block( state, component );
6+
var current_block_type = select_block_type( state );
7+
var if_block = current_block_type( state, component );
138

149
return {
1510
create: function () {
@@ -23,10 +18,10 @@ function create_main_fragment ( state, component ) {
2318
},
2419

2520
update: function ( changed, state ) {
26-
if ( current_block !== ( current_block = get_block( state ) ) ) {
21+
if ( current_block_type !== ( current_block_type = select_block_type( state ) ) ) {
2722
if_block.unmount();
2823
if_block.destroy();
29-
if_block = current_block( state, component );
24+
if_block = current_block_type( state, component );
3025
if_block.create();
3126
if_block.mount( if_block_anchor.parentNode, if_block_anchor );
3227
}
@@ -87,6 +82,11 @@ function create_if_block_1 ( state, component ) {
8782
};
8883
}
8984

85+
function select_block_type ( state ) {
86+
if ( state.foo ) return create_if_block;
87+
return create_if_block_1;
88+
}
89+
9090
function SvelteComponent ( options ) {
9191
options = options || {};
9292
this._state = options.data || {};

0 commit comments

Comments
 (0)