fix(runtime-dom): invoker value is actually unknown at runtime

Author: Tofandel

packages/runtime-dom/__tests__/patchEvents.spec.ts

@@ -192,4 +192,11 @@ describe(`runtime-dom: events patching`, () => {
     testElement.dispatchEvent(new CustomEvent('foobar'))
     expect(fn2).toHaveBeenCalledTimes(1)
   })
+
+  it('handles an unknown type', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'onClick', null, 'test')
+    el.dispatchEvent(new Event('click'))
+    expect('[Vue warn]: Wrong type passed to the event invoker, did you maybe forget @ or : in front of your prop? Received test').toHaveBeenWarned()
+  })
 })

packages/runtime-dom/src/modules/events.ts

@@ -1,8 +1,8 @@
-import { hyphenate, isArray } from '@vue/shared'
+import { hyphenate, isArray, isString, isFunction } from '@vue/shared'
 import {
   ErrorCodes,
   ComponentInternalInstance,
-  callWithAsyncErrorHandling
+  callWithAsyncErrorHandling, warn
 } from '@vue/runtime-core'
 
 interface Invoker extends EventListener {
@@ -81,7 +81,7 @@ const getNow = () =>
   cachedNow || (p.then(() => (cachedNow = 0)), (cachedNow = Date.now()))
 
 function createInvoker(
-  initialValue: EventValue,
+  initialValue: EventValue | unknown,
   instance: ComponentInternalInstance | null
 ) {
   const invoker: Invoker = (e: Event & { _vts?: number }) => {
@@ -109,23 +109,34 @@ function createInvoker(
       [e]
     )
   }
-  invoker.value = initialValue
+  invoker.value = sanitizeEventValue(initialValue)
   invoker.attached = getNow()
   return invoker
 }
 
+function sanitizeEventValue(value: unknown): EventValue {
+  if (isFunction(value) || isArray(value)) {
+    return value as EventValue
+  }
+
+  if (__DEV__) {
+    warn('Wrong type passed to the event invoker, did you maybe forget @ or : in front of your prop? Received ' + (isString(value) ? value : typeof value))
+  }
+  return () => {}
+}
+
 function patchStopImmediatePropagation(
   e: Event,
-  value: EventValue
+  value: EventValue | unknown
 ): EventValue {
   if (isArray(value)) {
     const originalStop = e.stopImmediatePropagation
     e.stopImmediatePropagation = () => {
       originalStop.call(e)
       ;(e as any)._stopped = true
     }
-    return value.map(fn => (e: Event) => !(e as any)._stopped && fn && fn(e))
+    return (value as Function[]).map(fn => (e: Event) => !(e as any)._stopped && fn && fn(e))
   } else {
-    return value
+    return sanitizeEventValue(value)
   }
 }