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

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

View File

@ -190,7 +190,6 @@ export interface InterpolationNode extends Node {
content: ExpressionNode content: ExpressionNode
} }
// always dynamic
export interface CompoundExpressionNode extends Node { export interface CompoundExpressionNode extends Node {
type: NodeTypes.COMPOUND_EXPRESSION type: NodeTypes.COMPOUND_EXPRESSION
children: ( children: (

View File

@ -103,4 +103,17 @@ describe('compiler-dom: transform v-on', () => {
} }
}) })
}) })
it('should not wrap normal guard if there is only keys guard', () => {
const [prop] = parseVOnProperties(`<div @keyup.enter="test"/>`, {
prefixIdentifiers: true
})
expect(prop).toMatchObject({
type: NodeTypes.JS_PROPERTY,
value: {
callee: V_ON_KEYS_GUARD,
arguments: [{ content: '_ctx.test' }, '["enter"]']
}
})
})
}) })

View File

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

View File

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

View File

@ -1,5 +1,5 @@
import { patchEvent } from '../../src/modules/events' import { patchEvent } from '../../src/modules/events'
import { vOnModifiersGuard, vOnKeysGuard } from '@vue/runtime-dom' import { withModifiers, withKeys } from '@vue/runtime-dom'
function triggerEvent( function triggerEvent(
target: Element, target: Element,
@ -21,7 +21,7 @@ describe('runtime-dom: v-on directive', () => {
const parent = document.createElement('div') const parent = document.createElement('div')
const child = document.createElement('input') const child = document.createElement('input')
parent.appendChild(child) parent.appendChild(child)
const childNextValue = vOnModifiersGuard(jest.fn(), ['prevent', 'stop']) const childNextValue = withModifiers(jest.fn(), ['prevent', 'stop'])
patchEvent(child, 'click', null, childNextValue, null) patchEvent(child, 'click', null, childNextValue, null)
const parentNextValue = jest.fn() const parentNextValue = jest.fn()
patchEvent(parent, 'click', null, parentNextValue, null) patchEvent(parent, 'click', null, parentNextValue, null)
@ -34,7 +34,7 @@ describe('runtime-dom: v-on directive', () => {
const child = document.createElement('input') const child = document.createElement('input')
parent.appendChild(child) parent.appendChild(child)
const fn = jest.fn() const fn = jest.fn()
const handler = vOnModifiersGuard(fn, ['self']) const handler = withModifiers(fn, ['self'])
patchEvent(parent, 'click', null, handler, null) patchEvent(parent, 'click', null, handler, null)
triggerEvent(child, 'click') triggerEvent(child, 'click')
expect(fn).not.toBeCalled() expect(fn).not.toBeCalled()
@ -44,7 +44,7 @@ describe('runtime-dom: v-on directive', () => {
const el = document.createElement('div') const el = document.createElement('div')
const fn = jest.fn() const fn = jest.fn()
// <div @keyup.ctrl.esc="test"/> // <div @keyup.ctrl.esc="test"/>
const nextValue = vOnKeysGuard(vOnModifiersGuard(fn, ['ctrl']), ['esc']) const nextValue = withKeys(withModifiers(fn, ['ctrl']), ['esc'])
patchEvent(el, 'keyup', null, nextValue, null) patchEvent(el, 'keyup', null, nextValue, null)
triggerEvent(el, 'keyup', e => (e.key = 'a')) triggerEvent(el, 'keyup', e => (e.key = 'a'))
expect(fn).not.toBeCalled() expect(fn).not.toBeCalled()
@ -64,7 +64,7 @@ describe('runtime-dom: v-on directive', () => {
const el = document.createElement('div') const el = document.createElement('div')
// Case 1: <div @keyup.exact="test"/> // Case 1: <div @keyup.exact="test"/>
const fn1 = jest.fn() const fn1 = jest.fn()
const next1 = vOnModifiersGuard(fn1, ['exact']) const next1 = withModifiers(fn1, ['exact'])
patchEvent(el, 'keyup', null, next1, null) patchEvent(el, 'keyup', null, next1, null)
triggerEvent(el, 'keyup') triggerEvent(el, 'keyup')
expect(fn1.mock.calls.length).toBe(1) expect(fn1.mock.calls.length).toBe(1)
@ -72,7 +72,7 @@ describe('runtime-dom: v-on directive', () => {
expect(fn1.mock.calls.length).toBe(1) expect(fn1.mock.calls.length).toBe(1)
// Case 2: <div @keyup.ctrl.a.exact="test"/> // Case 2: <div @keyup.ctrl.a.exact="test"/>
const fn2 = jest.fn() const fn2 = jest.fn()
const next2 = vOnKeysGuard(vOnModifiersGuard(fn2, ['ctrl', 'exact']), ['a']) const next2 = withKeys(withModifiers(fn2, ['ctrl', 'exact']), ['a'])
patchEvent(el, 'keyup', null, next2, null) patchEvent(el, 'keyup', null, next2, null)
triggerEvent(el, 'keyup', e => (e.key = 'a')) triggerEvent(el, 'keyup', e => (e.key = 'a'))
expect(fn2).not.toBeCalled() expect(fn2).not.toBeCalled()
@ -96,7 +96,7 @@ describe('runtime-dom: v-on directive', () => {
buttons.forEach(button => { buttons.forEach(button => {
const el = document.createElement('div') const el = document.createElement('div')
const fn = jest.fn() const fn = jest.fn()
const handler = vOnModifiersGuard(fn, [button]) const handler = withModifiers(fn, [button])
patchEvent(el, 'mousedown', null, handler, null) patchEvent(el, 'mousedown', null, handler, null)
buttons.filter(b => b !== button).forEach(button => { buttons.filter(b => b !== button).forEach(button => {
triggerEvent(el, 'mousedown', e => (e.button = buttonCodes[button])) triggerEvent(el, 'mousedown', e => (e.button = buttonCodes[button]))

View File

@ -1,6 +1,6 @@
const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'] const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent; type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
const modifierGuards: Record< const modifierGuards: Record<
string, string,
@ -20,7 +20,7 @@ const modifierGuards: Record<
systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m)) systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
} }
export const vOnModifiersGuard = (fn: Function, modifiers: string[]) => { export const withModifiers = (fn: Function, modifiers: string[]) => {
return (event: Event) => { return (event: Event) => {
for (let i = 0; i < modifiers.length; i++) { for (let i = 0; i < modifiers.length; i++) {
const guard = modifierGuards[modifiers[i]] const guard = modifierGuards[modifiers[i]]
@ -42,7 +42,7 @@ const keyNames: Record<string, string | string[]> = {
delete: 'backspace' delete: 'backspace'
} }
export const vOnKeysGuard = (fn: Function, modifiers: string[]) => { export const withKeys = (fn: Function, modifiers: string[]) => {
return (event: KeyboardEvent) => { return (event: KeyboardEvent) => {
if (!('key' in event)) return if (!('key' in event)) return
const eventKey = event.key.toLowerCase() const eventKey = event.key.toLowerCase()

View File

@ -31,7 +31,7 @@ export {
vModelDynamic vModelDynamic
} from './directives/vModel' } from './directives/vModel'
export { vOnModifiersGuard, vOnKeysGuard } from './directives/vOn' export { withModifiers, withKeys } from './directives/vOn'
// re-export everything from core // re-export everything from core
// h, Component, reactivity API, nextTick, flags & types // h, Component, reactivity API, nextTick, flags & types