feat(runtime-vapor): support v-bind for event

Author: sxzz

packages/runtime-dom/src/patchProp.ts

@@ -3,16 +3,15 @@ import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
-import { isFunction, isModelListener, isOn, isString } from '@vue/shared'
+import {
+  isFunction,
+  isModelListener,
+  isNativeOn,
+  isOn,
+  isString,
+} from '@vue/shared'
 import type { RendererOptions } from '@vue/runtime-core'
 
-const isNativeOn = (key: string) =>
-  key.charCodeAt(0) === 111 /* o */ &&
-  key.charCodeAt(1) === 110 /* n */ &&
-  // lowercase letter
-  key.charCodeAt(2) > 96 &&
-  key.charCodeAt(2) < 123
-
 type DOMRendererOptions = RendererOptions<Node, Element>
 
 export const patchProp: DOMRendererOptions['patchProp'] = (

packages/runtime-vapor/src/dom/event.ts

@@ -8,7 +8,7 @@ import { withKeys, withModifiers } from '@vue/runtime-dom'
 import { queuePostRenderEffect } from '../scheduler'
 
 export function addEventListener(
-  el: HTMLElement,
+  el: Element,
   event: string,
   handler: (...args: any) => any,
   options?: AddEventListenerOptions,
@@ -23,7 +23,7 @@ interface ModifierOptions {
 }
 
 export function on(
-  el: HTMLElement,
+  el: Element,
   event: string,
   handlerGetter: () => undefined | ((...args: any[]) => any),
   options: AddEventListenerOptions &

packages/runtime-vapor/src/dom/prop.ts

@@ -3,6 +3,7 @@ import {
   includeBooleanAttr,
   isArray,
   isFunction,
+  isNativeOn,
   isOn,
   isString,
   normalizeClass,
@@ -12,6 +13,7 @@ import {
 import { warn } from '../warning'
 import { setStyle } from './style'
 import { MetadataKind, getMetadata, recordPropMetadata } from '../metadata'
+import { on } from './event'
 
 export function setClass(el: Element, value: any) {
   const prev = recordPropMetadata(el, 'class', (value = normalizeClass(value)))
@@ -110,6 +112,8 @@ export function setDynamicProp(el: Element, key: string, value: any) {
     setClass(el, value)
   } else if (key === 'style') {
     setStyle(el as HTMLElement, value)
+  } else if (isOn(key)) {
+    on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true })
   } else if (
     key[0] === '.'
       ? ((key = key.slice(1)), true)
@@ -193,13 +197,6 @@ export function setHtml(el: Element, value: any) {
 }
 
 // TODO copied from runtime-dom
-const isNativeOn = (key: string) =>
-  key.charCodeAt(0) === 111 /* o */ &&
-  key.charCodeAt(1) === 110 /* n */ &&
-  // lowercase letter
-  key.charCodeAt(2) > 96 &&
-  key.charCodeAt(2) < 123
-
 function shouldSetAsProp(
   el: Element,
   key: string,

packages/shared/src/general.ts

@@ -18,6 +18,13 @@ export const isOn = (key: string) =>
   // uppercase letter
   (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97)
 
+export const isNativeOn = (key: string) =>
+  key.charCodeAt(0) === 111 /* o */ &&
+  key.charCodeAt(1) === 110 /* n */ &&
+  // lowercase letter
+  key.charCodeAt(2) > 96 &&
+  key.charCodeAt(2) < 123
+
 export const isModelListener = (key: string) => key.startsWith('onUpdate:')
 
 export const extend = Object.assign