feat(jsx-directive): add v-on directive with object syntax (#578)

vue-macros · Dec 11, 2023 · ac5494c · ac5494c
1 parent 3915dbf
commit ac5494c
Show file tree

Hide file tree

Showing 19 changed files with 619 additions and 475 deletions.
diff --git a/.changeset/quiet-bottles-fold.md b/.changeset/quiet-bottles-fold.md
@@ -0,0 +1,6 @@
+---
+'@vue-macros/jsx-directive': minor
+'@vue-macros/volar': minor
+---
+
+add `v-on` directive with object syntax
diff --git a/docs/features/jsx-directive.md b/docs/features/jsx-directive.md
@@ -10,11 +10,18 @@ Vue built-in directives for JSX.
 | `v-else-if` | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-else`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |   `v-for`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
+|   `v-on`    | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-slot`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-html`   | :white_check_mark: | :white_check_mark: |         /          |
 |  `v-once`   | :white_check_mark: |        :x:         |         /          |
 |  `v-memo`   | :white_check_mark: |        :x:         |         /          |
 
+::: warning
+
+`v-on` only supports binding to an object of event / listener pairs without an argument.
+
+:::
+
 ## Usage
 
 ```vue
@@ -38,7 +45,9 @@ defineRender(() => (
       {i}
     </div>
 
-    <Child v-slot={props}>{props}</Child>
+    <Child v-on={{ submit: () => {} }} v-slot={props}>
+      {props}
+    </Child>
   </>
 ))
 </script>

diff --git a/docs/zh-CN/features/jsx-directive.md b/docs/zh-CN/features/jsx-directive.md
@@ -10,12 +10,19 @@
 | `v-else-if` | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-else`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |   `v-for`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
+|   `v-on`    | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-slot`   | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 |  `v-html`   | :white_check_mark: | :white_check_mark: |         /          |
 |  `v-once`   | :white_check_mark: |        :x:         |         /          |
 |  `v-memo`   | :white_check_mark: |        :x:         |         /          |
 
-## Usage
+::: warning
+
+`v-on` 仅支持绑定不带参数的事件/监听器对的对象。
+
+:::
+
+## 用法
 
 ```vue
 <script setup lang="tsx">
@@ -38,13 +45,15 @@ defineRender(() => (
       {i}
     </div>
 
-    <Child v-slot={props}>{props}</Child>
+    <Child v-on={{ submit: () => {} }} v-slot={props}>
+      {props}
+    </Child>
   </>
 ))
 </script>
 ```
 
-## Volar Configuration
+## Volar 配置
 
 ```jsonc {6}
 // tsconfig.json

diff --git a/packages/jsx-directive/src/core/index.ts b/packages/jsx-directive/src/core/index.ts
@@ -12,6 +12,7 @@ import { transformVFor } from './v-for'
 import { transformVMemo } from './v-memo'
 import { transformVHtml } from './v-html'
 import { transformVSlot } from './v-slot'
+import { transformVOn } from './v-on'
 import type { JSXAttribute, JSXElement, Node, Program } from '@babel/types'
 
 export type JsxDirectiveNode = {
@@ -51,7 +52,9 @@ export function transformJsxDirective(
 
   const s = new MagicString(code)
   for (const { ast, offset } of asts) {
-    if (!/\sv-(if|for|memo|once|html|slot)/.test(s.sliceNode(ast, { offset })))
+    if (
+      !/\sv-(if|for|memo|once|html|slot|on)/.test(s.sliceNode(ast, { offset }))
+    )
       continue
 
     const vIfMap = new Map<Node, JsxDirectiveNode[]>()
@@ -61,6 +64,7 @@ export function transformJsxDirective(
     })[] = []
     const vHtmlNodes: JsxDirectiveNode[] = []
     const vSlotSet = new Set<JSXElement>()
+    const vOnNodes: JsxDirectiveNode[] = []
     walkAST<Node>(ast, {
       enter(node, parent) {
         if (node.type !== 'JSXElement') return
@@ -97,6 +101,12 @@ export function transformJsxDirective(
                 : node,
             )
           }
+          if (attribute.name.name === 'v-on') {
+            vOnNodes.push({
+              node,
+              attribute,
+            })
+          }
         }
 
         if (vIfAttribute) {
@@ -131,6 +141,7 @@ export function transformJsxDirective(
     version >= 3.2 && transformVMemo(vMemoNodes, s, offset)
     transformVHtml(vHtmlNodes, s, offset, version)
     transformVSlot(Array.from(vSlotSet), s, offset, version)
+    transformVOn(vOnNodes, s, offset, version)
   }
 
   return generateTransform(s, id)

diff --git a/packages/jsx-directive/src/core/v-on.ts b/packages/jsx-directive/src/core/v-on.ts
@@ -0,0 +1,31 @@
+import { HELPER_PREFIX, type MagicString } from '@vue-macros/common'
+import type { JsxDirectiveNode } from '.'
+
+export function transformVOn(
+  nodes: JsxDirectiveNode[],
+  s: MagicString,
+  offset: number,
+  version: number,
+) {
+  if (nodes.length > 0 && version >= 3)
+    s.prependRight(
+      offset,
+      `const ${HELPER_PREFIX}transformVOn = (obj) => Object.entries(obj).reduce((res, [key, value]) => (res['on' + key[0].toUpperCase() + key.slice(1)] = value, res), {})`,
+    )
+
+  nodes.forEach(({ attribute }) => {
+    if (version < 3) {
+      s.remove(attribute.start! + offset, attribute.start! + offset + 2)
+      return
+    }
+
+    s.overwriteNode(
+      attribute,
+      `{...${HELPER_PREFIX}transformVOn(${s.slice(
+        attribute.value!.start! + offset + 1,
+        attribute.value!.end! + offset - 1,
+      )})}`,
+      { offset },
+    )
+  })
+}
diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts
@@ -106,7 +106,11 @@ export function transformVSlot(
     if (attribute) {
       s.overwriteNode(attribute, result, { offset })
     } else {
-      s.appendLeft(node.openingElement.end! + offset - 1, ` ${result}`)
+      s.overwrite(
+        node.openingElement.end! + offset - 1,
+        node.openingElement.end! + offset,
+        ` ${result}>`,
+      )
     }
   })
 }