From 4b0ca8709a7e2652f4b02665f378d47ba4dbe969 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 10 Dec 2021 16:09:23 +0800
Subject: [PATCH] feat(compiler-core): support aliasing vue: prefixed events to
 inline vnode hooks

---
 .../transforms/transformElement.spec.ts       |  7 +----
 .../__tests__/transforms/vOn.spec.ts          | 26 +++++++++++++++++++
 .../src/transforms/transformElement.ts        |  2 +-
 packages/compiler-core/src/transforms/vOn.ts  |  6 ++++-
 packages/compiler-core/src/utils.ts           | 18 +++----------
 5 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 17e6b5bb..b72533ee 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1209,12 +1209,7 @@ describe('compiler: element transform', () => {
 
   test('force block for inline before-update handlers w/ children', () => {
     expect(
-      parseWithElementTransform(`<div @vnode-before-update>hello</div>`).node
-        .isBlock
-    ).toBe(true)
-
-    expect(
-      parseWithElementTransform(`<div @vnodeBeforeUpdate>hello</div>`).node
+      parseWithElementTransform(`<div @vue:before-update>hello</div>`).node
         .isBlock
     ).toBe(true)
   })
diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 3c56ce9a..8f943a74 100644
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -438,6 +438,32 @@ describe('compiler: transform v-on', () => {
     })
   })
 
+  test('vue: prefixed events', () => {
+    const { node } = parseWithVOn(
+      `<div v-on:vue:mounted="onMount" @vue:before-update="onBeforeUpdate" />`
+    )
+    expect((node.codegenNode as VNodeCall).props).toMatchObject({
+      properties: [
+        {
+          key: {
+            content: `onVnodeMounted`
+          },
+          value: {
+            content: `onMount`
+          }
+        },
+        {
+          key: {
+            content: `onVnodeBeforeUpdate`
+          },
+          value: {
+            content: `onBeforeUpdate`
+          }
+        }
+      ]
+    })
+  })
+
   describe('cacheHandler', () => {
     test('empty handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click.prevent />`, {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index fb0ddd52..e79a560a 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -550,7 +550,7 @@ export function buildProps(
         (isVBind && isStaticArgOf(arg, 'key')) ||
         // inline before-update hooks need to force block so that it is invoked
         // before children
-        (isVOn && hasChildren && isStaticArgOf(arg, 'vnodeBeforeUpdate', true))
+        (isVOn && hasChildren && isStaticArgOf(arg, 'vue:before-update'))
       ) {
         shouldUseBlock = true
       }
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 0a804021..060a7ef9 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -42,7 +42,11 @@ export const transformOn: DirectiveTransform = (
   let eventName: ExpressionNode
   if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
     if (arg.isStatic) {
-      const rawName = arg.content
+      let rawName = arg.content
+      // TODO deprecate @vnodeXXX usage
+      if (rawName.startsWith('vue:')) {
+        rawName = `vnode-${rawName.slice(4)}`
+      }
       // for all event listeners, auto convert it to camelCase. See issue #2249
       eventName = createSimpleExpression(
         toHandlerKey(camelize(rawName)),
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index 0c62f304..c9e310fe 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -42,14 +42,7 @@ import {
   WITH_MEMO,
   OPEN_BLOCK
 } from './runtimeHelpers'
-import {
-  isString,
-  isObject,
-  hyphenate,
-  extend,
-  NOOP,
-  camelize
-} from '@vue/shared'
+import { isString, isObject, hyphenate, extend, NOOP } from '@vue/shared'
 import { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
 import { Expression } from '@babel/types'
@@ -298,14 +291,9 @@ export function findProp(
 
 export function isStaticArgOf(
   arg: DirectiveNode['arg'],
-  name: string,
-  camel?: boolean
+  name: string
 ): boolean {
-  return !!(
-    arg &&
-    isStaticExp(arg) &&
-    (camel ? camelize(arg.content) : arg.content) === name
-  )
+  return !!(arg && isStaticExp(arg) && arg.content === name)
 }
 
 export function hasDynamicKeyVBind(node: ElementNode): boolean {