fix(compiler-core/v-on): fix codegen for event handler with newlines (#…

…1640)
vuejs · Jul 19, 2020 · f9826fa · f9826fa
1 parent fa5ddf8
commit f9826fa
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -271,6 +271,56 @@ describe('compiler: transform v-on', () => {
     })
   })
 
+  test('should NOT wrap as function if expression is already function expression (with newlines)', () => {
+    const { node } = parseWithVOn(
+      `<div @click="
+      $event => {
+        foo($event)
+      }
+    "/>`
+    )
+    expect((node.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: { content: `onClick` },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `
+      $event => {
+        foo($event)
+      }
+    `
+          }
+        }
+      ]
+    })
+  })
+
+  test('should NOT wrap as function if expression is already function expression (with newlines + function keyword)', () => {
+    const { node } = parseWithVOn(
+      `<div @click="
+      function($event) {
+        foo($event)
+      }
+    "/>`
+    )
+    expect((node.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: { content: `onClick` },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: `
+      function($event) {
+        foo($event)
+      }
+    `
+          }
+        }
+      ]
+    })
+  })
+
   test('should NOT wrap as function if expression is complex member expression', () => {
     const { node } = parseWithVOn(`<div @click="a['b' + c]"/>`)
     expect((node.codegenNode as VNodeCall).props).toMatchObject({

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