From ebd3710d72696c47b0bbb118e043d2ca5f5b3640 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, 7 Mar 2024 17:44:42 +0800
Subject: [PATCH] refactor(runtime-vapor): don't record metadata for `on`

---
 .../__tests__/directives/vModel.spec.ts       | 65 ++++++++++---------
 packages/runtime-vapor/src/dom/event.ts       |  2 -
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/directives/vModel.spec.ts b/packages/runtime-vapor/__tests__/directives/vModel.spec.ts
index 33cd954a6..c9e41878f 100644
--- a/packages/runtime-vapor/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-vapor/__tests__/directives/vModel.spec.ts
@@ -1,5 +1,6 @@
 import { reactive, ref } from '@vue/reactivity'
 import {
+  delegate,
   on,
   setClass,
   setDOMProp,
@@ -34,7 +35,7 @@ describe('directive: v-model', () => {
       const t0 = template('<input />')
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       on(n0, 'input', () => () => spy(data.value))
       return n0
     }).render()
@@ -66,7 +67,7 @@ describe('directive: v-model', () => {
       )
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelSelect, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       on(n0, 'change', () => () => spy(data.value))
       return n0
     }).render()
@@ -93,7 +94,7 @@ describe('directive: v-model', () => {
 
       setDOMProp(n0, 'type', 'number')
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -117,8 +118,8 @@ describe('directive: v-model', () => {
       const t0 = template('<input />')
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
-      on(n0, 'update:modelValue', () => spy)
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => spy)
       return n0
     }).render()
 
@@ -141,7 +142,7 @@ describe('directive: v-model', () => {
       const t0 = template('<input />')
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => (toggle.value ? spy1 : spy2))
+      delegate(n0, 'update:modelValue', () => (toggle.value ? spy1 : spy2))
       return n0
     }).render()
 
@@ -168,7 +169,7 @@ describe('directive: v-model', () => {
       const t0 = template('<textarea />')
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -204,14 +205,14 @@ describe('directive: v-model', () => {
       withDirectives(input1, [
         [vModelDynamic, () => data.number, '', { number: true }],
       ])
-      on(input1, 'update:modelValue', () => val => (data.number = val))
+      delegate(input1, 'update:modelValue', () => val => (data.number = val))
 
       // trim
       setClass(input2, 'trim')
       withDirectives(input2, [
         [vModelDynamic, () => data.trim, '', { trim: true }],
       ])
-      on(input2, 'update:modelValue', () => val => (data.trim = val))
+      delegate(input2, 'update:modelValue', () => val => (data.trim = val))
 
       // trim & number
       setClass(input3, 'trim-number')
@@ -223,14 +224,18 @@ describe('directive: v-model', () => {
           { trim: true, number: true },
         ],
       ])
-      on(input3, 'update:modelValue', () => val => (data.trimNumber = val))
+      delegate(
+        input3,
+        'update:modelValue',
+        () => val => (data.trimNumber = val),
+      )
 
       // lazy
       setClass(input4, 'lazy')
       withDirectives(input4, [
         [vModelDynamic, () => data.lazy, '', { lazy: true }],
       ])
-      on(input4, 'update:modelValue', () => val => (data.lazy = val))
+      delegate(input4, 'update:modelValue', () => val => (data.lazy = val))
 
       return n0
     }).render()
@@ -282,7 +287,7 @@ describe('directive: v-model', () => {
       withDirectives(n1, [
         [vModelDynamic, () => data.value, '', { number: true }],
       ])
-      on(n1, 'update:modelValue', () => val => (data.value = val))
+      delegate(n1, 'update:modelValue', () => val => (data.value = val))
 
       setDOMProps(n2, [
         ['class', 'bar'],
@@ -294,7 +299,7 @@ describe('directive: v-model', () => {
       withDirectives(n2, [
         [vModelDynamic, () => data.value, '', { lazy: true }],
       ])
-      on(n2, 'update:modelValue', () => val => (data.value = val))
+      delegate(n2, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -360,7 +365,7 @@ describe('directive: v-model', () => {
       const n0 = t0() as HTMLInputElement
       setDOMProp(n0, 'type', 'checkbox')
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -396,7 +401,7 @@ describe('directive: v-model', () => {
         ['false-value', 'no'],
       ])
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -434,7 +439,7 @@ describe('directive: v-model', () => {
         ['false-value', { no: 'no' }],
       ])
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -470,7 +475,7 @@ describe('directive: v-model', () => {
         ['value', 'foo'],
       ])
       withDirectives(n1, [[vModelDynamic, () => data.value]])
-      on(n1, 'update:modelValue', () => val => (data.value = val))
+      delegate(n1, 'update:modelValue', () => val => (data.value = val))
 
       setDOMProps(n2, [
         ['class', 'bar'],
@@ -478,7 +483,7 @@ describe('directive: v-model', () => {
         ['value', 'bar'],
       ])
       withDirectives(n2, [[vModelDynamic, () => data.value]])
-      on(n2, 'update:modelValue', () => val => (data.value = val))
+      delegate(n2, 'update:modelValue', () => val => (data.value = val))
 
       return n0
     }).render()
@@ -534,7 +539,7 @@ describe('directive: v-model', () => {
         ['value', 'foo'],
       ])
       withDirectives(n1, [[vModelDynamic, () => data.value]])
-      on(n1, 'update:modelValue', () => val => (data.value = val))
+      delegate(n1, 'update:modelValue', () => val => (data.value = val))
 
       setDOMProps(n2, [
         ['class', 'bar'],
@@ -542,7 +547,7 @@ describe('directive: v-model', () => {
         ['value', 'bar'],
       ])
       withDirectives(n2, [[vModelDynamic, () => data.value]])
-      on(n2, 'update:modelValue', () => val => (data.value = val))
+      delegate(n2, 'update:modelValue', () => val => (data.value = val))
 
       return n0
     }).render()
@@ -598,7 +603,7 @@ describe('directive: v-model', () => {
         ['value', 'foo'],
       ])
       withDirectives(n1, [[vModelDynamic, () => data.value]])
-      on(n1, 'update:modelValue', () => val => (data.value = val))
+      delegate(n1, 'update:modelValue', () => val => (data.value = val))
 
       setDOMProps(n2, [
         ['class', 'bar'],
@@ -606,7 +611,7 @@ describe('directive: v-model', () => {
         ['value', 'bar'],
       ])
       withDirectives(n2, [[vModelDynamic, () => data.value]])
-      on(n2, 'update:modelValue', () => val => (data.value = val))
+      delegate(n2, 'update:modelValue', () => val => (data.value = val))
 
       return n0
     }).render()
@@ -651,7 +656,7 @@ describe('directive: v-model', () => {
 
       setDOMProp(n0, 'value', null)
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -701,7 +706,7 @@ describe('directive: v-model', () => {
         ['multiple', true],
       ])
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -755,7 +760,7 @@ describe('directive: v-model', () => {
       withDirectives(n0, [
         [vModelDynamic, () => data.value, '', { number: true }],
       ])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -785,7 +790,7 @@ describe('directive: v-model', () => {
       withDirectives(n0, [
         [vModelDynamic, () => data.value, '', { number: true }],
       ])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -845,7 +850,7 @@ describe('directive: v-model', () => {
       withDirectives(n0, [
         [vModelDynamic, () => data.value, '', { number: true }],
       ])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -913,7 +918,7 @@ describe('directive: v-model', () => {
         ['multiple', true],
       ])
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -976,7 +981,7 @@ describe('directive: v-model', () => {
       withDirectives(n0, [
         [vModelDynamic, () => data.value, '', { number: true }],
       ])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
@@ -1026,7 +1031,7 @@ describe('directive: v-model', () => {
       const t0 = template('<input />')
       const n0 = t0() as HTMLInputElement
       withDirectives(n0, [[vModelDynamic, () => data.value]])
-      on(n0, 'update:modelValue', () => val => (data.value = val))
+      delegate(n0, 'update:modelValue', () => val => (data.value = val))
       return n0
     }).render()
 
diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts
index c12e32576..eb2ae6aa2 100644
--- a/packages/runtime-vapor/src/dom/event.ts
+++ b/packages/runtime-vapor/src/dom/event.ts
@@ -30,7 +30,6 @@ export function on(
     ModifierOptions & { effect?: boolean } = {},
 ) {
   const handler: DelegatedHandler = eventHandler(handlerGetter, options)
-  const cleanupMetadata = recordEventMetadata(el, event, handler)
   let cleanupEvent: (() => void) | undefined
   queuePostRenderEffect(() => {
     cleanupEvent = addEventListener(el, event, handler, options)
@@ -43,7 +42,6 @@ export function on(
   }
 
   function cleanup() {
-    cleanupMetadata()
     cleanupEvent && cleanupEvent()
   }
 }