Skip to content

Commit 266e894

Browse files
mrkishimrkishi
committed
Remove closures from fragments, naively
1 parent 2616dc0 commit 266e894

File tree

12 files changed

+130
-125
lines changed

12 files changed

+130
-125
lines changed

‎compiler/generate/index.js‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,29 @@ export default function generate ( parsed, source, options, names ) {
1818
const isToplevel = generator.current.localElementDepth === 0;
1919
if ( needsIdentifier || isToplevel ) {
2020
generator.current.initStatements.push( deindent`
21-
var ${name} = ${renderStatement};
21+
this.${name} = ${renderStatement};
2222
` );
2323
generator.createMountStatement( name );
2424
} else {
2525
generator.current.initStatements.push( deindent`
26-
${generator.current.target}.appendChild( ${renderStatement} );
26+
this.${generator.current.target}.appendChild( ${renderStatement} );
2727
` );
2828
}
2929
if ( isToplevel ) {
3030
generator.current.detachStatements.push( deindent`
31-
${name}.parentNode.removeChild( ${name} );
31+
this.${name}.parentNode.removeChild( this.${name} );
3232
` );
3333
}
3434
},
3535

3636
createMountStatement ( name ) {
3737
if ( generator.current.target === 'target' ) {
3838
generator.current.mountStatements.push( deindent`
39-
target.insertBefore( ${name}, anchor );
39+
target.insertBefore( this.${name}, anchor );
4040
` );
4141
} else {
4242
generator.current.initStatements.push( deindent`
43-
${generator.current.target}.appendChild( ${name} );
43+
this.${generator.current.target}.appendChild( this.${name} );
4444
` );
4545
}
4646
},
@@ -54,7 +54,7 @@ export default function generate ( parsed, source, options, names ) {
5454

5555
addRenderer ( fragment ) {
5656
if ( fragment.autofocus ) {
57-
fragment.initStatements.push( `${fragment.autofocus}.focus();` );
57+
fragment.initStatements.push( `this.${fragment.autofocus}.focus();` );
5858
}
5959

6060
const detachStatements = fragment.detachStatements.join( '\n\n' );
@@ -72,22 +72,24 @@ export default function generate ( parsed, source, options, names ) {
7272

7373
renderers.push( deindent`
7474
function ${fragment.name} ( ${fragment.params}, component ) {
75+
this.component = component;
76+
7577
${fragment.initStatements.join( '\n\n' )}
78+
}
7679
77-
return {
78-
mount: function ( target, anchor ) {
79-
${fragment.mountStatements.join( '\n\n' )}
80-
},
80+
${fragment.name}.prototype = {
81+
mount: function mount ( target, anchor ) {
82+
${fragment.mountStatements.join( '\n\n' )}
83+
},
8184
82-
update: function ( changed, ${fragment.params} ) {
83-
${fragment.updateStatements.join( '\n\n' )}
84-
},
85+
update: function update ( changed, ${fragment.params} ) {
86+
${fragment.updateStatements.join( '\n\n' )}
87+
},
8588
86-
teardown: function ( detach ) {
87-
${teardownBlock}
88-
}
89-
};
90-
}
89+
teardown: function teardown ( detach ) {
90+
${teardownBlock}
91+
}
92+
};
9193
` );
9294
},
9395

@@ -257,7 +259,7 @@ export default function generate ( parsed, source, options, names ) {
257259

258260
generator.push({
259261
useAnchor: false,
260-
name: 'renderMainFragment',
262+
name: 'MainFragment',
261263
namespace: null,
262264
target: 'target',
263265
elementDepth: 0,
@@ -394,15 +396,15 @@ export default function generate ( parsed, source, options, names ) {
394396
if ( generator.hasComplexBindings ) {
395397
initStatements.push( deindent`
396398
this.__bindings = [];
397-
this.mainFragment = renderMainFragment( this.state, this );
399+
this.mainFragment = new MainFragment( this.state, this );
398400
if ( options.target ) this.mount( options.target );
399401
while ( this.__bindings.length ) this.__bindings.pop()();
400402
` );
401403

402404
setStatements.push( `while ( this.__bindings.length ) this.__bindings.pop()();` );
403405
} else {
404406
initStatements.push( deindent`
405-
this.mainFragment = renderMainFragment( this.state, this );
407+
this.mainFragment = new MainFragment( this.state, this );
406408
if ( options.target ) this.mount( options.target );
407409
` );
408410
}
@@ -448,7 +450,7 @@ export default function generate ( parsed, source, options, names ) {
448450
449451
${initStatements.join( '\n\n' )}
450452
}
451-
453+
452454
${constructorName}.prototype = {
453455
454456
dispatchObservers: function dispatchObservers ( group, newState, oldState ) {

‎compiler/generate/visitors/Component.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export default {
2727
addComponentAttributes( generator, node, local );
2828

2929
const componentInitProperties = [
30-
`target: ${!isToplevel ? generator.current.target: 'null'}`,
30+
`target: ${!isToplevel ? `this.${generator.current.target}` : 'null'}`,
3131
'root: component.root || component'
3232
];
3333
// Component has children
3434
if ( hasChildren ) {
35-
const yieldName = generator.current.getUniqueName( `render${name}YieldFragment` );
35+
const yieldName = generator.current.getUniqueName( `${name}YieldFragment` );
3636

3737
// {{YIELD STUFF}}
3838
generator.push({
@@ -57,10 +57,10 @@ export default {
5757
// Don't render children twice
5858
node.children = [];
5959

60-
generator.current.initStatements.push(`var ${name}_yieldFragment = ${yieldName}( root, component );`);
61-
generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`);
60+
generator.current.initStatements.push(`this.${name}_yieldFragment = new ${yieldName}( root, component );`);
61+
generator.current.updateStatements.push(`this.${name}_yieldFragment.update ( changed, root );`);
6262

63-
componentInitProperties.push(`yield: ${name}_yieldFragment`);
63+
componentInitProperties.push(`yield: this.${name}_yieldFragment`);
6464
}
6565

6666
const statements = [];
@@ -94,13 +94,13 @@ export default {
9494

9595
local.init.unshift( deindent`
9696
${statements.join( '\n\n' )}
97-
var ${name} = new template.components.${node.name}({
97+
this.${name} = new template.components.${node.name}({
9898
${componentInitProperties.join(',\n')}
9999
});
100100
` );
101101

102102
if ( isToplevel ) {
103-
local.mount.unshift( `${name}.mount( target, anchor );` );
103+
local.mount.unshift( `this.${name}.mount( target, anchor );` );
104104
}
105105

106106
if ( local.dynamicAttributes.length ) {
@@ -121,11 +121,11 @@ export default {
121121
122122
${updates.join( '\n' )}
123123
124-
if ( Object.keys( ${name}_changes ).length ) ${name}.set( ${name}_changes );
124+
if ( Object.keys( ${name}_changes ).length ) this.${name}.set( ${name}_changes );
125125
` );
126126
}
127127

128-
local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` );
128+
local.teardown.push( `this.${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` );
129129

130130
generator.current.initStatements.push( local.init.join( '\n' ) );
131131
if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) );

‎compiler/generate/visitors/EachBlock.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import deindent from '../utils/deindent.js';
33
export default {
44
enter ( generator, node ) {
55
const name = generator.getUniqueName( `eachBlock` );
6-
const renderer = generator.getUniqueName( `renderEachBlock` );
6+
const renderer = generator.getUniqueName( `EachBlock` );
77
const elseName = `${name}_else`;
88
const iterations = `${name}_iterations`;
99
const renderElse = `${renderer}_else`;
@@ -22,33 +22,33 @@ export default {
2222

2323
generator.current.initStatements.push( deindent`
2424
var ${name}_value = ${snippet};
25-
var ${iterations} = [];
26-
${node.else ? `var ${elseName} = null;` : ''}
25+
this.${iterations} = [];
26+
${node.else ? `this.${elseName} = null;` : ''}
2727
2828
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
29-
${iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
30-
${!isToplevel ? `${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );` : ''}
29+
this.${iterations}[${i}] = new ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
30+
${!isToplevel ? `this.${iterations}[${i}].mount( this.${anchor}.parentNode, this.${anchor} );` : ''}
3131
}
3232
` );
3333
if ( node.else ) {
3434
generator.current.initStatements.push( deindent`
3535
if ( !${name}_value.length ) {
36-
${elseName} = ${renderElse}( ${params}, component );
37-
${!isToplevel ? `${elseName}.mount( ${anchor}.parentNode, ${anchor} );` : ''}
36+
this.${elseName} = new ${renderElse}( ${params}, component );
37+
${!isToplevel ? `${elseName}.mount( this.${anchor}.parentNode, this.${anchor} );` : ''}
3838
}
3939
` );
4040
}
4141

4242
if ( isToplevel ) {
4343
generator.current.mountStatements.push( deindent`
44-
for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
45-
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
44+
for ( var ${i} = 0; ${i} < this.${iterations}.length; ${i} += 1 ) {
45+
this.${iterations}[${i}].mount( this.${anchor}.parentNode, this.${anchor} );
4646
}
4747
` );
4848
if ( node.else ) {
4949
generator.current.mountStatements.push( deindent`
50-
if ( ${elseName} ) {
51-
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
50+
if ( this.${elseName} ) {
51+
this.${elseName}.mount( this.${anchor}.parentNode, this.${anchor} );
5252
}
5353
` );
5454
}
@@ -58,44 +58,44 @@ export default {
5858
var ${name}_value = ${snippet};
5959
6060
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
61-
if ( !${iterations}[${i}] ) {
62-
${iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
63-
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
61+
if ( !this.${iterations}[${i}] ) {
62+
this.${iterations}[${i}] = new ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, this.component );
63+
this.${iterations}[${i}].mount( this.${anchor}.parentNode, this.${anchor} );
6464
} else {
65-
${iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
65+
this.${iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
6666
}
6767
}
6868
69-
for ( var ${i} = ${name}_value.length; ${i} < ${iterations}.length; ${i} += 1 ) {
70-
${iterations}[${i}].teardown( true );
69+
for ( var ${i} = ${name}_value.length; ${i} < this.${iterations}.length; ${i} += 1 ) {
70+
this.${iterations}[${i}].teardown( true );
7171
}
7272
73-
${iterations}.length = ${listName}.length;
73+
this.${iterations}.length = ${listName}.length;
7474
` );
7575

7676
if ( node.else ) {
7777
generator.current.updateStatements.push( deindent`
78-
if ( !${name}_value.length && ${elseName} ) {
79-
${elseName}.update( changed, ${params} );
78+
if ( !${name}_value.length && this.${elseName} ) {
79+
this.${elseName}.update( changed, ${params} );
8080
} else if ( !${name}_value.length ) {
81-
${elseName} = ${renderElse}( ${params}, component );
82-
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
83-
} else if ( ${elseName} ) {
84-
${elseName}.teardown( true );
81+
this.${elseName} = new ${renderElse}( ${params}, this.component );
82+
this.${elseName}.mount( this.${anchor}.parentNode, this.${anchor} );
83+
} else if ( this.${elseName} ) {
84+
this.${elseName}.teardown( true );
8585
}
8686
` );
8787
}
8888

8989
generator.current.teardownStatements.push( deindent`
90-
for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
91-
${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} );
90+
for ( var ${i} = 0; ${i} < this.${iterations}.length; ${i} += 1 ) {
91+
this.${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} );
9292
}
9393
` );
9494

9595
if ( node.else ) {
9696
generator.current.teardownStatements.push( deindent`
97-
if ( ${elseName} ) {
98-
${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} );
97+
if ( this.${elseName} ) {
98+
this.${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} );
9999
}
100100
` );
101101
}

‎compiler/generate/visitors/Element.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,16 @@ export default {
4242
}).join( ',\n' );
4343

4444
const updates = contextNames.map( contextName => {
45-
if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
45+
if ( contextName === 'root' ) return `this.${name}.__svelte.root = root;`;
4646

4747
const listName = generator.current.listNames[ contextName ];
4848
const indexName = generator.current.indexNames[ contextName ];
4949

50-
return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
50+
return `this.${name}.__svelte.${listName} = ${listName};\nthis.${name}.__svelte.${indexName} = ${indexName};`;
5151
}).join( '\n' );
5252

5353
local.init.push( deindent`
54-
${name}.__svelte = {
54+
this.${name}.__svelte = {
5555
${initialProps}
5656
};
5757
` );
@@ -60,23 +60,23 @@ export default {
6060
}
6161

6262
let render = local.namespace ?
63-
`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
64-
`var ${name} = document.createElement( '${node.name}' );`;
63+
`this.${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
64+
`this.${name} = document.createElement( '${node.name}' );`;
6565

6666
if ( generator.cssId && !generator.current.elementDepth ) {
67-
render += `\n${name}.setAttribute( '${generator.cssId}', '' );`;
67+
render += `\nthis.${name}.setAttribute( '${generator.cssId}', '' );`;
6868
}
6969

7070
local.init.unshift( render );
7171
if ( isToplevel ) {
72-
local.detach.push( `${name}.parentNode.removeChild( ${name} );` );
72+
local.detach.push( `this.${name}.parentNode.removeChild( this.${name} );` );
7373
}
7474

7575
// special case – bound <option> without a value attribute
7676
if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { // TODO check it's bound
7777
// const dynamic = node.children.length > 1 || node.children[0].type !== 'Text';
7878
// TODO do this in init for static values... have to do it in `leave`, because they don't exist yet
79-
local.update.push( `${name}.__value = ${name}.textContent` );
79+
local.update.push( `this.${name}.__value = this.${name}.textContent` );
8080
}
8181

8282
generator.current.initStatements.push( local.init.join( '\n' ) );

‎compiler/generate/visitors/IfBlock.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -59,42 +59,42 @@ export default {
5959
const currentBlock = generator.getUniqueName( `currentBlock` );
6060

6161
const isToplevel = generator.current.localElementDepth === 0;
62-
const conditionsAndBlocks = getConditionsAndBlocks( generator, node, generator.getUniqueName( `renderIfBlock` ) );
62+
const conditionsAndBlocks = getConditionsAndBlocks( generator, node, generator.getUniqueName( `IfBlock` ) );
6363

6464
const anchor = generator.createAnchor( name, `#if ${generator.source.slice( node.expression.start, node.expression.end )}` );
6565

6666
generator.current.initStatements.push( deindent`
67-
function ${getBlock} ( ${params} ) {
67+
this.${getBlock} = function ( ${params} ) {
6868
${conditionsAndBlocks.map( ({ condition, block }) => {
6969
return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
7070
} ).join( '\n' )}
7171
}
7272
73-
var ${currentBlock} = ${getBlock}( ${params} );
74-
var ${name} = ${currentBlock} && ${currentBlock}( ${params}, component );
73+
this.${currentBlock} = this.${getBlock}( ${params} );
74+
this.${name} = this.${currentBlock} && new this.${currentBlock}( ${params}, component );
7575
` );
7676

77-
const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`;
77+
const mountStatement = `if ( this.${name} ) this.${name}.mount( this.${anchor}.parentNode, this.${anchor} );`;
7878
if ( isToplevel ) {
7979
generator.current.mountStatements.push( mountStatement );
8080
} else {
8181
generator.current.initStatements.push( mountStatement );
8282
}
8383

8484
generator.current.updateStatements.push( deindent`
85-
var _${currentBlock} = ${currentBlock};
86-
${currentBlock} = ${getBlock}( ${params} );
87-
if ( _${currentBlock} === ${currentBlock} && ${name}) {
88-
${name}.update( changed, ${params} );
85+
var _${currentBlock} = this.${currentBlock};
86+
this.${currentBlock} = this.${getBlock}( ${params} );
87+
if ( _${currentBlock} === this.${currentBlock} && this.${name}) {
88+
this.${name}.update( changed, ${params} );
8989
} else {
90-
if ( ${name} ) ${name}.teardown( true );
91-
${name} = ${currentBlock} && ${currentBlock}( ${params}, component );
92-
if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );
90+
if ( this.${name} ) this.${name}.teardown( true );
91+
this.${name} = this.${currentBlock} && new this.${currentBlock}( ${params}, this.component );
92+
if ( this.${name} ) this.${name}.mount( this.${anchor}.parentNode, this.${anchor} );
9393
}
9494
` );
9595

9696
generator.current.teardownStatements.push( deindent`
97-
if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} );
97+
if ( this.${name} ) this.${name}.teardown( ${isToplevel ? 'detach' : 'false'} );
9898
` );
9999
}
100100
};

0 commit comments

Comments
 (0)