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

fix(runtime-dom): fix patching for attributes starting with on

Browse Source 
fix #949

BREAKING CHANGE: Only props starting with `on` followed by an uppercase
letter or a non-letter character are considered event listeners.
This commit is contained in:
Evan You 2020-04-10 11:57:07 -04:00
parent 55566e8f52
commit 6eb3399311
8 changed files with 72 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/runtime-core/__tests__/componentEmits.spec.ts
View File

@ -8,23 +8,27 @@ import { isEmitListener } from '../src/componentEmits'
describe('component: emit', () => { describe('component: emit', () => {
mockWarn() mockWarn()
test('trigger both raw event and capitalize handlers', () => { test('trigger handlers', () => {
const Foo = defineComponent({ const Foo = defineComponent({
render() {}, render() {},
created() { created() {
// the `emit` function is bound on component instances // the `emit` function is bound on component instances
this.$emit('foo') this.$emit('foo')
this.$emit('bar') this.$emit('bar')
this.$emit('!baz')
} }
}) })
const onfoo = jest.fn() const onfoo = jest.fn()
const onBar = jest.fn() const onBar = jest.fn()
const Comp = () => h(Foo, { onfoo, onBar }) const onBaz = jest.fn()
const Comp = () => h(Foo, { onfoo, onBar, ['on!baz']: onBaz })
render(h(Comp), nodeOps.createElement('div')) render(h(Comp), nodeOps.createElement('div'))
expect(onfoo).toHaveBeenCalled() expect(onfoo).not.toHaveBeenCalled()
// only capitalized or special chars are considerd event listeners
expect(onBar).toHaveBeenCalled() expect(onBar).toHaveBeenCalled()
expect(onBaz).toHaveBeenCalled()
}) })
// for v-model:foo-bar usage in DOM templates // for v-model:foo-bar usage in DOM templates
@ -125,9 +129,9 @@ describe('component: emit', () => {
test('isEmitListener', () => { test('isEmitListener', () => {
expect(isEmitListener(['click'], 'onClick')).toBe(true) expect(isEmitListener(['click'], 'onClick')).toBe(true)
expect(isEmitListener(['click'], 'onclick')).toBe(true) expect(isEmitListener(['click'], 'onclick')).toBe(false)
expect(isEmitListener({ click: null }, 'onClick')).toBe(true) expect(isEmitListener({ click: null }, 'onClick')).toBe(true)
expect(isEmitListener({ click: null }, 'onclick')).toBe(true) expect(isEmitListener({ click: null }, 'onclick')).toBe(false)
expect(isEmitListener(['click'], 'onBlick')).toBe(false) expect(isEmitListener(['click'], 'onBlick')).toBe(false)
expect(isEmitListener({ click: null }, 'onBlick')).toBe(false) expect(isEmitListener({ click: null }, 'onBlick')).toBe(false)
}) })

4
packages/runtime-core/src/componentEmits.ts
View File

@ -66,12 +66,12 @@ export function emit(
} }
} }
let handler = props[`on${event}`] || props[`on${capitalize(event)}`] let handler = props[`on${capitalize(event)}`]
// for v-model update:xxx events, also trigger kebab-case equivalent // for v-model update:xxx events, also trigger kebab-case equivalent
// for props passed via kebab-case // for props passed via kebab-case
if (!handler && event.indexOf('update:') === 0) { if (!handler && event.indexOf('update:') === 0) {
event = hyphenate(event) event = hyphenate(event)
handler = props[`on${event}`] || props[`on${capitalize(event)}`] handler = props[`on${capitalize(event)}`]
} }
if (handler) { if (handler) {
callWithAsyncErrorHandling( callWithAsyncErrorHandling(

28
packages/runtime-dom/__tests__/modules/attrs.spec.ts
View File

@ -1,27 +1,37 @@
import { patchAttr, xlinkNS } from '../../src/modules/attrs' import { patchProp } from '../../src/patchProp'
import { xlinkNS } from '../../src/modules/attrs'
describe('attrs', () => { describe('attrs', () => {
test('xlink attributes', () => { test('xlink attributes', () => {
const el = document.createElementNS('http://www.w3.org/2000/svg', 'use') const el = document.createElementNS('http://www.w3.org/2000/svg', 'use')
patchAttr(el, 'xlink:href', 'a', true) patchProp(el, 'xlink:href', null, 'a', true)
expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a') expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a')
patchAttr(el, 'xlink:href', null, true) patchProp(el, 'xlink:href', 'a', null, true)
expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null) expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null)
}) })
test('boolean attributes', () => { test('boolean attributes', () => {
const el = document.createElement('input') const el = document.createElement('input')
patchAttr(el, 'readonly', true, false) patchProp(el, 'readonly', null, true)
expect(el.getAttribute('readonly')).toBe('') expect(el.getAttribute('readonly')).toBe('')
patchAttr(el, 'readonly', false, false) patchProp(el, 'readonly', true, false)
expect(el.getAttribute('readonly')).toBe(null) expect(el.getAttribute('readonly')).toBe(null)
}) })
test('attributes', () => { test('attributes', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchAttr(el, 'id', 'a', false) patchProp(el, 'foo', null, 'a')
expect(el.getAttribute('id')).toBe('a') expect(el.getAttribute('foo')).toBe('a')
patchAttr(el, 'id', null, false) patchProp(el, 'foo', 'a', null)
expect(el.getAttribute('id')).toBe(null) expect(el.getAttribute('foo')).toBe(null)
})
// #949
test('onxxx but non-listener attributes', () => {
const el = document.createElement('div')
patchProp(el, 'onwards', null, 'a')
expect(el.getAttribute('onwards')).toBe('a')
patchProp(el, 'onwards', 'a', null)
expect(el.getAttribute('onwards')).toBe(null)
}) })
}) })

38
packages/runtime-dom/__tests__/modules/events.spec.ts
View File

@ -1,4 +1,4 @@
import { patchEvent } from '../../src/modules/events' import { patchProp } from '../../src/patchProp'
const timeout = () => new Promise(r => setTimeout(r)) const timeout = () => new Promise(r => setTimeout(r))
@ -7,7 +7,7 @@ describe(`events`, () => {
const el = document.createElement('div') const el = document.createElement('div')
const event = new Event('click') const event = new Event('click')
const fn = jest.fn() const fn = jest.fn()
patchEvent(el, 'onClick', null, fn, null) patchProp(el, 'onClick', null, fn)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
el.dispatchEvent(event) el.dispatchEvent(event)
@ -22,9 +22,9 @@ describe(`events`, () => {
const event = new Event('click') const event = new Event('click')
const prevFn = jest.fn() const prevFn = jest.fn()
const nextFn = jest.fn() const nextFn = jest.fn()
patchEvent(el, 'onClick', null, prevFn, null) patchProp(el, 'onClick', null, prevFn)
el.dispatchEvent(event) el.dispatchEvent(event)
patchEvent(el, 'onClick', prevFn, nextFn, null) patchProp(el, 'onClick', prevFn, nextFn)
await timeout() await timeout()
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
@ -39,7 +39,7 @@ describe(`events`, () => {
const event = new Event('click') const event = new Event('click')
const fn1 = jest.fn() const fn1 = jest.fn()
const fn2 = jest.fn() const fn2 = jest.fn()
patchEvent(el, 'onClick', null, [fn1, fn2], null) patchProp(el, 'onClick', null, [fn1, fn2])
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
expect(fn1).toHaveBeenCalledTimes(1) expect(fn1).toHaveBeenCalledTimes(1)
@ -50,8 +50,8 @@ describe(`events`, () => {
const el = document.createElement('div') const el = document.createElement('div')
const event = new Event('click') const event = new Event('click')
const fn = jest.fn() const fn = jest.fn()
patchEvent(el, 'onClick', null, fn, null) patchProp(el, 'onClick', null, fn)
patchEvent(el, 'onClick', fn, null, null) patchProp(el, 'onClick', fn, null)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
expect(fn).not.toHaveBeenCalled() expect(fn).not.toHaveBeenCalled()
@ -67,7 +67,7 @@ describe(`events`, () => {
once: true once: true
} }
} }
patchEvent(el, 'onClick', null, nextValue, null) patchProp(el, 'onClick', null, nextValue)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
el.dispatchEvent(event) el.dispatchEvent(event)
@ -86,8 +86,8 @@ describe(`events`, () => {
once: true once: true
} }
} }
patchEvent(el, 'onClick', null, prevFn, null) patchProp(el, 'onClick', null, prevFn)
patchEvent(el, 'onClick', prevFn, nextValue, null) patchProp(el, 'onClick', prevFn, nextValue)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
el.dispatchEvent(event) el.dispatchEvent(event)
@ -106,8 +106,8 @@ describe(`events`, () => {
once: true once: true
} }
} }
patchEvent(el, 'onClick', null, nextValue, null) patchProp(el, 'onClick', null, nextValue)
patchEvent(el, 'onClick', nextValue, null, null) patchProp(el, 'onClick', nextValue, null)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
el.dispatchEvent(event) el.dispatchEvent(event)
@ -115,21 +115,23 @@ describe(`events`, () => {
expect(fn).not.toHaveBeenCalled() expect(fn).not.toHaveBeenCalled()
}) })
it('should assign native onclick attribute', async () => { it('should support native onclick', async () => {
const el = document.createElement('div') const el = document.createElement('div')
const event = new Event('click') const event = new Event('click')
const fn = ((window as any)._nativeClickSpy = jest.fn())
patchEvent(el, 'onclick', null, '_nativeClickSpy()' as any) // string should be set as attribute
const fn = ((window as any).__globalSpy = jest.fn())
patchProp(el, 'onclick', null, '__globalSpy(1)')
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
expect(fn).toHaveBeenCalledTimes(1) delete (window as any).__globalSpy
expect(fn).toHaveBeenCalledWith(1)
const fn2 = jest.fn() const fn2 = jest.fn()
patchEvent(el, 'onclick', null, fn2) patchProp(el, 'onclick', '__globalSpy(1)', fn2)
el.dispatchEvent(event) el.dispatchEvent(event)
await timeout() await timeout()
expect(fn).toHaveBeenCalledTimes(1) expect(fn).toHaveBeenCalledTimes(1)
expect(fn2).toHaveBeenCalledTimes(1) expect(fn2).toHaveBeenCalledWith(event)
}) })
}) })

20
packages/runtime-dom/__tests__/modules/style.spec.ts
View File

@ -1,39 +1,39 @@
import { patchStyle } from '../../src/modules/style' import { patchProp } from '../../src/patchProp'
describe(`module style`, () => { describe(`module style`, () => {
it('string', () => { it('string', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, 'color:red') patchProp(el, 'style', {}, 'color:red')
expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;') expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
}) })
it('plain object', () => { it('plain object', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, { color: 'red' }) patchProp(el, 'style', {}, { color: 'red' })
expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;') expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
}) })
it('camelCase', () => { it('camelCase', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, { marginRight: '10px' }) patchProp(el, 'style', {}, { marginRight: '10px' })
expect(el.style.cssText.replace(/\s/g, '')).toBe('margin-right:10px;') expect(el.style.cssText.replace(/\s/g, '')).toBe('margin-right:10px;')
}) })
it('remove if falsy value', () => { it('remove if falsy value', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, { color: 'red' }, { color: undefined }) patchProp(el, 'style', { color: 'red' }, { color: undefined })
expect(el.style.cssText.replace(/\s/g, '')).toBe('') expect(el.style.cssText.replace(/\s/g, '')).toBe('')
}) })
it('!important', () => { it('!important', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, { color: 'red !important' }) patchProp(el, 'style', {}, { color: 'red !important' })
expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red!important;') expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red!important;')
}) })
it('camelCase with !important', () => { it('camelCase with !important', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, { marginRight: '10px !important' }) patchProp(el, 'style', {}, { marginRight: '10px !important' })
expect(el.style.cssText.replace(/\s/g, '')).toBe( expect(el.style.cssText.replace(/\s/g, '')).toBe(
'margin-right:10px!important;' 'margin-right:10px!important;'
) )
@ -41,7 +41,7 @@ describe(`module style`, () => {
it('object with multiple entries', () => { it('object with multiple entries', () => {
const el = document.createElement('div') const el = document.createElement('div')
patchStyle(el, {}, { color: 'red', marginRight: '10px' }) patchProp(el, 'style', {}, { color: 'red', marginRight: '10px' })
expect(el.style.getPropertyValue('color')).toBe('red') expect(el.style.getPropertyValue('color')).toBe('red')
expect(el.style.getPropertyValue('margin-right')).toBe('10px') expect(el.style.getPropertyValue('margin-right')).toBe('10px')
}) })
@ -65,13 +65,13 @@ describe(`module style`, () => {
it('CSS custom properties', () => { it('CSS custom properties', () => {
const el = mockElementWithStyle() const el = mockElementWithStyle()
patchStyle(el as any, {}, { '--theme': 'red' } as any) patchProp(el as any, 'style', {}, { '--theme': 'red' } as any)
expect(el.style.getPropertyValue('--theme')).toBe('red') expect(el.style.getPropertyValue('--theme')).toBe('red')
}) })
it('auto vendor prefixing', () => { it('auto vendor prefixing', () => {
const el = mockElementWithStyle() const el = mockElementWithStyle()
patchStyle(el as any, {}, { transition: 'all 1s' }) patchProp(el as any, 'style', {}, { transition: 'all 1s' })
expect(el.style.WebkitTransition).toBe('all 1s') expect(el.style.WebkitTransition).toBe('all 1s')
}) })
}) })

12
packages/runtime-dom/src/modules/events.ts
View File

@ -1,4 +1,4 @@
import { EMPTY_OBJ, isString } from '@vue/shared' import { EMPTY_OBJ } from '@vue/shared'
import { import {
ComponentInternalInstance, ComponentInternalInstance,
callWithAsyncErrorHandling callWithAsyncErrorHandling
@ -71,16 +71,6 @@ export function patchEvent(
nextValue: EventValueWithOptions | EventValue | null, nextValue: EventValueWithOptions | EventValue | null,
instance: ComponentInternalInstance | null = null instance: ComponentInternalInstance | null = null
) { ) {
// support native onxxx handlers
if (rawName in el) {
if (isString(nextValue)) {
el.setAttribute(rawName, nextValue)
} else {
;(el as any)[rawName] = nextValue
}
return
}
const name = rawName.slice(2).toLowerCase() const name = rawName.slice(2).toLowerCase()
const prevOptions = prevValue && 'options' in prevValue && prevValue.options const prevOptions = prevValue && 'options' in prevValue && prevValue.options
const nextOptions = nextValue && 'options' in nextValue && nextValue.options const nextOptions = nextValue && 'options' in nextValue && nextValue.options

11
packages/runtime-dom/src/patchProp.ts
View File

@ -3,9 +3,11 @@ import { patchStyle } from './modules/style'
import { patchAttr } from './modules/attrs' import { patchAttr } from './modules/attrs'
import { patchDOMProp } from './modules/props' import { patchDOMProp } from './modules/props'
import { patchEvent } from './modules/events' import { patchEvent } from './modules/events'
import { isOn } from '@vue/shared' import { isOn, isString } from '@vue/shared'
import { RendererOptions } from '@vue/runtime-core' import { RendererOptions } from '@vue/runtime-core'
const nativeOnRE = /^on[a-z]/
export const patchProp: RendererOptions<Node, Element>['patchProp'] = ( export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
el, el,
key, key,
@ -31,7 +33,12 @@ export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
if (key.indexOf('onUpdate:') < 0) { if (key.indexOf('onUpdate:') < 0) {
patchEvent(el, key, prevValue, nextValue, parentComponent) patchEvent(el, key, prevValue, nextValue, parentComponent)
} }
} else if (!isSVG && key in el) { } else if (
!isSVG &&
key in el &&
// onclick="foo" needs to be set as an attribute to work
!(nativeOnRE.test(key) && isString(nextValue))
) {
patchDOMProp( patchDOMProp(
el, el,
key, key,

3
packages/shared/src/index.ts
View File

@ -24,7 +24,8 @@ export const NOOP = () => {}
*/ */
export const NO = () => false export const NO = () => false
export const isOn = (key: string) => key[0] === 'o' && key[1] === 'n' const onRE = /^on[^a-z]/
export const isOn = (key: string) => onRE.test(key)
export const extend = <T extends object, U extends object>( export const extend = <T extends object, U extends object>(
a: T, a: T,