Skip to content
Permalink
Browse files
feat(compiler-core): support aliasing vue: prefixed events to inline …
…vnode hooks
  • Loading branch information
yyx990803 committed Dec 10, 2021
1 parent 1c9a481 commit 4b0ca8709a7e2652f4b02665f378d47ba4dbe969
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 23 deletions.
@@ -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)
})
@@ -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 />`, {
@@ -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
}
@@ -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)),
@@ -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 {

0 comments on commit 4b0ca87

Please sign in to comment.