From 20ee8370e46536b86c53e71683f7c66a357b451c Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sat, 8 Apr 2017 17:41:26 -0400
Subject: [PATCH 1/7] failing test for #433

---
 test/js/index.js                              | 10 ++-
 .../samples/event-handlers-custom/expected.js | 88 +++++++++++++++++++
 .../samples/event-handlers-custom/input.html  | 16 ++++
 3 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 test/js/samples/event-handlers-custom/expected.js
 create mode 100644 test/js/samples/event-handlers-custom/input.html

diff --git a/test/js/index.js b/test/js/index.js
index cf8ab54bbd..fd5eb102bf 100644
--- a/test/js/index.js
+++ b/test/js/index.js
@@ -18,11 +18,17 @@ describe( 'js', () => {
 			dir = path.resolve( 'test/js/samples', dir );
 			const input = fs.readFileSync( `${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' );
 
-			const actual = svelte.compile( input ).code;
+			const actual = svelte.compile( input, {
+				shared: true
+			}).code;
+
 			fs.writeFileSync( `${dir}/_actual.js`, actual );
 			const expected = fs.readFileSync( `${dir}/expected.js`, 'utf-8' );
 
-			assert.equal( actual.trim(), expected.trim() );
+			assert.equal(
+				actual.trim().replace( /^\s+$/gm, '' ),
+				expected.trim().replace( /^\s+$/gm, '' )
+			);
 		});
 	});
 });
diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js
new file mode 100644
index 0000000000..8131e3bde3
--- /dev/null
+++ b/test/js/samples/event-handlers-custom/expected.js
@@ -0,0 +1,88 @@
+import { createElement, detachNode, insertNode, createText, appendNode, assign, dispatchObservers, noop, proto } from "svelte/shared.js";
+
+var template = (function () {
+	return {
+		methods: {
+			foo ( bar ) {
+				console.log( bar );
+			}
+		},
+
+		events: {
+			foo ( node, callback ) {
+				// code goes here
+			}
+		}
+	};
+}());
+
+function create_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,
+
+		destroy: 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 = create_main_fragment( this._state, this );
+	if ( options.target ) this._fragment.mount( options.target, null );
+}
+
+assign( SvelteComponent.prototype, template.methods, proto );
+
+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.destroy( detach !== false );
+	this._fragment = null;
+
+	this._state = {};
+	this._torndown = true;
+};
+
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/event-handlers-custom/input.html b/test/js/samples/event-handlers-custom/input.html
new file mode 100644
index 0000000000..00d79363fa
--- /dev/null
+++ b/test/js/samples/event-handlers-custom/input.html
@@ -0,0 +1,16 @@
+<button on:foo='foo( bar )'>foo</button>
+
+<script>
+	export default {
+		methods: {
+			foo ( bar ) {
+				console.log( bar );
+			}
+		},
+		events: {
+			foo ( node, callback ) {
+				// code goes here
+			}
+		}
+	};
+</script>
\ No newline at end of file

From 91ad5f77bd4f492f36534d962976be0b9d8d252f Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 9 Apr 2017 12:11:07 -0400
Subject: [PATCH 2/7] start refactoring element code a bit

---
 src/generators/dom/visitors/Element.js        | 24 ++++------
 .../attributes/addElementAttributes.js        | 46 +++++++++----------
 .../visitors/attributes/addElementBinding.js  | 42 ++++++++---------
 3 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js
index 7f3b8d4e65..01e347ef59 100644
--- a/src/generators/dom/visitors/Element.js
+++ b/src/generators/dom/visitors/Element.js
@@ -20,11 +20,13 @@ export default function visitElement ( generator, block, state, node ) {
 
 	const name = block.getUniqueName( node.name );
 
-	const local = {
-		name,
-		namespace: node.name === 'svg' ? 'http://www.w3.org/2000/svg' : state.namespace,
-		isComponent: false,
+	const childState = Object.assign( {}, state, {
+		isTopLevel: false,
+		parentNode: name,
+		namespace: node.name === 'svg' ? 'http://www.w3.org/2000/svg' : state.namespace
+	});
 
+	const local = {
 		allUsedContexts: [],
 
 		create: new CodeBuilder(),
@@ -34,7 +36,7 @@ export default function visitElement ( generator, block, state, node ) {
 
 	const isToplevel = !state.parentNode;
 
-	addElementAttributes( generator, block, node, local );
+	addElementAttributes( generator, block, childState, node, local );
 
 	if ( local.allUsedContexts.length ) {
 		const initialProps = local.allUsedContexts.map( contextName => {
@@ -66,11 +68,11 @@ export default function visitElement ( generator, block, state, node ) {
 
 	let render;
 
-	if ( local.namespace ) {
-		if ( local.namespace === 'http://www.w3.org/2000/svg' ) {
+	if ( childState.namespace ) {
+		if ( childState.namespace === 'http://www.w3.org/2000/svg' ) {
 			render = `var ${name} = ${generator.helper( 'createSvgElement' )}( '${node.name}' )`;
 		} else {
-			render = `var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );`;
+			render = `var ${name} = document.createElementNS( '${childState.namespace}', '${node.name}' );`;
 		}
 	} else {
 		render = `var ${name} = ${generator.helper( 'createElement' )}( '${node.name}' );`;
@@ -98,12 +100,6 @@ export default function visitElement ( generator, block, state, node ) {
 
 	block.createMountStatement( name, state.parentNode );
 
-	const childState = Object.assign( {}, state, {
-		isTopLevel: false,
-		parentNode: name,
-		namespace: local.namespace
-	});
-
 	node.children.forEach( child => {
 		visit( generator, block, childState, child );
 	});
diff --git a/src/generators/dom/visitors/attributes/addElementAttributes.js b/src/generators/dom/visitors/attributes/addElementAttributes.js
index 8936db3d17..16fc52d085 100644
--- a/src/generators/dom/visitors/attributes/addElementAttributes.js
+++ b/src/generators/dom/visitors/attributes/addElementAttributes.js
@@ -4,12 +4,12 @@ import deindent from '../../../../utils/deindent.js';
 import flattenReference from '../../../../utils/flattenReference.js';
 import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
 
-export default function addElementAttributes ( generator, block, node, local ) {
+export default function addElementAttributes ( generator, block, state, node, local ) {
 	node.attributes.forEach( attribute => {
 		const name = attribute.name;
 
 		if ( attribute.type === 'Attribute' ) {
-			let metadata = local.namespace ? null : attributeLookup[ name ];
+			let metadata = state.namespace ? null : attributeLookup[ name ];
 			if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
 
 			let dynamic = false;
@@ -32,28 +32,28 @@ export default function addElementAttributes ( generator, block, node, local ) {
 				// attributes without values, e.g. <textarea readonly>
 				if ( propertyName ) {
 					local.create.addLine(
-						`${local.name}.${propertyName} = true;`
+						`${state.parentNode}.${propertyName} = true;`
 					);
 				} else {
 					local.create.addLine(
-						`${generator.helper( method )}( ${local.name}, '${name}', true );`
+						`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
 					);
 				}
 
 				// special case – autofocus. has to be handled in a bit of a weird way
 				if ( name === 'autofocus' ) {
-					block.autofocus = local.name;
+					block.autofocus = state.parentNode;
 				}
 			}
 
 			else if ( attribute.value.length === 0 ) {
 				if ( propertyName ) {
 					local.create.addLine(
-						`${local.name}.${propertyName} = '';`
+						`${state.parentNode}.${propertyName} = '';`
 					);
 				} else {
 					local.create.addLine(
-						`${generator.helper( method )}( ${local.name}, '${name}', '' );`
+						`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
 					);
 				}
 			}
@@ -71,11 +71,11 @@ export default function addElementAttributes ( generator, block, node, local ) {
 					if ( name === 'xmlns' ) {
 						// special case
 						// TODO this attribute must be static – enforce at compile time
-						local.namespace = value.data;
+						state.namespace = value.data;
 						addAttribute = true;
 					} else if ( propertyName ) {
 						local.create.addLine(
-							`${local.name}.${propertyName} = ${result};`
+							`${state.parentNode}.${propertyName} = ${result};`
 						);
 					} else {
 						addAttribute = true;
@@ -83,7 +83,7 @@ export default function addElementAttributes ( generator, block, node, local ) {
 
 					if ( addAttribute ) {
 						local.create.addLine(
-							`${generator.helper( method )}( ${local.name}, '${name}', ${result} );`
+							`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
 						);
 					}
 				}
@@ -94,14 +94,14 @@ export default function addElementAttributes ( generator, block, node, local ) {
 					// dynamic – but potentially non-string – attributes
 					const { snippet } = generator.contextualise( block, value.expression );
 
-					const last = `last_${local.name}_${name.replace( /-/g, '_')}`;
+					const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
 					local.create.addLine( `var ${last} = ${snippet};` );
 
 					let updater;
 					if ( propertyName ) {
-						updater = `${local.name}.${propertyName} = ${last};`;
+						updater = `${state.parentNode}.${propertyName} = ${last};`;
 					} else {
-						updater = `${generator.helper( method )}( ${local.name}, '${name}', ${last} );`;
+						updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
 					}
 
 					local.create.addLine( updater );
@@ -131,9 +131,9 @@ export default function addElementAttributes ( generator, block, node, local ) {
 
 				let updater;
 				if (propertyName) {
-					updater = `${local.name}.${propertyName} = ${value};`;
+					updater = `${state.parentNode}.${propertyName} = ${value};`;
 				} else {
-					updater = `${generator.helper( method )}( ${local.name}, '${name}', ${value} );`;
+					updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
 				}
 
 				local.create.addLine( updater );
@@ -141,7 +141,7 @@ export default function addElementAttributes ( generator, block, node, local ) {
 			}
 
 			if ( isIndirectlyBoundValue ) {
-				const updateValue = `${local.name}.value = ${local.name}.__value;`;
+				const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
 
 				local.create.addLine( updateValue );
 				if ( dynamic ) local.update.addLine( updateValue );
@@ -183,9 +183,9 @@ export default function addElementAttributes ( generator, block, node, local ) {
 
 			if ( generator.events.has( name ) ) {
 				local.create.addBlock( deindent`
-					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${local.name}, function ( event ) {
+					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
 						${handlerBody}
-					}.bind( ${local.name} ) );
+					}.bind( ${state.parentNode} ) );
 				` );
 
 				block.builders.destroy.addLine( deindent`
@@ -197,28 +197,28 @@ export default function addElementAttributes ( generator, block, node, local ) {
 						${handlerBody}
 					}
 
-					${generator.helper( 'addEventListener' )}( ${local.name}, '${name}', ${handlerName} );
+					${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
 				` );
 
 				block.builders.destroy.addLine( deindent`
-					${generator.helper( 'removeEventListener' )}( ${local.name}, '${name}', ${handlerName} );
+					${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
 				` );
 			}
 		}
 
 		else if ( attribute.type === 'Binding' ) {
-			addElementBinding( generator, node, attribute, block, local );
+			addElementBinding( generator, node, block, state, attribute, local );
 		}
 
 		else if ( attribute.type === 'Ref' ) {
 			generator.usesRefs = true;
 
 			local.create.addLine(
-				`${block.component}.refs.${name} = ${local.name};`
+				`${block.component}.refs.${name} = ${state.parentNode};`
 			);
 
 			block.builders.destroy.addLine( deindent`
-				if ( ${block.component}.refs.${name} === ${local.name} ) ${block.component}.refs.${name} = null;
+				if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null;
 			` );
 		}
 
diff --git a/src/generators/dom/visitors/attributes/addElementBinding.js b/src/generators/dom/visitors/attributes/addElementBinding.js
index 9ef82b303f..31a77f9843 100644
--- a/src/generators/dom/visitors/attributes/addElementBinding.js
+++ b/src/generators/dom/visitors/attributes/addElementBinding.js
@@ -3,7 +3,7 @@ import flattenReference from '../../../../utils/flattenReference.js';
 import getSetter from './binding/getSetter.js';
 import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
 
-export default function addElementBinding ( generator, node, attribute, block, local ) {
+export default function addElementBinding ( generator, node, block, state, attribute, local ) {
 	const { name, keypath } = flattenReference( attribute.value );
 	const { snippet, contexts, dependencies } = generator.contextualise( block, attribute.value );
 
@@ -13,12 +13,12 @@ export default function addElementBinding ( generator, node, attribute, block, l
 		if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
 	});
 
-	const handler = block.getUniqueName( `${local.name}_change_handler` );
+	const handler = block.getUniqueName( `${state.parentNode}_change_handler` );
 
 	const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue
 	const type = getStaticAttributeValue( node, 'type' );
 	const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null;
-	const value = getBindingValue( generator, block, local, node, attribute, isMultipleSelect, bindingGroup, type );
+	const value = getBindingValue( generator, block, state, local, node, attribute, isMultipleSelect, bindingGroup, type );
 	const eventName = getBindingEventName( node );
 
 	let setter = getSetter({ block, name, keypath, context: '__svelte', attribute, dependencies, value });
@@ -27,7 +27,7 @@ export default function addElementBinding ( generator, node, attribute, block, l
 	// <select> special case
 	if ( node.name === 'select' ) {
 		if ( !isMultipleSelect ) {
-			setter = `var selectedOption = ${local.name}.selectedOptions[0] || ${local.name}.options[0];\n${setter}`;
+			setter = `var selectedOption = ${state.parentNode}.selectedOptions[0] || ${state.parentNode}.options[0];\n${setter}`;
 		}
 
 		const value = block.getUniqueName( 'value' );
@@ -45,8 +45,8 @@ export default function addElementBinding ( generator, node, attribute, block, l
 
 		updateElement = deindent`
 			var ${value} = ${snippet};
-			for ( var ${i} = 0; ${i} < ${local.name}.options.length; ${i} += 1 ) {
-				var ${option} = ${local.name}.options[${i}];
+			for ( var ${i} = 0; ${i} < ${state.parentNode}.options.length; ${i} += 1 ) {
+				var ${option} = ${state.parentNode}.options[${i}];
 
 				${ifStatement}
 			}
@@ -57,32 +57,32 @@ export default function addElementBinding ( generator, node, attribute, block, l
 	else if ( attribute.name === 'group' ) {
 		if ( type === 'radio' ) {
 			setter = deindent`
-				if ( !${local.name}.checked ) return;
+				if ( !${state.parentNode}.checked ) return;
 				${setter}
 			`;
 		}
 
 		const condition = type === 'checkbox' ?
-			`~${snippet}.indexOf( ${local.name}.__value )` :
-			`${local.name}.__value === ${snippet}`;
+			`~${snippet}.indexOf( ${state.parentNode}.__value )` :
+			`${state.parentNode}.__value === ${snippet}`;
 
 		local.create.addLine(
-			`${block.component}._bindingGroups[${bindingGroup}].push( ${local.name} );`
+			`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
 		);
 
 		local.destroy.addBlock(
-			`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${local.name} ), 1 );`
+			`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
 		);
 
-		updateElement = `${local.name}.checked = ${condition};`;
+		updateElement = `${state.parentNode}.checked = ${condition};`;
 	}
 
 	// everything else
 	else {
-		updateElement = `${local.name}.${attribute.name} = ${snippet};`;
+		updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
 	}
 
-	const updating = block.getUniqueName( `${local.name}_updating` );
+	const updating = block.getUniqueName( `${state.parentNode}_updating` );
 
 	local.create.addBlock( deindent`
 		var ${updating} = false;
@@ -93,7 +93,7 @@ export default function addElementBinding ( generator, node, attribute, block, l
 			${updating} = false;
 		}
 
-		${generator.helper( 'addEventListener' )}( ${local.name}, '${eventName}', ${handler} );
+		${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${eventName}', ${handler} );
 	` );
 
 	node.initialUpdate = updateElement;
@@ -105,7 +105,7 @@ export default function addElementBinding ( generator, node, attribute, block, l
 	` );
 
 	block.builders.destroy.addLine( deindent`
-		${generator.helper( 'removeEventListener' )}( ${local.name}, '${eventName}', ${handler} );
+		${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${eventName}', ${handler} );
 	` );
 }
 
@@ -124,10 +124,10 @@ function getBindingEventName ( node ) {
 	return 'change';
 }
 
-function getBindingValue ( generator, block, local, node, attribute, isMultipleSelect, bindingGroup, type ) {
+function getBindingValue ( generator, block, state, local, node, attribute, isMultipleSelect, bindingGroup, type ) {
 	// <select multiple bind:value='selected>
 	if ( isMultipleSelect ) {
-		return `[].map.call( ${local.name}.selectedOptions, function ( option ) { return option.__value; })`;
+		return `[].map.call( ${state.parentNode}.selectedOptions, function ( option ) { return option.__value; })`;
 	}
 
 	// <select bind:value='selected>
@@ -141,16 +141,16 @@ function getBindingValue ( generator, block, local, node, attribute, isMultipleS
 			return `${generator.helper( 'getBindingGroupValue' )}( ${block.component}._bindingGroups[${bindingGroup}] )`;
 		}
 
-		return `${local.name}.__value`;
+		return `${state.parentNode}.__value`;
 	}
 
 	// <input type='range|number' bind:value>
 	if ( type === 'range' || type === 'number' ) {
-		return `+${local.name}.${attribute.name}`;
+		return `+${state.parentNode}.${attribute.name}`;
 	}
 
 	// everything else
-	return `${local.name}.${attribute.name}`;
+	return `${state.parentNode}.${attribute.name}`;
 }
 
 function getBindingGroup ( generator, keypath ) {

From ae227855fd11fcc9901d809811a461e07ca46460 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 9 Apr 2017 13:52:35 -0400
Subject: [PATCH 3/7] move some files, tidy up a bit

---
 .../dom/visitors/{ => Component}/Component.js |  6 +-
 .../attributes/addComponentAttributes.js      |  2 +-
 .../attributes/addComponentBinding.js         |  6 +-
 .../dom/visitors/{ => Element}/Element.js     | 69 ++++++++-----------
 .../attributes/addElementAttributes.js        | 38 +++++-----
 .../attributes/addElementBinding.js           | 16 ++---
 .../attributes}/getStaticAttributeValue.js    |  0
 .../{ => Element}/attributes/lookup.js        |  0
 .../dom/visitors/{ => Element}/meta/Window.js |  4 +-
 src/generators/dom/visitors/index.js          |  2 +-
 .../binding/getSetter.js                      |  0
 11 files changed, 67 insertions(+), 76 deletions(-)
 rename src/generators/dom/visitors/{ => Component}/Component.js (97%)
 rename src/generators/dom/visitors/{ => Component}/attributes/addComponentAttributes.js (98%)
 rename src/generators/dom/visitors/{ => Component}/attributes/addComponentBinding.js (90%)
 rename src/generators/dom/visitors/{ => Element}/Element.js (65%)
 rename src/generators/dom/visitors/{ => Element}/attributes/addElementAttributes.js (87%)
 rename src/generators/dom/visitors/{ => Element}/attributes/addElementBinding.js (92%)
 rename src/generators/dom/visitors/{attributes/binding => Element/attributes}/getStaticAttributeValue.js (100%)
 rename src/generators/dom/visitors/{ => Element}/attributes/lookup.js (100%)
 rename src/generators/dom/visitors/{ => Element}/meta/Window.js (94%)
 rename src/generators/dom/visitors/{attributes => shared}/binding/getSetter.js (100%)

diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component/Component.js
similarity index 97%
rename from src/generators/dom/visitors/Component.js
rename to src/generators/dom/visitors/Component/Component.js
index d4c5a86dc6..577a78fa1a 100644
--- a/src/generators/dom/visitors/Component.js
+++ b/src/generators/dom/visitors/Component/Component.js
@@ -1,6 +1,6 @@
-import deindent from '../../../utils/deindent.js';
-import CodeBuilder from '../../../utils/CodeBuilder.js';
-import visit from '../visit.js';
+import deindent from '../../../../utils/deindent.js';
+import CodeBuilder from '../../../../utils/CodeBuilder.js';
+import visit from '../../visit.js';
 import addComponentAttributes from './attributes/addComponentAttributes.js';
 
 function capDown ( name ) {
diff --git a/src/generators/dom/visitors/attributes/addComponentAttributes.js b/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
similarity index 98%
rename from src/generators/dom/visitors/attributes/addComponentAttributes.js
rename to src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
index b659592d52..0bc983c2f7 100644
--- a/src/generators/dom/visitors/attributes/addComponentAttributes.js
+++ b/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
@@ -1,5 +1,5 @@
 import addComponentBinding from './addComponentBinding.js';
-import deindent from '../../../../utils/deindent.js';
+import deindent from '../../../../../utils/deindent.js';
 
 export default function addComponentAttributes ( generator, block, node, local ) {
 	local.staticAttributes = [];
diff --git a/src/generators/dom/visitors/attributes/addComponentBinding.js b/src/generators/dom/visitors/Component/attributes/addComponentBinding.js
similarity index 90%
rename from src/generators/dom/visitors/attributes/addComponentBinding.js
rename to src/generators/dom/visitors/Component/attributes/addComponentBinding.js
index 10482fee5c..f9a7e035d2 100644
--- a/src/generators/dom/visitors/attributes/addComponentBinding.js
+++ b/src/generators/dom/visitors/Component/attributes/addComponentBinding.js
@@ -1,6 +1,6 @@
-import deindent from '../../../../utils/deindent.js';
-import flattenReference from '../../../../utils/flattenReference.js';
-import getSetter from './binding/getSetter.js';
+import deindent from '../../../../../utils/deindent.js';
+import flattenReference from '../../../../../utils/flattenReference.js';
+import getSetter from '../../shared/binding/getSetter.js';
 
 export default function addComponentBinding ( generator, node, attribute, block, local ) {
 	const { name, keypath } = flattenReference( attribute.value );
diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element/Element.js
similarity index 65%
rename from src/generators/dom/visitors/Element.js
rename to src/generators/dom/visitors/Element/Element.js
index 01e347ef59..8f49390730 100644
--- a/src/generators/dom/visitors/Element.js
+++ b/src/generators/dom/visitors/Element/Element.js
@@ -1,8 +1,7 @@
-import CodeBuilder from '../../../utils/CodeBuilder.js';
-import deindent from '../../../utils/deindent.js';
-import visit from '../visit.js';
+import deindent from '../../../../utils/deindent.js';
+import visit from '../../visit.js';
 import addElementAttributes from './attributes/addElementAttributes.js';
-import visitComponent from './Component.js';
+import visitComponent from '../Component/Component.js';
 import visitWindow from './meta/Window.js';
 
 const meta = {
@@ -26,15 +25,20 @@ export default function visitElement ( generator, block, state, node ) {
 		namespace: node.name === 'svg' ? 'http://www.w3.org/2000/svg' : state.namespace
 	});
 
-	const local = {
-		allUsedContexts: [],
+	block.builders.create.addLine( `var ${name} = ${getRenderStatement( generator, childState.namespace, node.name )};` );
 
-		create: new CodeBuilder(),
-		update: new CodeBuilder(),
-		destroy: new CodeBuilder()
-	};
+	if ( !state.parentNode ) {
+		block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
+	}
 
-	const isToplevel = !state.parentNode;
+	// add CSS encapsulation attribute
+	if ( generator.cssId && state.isTopLevel ) {
+		block.builders.create.addLine( `${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );` );
+	}
+
+	const local = {
+		allUsedContexts: []
+	};
 
 	addElementAttributes( generator, block, childState, node, local );
 
@@ -57,47 +61,22 @@ export default function visitElement ( generator, block, state, node ) {
 			return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
 		}).join( '\n' );
 
-		local.create.addBlock( deindent`
+		block.builders.create.addBlock( deindent`
 			${name}.__svelte = {
 				${initialProps}
 			};
 		` );
 
-		local.update.addBlock( updates );
-	}
-
-	let render;
-
-	if ( childState.namespace ) {
-		if ( childState.namespace === 'http://www.w3.org/2000/svg' ) {
-			render = `var ${name} = ${generator.helper( 'createSvgElement' )}( '${node.name}' )`;
-		} else {
-			render = `var ${name} = document.createElementNS( '${childState.namespace}', '${node.name}' );`;
-		}
-	} else {
-		render = `var ${name} = ${generator.helper( 'createElement' )}( '${node.name}' );`;
-	}
-
-	if ( generator.cssId && state.isTopLevel ) {
-		render += `\n${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );`;
-	}
-
-	local.create.addLineAtStart( render );
-	if ( isToplevel ) {
-		block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
+		block.builders.update.addBlock( updates );
 	}
 
 	// special case – bound <option> without a value attribute
 	if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { 	// TODO check it's bound
 		const statement = `${name}.__value = ${name}.textContent;`;
-		local.update.addLine( statement );
+		block.builders.update.addLine( statement );
 		node.initialUpdate = statement;
 	}
 
-	block.builders.create.addBlock( local.create );
-	if ( !local.update.isEmpty() ) block.builders.update.addBlock( local.update );
-	if ( !local.destroy.isEmpty() ) block.builders.destroy.addBlock( local.destroy );
-
 	block.createMountStatement( name, state.parentNode );
 
 	node.children.forEach( child => {
@@ -107,4 +86,16 @@ export default function visitElement ( generator, block, state, node ) {
 	if ( node.initialUpdate ) {
 		block.builders.create.addBlock( node.initialUpdate );
 	}
+}
+
+function getRenderStatement ( generator, namespace, name ) {
+	if ( namespace ) {
+		if ( namespace === 'http://www.w3.org/2000/svg' ) {
+			return `${generator.helper( 'createSvgElement' )}( '${name}' )`;
+		}
+
+		return `document.createElementNS( '${namespace}', '${name}' )`;
+	}
+
+	return `${generator.helper( 'createElement' )}( '${name}' )`;
 }
\ No newline at end of file
diff --git a/src/generators/dom/visitors/attributes/addElementAttributes.js b/src/generators/dom/visitors/Element/attributes/addElementAttributes.js
similarity index 87%
rename from src/generators/dom/visitors/attributes/addElementAttributes.js
rename to src/generators/dom/visitors/Element/attributes/addElementAttributes.js
index 16fc52d085..bcba44d877 100644
--- a/src/generators/dom/visitors/attributes/addElementAttributes.js
+++ b/src/generators/dom/visitors/Element/attributes/addElementAttributes.js
@@ -1,8 +1,8 @@
 import attributeLookup from './lookup.js';
 import addElementBinding from './addElementBinding';
-import deindent from '../../../../utils/deindent.js';
-import flattenReference from '../../../../utils/flattenReference.js';
-import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
+import deindent from '../../../../../utils/deindent.js';
+import flattenReference from '../../../../../utils/flattenReference.js';
+import getStaticAttributeValue from './getStaticAttributeValue.js';
 
 export default function addElementAttributes ( generator, block, state, node, local ) {
 	node.attributes.forEach( attribute => {
@@ -31,11 +31,11 @@ export default function addElementAttributes ( generator, block, state, node, lo
 			if ( attribute.value === true ) {
 				// attributes without values, e.g. <textarea readonly>
 				if ( propertyName ) {
-					local.create.addLine(
+					block.builders.create.addLine(
 						`${state.parentNode}.${propertyName} = true;`
 					);
 				} else {
-					local.create.addLine(
+					block.builders.create.addLine(
 						`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
 					);
 				}
@@ -48,11 +48,11 @@ export default function addElementAttributes ( generator, block, state, node, lo
 
 			else if ( attribute.value.length === 0 ) {
 				if ( propertyName ) {
-					local.create.addLine(
+					block.builders.create.addLine(
 						`${state.parentNode}.${propertyName} = '';`
 					);
 				} else {
-					local.create.addLine(
+					block.builders.create.addLine(
 						`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
 					);
 				}
@@ -74,7 +74,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 						state.namespace = value.data;
 						addAttribute = true;
 					} else if ( propertyName ) {
-						local.create.addLine(
+						block.builders.create.addLine(
 							`${state.parentNode}.${propertyName} = ${result};`
 						);
 					} else {
@@ -82,7 +82,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 					}
 
 					if ( addAttribute ) {
-						local.create.addLine(
+						block.builders.create.addLine(
 							`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
 						);
 					}
@@ -95,7 +95,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 					const { snippet } = generator.contextualise( block, value.expression );
 
 					const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
-					local.create.addLine( `var ${last} = ${snippet};` );
+					block.builders.create.addLine( `var ${last} = ${snippet};` );
 
 					let updater;
 					if ( propertyName ) {
@@ -104,9 +104,9 @@ export default function addElementAttributes ( generator, block, state, node, lo
 						updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
 					}
 
-					local.create.addLine( updater );
+					block.builders.create.addLine( updater );
 
-					local.update.addBlock( deindent`
+					block.builders.update.addBlock( deindent`
 						if ( ( ${block.tmp()} = ${snippet} ) !== ${last} ) {
 							${last} = ${block.tmp()};
 							${updater}
@@ -136,15 +136,15 @@ export default function addElementAttributes ( generator, block, state, node, lo
 					updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
 				}
 
-				local.create.addLine( updater );
-				local.update.addLine( updater );
+				block.builders.create.addLine( updater );
+				block.builders.update.addLine( updater );
 			}
 
 			if ( isIndirectlyBoundValue ) {
 				const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
 
-				local.create.addLine( updateValue );
-				if ( dynamic ) local.update.addLine( updateValue );
+				block.builders.create.addLine( updateValue );
+				if ( dynamic ) block.builders.update.addLine( updateValue );
 			}
 		}
 
@@ -182,7 +182,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
 
 			if ( generator.events.has( name ) ) {
-				local.create.addBlock( deindent`
+				block.builders.create.addBlock( deindent`
 					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
 						${handlerBody}
 					}.bind( ${state.parentNode} ) );
@@ -192,7 +192,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 					${handlerName}.teardown();
 				` );
 			} else {
-				local.create.addBlock( deindent`
+				block.builders.create.addBlock( deindent`
 					function ${handlerName} ( event ) {
 						${handlerBody}
 					}
@@ -213,7 +213,7 @@ export default function addElementAttributes ( generator, block, state, node, lo
 		else if ( attribute.type === 'Ref' ) {
 			generator.usesRefs = true;
 
-			local.create.addLine(
+			block.builders.create.addLine(
 				`${block.component}.refs.${name} = ${state.parentNode};`
 			);
 
diff --git a/src/generators/dom/visitors/attributes/addElementBinding.js b/src/generators/dom/visitors/Element/attributes/addElementBinding.js
similarity index 92%
rename from src/generators/dom/visitors/attributes/addElementBinding.js
rename to src/generators/dom/visitors/Element/attributes/addElementBinding.js
index 31a77f9843..31a55b38b3 100644
--- a/src/generators/dom/visitors/attributes/addElementBinding.js
+++ b/src/generators/dom/visitors/Element/attributes/addElementBinding.js
@@ -1,7 +1,7 @@
-import deindent from '../../../../utils/deindent.js';
-import flattenReference from '../../../../utils/flattenReference.js';
-import getSetter from './binding/getSetter.js';
-import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
+import deindent from '../../../../../utils/deindent.js';
+import flattenReference from '../../../../../utils/flattenReference.js';
+import getSetter from '../../shared/binding/getSetter.js';
+import getStaticAttributeValue from './getStaticAttributeValue.js';
 
 export default function addElementBinding ( generator, node, block, state, attribute, local ) {
 	const { name, keypath } = flattenReference( attribute.value );
@@ -66,11 +66,11 @@ export default function addElementBinding ( generator, node, block, state, attri
 			`~${snippet}.indexOf( ${state.parentNode}.__value )` :
 			`${state.parentNode}.__value === ${snippet}`;
 
-		local.create.addLine(
+		block.builders.create.addLine(
 			`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
 		);
 
-		local.destroy.addBlock(
+		block.builders.destroy.addBlock(
 			`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
 		);
 
@@ -84,7 +84,7 @@ export default function addElementBinding ( generator, node, block, state, attri
 
 	const updating = block.getUniqueName( `${state.parentNode}_updating` );
 
-	local.create.addBlock( deindent`
+	block.builders.create.addBlock( deindent`
 		var ${updating} = false;
 
 		function ${handler} () {
@@ -98,7 +98,7 @@ export default function addElementBinding ( generator, node, block, state, attri
 
 	node.initialUpdate = updateElement;
 
-	local.update.addLine( deindent`
+	block.builders.update.addLine( deindent`
 		if ( !${updating} ) {
 			${updateElement}
 		}
diff --git a/src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js b/src/generators/dom/visitors/Element/attributes/getStaticAttributeValue.js
similarity index 100%
rename from src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js
rename to src/generators/dom/visitors/Element/attributes/getStaticAttributeValue.js
diff --git a/src/generators/dom/visitors/attributes/lookup.js b/src/generators/dom/visitors/Element/attributes/lookup.js
similarity index 100%
rename from src/generators/dom/visitors/attributes/lookup.js
rename to src/generators/dom/visitors/Element/attributes/lookup.js
diff --git a/src/generators/dom/visitors/meta/Window.js b/src/generators/dom/visitors/Element/meta/Window.js
similarity index 94%
rename from src/generators/dom/visitors/meta/Window.js
rename to src/generators/dom/visitors/Element/meta/Window.js
index e9ae4f6f37..c0f9f3d181 100644
--- a/src/generators/dom/visitors/meta/Window.js
+++ b/src/generators/dom/visitors/Element/meta/Window.js
@@ -1,5 +1,5 @@
-import flattenReference from '../../../../utils/flattenReference.js';
-import deindent from '../../../../utils/deindent.js';
+import flattenReference from '../../../../../utils/flattenReference.js';
+import deindent from '../../../../../utils/deindent.js';
 
 const associatedEvents = {
 	innerWidth: 'resize',
diff --git a/src/generators/dom/visitors/index.js b/src/generators/dom/visitors/index.js
index 8e125e5d8b..7a3d2fecd4 100644
--- a/src/generators/dom/visitors/index.js
+++ b/src/generators/dom/visitors/index.js
@@ -1,6 +1,6 @@
 import Comment from './Comment.js';
 import EachBlock from './EachBlock.js';
-import Element from './Element.js';
+import Element from './Element/Element.js';
 import IfBlock from './IfBlock.js';
 import MustacheTag from './MustacheTag.js';
 import RawMustacheTag from './RawMustacheTag.js';
diff --git a/src/generators/dom/visitors/attributes/binding/getSetter.js b/src/generators/dom/visitors/shared/binding/getSetter.js
similarity index 100%
rename from src/generators/dom/visitors/attributes/binding/getSetter.js
rename to src/generators/dom/visitors/shared/binding/getSetter.js

From 1c761e709bd82b0113f1f306b33ad5e511f7a14f Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 9 Apr 2017 14:42:57 -0400
Subject: [PATCH 4/7] refactor a lot of attribute code

---
 src/generators/Generator.js                   |   4 +-
 src/generators/dom/Block.js                   |   4 +-
 .../dom/visitors/Element/Attribute.js         | 133 ++++++++++
 .../addElementBinding.js => Binding.js}       |  14 +-
 .../dom/visitors/Element/Element.js           |  69 ++++--
 .../dom/visitors/Element/EventHandler.js      |  62 +++++
 src/generators/dom/visitors/Element/Ref.js    |  15 ++
 .../attributes/addElementAttributes.js        | 229 ------------------
 .../getStaticAttributeValue.js                |   0
 .../Element/{attributes => }/lookup.js        |   0
 10 files changed, 264 insertions(+), 266 deletions(-)
 create mode 100644 src/generators/dom/visitors/Element/Attribute.js
 rename src/generators/dom/visitors/Element/{attributes/addElementBinding.js => Binding.js} (89%)
 create mode 100644 src/generators/dom/visitors/Element/EventHandler.js
 create mode 100644 src/generators/dom/visitors/Element/Ref.js
 delete mode 100644 src/generators/dom/visitors/Element/attributes/addElementAttributes.js
 rename src/generators/dom/visitors/Element/{attributes => }/getStaticAttributeValue.js (100%)
 rename src/generators/dom/visitors/Element/{attributes => }/lookup.js (100%)

diff --git a/src/generators/Generator.js b/src/generators/Generator.js
index 37d8de90b6..f1aef70eea 100644
--- a/src/generators/Generator.js
+++ b/src/generators/Generator.js
@@ -60,14 +60,14 @@ export default class Generator {
 		return alias;
 	}
 
-	contextualise ( fragment, expression, isEventHandler ) {
+	contextualise ( block, expression, isEventHandler ) {
 		this.addSourcemapLocations( expression );
 
 		const usedContexts = [];
 		const dependencies = [];
 
 		const { code, helpers } = this;
-		const { contextDependencies, contexts, indexes } = fragment;
+		const { contextDependencies, contexts, indexes } = block;
 
 		let scope = annotateWithScopes( expression );
 
diff --git a/src/generators/dom/Block.js b/src/generators/dom/Block.js
index 3f5b838bbb..90329c6c21 100644
--- a/src/generators/dom/Block.js
+++ b/src/generators/dom/Block.js
@@ -39,7 +39,7 @@ export default class Block {
 				`var ${name} = ${renderStatement};`
 			);
 
-			this.createMountStatement( name, parentNode );
+			this.mount( name, parentNode );
 		} else {
 			this.builders.create.addLine( `${this.generator.helper( 'appendNode' )}( ${renderStatement}, ${parentNode} );` );
 		}
@@ -58,7 +58,7 @@ export default class Block {
 		this.addElement( name, renderStatement, parentNode, true );
 	}
 
-	createMountStatement ( name, parentNode ) {
+	mount ( name, parentNode ) {
 		if ( parentNode ) {
 			this.builders.create.addLine( `${this.generator.helper( 'appendNode' )}( ${name}, ${parentNode} );` );
 		} else {
diff --git a/src/generators/dom/visitors/Element/Attribute.js b/src/generators/dom/visitors/Element/Attribute.js
new file mode 100644
index 0000000000..c73bc1973b
--- /dev/null
+++ b/src/generators/dom/visitors/Element/Attribute.js
@@ -0,0 +1,133 @@
+import attributeLookup from './lookup.js';
+import deindent from '../../../../utils/deindent.js';
+import getStaticAttributeValue from './getStaticAttributeValue.js';
+
+export default function visitAttribute ( generator, block, state, node, attribute ) {
+	const name = attribute.name;
+
+	let metadata = state.namespace ? null : attributeLookup[ name ];
+	if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
+
+	let dynamic = false;
+
+	const isIndirectlyBoundValue = name === 'value' && (
+		node.name === 'option' || // TODO check it's actually bound
+		node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) )
+	);
+
+	const propertyName = isIndirectlyBoundValue ? '__value' : metadata && metadata.propertyName;
+
+	// xlink is a special case... we could maybe extend this to generic
+	// namespaced attributes but I'm not sure that's applicable in
+	// HTML5?
+	const method = name.slice( 0, 6 ) === 'xlink:' ? 'setXlinkAttribute' : 'setAttribute';
+
+	// attributes without values, e.g. <textarea readonly>
+	if ( attribute.value === true ) {
+		if ( propertyName ) {
+			block.builders.create.addLine(
+				`${state.parentNode}.${propertyName} = true;`
+			);
+		} else {
+			block.builders.create.addLine(
+				`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
+			);
+		}
+
+		// special case – autofocus. has to be handled in a bit of a weird way
+		if ( name === 'autofocus' ) {
+			block.autofocus = state.parentNode;
+		}
+	}
+
+	// empty string
+	else if ( attribute.value.length === 0 ) {
+		if ( propertyName ) {
+			block.builders.create.addLine(
+				`${state.parentNode}.${propertyName} = '';`
+			);
+		} else {
+			block.builders.create.addLine(
+				`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
+			);
+		}
+	}
+
+	// static text or a single {{tag}}
+	else if ( attribute.value.length === 1 ) {
+		const value = attribute.value[0];
+
+		if ( value.type === 'Text' ) {
+			// static attributes
+			const result = JSON.stringify( value.data );
+
+			if ( propertyName ) {
+				block.builders.create.addLine(
+					`${state.parentNode}.${propertyName} = ${result};`
+				);
+			} else {
+				if ( name === 'xmlns' ) {
+					// special case
+					// TODO this attribute must be static – enforce at compile time
+					state.namespace = value.data;
+				}
+
+				block.builders.create.addLine(
+					`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
+				);
+			}
+		}
+
+		else {
+			dynamic = true;
+
+			// dynamic – but potentially non-string – attributes
+			const { snippet } = generator.contextualise( block, value.expression );
+
+			const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
+			block.builders.create.addLine( `var ${last} = ${snippet};` );
+
+			const updater = propertyName ?
+				`${state.parentNode}.${propertyName} = ${last};` :
+				`${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
+
+			block.builders.create.addLine( updater );
+
+			block.builders.update.addBlock( deindent`
+				if ( ( ${block.tmp()} = ${snippet} ) !== ${last} ) {
+					${last} = ${block.tmp()};
+					${updater}
+				}
+			` );
+		}
+	}
+
+	else {
+		dynamic = true;
+
+		const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
+			attribute.value.map( chunk => {
+				if ( chunk.type === 'Text' ) {
+					return JSON.stringify( chunk.data );
+				} else {
+					const { snippet } = generator.contextualise( block, chunk.expression );
+					return `( ${snippet} )`;
+				}
+			}).join( ' + ' )
+		);
+
+		const updater = propertyName ?
+			`${state.parentNode}.${propertyName} = ${value};` :
+			`${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
+
+		block.builders.create.addLine( updater );
+		block.builders.update.addLine( updater );
+	}
+
+	if ( isIndirectlyBoundValue ) {
+		const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
+
+		block.builders.create.addLine( updateValue );
+		if ( dynamic ) block.builders.update.addLine( updateValue );
+	}
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/attributes/addElementBinding.js b/src/generators/dom/visitors/Element/Binding.js
similarity index 89%
rename from src/generators/dom/visitors/Element/attributes/addElementBinding.js
rename to src/generators/dom/visitors/Element/Binding.js
index 31a55b38b3..61c275f55e 100644
--- a/src/generators/dom/visitors/Element/attributes/addElementBinding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -1,16 +1,16 @@
-import deindent from '../../../../../utils/deindent.js';
-import flattenReference from '../../../../../utils/flattenReference.js';
-import getSetter from '../../shared/binding/getSetter.js';
+import deindent from '../../../../utils/deindent.js';
+import flattenReference from '../../../../utils/flattenReference.js';
+import getSetter from '../shared/binding/getSetter.js';
 import getStaticAttributeValue from './getStaticAttributeValue.js';
 
-export default function addElementBinding ( generator, node, block, state, attribute, local ) {
+export default function visitBinding ( generator, block, state, node, attribute ) {
 	const { name, keypath } = flattenReference( attribute.value );
 	const { snippet, contexts, dependencies } = generator.contextualise( block, attribute.value );
 
 	if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' );
 
 	contexts.forEach( context => {
-		if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
+		if ( !~state.allUsedContexts.indexOf( context ) ) state.allUsedContexts.push( context );
 	});
 
 	const handler = block.getUniqueName( `${state.parentNode}_change_handler` );
@@ -18,7 +18,7 @@ export default function addElementBinding ( generator, node, block, state, attri
 	const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue
 	const type = getStaticAttributeValue( node, 'type' );
 	const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null;
-	const value = getBindingValue( generator, block, state, local, node, attribute, isMultipleSelect, bindingGroup, type );
+	const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type );
 	const eventName = getBindingEventName( node );
 
 	let setter = getSetter({ block, name, keypath, context: '__svelte', attribute, dependencies, value });
@@ -124,7 +124,7 @@ function getBindingEventName ( node ) {
 	return 'change';
 }
 
-function getBindingValue ( generator, block, state, local, node, attribute, isMultipleSelect, bindingGroup, type ) {
+function getBindingValue ( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ) {
 	// <select multiple bind:value='selected>
 	if ( isMultipleSelect ) {
 		return `[].map.call( ${state.parentNode}.selectedOptions, function ( option ) { return option.__value; })`;
diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js
index 8f49390730..a0131efe3d 100644
--- a/src/generators/dom/visitors/Element/Element.js
+++ b/src/generators/dom/visitors/Element/Element.js
@@ -1,13 +1,30 @@
 import deindent from '../../../../utils/deindent.js';
 import visit from '../../visit.js';
-import addElementAttributes from './attributes/addElementAttributes.js';
 import visitComponent from '../Component/Component.js';
 import visitWindow from './meta/Window.js';
+import visitAttribute from './Attribute.js';
+import visitEventHandler from './EventHandler.js';
+import visitBinding from './Binding.js';
+import visitRef from './Ref.js';
 
 const meta = {
 	':Window': visitWindow
 };
 
+const order = {
+	Attribute: 1,
+	EventHandler: 2,
+	Binding: 3,
+	Ref: 4
+};
+
+const visitors = {
+	Attribute: visitAttribute,
+	EventHandler: visitEventHandler,
+	Binding: visitBinding,
+	Ref: visitRef
+};
+
 export default function visitElement ( generator, block, state, node ) {
 	if ( node.name in meta ) {
 		return meta[ node.name ]( generator, block, node );
@@ -22,10 +39,12 @@ export default function visitElement ( generator, block, state, node ) {
 	const childState = Object.assign( {}, state, {
 		isTopLevel: false,
 		parentNode: name,
-		namespace: node.name === 'svg' ? 'http://www.w3.org/2000/svg' : state.namespace
+		namespace: node.name === 'svg' ? 'http://www.w3.org/2000/svg' : state.namespace,
+		allUsedContexts: []
 	});
 
 	block.builders.create.addLine( `var ${name} = ${getRenderStatement( generator, childState.namespace, node.name )};` );
+	block.mount( name, state.parentNode );
 
 	if ( !state.parentNode ) {
 		block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
@@ -36,14 +55,25 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.create.addLine( `${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );` );
 	}
 
-	const local = {
-		allUsedContexts: []
-	};
+	node.attributes
+		.sort( ( a, b ) => order[ a.type ] - order[ b.type ] )
+		.forEach( attribute => {
+			visitors[ attribute.type ]( generator, block, childState, node, attribute );
+		});
+
+	// special case – bound <option> without a value attribute
+	if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { 	// TODO check it's bound
+		const statement = `${name}.__value = ${name}.textContent;`;
+		block.builders.update.addLine( statement );
+		node.initialUpdate = statement;
+	}
 
-	addElementAttributes( generator, block, childState, node, local );
+	if ( node.initialUpdate ) {
+		block.builders.create.addBlock( node.initialUpdate );
+	}
 
-	if ( local.allUsedContexts.length ) {
-		const initialProps = local.allUsedContexts.map( contextName => {
+	if ( childState.allUsedContexts.length ) {
+		const initialProps = childState.allUsedContexts.map( contextName => {
 			if ( contextName === 'root' ) return `root: root`;
 
 			const listName = block.listNames.get( contextName );
@@ -52,7 +82,7 @@ export default function visitElement ( generator, block, state, node ) {
 			return `${listName}: ${listName},\n${indexName}: ${indexName}`;
 		}).join( ',\n' );
 
-		const updates = local.allUsedContexts.map( contextName => {
+		const updates = childState.allUsedContexts.map( contextName => {
 			if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
 
 			const listName = block.listNames.get( contextName );
@@ -70,30 +100,17 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.update.addBlock( updates );
 	}
 
-	// special case – bound <option> without a value attribute
-	if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { 	// TODO check it's bound
-		const statement = `${name}.__value = ${name}.textContent;`;
-		block.builders.update.addLine( statement );
-		node.initialUpdate = statement;
-	}
-
-	block.createMountStatement( name, state.parentNode );
-
 	node.children.forEach( child => {
 		visit( generator, block, childState, child );
 	});
-
-	if ( node.initialUpdate ) {
-		block.builders.create.addBlock( node.initialUpdate );
-	}
 }
 
 function getRenderStatement ( generator, namespace, name ) {
-	if ( namespace ) {
-		if ( namespace === 'http://www.w3.org/2000/svg' ) {
-			return `${generator.helper( 'createSvgElement' )}( '${name}' )`;
-		}
+	if ( namespace === 'http://www.w3.org/2000/svg' ) {
+		return `${generator.helper( 'createSvgElement' )}( '${name}' )`;
+	}
 
+	if ( namespace ) {
 		return `document.createElementNS( '${namespace}', '${name}' )`;
 	}
 
diff --git a/src/generators/dom/visitors/Element/EventHandler.js b/src/generators/dom/visitors/Element/EventHandler.js
new file mode 100644
index 0000000000..3bc8370af3
--- /dev/null
+++ b/src/generators/dom/visitors/Element/EventHandler.js
@@ -0,0 +1,62 @@
+import deindent from '../../../../utils/deindent.js';
+import flattenReference from '../../../../utils/flattenReference.js';
+
+export default function visitEventHandler ( generator, block, state, node, attribute ) {
+	const name = attribute.name;
+
+	// TODO verify that it's a valid callee (i.e. built-in or declared method)
+	generator.addSourcemapLocations( attribute.expression );
+
+	const flattened = flattenReference( attribute.expression.callee );
+	if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
+		// allow event.stopPropagation(), this.select() etc
+		generator.code.prependRight( attribute.expression.start, `${block.component}.` );
+	}
+
+	const usedContexts = [];
+	attribute.expression.arguments.forEach( arg => {
+		const { contexts } = generator.contextualise( block, arg, true );
+
+		contexts.forEach( context => {
+			if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
+			if ( !~state.allUsedContexts.indexOf( context ) ) state.allUsedContexts.push( context );
+		});
+	});
+
+	// TODO hoist event handlers? can do `this.__component.method(...)`
+	const declarations = usedContexts.map( name => {
+		if ( name === 'root' ) return 'var root = this.__svelte.root;';
+
+		const listName = block.listNames.get( name );
+		const indexName = block.indexNames.get( name );
+
+		return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
+	});
+
+	const handlerName = block.getUniqueName( `${name}_handler` );
+	const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
+
+	if ( generator.events.has( name ) ) {
+		block.builders.create.addBlock( deindent`
+			var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
+				${handlerBody}
+			}.bind( ${state.parentNode} ) );
+		` );
+
+		block.builders.destroy.addLine( deindent`
+			${handlerName}.teardown();
+		` );
+	} else {
+		block.builders.create.addBlock( deindent`
+			function ${handlerName} ( event ) {
+				${handlerBody}
+			}
+
+			${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
+		` );
+
+		block.builders.destroy.addLine( deindent`
+			${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
+		` );
+	}
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/Ref.js b/src/generators/dom/visitors/Element/Ref.js
new file mode 100644
index 0000000000..4e40746c62
--- /dev/null
+++ b/src/generators/dom/visitors/Element/Ref.js
@@ -0,0 +1,15 @@
+import deindent from '../../../../utils/deindent.js';
+
+export default function visitRef ( generator, block, state, node, attribute ) {
+	const name = attribute.name;
+
+	block.builders.create.addLine(
+		`${block.component}.refs.${name} = ${state.parentNode};`
+	);
+
+	block.builders.destroy.addLine( deindent`
+		if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null;
+	` );
+
+	generator.usesRefs = true; // so this component.refs object is created
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/attributes/addElementAttributes.js b/src/generators/dom/visitors/Element/attributes/addElementAttributes.js
deleted file mode 100644
index bcba44d877..0000000000
--- a/src/generators/dom/visitors/Element/attributes/addElementAttributes.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import attributeLookup from './lookup.js';
-import addElementBinding from './addElementBinding';
-import deindent from '../../../../../utils/deindent.js';
-import flattenReference from '../../../../../utils/flattenReference.js';
-import getStaticAttributeValue from './getStaticAttributeValue.js';
-
-export default function addElementAttributes ( generator, block, state, node, local ) {
-	node.attributes.forEach( attribute => {
-		const name = attribute.name;
-
-		if ( attribute.type === 'Attribute' ) {
-			let metadata = state.namespace ? null : attributeLookup[ name ];
-			if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
-
-			let dynamic = false;
-
-			const isIndirectlyBoundValue = name === 'value' && (
-				node.name === 'option' || // TODO check it's actually bound
-				node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) )
-			);
-
-			const propertyName = isIndirectlyBoundValue ? '__value' : metadata && metadata.propertyName;
-
-			const isXlink = name.slice( 0, 6 ) === 'xlink:';
-
-			// xlink is a special case... we could maybe extend this to generic
-			// namespaced attributes but I'm not sure that's applicable in
-			// HTML5?
-			const method = isXlink ? 'setXlinkAttribute' : 'setAttribute';
-
-			if ( attribute.value === true ) {
-				// attributes without values, e.g. <textarea readonly>
-				if ( propertyName ) {
-					block.builders.create.addLine(
-						`${state.parentNode}.${propertyName} = true;`
-					);
-				} else {
-					block.builders.create.addLine(
-						`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
-					);
-				}
-
-				// special case – autofocus. has to be handled in a bit of a weird way
-				if ( name === 'autofocus' ) {
-					block.autofocus = state.parentNode;
-				}
-			}
-
-			else if ( attribute.value.length === 0 ) {
-				if ( propertyName ) {
-					block.builders.create.addLine(
-						`${state.parentNode}.${propertyName} = '';`
-					);
-				} else {
-					block.builders.create.addLine(
-						`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
-					);
-				}
-			}
-
-			else if ( attribute.value.length === 1 ) {
-				const value = attribute.value[0];
-
-				let result = '';
-
-				if ( value.type === 'Text' ) {
-					// static attributes
-					result = JSON.stringify( value.data );
-
-					let addAttribute = false;
-					if ( name === 'xmlns' ) {
-						// special case
-						// TODO this attribute must be static – enforce at compile time
-						state.namespace = value.data;
-						addAttribute = true;
-					} else if ( propertyName ) {
-						block.builders.create.addLine(
-							`${state.parentNode}.${propertyName} = ${result};`
-						);
-					} else {
-						addAttribute = true;
-					}
-
-					if ( addAttribute ) {
-						block.builders.create.addLine(
-							`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
-						);
-					}
-				}
-
-				else {
-					dynamic = true;
-
-					// dynamic – but potentially non-string – attributes
-					const { snippet } = generator.contextualise( block, value.expression );
-
-					const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
-					block.builders.create.addLine( `var ${last} = ${snippet};` );
-
-					let updater;
-					if ( propertyName ) {
-						updater = `${state.parentNode}.${propertyName} = ${last};`;
-					} else {
-						updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
-					}
-
-					block.builders.create.addLine( updater );
-
-					block.builders.update.addBlock( deindent`
-						if ( ( ${block.tmp()} = ${snippet} ) !== ${last} ) {
-							${last} = ${block.tmp()};
-							${updater}
-						}
-					` );
-				}
-			}
-
-			else {
-				dynamic = true;
-
-				const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
-					attribute.value.map( chunk => {
-						if ( chunk.type === 'Text' ) {
-							return JSON.stringify( chunk.data );
-						} else {
-							const { snippet } = generator.contextualise( block, chunk.expression );
-							return `( ${snippet} )`;
-						}
-					}).join( ' + ' )
-				);
-
-				let updater;
-				if (propertyName) {
-					updater = `${state.parentNode}.${propertyName} = ${value};`;
-				} else {
-					updater = `${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
-				}
-
-				block.builders.create.addLine( updater );
-				block.builders.update.addLine( updater );
-			}
-
-			if ( isIndirectlyBoundValue ) {
-				const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
-
-				block.builders.create.addLine( updateValue );
-				if ( dynamic ) block.builders.update.addLine( updateValue );
-			}
-		}
-
-		else if ( attribute.type === 'EventHandler' ) {
-			// TODO verify that it's a valid callee (i.e. built-in or declared method)
-			generator.addSourcemapLocations( attribute.expression );
-
-			const flattened = flattenReference( attribute.expression.callee );
-			if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
-				// allow event.stopPropagation(), this.select() etc
-				generator.code.prependRight( attribute.expression.start, `${block.component}.` );
-			}
-
-			const usedContexts = [];
-			attribute.expression.arguments.forEach( arg => {
-				const { contexts } = generator.contextualise( block, arg, true );
-
-				contexts.forEach( context => {
-					if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
-					if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
-				});
-			});
-
-			// TODO hoist event handlers? can do `this.__component.method(...)`
-			const declarations = usedContexts.map( name => {
-				if ( name === 'root' ) return 'var root = this.__svelte.root;';
-
-				const listName = block.listNames.get( name );
-				const indexName = block.indexNames.get( name );
-
-				return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
-			});
-
-			const handlerName = block.getUniqueName( `${name}_handler` );
-			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
-
-			if ( generator.events.has( name ) ) {
-				block.builders.create.addBlock( deindent`
-					var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
-						${handlerBody}
-					}.bind( ${state.parentNode} ) );
-				` );
-
-				block.builders.destroy.addLine( deindent`
-					${handlerName}.teardown();
-				` );
-			} else {
-				block.builders.create.addBlock( deindent`
-					function ${handlerName} ( event ) {
-						${handlerBody}
-					}
-
-					${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
-				` );
-
-				block.builders.destroy.addLine( deindent`
-					${generator.helper( 'removeEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
-				` );
-			}
-		}
-
-		else if ( attribute.type === 'Binding' ) {
-			addElementBinding( generator, node, block, state, attribute, local );
-		}
-
-		else if ( attribute.type === 'Ref' ) {
-			generator.usesRefs = true;
-
-			block.builders.create.addLine(
-				`${block.component}.refs.${name} = ${state.parentNode};`
-			);
-
-			block.builders.destroy.addLine( deindent`
-				if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null;
-			` );
-		}
-
-		else {
-			throw new Error( `Not implemented: ${attribute.type}` );
-		}
-	});
-}
diff --git a/src/generators/dom/visitors/Element/attributes/getStaticAttributeValue.js b/src/generators/dom/visitors/Element/getStaticAttributeValue.js
similarity index 100%
rename from src/generators/dom/visitors/Element/attributes/getStaticAttributeValue.js
rename to src/generators/dom/visitors/Element/getStaticAttributeValue.js
diff --git a/src/generators/dom/visitors/Element/attributes/lookup.js b/src/generators/dom/visitors/Element/lookup.js
similarity index 100%
rename from src/generators/dom/visitors/Element/attributes/lookup.js
rename to src/generators/dom/visitors/Element/lookup.js

From bb37006e36397e4c15648fec9e778d1496cced38 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 9 Apr 2017 15:02:23 -0400
Subject: [PATCH 5/7] more refactoring

---
 .../dom/visitors/Element/Attribute.js         | 135 ++++++------------
 1 file changed, 47 insertions(+), 88 deletions(-)

diff --git a/src/generators/dom/visitors/Element/Attribute.js b/src/generators/dom/visitors/Element/Attribute.js
index c73bc1973b..235c5b8341 100644
--- a/src/generators/dom/visitors/Element/Attribute.js
+++ b/src/generators/dom/visitors/Element/Attribute.js
@@ -8,8 +8,6 @@ export default function visitAttribute ( generator, block, state, node, attribut
 	let metadata = state.namespace ? null : attributeLookup[ name ];
 	if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
 
-	let dynamic = false;
-
 	const isIndirectlyBoundValue = name === 'value' && (
 		node.name === 'option' || // TODO check it's actually bound
 		node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) )
@@ -22,112 +20,73 @@ export default function visitAttribute ( generator, block, state, node, attribut
 	// HTML5?
 	const method = name.slice( 0, 6 ) === 'xlink:' ? 'setXlinkAttribute' : 'setAttribute';
 
-	// attributes without values, e.g. <textarea readonly>
-	if ( attribute.value === true ) {
-		if ( propertyName ) {
-			block.builders.create.addLine(
-				`${state.parentNode}.${propertyName} = true;`
-			);
-		} else {
-			block.builders.create.addLine(
-				`${generator.helper( method )}( ${state.parentNode}, '${name}', true );`
-			);
-		}
+	const isDynamic = attribute.value !== true && attribute.value.length > 1 || ( attribute.value.length === 1 && attribute.value[0].type !== 'Text' );
 
-		// special case – autofocus. has to be handled in a bit of a weird way
-		if ( name === 'autofocus' ) {
-			block.autofocus = state.parentNode;
-		}
-	}
+	if ( isDynamic ) {
+		let value;
 
-	// empty string
-	else if ( attribute.value.length === 0 ) {
-		if ( propertyName ) {
-			block.builders.create.addLine(
-				`${state.parentNode}.${propertyName} = '';`
-			);
+		if ( attribute.value.length === 1 ) {
+			// single {{tag}} — may be a non-string
+			const { snippet } = generator.contextualise( block, attribute.value[0].expression );
+			value = snippet;
 		} else {
-			block.builders.create.addLine(
-				`${generator.helper( method )}( ${state.parentNode}, '${name}', '' );`
+			// '{{foo}} {{bar}}' — treat as string concatenation
+			value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
+				attribute.value.map( chunk => {
+					if ( chunk.type === 'Text' ) {
+						return JSON.stringify( chunk.data );
+					} else {
+						const { snippet } = generator.contextualise( block, chunk.expression );
+						return `( ${snippet} )`;
+					}
+				}).join( ' + ' )
 			);
 		}
-	}
-
-	// static text or a single {{tag}}
-	else if ( attribute.value.length === 1 ) {
-		const value = attribute.value[0];
-
-		if ( value.type === 'Text' ) {
-			// static attributes
-			const result = JSON.stringify( value.data );
-
-			if ( propertyName ) {
-				block.builders.create.addLine(
-					`${state.parentNode}.${propertyName} = ${result};`
-				);
-			} else {
-				if ( name === 'xmlns' ) {
-					// special case
-					// TODO this attribute must be static – enforce at compile time
-					state.namespace = value.data;
-				}
-
-				block.builders.create.addLine(
-					`${generator.helper( method )}( ${state.parentNode}, '${name}', ${result} );`
-				);
-			}
-		}
-
-		else {
-			dynamic = true;
 
-			// dynamic – but potentially non-string – attributes
-			const { snippet } = generator.contextualise( block, value.expression );
+		const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
+		block.builders.create.addLine( `var ${last} = ${value};` );
 
-			const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
-			block.builders.create.addLine( `var ${last} = ${snippet};` );
-
-			const updater = propertyName ?
-				`${state.parentNode}.${propertyName} = ${last};` :
-				`${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
-
-			block.builders.create.addLine( updater );
+		const updater = propertyName ?
+			`${state.parentNode}.${propertyName} = ${last};` :
+			`${generator.helper( method )}( ${state.parentNode}, '${name}', ${last} );`;
 
-			block.builders.update.addBlock( deindent`
-				if ( ( ${block.tmp()} = ${snippet} ) !== ${last} ) {
-					${last} = ${block.tmp()};
-					${updater}
-				}
-			` );
-		}
+		block.builders.create.addLine( updater );
+		block.builders.update.addBlock( deindent`
+			if ( ( ${block.tmp()} = ${value} ) !== ${last} ) {
+				${last} = ${block.tmp()};
+				${updater}
+			}
+		` );
 	}
 
 	else {
-		dynamic = true;
-
-		const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
-			attribute.value.map( chunk => {
-				if ( chunk.type === 'Text' ) {
-					return JSON.stringify( chunk.data );
-				} else {
-					const { snippet } = generator.contextualise( block, chunk.expression );
-					return `( ${snippet} )`;
-				}
-			}).join( ' + ' )
-		);
+		const value = attribute.value === true ? 'true' :
+		              attribute.value.length === 0 ? `''` :
+		              JSON.stringify( attribute.value[0].data );
 
-		const updater = propertyName ?
+		const statement = propertyName ?
 			`${state.parentNode}.${propertyName} = ${value};` :
 			`${generator.helper( method )}( ${state.parentNode}, '${name}', ${value} );`;
 
-		block.builders.create.addLine( updater );
-		block.builders.update.addLine( updater );
+
+		block.builders.create.addLine( statement );
+
+		// special case – autofocus. has to be handled in a bit of a weird way
+		if ( attribute.value === true && name === 'autofocus' ) {
+			block.autofocus = state.parentNode;
+		}
+
+		// special case — xmlns
+		if ( name === 'xmlns' ) {
+			// TODO this attribute must be static – enforce at compile time
+			state.namespace = attribute.value[0].data;
+		}
 	}
 
 	if ( isIndirectlyBoundValue ) {
 		const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
 
 		block.builders.create.addLine( updateValue );
-		if ( dynamic ) block.builders.update.addLine( updateValue );
+		if ( isDynamic ) block.builders.update.addLine( updateValue );
 	}
 }
\ No newline at end of file

From e74b3edd306349bcce7c852afd790ed26ac9ff6d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 10 Apr 2017 11:26:06 -0400
Subject: [PATCH 6/7] hoist some event handlers, rewrite non-hoisted ones to
 avoid binding

---
 src/generators/Generator.js                   | 18 +++--
 src/generators/dom/Block.js                   |  4 ++
 src/generators/dom/index.js                   |  2 +-
 .../attributes/addComponentAttributes.js      |  2 +-
 src/generators/dom/visitors/EachBlock.js      |  7 +-
 .../dom/visitors/Element/Binding.js           |  2 +-
 .../dom/visitors/Element/Element.js           | 41 ++++++------
 .../dom/visitors/Element/EventHandler.js      | 67 ++++++++++++++-----
 src/shared/dom.js                             |  2 +-
 test/js/samples/.gitkeep                      |  0
 .../samples/event-handlers-custom/expected.js |  4 +-
 .../event-handler-custom-each/_config.js      | 32 +++++++++
 .../event-handler-custom-each/main.html       | 34 ++++++++++
 .../samples/event-handler-each/_config.js     | 32 +++++++++
 .../samples/event-handler-each/main.html      |  5 ++
 test/runtime/samples/event-handler/_config.js | 14 +++-
 16 files changed, 213 insertions(+), 53 deletions(-)
 delete mode 100644 test/js/samples/.gitkeep
 create mode 100644 test/runtime/samples/event-handler-custom-each/_config.js
 create mode 100644 test/runtime/samples/event-handler-custom-each/main.html
 create mode 100644 test/runtime/samples/event-handler-each/_config.js
 create mode 100644 test/runtime/samples/event-handler-each/main.html

diff --git a/src/generators/Generator.js b/src/generators/Generator.js
index f1aef70eea..370771eb39 100644
--- a/src/generators/Generator.js
+++ b/src/generators/Generator.js
@@ -60,7 +60,7 @@ export default class Generator {
 		return alias;
 	}
 
-	contextualise ( block, expression, isEventHandler ) {
+	contextualise ( block, expression, context, isEventHandler ) {
 		this.addSourcemapLocations( expression );
 
 		const usedContexts = [];
@@ -70,17 +70,24 @@ export default class Generator {
 		const { contextDependencies, contexts, indexes } = block;
 
 		let scope = annotateWithScopes( expression );
+		let lexicalDepth = 0;
 
 		const self = this;
 
 		walk( expression, {
 			enter ( node, parent, key ) {
+				if ( /^Function/.test( node.type ) ) lexicalDepth += 1;
+
 				if ( node._scope ) {
 					scope = node._scope;
 					return;
 				}
 
-				if ( isReference( node, parent ) ) {
+				if ( node.type === 'ThisExpression' ) {
+					if ( lexicalDepth === 0 && context ) code.overwrite( node.start, node.end, context, true );
+				}
+
+				else if ( isReference( node, parent ) ) {
 					const { name } = flattenReference( node );
 					if ( scope.has( name ) ) return;
 
@@ -93,10 +100,10 @@ export default class Generator {
 					}
 
 					else if ( contexts.has( name ) ) {
-						const context = contexts.get( name );
-						if ( context !== name ) {
+						const contextName = contexts.get( name );
+						if ( contextName !== name ) {
 							// this is true for 'reserved' names like `root` and `component`
-							code.overwrite( node.start, node.start + name.length, context, true );
+							code.overwrite( node.start, node.start + name.length, contextName, true );
 						}
 
 						dependencies.push( ...contextDependencies.get( name ) );
@@ -133,6 +140,7 @@ export default class Generator {
 			},
 
 			leave ( node ) {
+				if ( /^Function/.test( node.type ) ) lexicalDepth -= 1;
 				if ( node._scope ) scope = scope.parent;
 			}
 		});
diff --git a/src/generators/dom/Block.js b/src/generators/dom/Block.js
index 90329c6c21..3d57cc7395 100644
--- a/src/generators/dom/Block.js
+++ b/src/generators/dom/Block.js
@@ -53,6 +53,10 @@ export default class Block {
 		return new Block( Object.assign( {}, this, options, { parent: this } ) );
 	}
 
+	contextualise ( expression, context, isEventHandler ) {
+		return this.generator.contextualise( this, expression, context, isEventHandler );
+	}
+
 	createAnchor ( name, parentNode ) {
 		const renderStatement = `${this.generator.helper( 'createComment' )}()`;
 		this.addElement( name, renderStatement, parentNode, true );
diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index fcb540d679..dbb054e7c6 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -271,7 +271,7 @@ export default function dom ( parsed, source, options ) {
 			throw new Error( `Components with shared helpers must be compiled to ES2015 modules (format: 'es')` );
 		}
 
-		const names = Array.from( generator.uses ).map( name => {
+		const names = Array.from( generator.uses ).sort().map( name => {
 			return name !== generator.alias( name ) ? `${name} as ${generator.alias( name )}` : name;
 		});
 
diff --git a/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js b/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
index 0bc983c2f7..88a4d9ddf2 100644
--- a/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
+++ b/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
@@ -82,7 +82,7 @@ export default function addComponentAttributes ( generator, block, node, local )
 
 			const usedContexts = [];
 			attribute.expression.arguments.forEach( arg => {
-				const { contexts } = generator.contextualise( block, arg, true );
+				const { contexts } = generator.contextualise( block, arg, null, true );
 
 				contexts.forEach( context => {
 					if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
diff --git a/src/generators/dom/visitors/EachBlock.js b/src/generators/dom/visitors/EachBlock.js
index cef7478dfc..f11b2fb929 100644
--- a/src/generators/dom/visitors/EachBlock.js
+++ b/src/generators/dom/visitors/EachBlock.js
@@ -134,7 +134,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
 				}
 			}
 
-			destroyEach( ${localVars.iterations}, true, ${listName}.length );
+			${generator.helper( 'destroyEach' )}( ${localVars.iterations}, true, ${listName}.length );
 
 			${localVars.iterations}.length = ${listName}.length;
 		` );
@@ -154,7 +154,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
 	}
 
 	block.builders.destroy.addBlock(
-		`${generator.helper( 'destroyEach' )}( ${localVars.iterations}, ${isToplevel ? 'detach' : 'false'} );` );
+		`${generator.helper( 'destroyEach' )}( ${localVars.iterations}, ${isToplevel ? 'detach' : 'false'}, 0 );` );
 
 	if ( node.else ) {
 		block.builders.destroy.addBlock( deindent`
@@ -197,7 +197,8 @@ export default function visitEachBlock ( generator, block, state, node ) {
 	});
 
 	const childState = Object.assign( {}, state, {
-		parentNode: null
+		parentNode: null,
+		inEachBlock: true
 	});
 
 	node.children.forEach( child => {
diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 61c275f55e..c9e2c66cbe 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -21,7 +21,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type );
 	const eventName = getBindingEventName( node );
 
-	let setter = getSetter({ block, name, keypath, context: '__svelte', attribute, dependencies, value });
+	let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value });
 	let updateElement;
 
 	// <select> special case
diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js
index a0131efe3d..b27f7e5d53 100644
--- a/src/generators/dom/visitors/Element/Element.js
+++ b/src/generators/dom/visitors/Element/Element.js
@@ -72,32 +72,35 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.create.addBlock( node.initialUpdate );
 	}
 
-	if ( childState.allUsedContexts.length ) {
-		const initialProps = childState.allUsedContexts.map( contextName => {
-			if ( contextName === 'root' ) return `root: root`;
+	if ( childState.allUsedContexts.length || childState.usesComponent ) {
+		const initialProps = [];
+		const updates = [];
 
-			const listName = block.listNames.get( contextName );
-			const indexName = block.indexNames.get( contextName );
-
-			return `${listName}: ${listName},\n${indexName}: ${indexName}`;
-		}).join( ',\n' );
+		if ( childState.usesComponent ) {
+			initialProps.push( `component: ${block.component}` );
+		}
 
-		const updates = childState.allUsedContexts.map( contextName => {
-			if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
+		childState.allUsedContexts.forEach( contextName => {
+			if ( contextName === 'root' ) return;
 
 			const listName = block.listNames.get( contextName );
 			const indexName = block.indexNames.get( contextName );
 
-			return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
-		}).join( '\n' );
-
-		block.builders.create.addBlock( deindent`
-			${name}.__svelte = {
-				${initialProps}
-			};
-		` );
+			initialProps.push( `${listName}: ${listName},\n${indexName}: ${indexName}` );
+			updates.push( `${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};` );
+		});
 
-		block.builders.update.addBlock( updates );
+		if ( initialProps.length ) {
+			block.builders.create.addBlock( deindent`
+				${name}._svelte = {
+					${initialProps.join( ',\n' )}
+				};
+			` );
+		}
+
+		if ( updates.length ) {
+			block.builders.update.addBlock( updates.join( '\n' ) );
+		}
 	}
 
 	node.children.forEach( child => {
diff --git a/src/generators/dom/visitors/Element/EventHandler.js b/src/generators/dom/visitors/Element/EventHandler.js
index 3bc8370af3..2a51cdc1ff 100644
--- a/src/generators/dom/visitors/Element/EventHandler.js
+++ b/src/generators/dom/visitors/Element/EventHandler.js
@@ -1,21 +1,26 @@
 import deindent from '../../../../utils/deindent.js';
+import CodeBuilder from '../../../../utils/CodeBuilder.js';
 import flattenReference from '../../../../utils/flattenReference.js';
 
 export default function visitEventHandler ( generator, block, state, node, attribute ) {
 	const name = attribute.name;
+	const isCustomEvent = generator.events.has( name );
+	const shouldHoist = !isCustomEvent && state.inEachBlock;
 
-	// TODO verify that it's a valid callee (i.e. built-in or declared method)
 	generator.addSourcemapLocations( attribute.expression );
 
 	const flattened = flattenReference( attribute.expression.callee );
 	if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
 		// allow event.stopPropagation(), this.select() etc
+		// TODO verify that it's a valid callee (i.e. built-in or declared method)
 		generator.code.prependRight( attribute.expression.start, `${block.component}.` );
+		if ( shouldHoist ) state.usesComponent = true; // this feels a bit hacky but it works!
 	}
 
+	const context = shouldHoist ? null : state.parentNode;
 	const usedContexts = [];
 	attribute.expression.arguments.forEach( arg => {
-		const { contexts } = generator.contextualise( block, arg, true );
+		const { contexts } = block.contextualise( arg, context, true );
 
 		contexts.forEach( context => {
 			if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
@@ -23,35 +28,65 @@ export default function visitEventHandler ( generator, block, state, node, attri
 		});
 	});
 
-	// TODO hoist event handlers? can do `this.__component.method(...)`
+	const _this = context || 'this';
 	const declarations = usedContexts.map( name => {
-		if ( name === 'root' ) return 'var root = this.__svelte.root;';
+		if ( name === 'root' ) {
+			if ( shouldHoist ) state.usesComponent = true;
+			return 'var root = component.get();';
+		}
 
 		const listName = block.listNames.get( name );
 		const indexName = block.indexNames.get( name );
 
-		return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
+		return `var ${listName} = ${_this}._svelte.${listName}, ${indexName} = ${_this}._svelte.${indexName}, ${name} = ${listName}[${indexName}];`;
 	});
 
-	const handlerName = block.getUniqueName( `${name}_handler` );
-	const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
+	// get a name for the event handler that is globally unique
+	// if hoisted, locally unique otherwise
+	const handlerName = shouldHoist ?
+		generator.alias( `${name}_handler` ) :
+		block.getUniqueName( `${name}_handler` );
 
-	if ( generator.events.has( name ) ) {
-		block.builders.create.addBlock( deindent`
+	// create the handler body
+	const handlerBody = new CodeBuilder();
+
+	if ( state.usesComponent ) {
+		// TODO the element needs to know to create `thing._svelte = { component: component }`
+		handlerBody.addLine( `var component = this._svelte.component;` );
+	}
+
+	declarations.forEach( declaration => {
+		handlerBody.addLine( declaration );
+	});
+
+	handlerBody.addLine( `[✂${attribute.expression.start}-${attribute.expression.end}✂];` );
+
+	const handler = isCustomEvent ?
+		deindent`
 			var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
 				${handlerBody}
-			}.bind( ${state.parentNode} ) );
-		` );
+			});
+		` :
+		deindent`
+			function ${handlerName} ( event ) {
+				${handlerBody}
+			}
+		`;
+
+	if ( shouldHoist ) {
+		generator.addBlock({
+			render: () => handler
+		});
+	} else {
+		block.builders.create.addBlock( handler );
+	}
 
+	if ( isCustomEvent ) {
 		block.builders.destroy.addLine( deindent`
 			${handlerName}.teardown();
 		` );
 	} else {
-		block.builders.create.addBlock( deindent`
-			function ${handlerName} ( event ) {
-				${handlerBody}
-			}
-
+		block.builders.create.addLine( deindent`
 			${generator.helper( 'addEventListener' )}( ${state.parentNode}, '${name}', ${handlerName} );
 		` );
 
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 9a4ef3fb68..ba3dbc139c 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -17,7 +17,7 @@ export function detachBetween ( before, after ) {
 }
 
 export function destroyEach ( iterations, detach, start ) {
-	for ( var i = ( start || 0 ); i < iterations.length; i += 1 ) {
+	for ( var i = start; i < iterations.length; i += 1 ) {
 		iterations[i].destroy( detach );
 	}
 }
diff --git a/test/js/samples/.gitkeep b/test/js/samples/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js
index 8131e3bde3..5d4ae355a4 100644
--- a/test/js/samples/event-handlers-custom/expected.js
+++ b/test/js/samples/event-handlers-custom/expected.js
@@ -1,4 +1,4 @@
-import { createElement, detachNode, insertNode, createText, appendNode, assign, dispatchObservers, noop, proto } from "svelte/shared.js";
+import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, noop, proto } from "svelte/shared.js";
 
 var template = (function () {
 	return {
@@ -7,7 +7,6 @@ var template = (function () {
 				console.log( bar );
 			}
 		},
-
 		events: {
 			foo ( node, callback ) {
 				// code goes here
@@ -21,7 +20,6 @@ function create_main_fragment ( root, component ) {
 
 	var foo_handler = template.events.foo.call( component, button, function ( event ) {
 		var root = component.get();
-
 		component.foo( root.bar );
 	});
 
diff --git a/test/runtime/samples/event-handler-custom-each/_config.js b/test/runtime/samples/event-handler-custom-each/_config.js
new file mode 100644
index 0000000000..5d67fb1413
--- /dev/null
+++ b/test/runtime/samples/event-handler-custom-each/_config.js
@@ -0,0 +1,32 @@
+export default {
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+
+		<p>fromDom: </p>
+		<p>fromState: </p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'click' );
+
+		const buttons = target.querySelectorAll( 'button' );
+
+		buttons[1].dispatchEvent( event );
+
+		assert.htmlEqual( target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<button>baz</button>
+
+			<p>fromDom: bar</p>
+			<p>fromState: bar</p>
+		` );
+
+		assert.equal( component.get( 'fromDom' ), 'bar' );
+		assert.equal( component.get( 'fromState' ), 'bar' );
+
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/event-handler-custom-each/main.html b/test/runtime/samples/event-handler-custom-each/main.html
new file mode 100644
index 0000000000..eb8a4d292c
--- /dev/null
+++ b/test/runtime/samples/event-handler-custom-each/main.html
@@ -0,0 +1,34 @@
+{{#each items as item}}
+	<button on:tap='set({ fromDom: this.textContent, fromState: item })'>{{item}}</button>
+{{/each}}
+
+<p>fromDom: {{fromDom}}</p>
+<p>fromState: {{fromState}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			x: 0,
+			y: 0,
+			fromDom: '',
+			fromState: '',
+			items: [ 'foo', 'bar', 'baz' ]
+		}),
+
+		events: {
+			tap ( node, callback ) {
+				function clickHandler ( event ) {
+					callback();
+				}
+
+				node.addEventListener( 'click', clickHandler, false );
+
+				return {
+					teardown () {
+						node.addEventListener( 'click', clickHandler, false );
+					}
+				};
+			}
+		}
+	};
+</script>
diff --git a/test/runtime/samples/event-handler-each/_config.js b/test/runtime/samples/event-handler-each/_config.js
new file mode 100644
index 0000000000..02d8f81460
--- /dev/null
+++ b/test/runtime/samples/event-handler-each/_config.js
@@ -0,0 +1,32 @@
+export default {
+	data: {
+		items: [
+			'foo',
+			'bar',
+			'baz'
+		],
+		selected: 'foo'
+	},
+
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+		<p>selected: foo</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const buttons = target.querySelectorAll( 'button' );
+		const event = new window.MouseEvent( 'click' );
+
+		buttons[1].dispatchEvent( event );
+		assert.htmlEqual( target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<button>baz</button>
+			<p>selected: bar</p>
+		` );
+
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/event-handler-each/main.html b/test/runtime/samples/event-handler-each/main.html
new file mode 100644
index 0000000000..09a6e7b251
--- /dev/null
+++ b/test/runtime/samples/event-handler-each/main.html
@@ -0,0 +1,5 @@
+{{#each items as item}}
+	<button on:click='set({ selected: item })'>{{item}}</button>
+{{/each}}
+
+<p>selected: {{selected}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler/_config.js b/test/runtime/samples/event-handler/_config.js
index 8aa60ff387..868fb362ae 100644
--- a/test/runtime/samples/event-handler/_config.js
+++ b/test/runtime/samples/event-handler/_config.js
@@ -1,13 +1,21 @@
 export default {
-	html: '<button>toggle</button>\n\n<!---->',
+	html: `
+		<button>toggle</button>
+	`,
+
 	test ( assert, component, target, window ) {
 		const button = target.querySelector( 'button' );
 		const event = new window.MouseEvent( 'click' );
 
 		button.dispatchEvent( event );
-		assert.equal( target.innerHTML, '<button>toggle</button>\n\n<p>hello!</p><!---->' );
+		assert.htmlEqual( target.innerHTML, `
+			<button>toggle</button>
+			<p>hello!</p>
+		` );
 
 		button.dispatchEvent( event );
-		assert.equal( target.innerHTML, '<button>toggle</button>\n\n<!---->' );
+		assert.htmlEqual( target.innerHTML, `
+			<button>toggle</button>
+		` );
 	}
 };

From 7bd00c2caf7ed0a6d0af9a58a207a6693ecf01ae Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 10 Apr 2017 12:00:27 -0400
Subject: [PATCH 7/7] align component code more closely with post-refactor
 element code

---
 .../dom/visitors/Component/Attribute.js       |  67 +++++++++
 .../addComponentBinding.js => Binding.js}     |  10 +-
 .../dom/visitors/Component/Component.js       |  36 ++++-
 .../dom/visitors/Component/EventHandler.js    |  35 +++++
 src/generators/dom/visitors/Component/Ref.js  |  13 ++
 .../attributes/addComponentAttributes.js      | 132 ------------------
 6 files changed, 150 insertions(+), 143 deletions(-)
 create mode 100644 src/generators/dom/visitors/Component/Attribute.js
 rename src/generators/dom/visitors/Component/{attributes/addComponentBinding.js => Binding.js} (86%)
 create mode 100644 src/generators/dom/visitors/Component/EventHandler.js
 create mode 100644 src/generators/dom/visitors/Component/Ref.js
 delete mode 100644 src/generators/dom/visitors/Component/attributes/addComponentAttributes.js

diff --git a/src/generators/dom/visitors/Component/Attribute.js b/src/generators/dom/visitors/Component/Attribute.js
new file mode 100644
index 0000000000..601bc7049f
--- /dev/null
+++ b/src/generators/dom/visitors/Component/Attribute.js
@@ -0,0 +1,67 @@
+export default function visitAttribute ( generator, block, state, node, attribute, local ) {
+	if ( attribute.value === true ) {
+		// attributes without values, e.g. <textarea readonly>
+		local.staticAttributes.push({
+			name: attribute.name,
+			value: true
+		});
+	}
+
+	else if ( attribute.value.length === 0 ) {
+		local.staticAttributes.push({
+			name: attribute.name,
+			value: `''`
+		});
+	}
+
+	else if ( attribute.value.length === 1 ) {
+		const value = attribute.value[0];
+
+		if ( value.type === 'Text' ) {
+			// static attributes
+			const result = isNaN( value.data ) ? JSON.stringify( value.data ) : value.data;
+			local.staticAttributes.push({
+				name: attribute.name,
+				value: result
+			});
+		}
+
+		else {
+			// simple dynamic attributes
+			const { dependencies, string } = generator.contextualise( block, value.expression );
+
+			// TODO only update attributes that have changed
+			local.dynamicAttributes.push({
+				name: attribute.name,
+				value: string,
+				dependencies
+			});
+		}
+	}
+
+	else {
+		// complex dynamic attributes
+		const allDependencies = [];
+
+		const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
+			attribute.value.map( chunk => {
+				if ( chunk.type === 'Text' ) {
+					return JSON.stringify( chunk.data );
+				} else {
+					const { dependencies, string } = generator.contextualise( block, chunk.expression );
+					dependencies.forEach( dependency => {
+						if ( !~allDependencies.indexOf( dependency ) ) allDependencies.push( dependency );
+					});
+
+					return `( ${string} )`;
+				}
+			}).join( ' + ' )
+		);
+
+		local.dynamicAttributes.push({
+			name: attribute.name,
+			value,
+			dependencies: allDependencies
+		});
+	}
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Component/attributes/addComponentBinding.js b/src/generators/dom/visitors/Component/Binding.js
similarity index 86%
rename from src/generators/dom/visitors/Component/attributes/addComponentBinding.js
rename to src/generators/dom/visitors/Component/Binding.js
index f9a7e035d2..289c796118 100644
--- a/src/generators/dom/visitors/Component/attributes/addComponentBinding.js
+++ b/src/generators/dom/visitors/Component/Binding.js
@@ -1,8 +1,8 @@
-import deindent from '../../../../../utils/deindent.js';
-import flattenReference from '../../../../../utils/flattenReference.js';
-import getSetter from '../../shared/binding/getSetter.js';
+import deindent from '../../../../utils/deindent.js';
+import flattenReference from '../../../../utils/flattenReference.js';
+import getSetter from '../shared/binding/getSetter.js';
 
-export default function addComponentBinding ( generator, node, attribute, block, local ) {
+export default function visitBinding ( generator, block, state, node, attribute, local ) {
 	const { name, keypath } = flattenReference( attribute.value );
 	const { snippet, contexts, dependencies } = generator.contextualise( block, attribute.value );
 
@@ -62,4 +62,4 @@ export default function addComponentBinding ( generator, node, attribute, block,
 			${updating} = false;
 		}
 	` );
-}
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Component/Component.js b/src/generators/dom/visitors/Component/Component.js
index 577a78fa1a..5446d54276 100644
--- a/src/generators/dom/visitors/Component/Component.js
+++ b/src/generators/dom/visitors/Component/Component.js
@@ -1,7 +1,10 @@
 import deindent from '../../../../utils/deindent.js';
 import CodeBuilder from '../../../../utils/CodeBuilder.js';
 import visit from '../../visit.js';
-import addComponentAttributes from './attributes/addComponentAttributes.js';
+import visitAttribute from './Attribute.js';
+import visitEventHandler from './EventHandler.js';
+import visitBinding from './Binding.js';
+import visitRef from './Ref.js';
 
 function capDown ( name ) {
 	return `${name[0].toLowerCase()}${name.slice( 1 )}`;
@@ -19,16 +22,37 @@ function stringifyProps ( props ) {
 	return `{ ${joined} }`;
 }
 
+const order = {
+	Attribute: 1,
+	EventHandler: 2,
+	Binding: 3,
+	Ref: 4
+};
+
+const visitors = {
+	Attribute: visitAttribute,
+	EventHandler: visitEventHandler,
+	Binding: visitBinding,
+	Ref: visitRef
+};
+
 export default function visitComponent ( generator, block, state, node ) {
 	const hasChildren = node.children.length > 0;
 	const name = block.getUniqueName( capDown( node.name === ':Self' ? generator.name : node.name ) );
 
+	const childState = Object.assign( {}, state, {
+		parentNode: null
+	});
+
 	const local = {
 		name,
 		namespace: state.namespace,
 		isComponent: true,
 
 		allUsedContexts: [],
+		staticAttributes: [],
+		dynamicAttributes: [],
+		bindings: [],
 
 		create: new CodeBuilder(),
 		update: new CodeBuilder()
@@ -38,7 +62,11 @@ export default function visitComponent ( generator, block, state, node ) {
 
 	generator.hasComponents = true;
 
-	addComponentAttributes( generator, block, node, local );
+	node.attributes
+		.sort( ( a, b ) => order[ a.type ] - order[ b.type ] )
+		.forEach( attribute => {
+			visitors[ attribute.type ]( generator, block, childState, node, attribute, local );
+		});
 
 	if ( local.allUsedContexts.length ) {
 		const initialProps = local.allUsedContexts.map( contextName => {
@@ -81,10 +109,6 @@ export default function visitComponent ( generator, block, state, node ) {
 			name: generator.getUniqueName( `create_${name}_yield_fragment` ) // TODO should getUniqueName happen inside Fragment? probably
 		});
 
-		const childState = Object.assign( {}, state, {
-			parentNode: null
-		});
-
 		node.children.forEach( child => {
 			visit( generator, childBlock, childState, child );
 		});
diff --git a/src/generators/dom/visitors/Component/EventHandler.js b/src/generators/dom/visitors/Component/EventHandler.js
new file mode 100644
index 0000000000..263f88e4ad
--- /dev/null
+++ b/src/generators/dom/visitors/Component/EventHandler.js
@@ -0,0 +1,35 @@
+import deindent from '../../../../utils/deindent.js';
+
+export default function visitEventHandler ( generator, block, state, node, attribute, local ) {
+	// TODO verify that it's a valid callee (i.e. built-in or declared method)
+	generator.addSourcemapLocations( attribute.expression );
+	generator.code.prependRight( attribute.expression.start, `${block.component}.` );
+
+	const usedContexts = [];
+	attribute.expression.arguments.forEach( arg => {
+		const { contexts } = generator.contextualise( block, arg, null, true );
+
+		contexts.forEach( context => {
+			if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
+			if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
+		});
+	});
+
+	// TODO hoist event handlers? can do `this.__component.method(...)`
+	const declarations = usedContexts.map( name => {
+		if ( name === 'root' ) return 'var root = this._context.root;';
+
+		const listName = block.listNames.get( name );
+		const indexName = block.indexNames.get( name );
+
+		return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
+	});
+
+	const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
+
+	local.create.addBlock( deindent`
+		${local.name}.on( '${attribute.name}', function ( event ) {
+			${handlerBody}
+		});
+	` );	
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Component/Ref.js b/src/generators/dom/visitors/Component/Ref.js
new file mode 100644
index 0000000000..727cf8f29a
--- /dev/null
+++ b/src/generators/dom/visitors/Component/Ref.js
@@ -0,0 +1,13 @@
+import deindent from '../../../../utils/deindent.js';
+
+export default function visitRef ( generator, block, state, node, attribute, local ) {
+	generator.usesRefs = true;
+
+	local.create.addLine(
+		`${block.component}.refs.${attribute.name} = ${local.name};`
+	);
+
+	block.builders.destroy.addLine( deindent`
+		if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null;
+	` );
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js b/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
deleted file mode 100644
index 88a4d9ddf2..0000000000
--- a/src/generators/dom/visitors/Component/attributes/addComponentAttributes.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import addComponentBinding from './addComponentBinding.js';
-import deindent from '../../../../../utils/deindent.js';
-
-export default function addComponentAttributes ( generator, block, node, local ) {
-	local.staticAttributes = [];
-	local.dynamicAttributes = [];
-	local.bindings = [];
-
-	node.attributes.forEach( attribute => {
-		if ( attribute.type === 'Attribute' ) {
-			if ( attribute.value === true ) {
-				// attributes without values, e.g. <textarea readonly>
-				local.staticAttributes.push({
-					name: attribute.name,
-					value: true
-				});
-			}
-
-			else if ( attribute.value.length === 0 ) {
-				local.staticAttributes.push({
-					name: attribute.name,
-					value: `''`
-				});
-			}
-
-			else if ( attribute.value.length === 1 ) {
-				const value = attribute.value[0];
-
-				if ( value.type === 'Text' ) {
-					// static attributes
-					const result = isNaN( value.data ) ? JSON.stringify( value.data ) : value.data;
-					local.staticAttributes.push({
-						name: attribute.name,
-						value: result
-					});
-				}
-
-				else {
-					// simple dynamic attributes
-					const { dependencies, string } = generator.contextualise( block, value.expression );
-
-					// TODO only update attributes that have changed
-					local.dynamicAttributes.push({
-						name: attribute.name,
-						value: string,
-						dependencies
-					});
-				}
-			}
-
-			else {
-				// complex dynamic attributes
-				const allDependencies = [];
-
-				const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
-					attribute.value.map( chunk => {
-						if ( chunk.type === 'Text' ) {
-							return JSON.stringify( chunk.data );
-						} else {
-							const { dependencies, string } = generator.contextualise( block, chunk.expression );
-							dependencies.forEach( dependency => {
-								if ( !~allDependencies.indexOf( dependency ) ) allDependencies.push( dependency );
-							});
-
-							return `( ${string} )`;
-						}
-					}).join( ' + ' )
-				);
-
-				local.dynamicAttributes.push({
-					name: attribute.name,
-					value,
-					dependencies: allDependencies
-				});
-			}
-		}
-
-		else if ( attribute.type === 'EventHandler' ) {
-			// TODO verify that it's a valid callee (i.e. built-in or declared method)
-			generator.addSourcemapLocations( attribute.expression );
-			generator.code.prependRight( attribute.expression.start, `${block.component}.` );
-
-			const usedContexts = [];
-			attribute.expression.arguments.forEach( arg => {
-				const { contexts } = generator.contextualise( block, arg, null, true );
-
-				contexts.forEach( context => {
-					if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
-					if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
-				});
-			});
-
-			// TODO hoist event handlers? can do `this.__component.method(...)`
-			const declarations = usedContexts.map( name => {
-				if ( name === 'root' ) return 'var root = this._context.root;';
-
-				const listName = block.listNames.get( name );
-				const indexName = block.indexNames.get( name );
-
-				return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
-			});
-
-			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
-
-			local.create.addBlock( deindent`
-				${local.name}.on( '${attribute.name}', function ( event ) {
-					${handlerBody}
-				});
-			` );
-		}
-
-		else if ( attribute.type === 'Binding' ) {
-			addComponentBinding( generator, node, attribute, block, local );
-		}
-
-		else if ( attribute.type === 'Ref' ) {
-			generator.usesRefs = true;
-
-			local.create.addLine(
-				`${block.component}.refs.${attribute.name} = ${local.name};`
-			);
-
-			block.builders.destroy.addLine( deindent`
-				if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null;
-			` );
-		}
-
-		else {
-			throw new Error( `Not implemented: ${attribute.type}` );
-		}
-	});
-}