diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts index cf71794de4..ded9abc44b 100644 --- a/src/generators/dom/visitors/Element/EventHandler.ts +++ b/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( diff --git a/src/utils/validCalleeObjects.ts b/src/utils/validCalleeObjects.ts new file mode 100644 index 0000000000..ad6070995a --- /dev/null +++ b/src/utils/validCalleeObjects.ts @@ -0,0 +1,3 @@ +const validCalleeObjects = new Set(['this', 'event', 'console']); + +export default validCalleeObjects; \ No newline at end of file diff --git a/src/validate/html/validateEventHandler.ts b/src/validate/html/validateEventHandler.ts index bc0bb23aff..6f571806fe 100644 --- a/src/validate/html/validateEventHandler.ts +++ b/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); diff --git a/test/runtime/samples/event-handler-console-log/_config.js b/test/runtime/samples/event-handler-console-log/_config.js new file mode 100644 index 0000000000..26d8f9ae29 --- /dev/null +++ b/test/runtime/samples/event-handler-console-log/_config.js @@ -0,0 +1,23 @@ +export default { + data: { + foo: 42 + }, + + html: ` + + `, + + 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]); + } +}; diff --git a/test/runtime/samples/event-handler-console-log/main.html b/test/runtime/samples/event-handler-console-log/main.html new file mode 100644 index 0000000000..3500b96373 --- /dev/null +++ b/test/runtime/samples/event-handler-console-log/main.html @@ -0,0 +1 @@ + \ No newline at end of file