Remove closures from SvelteComponent

Author: mrkishi

compiler/generate/index.js

@@ -286,8 +286,8 @@ export default function generate ( parsed, source, options, names ) {
 	const topLevelStatements = [];
 
 	const setStatements = [ deindent`
-		var oldState = state;
-		state = Object.assign( {}, oldState, newState );
+		var oldState = this.state;
+		this.state = Object.assign( {}, oldState, newState );
 	` ];
 
 	if ( templateProperties.computed ) {
@@ -328,13 +328,13 @@ export default function generate ( parsed, source, options, names ) {
 			}
 		` );
 
-		setStatements.push( `applyComputations( state, newState, oldState )` );
+		setStatements.push( `applyComputations( this.state, newState, oldState )` );
 	}
 
 	setStatements.push( deindent`
-		dispatchObservers( observers.immediate, newState, oldState );
-		if ( mainFragment ) mainFragment.update( newState, state );
-		dispatchObservers( observers.deferred, newState, oldState );
+		this.dispatchObservers( this.observers.immediate, newState, oldState );
+		if ( this.mainFragment ) this.mainFragment.update( newState, this.state );
+		this.dispatchObservers( this.observers.deferred, newState, oldState );
 	` );
 
 	const importBlock = imports
@@ -394,15 +394,15 @@ export default function generate ( parsed, source, options, names ) {
 	if ( generator.hasComplexBindings ) {
 		initStatements.push( deindent`
 			this.__bindings = [];
-			var mainFragment = renderMainFragment( state, this );
+			this.mainFragment = renderMainFragment( this.state, this );
 			if ( options.target ) this.mount( options.target );
 			while ( this.__bindings.length ) this.__bindings.pop()();
 		` );
 
 		setStatements.push( `while ( this.__bindings.length ) this.__bindings.pop()();` );
 	} else {
 		initStatements.push( deindent`
-			var mainFragment = renderMainFragment( state, this );
+			this.mainFragment = renderMainFragment( this.state, this );
 			if ( options.target ) this.mount( options.target );
 		` );
 	}
@@ -433,17 +433,25 @@ export default function generate ( parsed, source, options, names ) {
 
 	topLevelStatements.push( deindent`
 		function ${constructorName} ( options ) {
-			var component = this;${generator.usesRefs ? `\nthis.refs = {}` : ``}
-			var state = ${initialState};${templateProperties.computed ? `\napplyComputations( state, state, {} );` : ``}
+			${generator.usesRefs ? `\nthis.refs = {}` : ``}
+			this.state = ${initialState};${templateProperties.computed ? `\napplyComputations( this.state, this.state, {} );` : ``}
 
-			var observers = {
+			this.observers = {
 				immediate: Object.create( null ),
 				deferred: Object.create( null )
 			};
 
-			var callbacks = Object.create( null );
+			this.callbacks = Object.create( null );
 
-			function dispatchObservers ( group, newState, oldState ) {
+			this.root = options.root;
+			this.yield = options.yield;
+
+			${initStatements.join( '\n\n' )}
+		}
+		
+		${constructorName}.prototype = {
+
+			dispatchObservers: function dispatchObservers ( group, newState, oldState ) {
 				for ( var key in group ) {
 					if ( !( key in newState ) ) continue;
 
@@ -460,41 +468,41 @@ export default function generate ( parsed, source, options, names ) {
 						if ( callback.__calling ) continue;
 
 						callback.__calling = true;
-						callback.call( component, newValue, oldValue );
+						callback.call( this, newValue, oldValue );
 						callback.__calling = false;
 					}
 				}
-			}
+			},
 
-			this.fire = function fire ( eventName, data ) {
-				var handlers = eventName in callbacks && callbacks[ eventName ].slice();
+			fire: function fire ( eventName, data ) {
+				var handlers = eventName in this.callbacks && this.callbacks[ eventName ].slice();
 				if ( !handlers ) return;
 
 				for ( var i = 0; i < handlers.length; i += 1 ) {
 					handlers[i].call( this, data );
 				}
-			};
+			},
 
-			this.get = function get ( key ) {
-				return key ? state[ key ] : state;
-			};
+			get: function get ( key ) {
+				return key ? this.state[ key ] : this.state;
+			},
 
-			this.set = function set ( newState ) {
+			set: function set ( newState ) {
 				${setStatements.join( '\n\n' )}
-			};
+			},
 
-			this.mount = function mount ( target, anchor ) {
-				mainFragment.mount( target, anchor );
-			}
+			mount: function mount ( target, anchor ) {
+				this.mainFragment.mount( target, anchor );
+			},
 
-			this.observe = function ( key, callback, options ) {
-				var group = ( options && options.defer ) ? observers.deferred : observers.immediate;
+			observe: function observe ( key, callback, options ) {
+				var group = ( options && options.defer ) ? this.observers.deferred : this.observers.immediate;
 
 				( group[ key ] || ( group[ key ] = [] ) ).push( callback );
 
 				if ( !options || options.init !== false ) {
 					callback.__calling = true;
-					callback.call( component, state[ key ] );
+					callback.call( this, this.state[ key ] );
 					callback.__calling = false;
 				}
 
@@ -504,10 +512,10 @@ export default function generate ( parsed, source, options, names ) {
 						if ( ~index ) group[ key ].splice( index, 1 );
 					}
 				};
-			};
+			},
 
-			this.on = function on ( eventName, handler ) {
-				var handlers = callbacks[ eventName ] || ( callbacks[ eventName ] = [] );
+			on: function on ( eventName, handler ) {
+				var handlers = this.callbacks[ eventName ] || ( this.callbacks[ eventName ] = [] );
 				handlers.push( handler );
 
 				return {
@@ -516,26 +524,22 @@ export default function generate ( parsed, source, options, names ) {
 						if ( ~index ) handlers.splice( index, 1 );
 					}
 				};
-			};
+			},
 
-			this.teardown = function teardown ( detach ) {
+			teardown: function teardown ( detach ) {
 				this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
 
-				mainFragment.teardown( detach !== false );
-				mainFragment = null;
+				this.mainFragment.teardown( detach !== false );
+				this.mainFragment = null;
 
-				state = {};
-			};
+				this.state = {};
+			},
 
-			this.root = options.root;
-			this.yield = options.yield;
-
-			${initStatements.join( '\n\n' )}
 		}
 	` );
 
 	if ( templateProperties.methods ) {
-		topLevelStatements.push( `${constructorName}.prototype = template.methods;` );
+		topLevelStatements.push( `Object.assign( ${constructorName}.prototype, template.methods );` );
 	}
 
 	const result = topLevelStatements.join( '\n\n' );