From: Evan You <yyx990803@gmail.com>
Date: Mon, 10 Feb 2020 16:00:37 +0000 (-0500)
Subject: feat(compiler-core/v-on): support @vnode-xxx usage for vnode hooks
X-Git-Tag: v3.0.0-alpha.5~62
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=571ed4226be618dcc9f95e4c2da8d82d7d2f7750;p=thirdparty%2Fvuejs%2Fcore.git

feat(compiler-core/v-on): support @vnode-xxx usage for vnode hooks
---

diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 3ba3c4a818..2ad2b4f144 100644
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -300,6 +300,20 @@ describe('compiler: transform v-on', () => {
     expect(onError).not.toHaveBeenCalled()
   })
 
+  test('case conversion for vnode hooks', () => {
+    const { node } = parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`)
+    const props = (node.codegenNode as CallExpression)
+      .arguments[1] as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `onVnodeMounted`
+      },
+      value: {
+        content: `onMount`
+      }
+    })
+  })
+
   describe('cacheHandler', () => {
     test('empty handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click.prevent />`, {
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index c56b300c01..113a118188 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -8,7 +8,7 @@ import {
   createCompoundExpression,
   SimpleExpressionNode
 } from '../ast'
-import { capitalize } from '@vue/shared'
+import { capitalize, camelize } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { isMemberExpression, hasScopeRef } from '../utils'
@@ -38,11 +38,12 @@ export const transformOn: DirectiveTransform = (
   let eventName: ExpressionNode
   if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
     if (arg.isStatic) {
-      eventName = createSimpleExpression(
-        `on${capitalize(arg.content)}`,
-        true,
-        arg.loc
-      )
+      const rawName = arg.content
+      // for @vnode-xxx event listeners, auto convert it to camelCase
+      const normalizedName = rawName.startsWith(`vnode`)
+        ? capitalize(camelize(rawName))
+        : capitalize(rawName)
+      eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc)
     } else {
       eventName = createCompoundExpression([`"on" + (`, arg, `)`])
     }