Merge pull request #3111 from sveltejs/gh-2923

sanitize names of automatically-bubbled events

src/compiler/compile/nodes/EventHandler.ts

@@ -3,6 +3,7 @@ import Expression from './shared/Expression';
 import Component from '../Component';
 import deindent from '../utils/deindent';
 import Block from '../render_dom/Block';
+import { sanitize } from '../../utils/names';
 
 export default class EventHandler extends Node {
 	type: 'EventHandler';
@@ -41,7 +42,7 @@ export default class EventHandler extends Node {
 				}
 			}
 		} else {
-			const name = component.get_unique_name(`${this.name}_handler`);
+			const name = component.get_unique_name(`${sanitize(this.name)}_handler`);
 
 			component.add_var({
 				name,

test/runtime/samples/event-handler-shorthand-sanitized/_config.js

@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me now</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.Event('click-now');
+
+		let clicked;
+		component.$on('click-now', () => {
+			clicked = true;
+		});
+
+		button.dispatchEvent(event);
+		assert.ok(clicked);
+	}
+};

test/runtime/samples/event-handler-shorthand-sanitized/main.svelte

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