feat(compiler-core): support aliasing vue: prefixed events to inline …

…vnode hooks
vuejs · Dec 10, 2021 · 4b0ca87 · 4b0ca87
1 parent 1c9a481
commit 4b0ca87
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {