From 029e952171527c5613b82865e0886420c58b3756 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Wed, 4 Apr 2018 07:23:48 -0400
Subject: [PATCH] treat component events the same as element events - fixes
 #1278

---
 src/generators/nodes/Component.ts             | 17 ++++++++++---
 .../component-events-console/Widget.html      |  1 +
 .../component-events-console/_config.js       | 25 +++++++++++++++++++
 .../component-events-console/main.html        |  9 +++++++
 4 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/component-events-console/Widget.html
 create mode 100644 test/runtime/samples/component-events-console/_config.js
 create mode 100644 test/runtime/samples/component-events-console/main.html

diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts
index 86e2eeb82632..94a186229db2 100644
--- a/src/generators/nodes/Component.ts
+++ b/src/generators/nodes/Component.ts
@@ -1,4 +1,6 @@
 import deindent from '../../utils/deindent';
+import flattenReference from '../../utils/flattenReference';
+import validCalleeObjects from '../../utils/validCalleeObjects';
 import stringifyProps from '../../utils/stringifyProps';
 import CodeBuilder from '../../utils/CodeBuilder';
 import getTailSnippet from '../../utils/getTailSnippet';
@@ -479,10 +481,17 @@ function mungeEventHandler(generator: DomGenerator, node: Node, handler: Node, b
 
 	if (handler.expression) {
 		generator.addSourcemapLocations(handler.expression);
-		generator.code.prependRight(
-			handler.expression.start,
-			`${block.alias('component')}.`
-		);
+
+		// TODO try out repetition between this and element counterpart
+		const flattened = flattenReference(handler.expression.callee);
+			if (!validCalleeObjects.has(flattened.name)) {
+				// allow event.stopPropagation(), this.select() etc
+				// TODO verify that it's a valid callee (i.e. built-in or declared method)
+				generator.code.prependRight(
+					handler.expression.start,
+					`${block.alias('component')}.`
+				);
+			}
 
 		handler.expression.arguments.forEach((arg: Node) => {
 			const { contexts } = block.contextualise(arg, null, true);
diff --git a/test/runtime/samples/component-events-console/Widget.html b/test/runtime/samples/component-events-console/Widget.html
new file mode 100644
index 000000000000..f54897f249cd
--- /dev/null
+++ b/test/runtime/samples/component-events-console/Widget.html
@@ -0,0 +1 @@
+<button on:click>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-console/_config.js b/test/runtime/samples/component-events-console/_config.js
new file mode 100644
index 000000000000..407c3e7edfad
--- /dev/null
+++ b/test/runtime/samples/component-events-console/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: '<button>click me</button>',
+
+	test(assert, component, target) {
+		const button = target.querySelector('button');
+		const messages = [];
+
+		const log = console.log;
+		console.log = msg => {
+			messages.push(msg);
+		};
+
+		try {
+			button.dispatchEvent(new window.MouseEvent('click'));
+			assert.deepEqual(messages, [
+				'clicked'
+			]);
+		} catch (err) {
+			console.log = log;
+			throw err;
+		}
+
+		console.log = log;
+	},
+};
diff --git a/test/runtime/samples/component-events-console/main.html b/test/runtime/samples/component-events-console/main.html
new file mode 100644
index 000000000000..13238f6c53ed
--- /dev/null
+++ b/test/runtime/samples/component-events-console/main.html
@@ -0,0 +1,9 @@
+<Widget on:click="console.log('clicked')"/>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>