fix(compiler-vapor): event handler

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index 892cee91d8cc7ed46c37e78725b533b4d71ec078..89b881b4af54b3df2808bd4270e9d4762c2bb262 100644 (file)
--- 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 916b7ba33dac5ff3368e51be9c2010443f239d25..c8ddd097869d33c741aa47c16bc5df2a82c4a03c 100644 (file)
--- 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 0f1ba8164e49b49e3be1ff8d8256e1bcb11f1ad3..8acc18f305e350ea6708448a55a759e6a46c66f0 100644 (file)
--- 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 (file)
index 0000000..68a7af7
--- /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>