Skip to content

Commit 0d4488f

Browse files
mrkishimrkishi
committed
Remove closures from fragments, naively
1 parent 77184bb commit 0d4488f

File tree

11 files changed

+112
-107
lines changed

11 files changed

+112
-107
lines changed

‎compiler/generate/index.js

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,29 @@ export default function generate ( parsed, source, options ) {
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 ) {
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 ) {
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

@@ -259,7 +261,7 @@ export default function generate ( parsed, source, options ) {
259261

260262
generator.push({
261263
useAnchor: false,
262-
name: 'renderMainFragment',
264+
name: 'MainFragment',
263265
namespace: null,
264266
target: 'target',
265267
elementDepth: 0,
@@ -396,15 +398,15 @@ export default function generate ( parsed, source, options ) {
396398
if ( generator.hasComplexBindings ) {
397399
initStatements.push( deindent`
398400
this.__bindings = [];
399-
this.mainFragment = renderMainFragment( this.state, this );
401+
this.mainFragment = new MainFragment( this.state, this );
400402
if ( options.target ) this.mount( options.target );
401403
while ( this.__bindings.length ) this.__bindings.pop()();
402404
` );
403405

404406
setStatements.push( `while ( this.__bindings.length ) this.__bindings.pop()();` );
405407
} else {
406408
initStatements.push( deindent`
407-
this.mainFragment = renderMainFragment( this.state, this );
409+
this.mainFragment = new MainFragment( this.state, this );
408410
if ( options.target ) this.mount( options.target );
409411
` );
410412
}

‎compiler/generate/visitors/Component.js

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

3030
const componentInitProperties = [
31-
`target: ${!isToplevel ? generator.current.target: 'null'}`,
31+
`target: ${!isToplevel ? `this.${generator.current.target}` : 'null'}`,
3232
'root: component.root || component'
3333
];
3434
// Component has children
3535
if ( hasChildren ) {
36-
const yieldName = `render${name}YieldFragment`;
36+
const yieldName = `${name}YieldFragment`;
3737

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

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

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

6767
const statements = [];
@@ -95,13 +95,13 @@ export default {
9595

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

103103
if ( isToplevel ) {
104-
local.mount.unshift( `${name}.mount( target, anchor );` );
104+
local.mount.unshift( `this.${name}.mount( target, anchor );` );
105105
}
106106

107107
if ( local.dynamicAttributes.length ) {
@@ -116,11 +116,11 @@ export default {
116116
117117
${updates.join( '\n' )}
118118
119-
if ( Object.keys( ${name}_changes ).length ) ${name}.set( ${name}_changes );
119+
if ( Object.keys( ${name}_changes ).length ) this.${name}.set( ${name}_changes );
120120
` );
121121
}
122122

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

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

‎compiler/generate/visitors/EachBlock.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default {
66
const i = generator.counters.each++;
77
const name = `eachBlock_${i}`;
88
const iterations = `${name}_iterations`;
9-
const renderer = `renderEachBlock_${i}`;
9+
const renderer = `EachBlock_${i}`;
1010

1111
const listName = `${name}_value`;
1212

@@ -20,18 +20,18 @@ export default {
2020

2121
generator.current.initStatements.push( deindent`
2222
var ${name}_value = ${snippet};
23-
var ${iterations} = [];
23+
this.${iterations} = [];
2424
2525
for ( var i = 0; i < ${name}_value.length; i += 1 ) {
26-
${iterations}[i] = ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, component );
27-
${!isToplevel ? `${iterations}[i].mount( ${anchor}.parentNode, ${anchor} );` : ''}
26+
this.${iterations}[i] = new ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, component );
27+
${!isToplevel ? `this.${iterations}[i].mount( this.${anchor}.parentNode, this.${anchor} );` : ''}
2828
}
2929
` );
3030

3131
if ( isToplevel ) {
3232
generator.current.mountStatements.push( deindent`
33-
for ( var i = 0; i < ${iterations}.length; i += 1 ) {
34-
${iterations}[i].mount( ${anchor}.parentNode, ${anchor} );
33+
for ( var i = 0; i < this.${iterations}.length; i += 1 ) {
34+
this.${iterations}[i].mount( this.${anchor}.parentNode, this.${anchor} );
3535
}
3636
` );
3737
}
@@ -40,24 +40,24 @@ export default {
4040
var ${name}_value = ${snippet};
4141
4242
for ( var i = 0; i < ${name}_value.length; i += 1 ) {
43-
if ( !${iterations}[i] ) {
44-
${iterations}[i] = ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, component );
45-
${iterations}[i].mount( ${anchor}.parentNode, ${anchor} );
43+
if ( !this.${iterations}[i] ) {
44+
this.${iterations}[i] = new ${renderer}( ${generator.current.params}, ${listName}, ${listName}[i], i, this.component );
45+
this.${iterations}[i].mount( this.${anchor}.parentNode, this.${anchor} );
4646
} else {
47-
${iterations}[i].update( changed, ${generator.current.params}, ${listName}, ${listName}[i], i );
47+
this.${iterations}[i].update( changed, ${generator.current.params}, ${listName}, ${listName}[i], i );
4848
}
4949
}
5050
51-
for ( var i = ${name}_value.length; i < ${iterations}.length; i += 1 ) {
52-
${iterations}[i].teardown( true );
51+
for ( var i = ${name}_value.length; i < this.${iterations}.length; i += 1 ) {
52+
this.${iterations}[i].teardown( true );
5353
}
5454
55-
${iterations}.length = ${listName}.length;
55+
this.${iterations}.length = ${listName}.length;
5656
` );
5757

5858
generator.current.teardownStatements.push( deindent`
59-
for ( var i = 0; i < ${iterations}.length; i += 1 ) {
60-
${iterations}[i].teardown( ${isToplevel ? 'detach' : 'false'} );
59+
for ( var i = 0; i < this.${iterations}.length; i += 1 ) {
60+
this.${iterations}[i].teardown( ${isToplevel ? 'detach' : 'false'} );
6161
}
6262
` );
6363

‎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
@@ -62,42 +62,42 @@ export default {
6262
const currentBlock = `currentBlock_${i}`;
6363

6464
const isToplevel = generator.current.localElementDepth === 0;
65-
const conditionsAndBlocks = getConditionsAndBlocks( generator, node, `renderIfBlock_${i}` );
65+
const conditionsAndBlocks = getConditionsAndBlocks( generator, node, `IfBlock_${i}` );
6666

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

6969
generator.current.initStatements.push( deindent`
70-
function ${getBlock} ( ${params} ) {
70+
this.${getBlock} = function ( ${params} ) {
7171
${conditionsAndBlocks.map( ({ condition, block }) => {
7272
return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
7373
} ).join( '\n' )}
7474
}
7575
76-
var ${currentBlock} = ${getBlock}( ${params} );
77-
var ${name} = ${currentBlock} && ${currentBlock}( ${params}, component );
76+
this.${currentBlock} = this.${getBlock}( ${params} );
77+
this.${name} = this.${currentBlock} && new this.${currentBlock}( ${params}, component );
7878
` );
7979

80-
const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`;
80+
const mountStatement = `if ( this.${name} ) this.${name}.mount( this.${anchor}.parentNode, this.${anchor} );`;
8181
if ( isToplevel ) {
8282
generator.current.mountStatements.push( mountStatement );
8383
} else {
8484
generator.current.initStatements.push( mountStatement );
8585
}
8686

8787
generator.current.updateStatements.push( deindent`
88-
var _${currentBlock} = ${currentBlock};
89-
${currentBlock} = ${getBlock}( ${params} );
90-
if ( _${currentBlock} === ${currentBlock} && ${name}) {
91-
${name}.update( changed, ${params} );
88+
var _${currentBlock} = this.${currentBlock};
89+
this.${currentBlock} = this.${getBlock}( ${params} );
90+
if ( _${currentBlock} === this.${currentBlock} && this.${name}) {
91+
this.${name}.update( changed, ${params} );
9292
} else {
93-
if ( ${name} ) ${name}.teardown( true );
94-
${name} = ${currentBlock} && ${currentBlock}( ${params}, component );
95-
if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );
93+
if ( this.${name} ) this.${name}.teardown( true );
94+
this.${name} = this.${currentBlock} && new this.${currentBlock}( ${params}, this.component );
95+
if ( this.${name} ) this.${name}.mount( this.${anchor}.parentNode, this.${anchor} );
9696
}
9797
` );
9898

9999
generator.current.teardownStatements.push( deindent`
100-
if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} );
100+
if ( this.${name} ) this.${name}.teardown( ${isToplevel ? 'detach' : 'false'} );
101101
` );
102102
}
103103
};

‎compiler/generate/visitors/MustacheTag.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
1111

1212
generator.current.updateStatements.push( deindent`
13-
${name}.data = ${snippet};
13+
this.${name}.data = ${snippet};
1414
` );
1515
}
1616
};

‎compiler/generate/visitors/YieldTag.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
export default {
22
enter ( generator ) {
33
const anchor = generator.createAnchor( 'yield', 'yield' );
4-
generator.current.mountStatements.push(`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`);
5-
generator.current.teardownStatements.push(`component.yield && component.yield.teardown( detach );`);
4+
const target = generator.current.target === 'target' ? 'target' : `this.${generator.current.target}`
5+
generator.current.mountStatements.push(`this.component.yield && this.component.yield.mount( ${target}, this.${anchor} );`);
6+
generator.current.teardownStatements.push(`this.component.yield && this.component.yield.teardown( detach );`);
67
}
78
};

‎compiler/generate/visitors/attributes/addComponentAttributes.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default function addComponentAttributes ( generator, node, local ) {
105105
const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
106106

107107
local.init.push( deindent`
108-
${local.name}.on( '${attribute.name}', function ( event ) {
108+
this.${local.name}.on( '${attribute.name}', function ( event ) {
109109
${handlerBody}
110110
});
111111
` );
@@ -119,11 +119,11 @@ export default function addComponentAttributes ( generator, node, local ) {
119119
generator.usesRefs = true;
120120

121121
local.init.push( deindent`
122-
component.refs.${attribute.name} = ${local.name};
122+
component.refs.${attribute.name} = this.${local.name};
123123
` );
124124

125125
local.teardown.push( deindent`
126-
if ( component.refs.${attribute.name} === ${local.name} ) component.refs.${attribute.name} = null;
126+
if ( this.component.refs.${attribute.name} === this.${local.name} ) this.component.refs.${attribute.name} = null;
127127
` );
128128
}
129129

0 commit comments

Comments
 (0)