Repository: sveltejs/svelte (JavaScript)
Date: 2018-04-04 11:24:51+00:00
Task type: Bug Fix

Issue:
console.log unreachable when used in a component event
https://svelte.technology/repl?version=1.58.0&gist=09304b4620a1c31a3387457ca53b795f

```html
<svg viewBox='0 0 1000 1000' style='width: 100%; height: 100%;'>
    {{#each icons as icon}}
    <Icon x="{{icon.x}}" y="{{icon.y}}" z="{{icon.size}}" fill="{{icon.fill}}" icon="{{icon.i}}" 
on:drg='console.log(icon)'/> {{/each}}
----------^^^^^^^^^^
...
```
> To make it fail you should click on an icon in the output window


<details>
  <summary>Stack trace Chrome</summary>

Uncaught TypeError: Cannot read property 'log' of undefined
    at Icon.eval (eval at createComponent (repl.0.js:1), <anonymous>:211:22)
    at Icon.c [as fire] (shared.js:1)
    at SVGGElement.click_handler (eval at createComponent (repl.0.js:1), <anonymous>:29:14)
</details>
<details>

<summary>Stack trace Firefox</summary>

TypeError: component.console is undefined
...
</details>


Current proposed work arround is shown here: https://svelte.technology/repl?version=1.58.0&gist=9b0a4442260d58bc1136c8d3c0669d59




Issue discussion:

Solution patch:
diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts
--- 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);


Test patch:
diff --git a/test/runtime/samples/component-events-console/Widget.html b/test/runtime/samples/component-events-console/Widget.html
new file mode 100644
--- /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
--- /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
--- /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>