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

Author: ubugeeei

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>');

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', () => {

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(', ')}]`
+}

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 {

packages/compiler-vapor/src/transform.ts

@@ -416,6 +416,7 @@ function transformProp(
         element: ctx.reference(),
         name: node.arg.content,
         value: expr,
+        modifiers,
       })
       break
     }

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'

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>