fix(compiler-core): v-on inline async function expression handler (#4569)

fix #4568

diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 7a8fba9c6418a7314bb3c9cde907e51abc3c964a..3c56ce9aadd3a4a2b8bff62190c7df2ca139b094 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -563,6 +563,58 @@ describe('compiler: transform v-on', () => {
       })
     })
 
+    test('inline async arrow function expression handler', () => {
+      const { root, node } = parseWithVOn(
+        `<div v-on:click="async () => await foo()" />`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true
+        }
+      )
+      expect(root.cached).toBe(1)
+      const vnodeCall = node.codegenNode as VNodeCall
+      // should not treat cached handler as dynamicProp, so no flags
+      expect(vnodeCall.patchFlag).toBeUndefined()
+      expect(
+        (vnodeCall.props as ObjectExpression).properties[0].value
+      ).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.COMPOUND_EXPRESSION,
+          children: [`async () => await `, { content: `_ctx.foo` }, `()`]
+        }
+      })
+    })
+
+    test('inline async function expression handler', () => {
+      const { root, node } = parseWithVOn(
+        `<div v-on:click="async function () { await foo() } " />`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true
+        }
+      )
+      expect(root.cached).toBe(1)
+      const vnodeCall = node.codegenNode as VNodeCall
+      // should not treat cached handler as dynamicProp, so no flags
+      expect(vnodeCall.patchFlag).toBeUndefined()
+      expect(
+        (vnodeCall.props as ObjectExpression).properties[0].value
+      ).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.COMPOUND_EXPRESSION,
+          children: [
+            `async function () { await `,
+            { content: `_ctx.foo` },
+            `() } `
+          ]
+        }
+      })
+    })
+
     test('inline statement handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo++" />`, {
         prefixIdentifiers: true,

diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 42a289bb888f0b91281b464d73cd09dc2156968f..1815e09bc9c13f5454b19080e740caa9dbca81ae 100644 (file)
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -16,7 +16,8 @@ import { validateBrowserExpression } from '../validateExpression'
 import { hasScopeRef, isMemberExpression } from '../utils'
 import { TO_HANDLER_KEY } from '../runtimeHelpers'
 
-const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^\s*function(?:\s+[\w$]+)?\s*\(/
+const fnExpRE =
+  /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/
 
 export interface VOnDirectiveNode extends DirectiveNode {
   // v-on without arg is handled directly in ./transformElements.ts due to it affecting