diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts index 20e662a22b..f2c48c3169 100644 --- a/src/compiler/compile/nodes/EventHandler.ts +++ b/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, diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/_config.js b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js new file mode 100644 index 0000000000..030e27ad1a --- /dev/null +++ b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js @@ -0,0 +1,18 @@ +export default { + html: ` + + `, + + 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); + } +}; diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte new file mode 100644 index 0000000000..05de1316ef --- /dev/null +++ b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte @@ -0,0 +1 @@ + \ No newline at end of file