support node methods in event handlers (#162)

src/generate/visitors/attributes/addElementAttributes.js

@@ -117,8 +117,8 @@ export default function addElementAttributes ( generator, node, local ) {
 			generator.addSourcemapLocations( attribute.expression );
 
 			const flattened = flattenReference( attribute.expression.callee );
-			if ( flattened.name !== 'event' ) {
-				// allow event.stopPropagation() etc
+			if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
+				// allow event.stopPropagation(), this.select() etc
 				generator.code.prependRight( attribute.expression.start, 'component.' );
 			}
 

src/utils/flattenReference.js

@@ -7,10 +7,10 @@ export default function flatten ( node ) {
 		node = node.object;
 	}
 
-	if ( node.type !== 'Identifier' ) return null;
+	const name = node.type === 'Identifier' ? node.name : node.type === 'ThisExpression' ? 'this' : null;
 
-	const name = node.name;
-	parts.unshift( name );
+	if ( !name ) return null;
 
+	parts.unshift( name );
 	return { name, keypath: parts.join( '.' ) };
 }

test/generator/event-handler-event-methods/_config.js

@@ -1,7 +1,4 @@
 export default {
-	solo: true,
-	show: true,
-
 	test ( assert, component, target, window ) {
 		const allow = target.querySelector( '.allow-propagation' );
 		const stop = target.querySelector( '.stop-propagation' );

test/generator/event-handler-this-methods/_config.js

@@ -0,0 +1,16 @@
+export default {
+	test ( assert, component, target, window ) {
+		// Click events don't focus elements in JSDOM – obviously they would
+		// in real browsers. More realistically, you'd use this for e.g.
+		// this.select(), but that's harder to test than this.focus()
+
+		const wont = target.querySelector( '.wont-focus' );
+		const will = target.querySelector( '.will-focus' );
+
+		wont.dispatchEvent( new window.MouseEvent( 'click' ) );
+		assert.equal( window.document.activeElement, window.document.body );
+
+		will.dispatchEvent( new window.MouseEvent( 'click' ) );
+		assert.equal( window.document.activeElement, will );
+	}
+};

test/generator/event-handler-this-methods/main.html

@@ -0,0 +1,2 @@
+<input class='wont-focus'>
+<input class='will-focus' on:click='this.focus()'>