allow console.* calls in event handlers. fixes #782

src/generators/dom/visitors/Element/EventHandler.ts

@@ -1,5 +1,6 @@
 import deindent from '../../../../utils/deindent';
 import flattenReference from '../../../../utils/flattenReference';
+import validCalleeObjects from '../../../../utils/validCalleeObjects';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
@@ -23,7 +24,7 @@ export default function visitEventHandler(
 		generator.addSourcemapLocations(attribute.expression);
 
 		const flattened = flattenReference(attribute.expression.callee);
-		if (flattened.name !== 'event' && flattened.name !== 'this') {
+		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(

src/utils/validCalleeObjects.ts

@@ -0,0 +1,3 @@
+const validCalleeObjects = new Set(['this', 'event', 'console']);
+
+export default validCalleeObjects;

src/validate/html/validateEventHandler.ts

@@ -1,6 +1,7 @@
 import flattenReference from '../../utils/flattenReference';
 import list from '../utils/list';
 import { Validator } from '../index';
+import validCalleeObjects from '../../utils/validCalleeObjects';
 import { Node } from '../../interfaces';
 
 const validBuiltins = new Set(['set', 'fire', 'destroy']);
@@ -20,7 +21,7 @@ export default function validateEventHandlerCallee(
 
 	const { name } = flattenReference(callee);
 
-	if (name === 'this' || name === 'event') return;
+	if (validCalleeObjects.has(name)) return;
 
 	if (name === 'refs') {
 		refCallees.push(callee);

test/runtime/samples/event-handler-console-log/_config.js

@@ -0,0 +1,23 @@
+export default {
+	data: {
+		foo: 42
+	},
+
+	html: `
+		<button>click me</button>
+	`,
+
+	test (assert, component, target, window) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		const messages = [];
+
+		const log = console.log;
+		console.log = msg => messages.push(msg);
+		button.dispatchEvent(event);
+		console.log = log;
+
+		assert.deepEqual(messages, [42]);
+	}
+};

test/runtime/samples/event-handler-console-log/main.html

@@ -0,0 +1 @@
+<button on:click='console.log(foo)'>click me</button>