From: ubugeeei <71201308+Ubugeeei@users.noreply.github.com>
Date: Wed, 29 Nov 2023 21:11:59 +0000 (+0900)
Subject: feat(compiler): v-on  event modifier (#8)
X-Git-Tag: v3.6.0-alpha.1~16^2~784
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=503615a31ec3b594677de3ac4c27a96838d808f6;p=thirdparty%2Fvuejs%2Fcore.git

feat(compiler): v-on  event modifier (#8)
---

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index 92181bc6e0..4f9dbf8d29 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
@@ -71,6 +71,22 @@ export function render() {
 "
 `;
 
+exports[`compile > directives > v-on > event modifier 1`] = `
+"import { template, children, effect, withModifiers, on } from 'vue/vapor';
+const t0 = template('<div></div>');
+export function render() {
+  const n0 = t0();
+  const {
+    0: [n1],
+  } = children(n0);
+  effect(() => {
+    on(n1, 'click', withModifiers(handleClick, ['prevent', 'stop']));
+  });
+  return n0;
+}
+"
+`;
+
 exports[`compile > directives > v-on > simple expression 1`] = `
 "import { template, children, effect, on } from 'vue/vapor';
 const t0 = template('<div></div>');
diff --git a/packages/compiler-vapor/__tests__/compile.test.ts b/packages/compiler-vapor/__tests__/compile.test.ts
index e9766a8060..8fa34b5ed3 100644
--- a/packages/compiler-vapor/__tests__/compile.test.ts
+++ b/packages/compiler-vapor/__tests__/compile.test.ts
@@ -120,6 +120,18 @@ describe('compile', () => {
           },
         })
       })
+
+      test('event modifier', async () => {
+        const code = await compile(
+          `<div @click.prevent.stop="handleClick"></div>`,
+          {
+            bindingMetadata: {
+              handleClick: BindingTypes.SETUP_CONST,
+            },
+          },
+        )
+        expect(code).matchSnapshot()
+      })
     })
 
     describe('v-html', () => {
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 0af9d764bc..e21f0f02bb 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -98,9 +98,14 @@ export function generate(
       }
 
       case IRNodeTypes.SET_EVENT: {
-        code = `on(n${oper.element}, ${JSON.stringify(oper.name)}, ${
-          oper.value
-        })\n`
+        let value = oper.value
+        if (oper.modifiers.length) {
+          value = `withModifiers(${value}, ${genArrayExpression(
+            oper.modifiers,
+          )})`
+          vaporHelpers.add('withModifiers')
+        }
+        code = `on(n${oper.element}, ${JSON.stringify(oper.name)}, ${value})\n`
         vaporHelpers.add('on')
         break
       }
@@ -172,3 +177,8 @@ function genChildren(children: DynamicChildren) {
   if (!code) return ''
   return `{${code}}`
 }
+
+// TODO: other types (not only string)
+function genArrayExpression(elements: string[]) {
+  return `[${elements.map((it) => `"${it}"`).join(', ')}]`
+}
diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
index b3892a3cdd..31deb1e4dd 100644
--- a/packages/compiler-vapor/src/ir.ts
+++ b/packages/compiler-vapor/src/ir.ts
@@ -59,6 +59,7 @@ export interface SetEventIRNode extends IRNode {
   element: number
   name: string
   value: string
+  modifiers: string[]
 }
 
 export interface SetHtmlIRNode extends IRNode {
diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
index d7f5b7f1ad..d304c28963 100644
--- a/packages/compiler-vapor/src/transform.ts
+++ b/packages/compiler-vapor/src/transform.ts
@@ -416,6 +416,7 @@ function transformProp(
         element: ctx.reference(),
         name: node.arg.content,
         value: expr,
+        modifiers,
       })
       break
     }
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 9e47af592c..0eebcbbf8b 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -39,3 +39,5 @@ export { effect } from './scheduler'
 export * from './on'
 export * from './render'
 export * from './template'
+export * from './scheduler'
+export { withModifiers } from '@vue/runtime-dom'
diff --git a/playground/src/event-modifier.vue b/playground/src/event-modifier.vue
new file mode 100644
index 0000000000..97e6fe3afd
--- /dev/null
+++ b/playground/src/event-modifier.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const handleClick = () => {
+  console.log('Hello, Vapor!')
+}
+
+// @ts-expect-error
+globalThis.handleClick = handleClick
+</script>
+
+<template>
+  <form>
+    <button @click="handleClick">submit</button>
+  </form>
+
+  <form>
+    <button @click.prevent="handleClick">no submit</button>
+  </form>
+</template>