[WIP] Avoid binding event handler callbacks

.eslintignore

@@ -1,3 +1,5 @@
 src/shared
 shared.js
-test/test.js
+test/test.js
+**/_actual.js
+**/expected.js

src/generators/dom/visitors/Element.js

@@ -40,30 +40,32 @@ export default {
 
 		if ( local.allUsedContexts.length ) {
 			const initialProps = local.allUsedContexts.map( contextName => {
-				if ( contextName === 'root' ) return `root: root`;
+				if ( contextName === 'root' ) return null;
 
 				const listName = generator.current.listNames.get( contextName );
 				const indexName = generator.current.indexNames.get( contextName );
 
 				return `${listName}: ${listName},\n${indexName}: ${indexName}`;
-			}).join( ',\n' );
+			}).filter( Boolean ).join( ',\n' );
 
 			const updates = local.allUsedContexts.map( contextName => {
-				if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
+				if ( contextName === 'root' ) return null;
 
 				const listName = generator.current.listNames.get( contextName );
 				const indexName = generator.current.indexNames.get( contextName );
 
 				return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
-			}).join( '\n' );
+			}).filter( Boolean ).join( '\n' );
 
-			local.init.addBlock( deindent`
-				${name}.__svelte = {
-					${initialProps}
-				};
-			` );
+			if ( local.allUsedContexts.length > 1 || local.allUsedContexts[0] !== 'root' ) {
+				local.init.addBlock( deindent`
+					${name}.__svelte = {
+						${initialProps}
+					};
+				` );
 
-			local.update.addBlock( updates );
+				local.update.addBlock( updates );
+			}
 		}
 
 		let render;

src/generators/dom/visitors/attributes/addElementAttributes.js

@@ -173,7 +173,7 @@ export default function addElementAttributes ( generator, node, local ) {
 
 			// TODO hoist event handlers? can do `this.__component.method(...)`
 			const declarations = usedContexts.map( name => {
-				if ( name === 'root' ) return 'var root = this.__svelte.root;';
+				if ( name === 'root' ) return 'var root = component.get();';
 
 				const listName = generator.current.listNames.get( name );
 				const indexName = generator.current.indexNames.get( name );
@@ -188,7 +188,7 @@ export default function addElementAttributes ( generator, node, local ) {
 				local.init.addBlock( deindent`
 					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${generator.current.component}, ${local.name}, function ( event ) {
 						${handlerBody}
-					}.bind( ${local.name} ) );
+					});
 				` );
 
 				generator.current.builders.teardown.addLine( deindent`

test/js/README.md

@@ -0,0 +1 @@
+Use these tests sparingly, as they will need to be updated frequently as the code generation changes.

test/js/index.js

@@ -0,0 +1,28 @@
+import assert from 'assert';
+import * as fs from 'fs';
+import * as path from 'path';
+import { svelte } from '../helpers.js';
+
+describe( 'js', () => {
+	fs.readdirSync( 'test/js/samples' ).forEach( dir => {
+		if ( dir[0] === '.' ) return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test( dir );
+
+		if ( solo && process.env.CI ) {
+			throw new Error( 'Forgot to remove `solo: true` from test' );
+		}
+
+		( solo ? it.only : it )( dir, () => {
+			dir = path.resolve( 'test/js/samples', dir );
+			const input = fs.readFileSync( `${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' );
+
+			const actual = svelte.compile( input ).code;
+			fs.writeFileSync( `${dir}/_actual.js`, actual );
+			const expected = fs.readFileSync( `${dir}/expected.js`, 'utf-8' );
+
+			assert.equal( actual.trim(), expected.trim() );
+		});
+	});
+});

test/js/samples/event-handlers-custom/expected.js

@@ -0,0 +1,207 @@
+var template = (function () {
+	return {
+		methods: {
+			foo ( bar ) {
+				console.log( bar );
+			}
+		},
+
+		events: {
+			foo ( node, callback ) {
+				// code goes here
+			}
+		}
+	};
+}());
+
+function render_main_fragment ( root, component ) {
+	var button = createElement( 'button' );
+
+	var foo_handler = template.events.foo.call( component, button, function ( event ) {
+		var root = component.get();
+
+		component.foo( root.bar );
+	});
+
+	appendNode( createText( "foo" ), button );
+
+	return {
+		mount: function ( target, anchor ) {
+			insertNode( button, target, anchor );
+		},
+
+		update: noop,
+
+		teardown: function ( detach ) {
+			foo_handler.teardown();
+
+			if ( detach ) {
+				detachNode( button );
+			}
+		}
+	};
+}
+
+function SvelteComponent ( options ) {
+	options = options || {};
+	this._state = options.data || {};
+
+	this._observers = {
+		pre: Object.create( null ),
+		post: Object.create( null )
+	};
+
+	this._handlers = Object.create( null );
+
+	this._root = options._root;
+	this._yield = options._yield;
+
+	this._torndown = false;
+
+	this._fragment = render_main_fragment( this._state, this );
+	if ( options.target ) this._fragment.mount( options.target, null );
+}
+
+assign( SvelteComponent.prototype, template.methods, {
+	get: get,
+	fire: fire,
+	observe: observe,
+	on: on,
+	set: set,
+	_flush: _flush
+});
+
+SvelteComponent.prototype._set = function _set ( newState ) {
+	var oldState = this._state;
+	this._state = assign( {}, oldState, newState );
+
+	dispatchObservers( this, this._observers.pre, newState, oldState );
+	if ( this._fragment ) this._fragment.update( newState, this._state );
+	dispatchObservers( this, this._observers.post, newState, oldState );
+};
+
+SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
+	this.fire( 'destroy' );
+
+	this._fragment.teardown( detach !== false );
+	this._fragment = null;
+
+	this._state = {};
+	this._torndown = true;
+};
+
+function createElement( name ) {
+	return document.createElement( name );
+}
+
+function detachNode( node ) {
+	node.parentNode.removeChild( node );
+}
+
+function insertNode( node, target, anchor ) {
+	target.insertBefore( node, anchor );
+}
+
+function createText( data ) {
+	return document.createTextNode( data );
+}
+
+function appendNode( node, target ) {
+	target.appendChild( node );
+}
+
+function noop() {}
+
+function assign( target ) {
+	for ( var i = 1; i < arguments.length; i += 1 ) {
+		var source = arguments[i];
+		for ( var k in source ) target[k] = source[k];
+	}
+
+	return target;
+}
+
+function dispatchObservers( component, group, newState, oldState ) {
+	for ( var key in group ) {
+		if ( !( key in newState ) ) continue;
+
+		var newValue = newState[ key ];
+		var oldValue = oldState[ key ];
+
+		if ( newValue === oldValue && typeof newValue !== 'object' ) continue;
+
+		var callbacks = group[ key ];
+		if ( !callbacks ) continue;
+
+		for ( var i = 0; i < callbacks.length; i += 1 ) {
+			var callback = callbacks[i];
+			if ( callback.__calling ) continue;
+
+			callback.__calling = true;
+			callback.call( component, newValue, oldValue );
+			callback.__calling = false;
+		}
+	}
+}
+
+function get( key ) {
+	return key ? this._state[ key ] : this._state;
+}
+
+function fire( eventName, data ) {
+	var handlers = eventName in this._handlers && this._handlers[ eventName ].slice();
+	if ( !handlers ) return;
+
+	for ( var i = 0; i < handlers.length; i += 1 ) {
+		handlers[i].call( this, data );
+	}
+}
+
+function observe( key, callback, options ) {
+	var group = ( options && options.defer ) ? this._observers.pre : this._observers.post;
+
+	( group[ key ] || ( group[ key ] = [] ) ).push( callback );
+
+	if ( !options || options.init !== false ) {
+		callback.__calling = true;
+		callback.call( this, this._state[ key ] );
+		callback.__calling = false;
+	}
+
+	return {
+		cancel: function () {
+			var index = group[ key ].indexOf( callback );
+			if ( ~index ) group[ key ].splice( index, 1 );
+		}
+	};
+}
+
+function on( eventName, handler ) {
+	if ( eventName === 'teardown' ) return this.on( 'destroy', handler );
+
+	var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] );
+	handlers.push( handler );
+
+	return {
+		cancel: function () {
+			var index = handlers.indexOf( handler );
+			if ( ~index ) handlers.splice( index, 1 );
+		}
+	};
+}
+
+function set( newState ) {
+	this._set( newState );
+	( this._root || this )._flush();
+}
+
+function _flush() {
+	if ( !this._renderHooks ) return;
+
+	while ( this._renderHooks.length ) {
+		var hook = this._renderHooks.pop();
+		hook.fn.call( hook.context );
+	}
+}
+
+export default SvelteComponent;

test/js/samples/event-handlers-custom/input.html

@@ -0,0 +1,17 @@
+<button on:foo='foo( bar )'>foo</button>
+
+<script>
+	export default {
+		methods: {
+			foo ( bar ) {
+				console.log( bar );
+			}
+		},
+
+		events: {
+			foo ( node, callback ) {
+				// code goes here
+			}
+		}
+	};
+</script>

test/generator/index.js → test/runtime/index.js

@@ -38,7 +38,7 @@ describe( 'generate', () => {
 	function runTest ( dir, shared ) {
 		if ( dir[0] === '.' ) return;
 
-		const config = loadConfig( `./generator/samples/${dir}/_config.js` );
+		const config = loadConfig( `./runtime/samples/${dir}/_config.js` );
 
 		if ( config.solo && process.env.CI ) {
 			throw new Error( 'Forgot to remove `solo: true` from test' );
@@ -53,7 +53,7 @@ describe( 'generate', () => {
 			compileOptions.dev = config.dev;
 
 			try {
-				const source = fs.readFileSync( `test/generator/samples/${dir}/main.html`, 'utf-8' );
+				const source = fs.readFileSync( `test/runtime/samples/${dir}/main.html`, 'utf-8' );
 				compiled = svelte.compile( source, compileOptions );
 			} catch ( err ) {
 				if ( config.compileError ) {
@@ -160,13 +160,13 @@ describe( 'generate', () => {
 	}
 
 	describe( 'inline helpers', () => {
-		fs.readdirSync( 'test/generator/samples' ).forEach( dir => {
+		fs.readdirSync( 'test/runtime/samples' ).forEach( dir => {
 			runTest( dir, null );
 		});
 	});
 
 	describe( 'shared helpers', () => {
-		fs.readdirSync( 'test/generator/samples' ).forEach( dir => {
+		fs.readdirSync( 'test/runtime/samples' ).forEach( dir => {
 			runTest( dir, path.resolve( 'shared.js' ) );
 		});
 	});