Skip to content

Commit

Permalink
fix(runtime-dom): cache event handlers by key/modifiers (#9851)
Browse files Browse the repository at this point in the history
close #9849
  • Loading branch information
LinusBorg authored Dec 16, 2023
1 parent 4e7967f commit 04d2c05
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 6 deletions.
28 changes: 28 additions & 0 deletions packages/runtime-dom/__tests__/directives/vOn.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -135,4 +135,32 @@ describe('runtime-dom: v-on directive', () => {
handler(event, 'value', true)
expect(fn).toBeCalledWith(event, 'value', true)
})

it('withKeys cache wrapped listener separately for different modifiers', () => {
const el1 = document.createElement('button')
const el2 = document.createElement('button')
const fn = vi.fn()
const handler1 = withKeys(fn, ['a'])
const handler2 = withKeys(fn, ['b'])
expect(handler1 === handler2).toBe(false)
patchEvent(el1, 'onKeyup', null, handler1, null)
patchEvent(el2, 'onKeyup', null, handler2, null)
triggerEvent(el1, 'keyup', e => (e.key = 'a'))
triggerEvent(el2, 'keyup', e => (e.key = 'b'))
expect(fn).toBeCalledTimes(2)
})

it('withModifiers cache wrapped listener separately for different modifiers', () => {
const el1 = document.createElement('button')
const el2 = document.createElement('button')
const fn = vi.fn()
const handler1 = withModifiers(fn, ['ctrl'])
const handler2 = withModifiers(fn, ['shift'])
expect(handler1 === handler2).toBe(false)
patchEvent(el1, 'onClick', null, handler1, null)
patchEvent(el2, 'onClick', null, handler2, null)
triggerEvent(el1, 'click', e => (e.ctrlKey = true))
triggerEvent(el2, 'click', e => (e.shiftKey = true))
expect(fn).toBeCalledTimes(2)
})
})
17 changes: 11 additions & 6 deletions packages/runtime-dom/src/directives/vOn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,14 @@ const modifierGuards: Record<
export const withModifiers = <
T extends (event: Event, ...args: unknown[]) => any
>(
fn: T & { _withMods?: T },
fn: T & { _withMods?: { [key: string]: T } },
modifiers: string[]
) => {
const cache = fn._withMods || (fn._withMods = {})
const cacheKey = modifiers.join('.')
return (
fn._withMods ||
(fn._withMods = ((event, ...args) => {
cache[cacheKey] ||
(cache[cacheKey] = ((event, ...args) => {
for (let i = 0; i < modifiers.length; i++) {
const guard = modifierGuards[modifiers[i]]
if (guard && guard(event, modifiers)) return
Expand All @@ -66,7 +68,7 @@ const keyNames: Record<string, string | string[]> = {
* @private
*/
export const withKeys = <T extends (event: KeyboardEvent) => any>(
fn: T & { _withKeys?: T },
fn: T & { _withKeys?: { [k: string]: T } },
modifiers: string[]
) => {
let globalKeyCodes: LegacyConfig['keyCodes']
Expand All @@ -88,9 +90,12 @@ export const withKeys = <T extends (event: KeyboardEvent) => any>(
}
}

const cache: { [k: string]: T } = fn._withKeys || (fn._withKeys = {})
const cacheKey = modifiers.join('.')

return (
fn._withKeys ||
(fn._withKeys = (event => {
cache[cacheKey] ||
(cache[cacheKey] = (event => {
if (!('key' in event)) {
return
}
Expand Down

0 comments on commit 04d2c05

Please sign in to comment.