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

refactor: use makeMap in v-on dom transform

Browse Source
This commit is contained in:
Evan You 2019-10-15 22:29:52 -04:00
parent 65a0207c7b
commit 6f3e768d52
1 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,25 +10,21 @@ import {
ObjectExpression ObjectExpression
} from '@vue/compiler-core' } from '@vue/compiler-core'
import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers' import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers'
import { makeMap } from '@vue/shared'
const EVENT_OPTION_MODIFIERS = { passive: true, once: true, capture: true } const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`)
const NOT_KEY_MODIFIERS = { const isNonKeyModifier = /*#__PURE__*/ makeMap(
stop: true, // event propagation management
prevent: true, `stop,prevent,self,` +
self: true, // system modifers + exact
// system `ctrl,shift,alt,meta,exact,` +
ctrl: true, // mouse
shift: true, `left,middle,right`
alt: true, )
meta: true, const isKeyboardEvent = /*#__PURE__*/ makeMap(
// mouse `onkeyup,onkeydown,onkeypress`,
left: true, true
middle: true, )
right: true,
// exact
exact: true
}
const KEYBOARD_EVENTS = { onkeyup: true, onkeydown: true, onkeypress: true }
export const transformOn: DirectiveTransform = (dir, node, context) => { export const transformOn: DirectiveTransform = (dir, node, context) => {
const { modifiers } = dir const { modifiers } = dir
@ -36,18 +32,18 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
if (!modifiers.length) return baseResult if (!modifiers.length) return baseResult
const { key, value } = baseResult.props[0] const { key, value } = baseResult.props[0]
const runtimeModifiers = modifiers.filter(m => !(m in EVENT_OPTION_MODIFIERS)) const runtimeModifiers = modifiers.filter(m => !isEventOptionModifier(m))
let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [ let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
value, value,
JSON.stringify(runtimeModifiers.filter(m => m in NOT_KEY_MODIFIERS)) JSON.stringify(runtimeModifiers.filter(isNonKeyModifier))
]) ])
const keyModifiers = runtimeModifiers.filter(m => !(m in NOT_KEY_MODIFIERS)) const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
if ( if (
keyModifiers.length && keyModifiers.length &&
// if event name is dynamic, always wrap with keys guard // if event name is dynamic, always wrap with keys guard
(key.type === NodeTypes.COMPOUND_EXPRESSION || (key.type === NodeTypes.COMPOUND_EXPRESSION ||
!key.isStatic || !key.isStatic ||
key.content.toLowerCase() in KEYBOARD_EVENTS) isKeyboardEvent(key.content))
) { ) {
handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [ handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
handler, handler,
@ -57,9 +53,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
let returnExp: CallExpression | ObjectExpression = handler let returnExp: CallExpression | ObjectExpression = handler
const eventOptionModifiers = modifiers.filter( const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
modifier => modifier in EVENT_OPTION_MODIFIERS
)
if (eventOptionModifiers.length) { if (eventOptionModifiers.length) {
returnExp = createObjectExpression([ returnExp = createObjectExpression([
createObjectProperty('handler', handler), createObjectProperty('handler', handler),