feat: support multiple in v-on

Author: zhiyuanzmj

src/core/common.ts

@@ -1,4 +1,4 @@
-import type { CallExpression, ConditionalExpression, Expression, LogicalExpression, Node } from '@babel/types'
+import type { ArrowFunctionExpression, CallExpression, ConditionalExpression, Expression, FunctionExpression, LogicalExpression, Node } from '@babel/types'
 import type { MagicString } from '@vue-macros/common'
 
 export function addAttribute(
@@ -88,3 +88,8 @@ export function isLogicalExpression(node: Node): node is LogicalExpression {
   return node.type === 'LogicalExpression'
     && isJSXExpression(node.right)
 }
+
+export function isFunctionExpression(node: Node): node is FunctionExpression | ArrowFunctionExpression {
+  return node.type === 'FunctionExpression'
+    || node.type === 'ArrowFunctionExpression'
+}

src/core/transform.ts

@@ -9,7 +9,7 @@ import type { Node } from '@babel/types'
 import type { Options } from '../types'
 import { transformVIf } from './v-if'
 import { transformVFor } from './v-for'
-import { isConditionalExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
+import { isConditionalExpression, isFunctionExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
 
 export type RootNodes = {
   node: Node
@@ -39,20 +39,6 @@ export function transformVueJsxVapor(
         })
         postCallbacks = rootNodes[0].postCallbacks!
       }
-      else if (
-        parent?.type === 'JSXAttribute'
-        && node.type === 'JSXExpressionContainer'
-        && /("|<.*?\/.*?>)/.test(s.sliceNode(node.expression))
-      ) {
-        rootNodes.unshift({
-          node: parent.name.name === 'v-for' && node.expression.type === 'BinaryExpression'
-            ? node.expression.right
-            : node.expression,
-          postCallbacks: [],
-          isAttributeValue: true,
-        })
-        postCallbacks = rootNodes[0].postCallbacks!
-      }
 
       if (
         node.type === 'JSXElement'
@@ -80,21 +66,32 @@ export function transformVueJsxVapor(
       }
       else if (node.type === 'JSXAttribute') {
         let name = s.sliceNode(node.name)
-        if (/^on[A-Z]/.test(name)) {
-          name = name.replace(/^(?:on)([A-Z])/, (_, $1) => `@${$1.toLowerCase()}`)
-        }
-        else if (!name.startsWith('v-') && node.value?.type === 'JSXExpressionContainer') {
-          name = `:${name}`
-        }
+        if (node.value?.type === 'JSXExpressionContainer') {
+          if (/^on[A-Z]/.test(name)) {
+            name = name.replace(/^(?:on)([A-Z])/, (_, $1) => `@${$1.toLowerCase()}`)
 
-        if (name.startsWith('v-') && node.value?.type === 'StringLiteral') {
-          s.overwrite(node.value.start!, node.value.start! + 1, `"'`)
-          s.overwrite(node.value.end! - 1, node.value.end!, `'"`)
-        }
+            if (!isFunctionExpression(node.value.expression))
+              s.appendRight(node.value.expression.start!, '($event) =>')
+          }
+          else if (!name.startsWith('v-')) {
+            name = `:${name}`
+          }
 
-        if (node.value?.type === 'JSXExpressionContainer') {
           s.overwrite(node.value.start!, node.value.start! + 1, '"')
           s.overwrite(node.value.end! - 1, node.value.end!, '"')
+
+          rootNodes.unshift({
+            node: name === 'v-for' && node.value.expression.type === 'BinaryExpression'
+              ? node.value.expression.right
+              : node.value.expression,
+            postCallbacks: [],
+            isAttributeValue: true,
+          })
+          postCallbacks = rootNodes[0].postCallbacks!
+        }
+        else if (node.value?.type === 'StringLiteral' && name.startsWith('v-')) {
+          s.overwrite(node.value.start!, node.value.start! + 1, `"'`)
+          s.overwrite(node.value.end! - 1, node.value.end!, `'"`)
         }
 
         postCallbacks.unshift(() =>
@@ -131,14 +128,10 @@ export function transformVueJsxVapor(
           s.overwrite(node.start!, node.start! + 1, '<component :is="__createTextVNode(')
           s.overwrite(node.end! - 1, node.end!, ')" />')
 
-          if (
-            /("|<.*?\/.*?>)/.test(s.sliceNode(node.expression))
-          ) {
-            rootNodes.unshift({
-              node: node.expression,
-              isAttributeValue: true,
-            })
-          }
+          rootNodes.unshift({
+            node: node.expression,
+            isAttributeValue: true,
+          })
           hasTextNode = true
         }
       }

src/core/v-for.ts

@@ -1,7 +1,7 @@
 import type { MagicString } from '@vue-macros/common'
 import type { CallExpression, Node } from '@babel/types'
 import type { RootNodes } from './transform'
-import { overwrite } from './common'
+import { isFunctionExpression, overwrite } from './common'
 
 export function transformVFor(
   node: CallExpression,
@@ -11,8 +11,7 @@ export function transformVFor(
 ) {
   const { callee, arguments: [argument] } = node
   if (
-    argument.type !== 'FunctionExpression'
-    && argument.type !== 'ArrowFunctionExpression'
+    !isFunctionExpression(argument)
     || callee.type !== 'MemberExpression'
   )
     return