theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(v-on): avoid empty modifier guard with only key modifier

Browse Source
This commit is contained in:
Evan You
2019-10-18 16:20:45 -04:00
parent d69d3bf765
commit cba34453db
7 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/compiler-dom/src/runtimeHelpers.ts
View File

@@ -15,6 +15,6 @@ registerRuntimeHelpers({
[V_MODEL_TEXT]: `vModelText`,
[V_MODEL_SELECT]: `vModelSelect`,
[V_MODEL_DYNAMIC]: `vModelDynamic`,
[V_ON_MODIFIERS_GUARD]: `vOnModifiersGuard`,
[V_ON_KEYS_GUARD]: `vOnKeysGuard`
[V_ON_MODIFIERS_GUARD]: `withModifiers`,
[V_ON_KEYS_GUARD]: `withKeys`
})

37
packages/compiler-dom/src/transforms/vOn.ts
View File

@@ -5,9 +5,7 @@ import {
createCallExpression,
createObjectExpression,
createSimpleExpression,
NodeTypes,
CallExpression,
ObjectExpression
NodeTypes
} from '@vue/compiler-core'
import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers'
import { makeMap } from '@vue/shared'
@@ -31,12 +29,22 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
const baseResult = baseTransform(dir, node, context)
if (!modifiers.length) return baseResult
const { key, value } = baseResult.props[0]
let { key, value: handlerExp } = baseResult.props[0]
// modifiers for addEventListener() options, e.g. .passive & .capture
const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
// modifiers that needs runtime guards
const runtimeModifiers = modifiers.filter(m => !isEventOptionModifier(m))
let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
value,
JSON.stringify(runtimeModifiers.filter(isNonKeyModifier))
])
// built-in modifiers that are not keys
const nonKeyModifiers = runtimeModifiers.filter(isNonKeyModifier)
if (nonKeyModifiers.length) {
handlerExp = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
handlerExp,
JSON.stringify(nonKeyModifiers)
])
}
const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
if (
keyModifiers.length &&
@@ -45,18 +53,15 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
!key.isStatic ||
isKeyboardEvent(key.content))
) {
handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
handler,
handlerExp = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
handlerExp,
JSON.stringify(keyModifiers)
])
}
let returnExp: CallExpression | ObjectExpression = handler
const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
if (eventOptionModifiers.length) {
returnExp = createObjectExpression([
createObjectProperty('handler', handler),
handlerExp = createObjectExpression([
createObjectProperty('handler', handlerExp),
createObjectProperty(
'options',
createObjectExpression(
@@ -74,7 +79,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
}
return {
props: [createObjectProperty(key, returnExp)],
props: [createObjectProperty(key, handlerExp)],
needRuntime: false
}
}