From b4da5a8da688ec6192e7e96871d1178152201a47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 14 Mar 2024 14:25:54 +0800
Subject: [PATCH] feat(runtime-vapor): support v-bind for event

---
 packages/runtime-dom/src/patchProp.ts   | 15 +++++++--------
 packages/runtime-vapor/src/dom/event.ts |  4 ++--
 packages/runtime-vapor/src/dom/prop.ts  | 11 ++++-------
 packages/shared/src/general.ts          |  7 +++++++
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index ef0197ed2..132822cf9 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/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'] = (
diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts
index f93b5b160..6774717af 100644
--- a/packages/runtime-vapor/src/dom/event.ts
+++ b/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 &
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index 3f5d6c128..67afb80e5 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/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,
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index e85b48d7b..112d13b4e 100644
--- a/packages/shared/src/general.ts
+++ b/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