From f907a2a708b814dbebc8764f3172424b679ce404 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: Wed, 6 Dec 2023 18:43:01 +0800
Subject: [PATCH] fix(compiler-vapor): event handler

---
 .../__snapshots__/compile.test.ts.snap        | 48 +++++++++----------
 .../__snapshots__/fixtures.test.ts.snap       |  2 +-
 packages/compiler-vapor/src/generate.ts       |  7 +++
 playground/src/reactive-event-handler.vue     | 20 ++++++++
 4 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 playground/src/reactive-event-handler.vue

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index 892cee91d..89b881b4a 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
@@ -87,28 +87,28 @@ export function render(_ctx) {
   const t0 = _template(\\"<a></a><form></form><a></a><div></div><div></div><a></a><div></div><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>\\")
   const n0 = t0()
   const { 0: [n1], 1: [n2], 2: [n3], 3: [n4], 4: [n5], 5: [n6], 6: [n7], 7: [n8], 8: [n9], 9: [n10], 10: [n11], 11: [n12], 12: [n13], 13: [n14], 14: [n15], 15: [n16], 16: [n17], 17: [n18], 18: [n19], 19: [n20], 20: [n21], 21: [n22],} = _children(n0)
-  _on(n1, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"stop\\"]))
-  _on(n2, \\"submit\\", _withModifiers(_ctx.handleEvent, [\\"prevent\\"]))
-  _on(n3, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"stop\\", \\"prevent\\"]))
-  _on(n4, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"self\\"]))
-  _on(n5, \\"click\\", _ctx.handleEvent, { capture: true })
-  _on(n6, \\"click\\", _ctx.handleEvent, { once: true })
-  _on(n7, \\"scroll\\", _ctx.handleEvent, { passive: true })
-  _on(n8, \\"contextmenu\\", _withModifiers(_ctx.handleEvent, [\\"right\\"]))
-  _on(n9, \\"click\\", _withModifiers(_ctx.handleEvent, [\\"left\\"]))
-  _on(n10, \\"mouseup\\", _withModifiers(_ctx.handleEvent, [\\"middle\\"]))
-  _on(n11, \\"contextmenu\\", _withModifiers(_ctx.handleEvent, [\\"right\\"]))
-  _on(n12, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"enter\\"]))
-  _on(n13, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"tab\\"]))
-  _on(n14, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"delete\\"]))
-  _on(n15, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"esc\\"]))
-  _on(n16, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"space\\"]))
-  _on(n17, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"up\\"]))
-  _on(n18, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"down\\"]))
-  _on(n19, \\"keyup\\", _withKeys(_ctx.handleEvent, [\\"left\\"]))
-  _on(n20, \\"keyup\\", _withModifiers(_ctx.submit, [\\"middle\\"]))
-  _on(n21, \\"keyup\\", _withModifiers(_ctx.submit, [\\"middle\\", \\"self\\"]))
-  _on(n22, \\"keyup\\", _withKeys(_withModifiers(_ctx.handleEvent, [\\"self\\"]), [\\"enter\\"]))
+  _on(n1, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"stop\\"]))
+  _on(n2, \\"submit\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"prevent\\"]))
+  _on(n3, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"stop\\", \\"prevent\\"]))
+  _on(n4, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"self\\"]))
+  _on(n5, \\"click\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { capture: true })
+  _on(n6, \\"click\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { once: true })
+  _on(n7, \\"scroll\\", (...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), { passive: true })
+  _on(n8, \\"contextmenu\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"right\\"]))
+  _on(n9, \\"click\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"left\\"]))
+  _on(n10, \\"mouseup\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"middle\\"]))
+  _on(n11, \\"contextmenu\\", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"right\\"]))
+  _on(n12, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"enter\\"]))
+  _on(n13, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"tab\\"]))
+  _on(n14, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"delete\\"]))
+  _on(n15, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"esc\\"]))
+  _on(n16, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"space\\"]))
+  _on(n17, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"up\\"]))
+  _on(n18, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"down\\"]))
+  _on(n19, \\"keyup\\", _withKeys((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"left\\"]))
+  _on(n20, \\"keyup\\", _withModifiers((...args) => (_ctx.submit && _ctx.submit(...args)), [\\"middle\\"]))
+  _on(n21, \\"keyup\\", _withModifiers((...args) => (_ctx.submit && _ctx.submit(...args)), [\\"middle\\", \\"self\\"]))
+  _on(n22, \\"keyup\\", _withKeys(_withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), [\\"self\\"]), [\\"enter\\"]))
   return n0
 }"
 `;
@@ -120,7 +120,7 @@ export function render(_ctx) {
   const t0 = _template(\\"<div></div>\\")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _on(n1, \\"click\\", _ctx.handleClick)
+  _on(n1, \\"click\\", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
   return n0
 }"
 `;
@@ -259,7 +259,7 @@ export function render(_ctx) {
   _prepend(n4, n1)
   _insert(n2, n4, n5)
   _append(n4, n3)
-  _on(n4, \\"click\\", _ctx.handleClick)
+  _on(n4, \\"click\\", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
   _effect(() => {
     _setText(n1, undefined, _ctx.count)
   })
diff --git a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap
index 916b7ba33..c8ddd0978 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap
@@ -23,7 +23,7 @@ return (() => {
   _append(n2, n1)
   const n3 = _createTextNode(double.value)
   _append(n4, n3)
-  _on(n5, \\"click\\", increment)
+  _on(n5, \\"click\\", (...args) => (increment && increment(...args)))
   const n7 = _createTextNode(count.value)
   _setText(n7, undefined, count.value)
   _append(n8, n7)
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 0f1ba8164..8acc18f30 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -446,7 +446,14 @@ function genSetEvent(oper: SetEventIRNode, context: CodegenContext) {
   if (nonKeys.length) {
     push(`${vaporHelper('withModifiers')}(`)
   }
+
+  // gen event handler
+  push('(...args) => (')
   genExpression(oper.value, context)
+  push(' && ')
+  genExpression(oper.value, context)
+  push('(...args))')
+
   if (nonKeys.length) {
     push(`, ${genArrayExpression(nonKeys)})`)
   }
diff --git a/playground/src/reactive-event-handler.vue b/playground/src/reactive-event-handler.vue
new file mode 100644
index 000000000..68a7af723
--- /dev/null
+++ b/playground/src/reactive-event-handler.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+
+const count = ref(0)
+const inc = () => count.value++
+const dec = () => count.value--
+const handler = ref(inc)
+
+watchEffect(() => {
+  if (count.value > 5) {
+    handler.value = dec
+  } else if (count.value < -5) {
+    handler.value = inc
+  }
+})
+</script>
+
+<template>
+  <button @click="handler">{{ count }}</button>
+</template>