diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts index 17e6b5bb14a..b72533ee3f9 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(`
hello
`).node - .isBlock - ).toBe(true) - - expect( - parseWithElementTransform(`
hello
`).node + parseWithElementTransform(`
hello
`).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 3c56ce9aadd..8f943a7491f 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( + `
` + ) + 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(`
`, { diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index fb0ddd528c7..e79a560a2b0 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 0a804021d15..060a7ef9097 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 0c62f3043d9..c9e310fe089 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 {