Merge pull request #1311 from sveltejs/gh-1278

treat component events the same as element events

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);
+
+		// 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);

test/runtime/samples/component-events-console/Widget.html

@@ -0,0 +1 @@
+<button on:click>click me</button>

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;
+	},
+};

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>