// using DOM renderer because this case is mostly DOM-specific
-import { h, render, Component, nextTick } from '@vue/renderer-dom'
+import { h, render, Component, nextTick, cloneVNode } from '@vue/renderer-dom'
describe('attribute fallthrough', () => {
- it('should not fallthrough on components with no declared props', async () => {
- const nativeClick = jest.fn()
+ it('everything should be in props when component has no declared props', async () => {
+ const click = jest.fn()
const childUpdated = jest.fn()
class Hello extends Component<{}, { count: number }> {
}
inc() {
this.count++
- nativeClick()
+ click()
}
render() {
return h(Child, {
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
- nativeOnClick: this.inc
+ onClick: this.inc
})
}
}
- class Child extends Component<{ foo: number }> {
+ class Child extends Component {
updated() {
childUpdated()
}
- render() {
- return h(
- 'div',
- {
- class: 'c2',
- style: { fontWeight: 'bold' }
- },
- this.$props.foo
+ render(props: any) {
+ return cloneVNode(
+ h(
+ 'div',
+ {
+ class: 'c2',
+ style: { fontWeight: 'bold' }
+ },
+ props.foo
+ ),
+ props
)
}
}
const node = root.children[0] as HTMLElement
- // attrs do not fallthrough because no props are declared
- expect(node.hasAttribute('id')).toBe(false)
- expect(node.hasAttribute('foo')).toBe(false)
-
- // class, style and nativeOn* always fallthrough
+ expect(node.getAttribute('id')).toBe('test')
+ expect(node.getAttribute('foo')).toBe('1')
expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click'))
- expect(nativeClick).toHaveBeenCalled()
+ expect(click).toHaveBeenCalled()
await nextTick()
expect(childUpdated).toHaveBeenCalled()
- expect(node.hasAttribute('id')).toBe(false)
- expect(node.hasAttribute('foo')).toBe(false)
+ expect(node.getAttribute('id')).toBe('test')
+ expect(node.getAttribute('foo')).toBe('1')
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
})
- it('should fallthrough on components with declared props', async () => {
- const nativeClick = jest.fn()
+ it('should separate in attrs when component has declared props', async () => {
+ const click = jest.fn()
const childUpdated = jest.fn()
class Hello extends Component<{}, { count: number }> {
}
inc() {
this.count++
- nativeClick()
+ click()
}
render() {
return h(Child, {
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
- nativeOnClick: this.inc
+ onClick: this.inc
})
}
}
childUpdated()
}
render() {
- return h(
- 'div',
- {
- class: 'c2',
- style: { fontWeight: 'bold' }
- },
- this.$props.foo
+ return cloneVNode(
+ h(
+ 'div',
+ {
+ class: 'c2',
+ style: { fontWeight: 'bold' }
+ },
+ this.$props.foo
+ ),
+ this.$attrs
)
}
}
// with declared props, any parent attr that isn't a prop falls through
expect(node.getAttribute('id')).toBe('test')
- // ...while declared ones remain props
- expect(node.hasAttribute('foo')).toBe(false)
-
- // class, style and nativeOn* always fallthrough
expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click'))
- expect(nativeClick).toHaveBeenCalled()
+ expect(click).toHaveBeenCalled()
+
+ // ...while declared ones remain props
+ expect(node.hasAttribute('foo')).toBe(false)
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
- expect(node.hasAttribute('foo')).toBe(false)
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
+
+ expect(node.hasAttribute('foo')).toBe(false)
})
it('should fallthrough on multi-nested components', async () => {
- const nativeClick = jest.fn()
+ const click = jest.fn()
const childUpdated = jest.fn()
const grandChildUpdated = jest.fn()
}
inc() {
this.count++
- nativeClick()
+ click()
}
render() {
return h(Child, {
id: 'test',
class: 'c' + this.count,
style: { color: this.count ? 'red' : 'green' },
- nativeOnClick: this.inc
+ onClick: this.inc
})
}
}
class Child extends Component {
- static props = {
- foo: Number
- }
updated() {
childUpdated()
}
- render(props: any) {
- return h(GrandChild, props)
+ render() {
+ return h(GrandChild, this.$props)
}
}
grandChildUpdated()
}
render(props: any) {
- return h(
- 'div',
- {
- class: 'c2',
- style: { fontWeight: 'bold' }
- },
- props.foo
+ return cloneVNode(
+ h(
+ 'div',
+ {
+ class: 'c2',
+ style: { fontWeight: 'bold' }
+ },
+ props.foo
+ ),
+ this.$attrs
)
}
}
// with declared props, any parent attr that isn't a prop falls through
expect(node.getAttribute('id')).toBe('test')
- // ...while declared ones remain props
- expect(node.hasAttribute('foo')).toBe(false)
-
- // class, style and nativeOn* always fallthrough
expect(node.getAttribute('class')).toBe('c2 c0')
expect(node.style.color).toBe('green')
expect(node.style.fontWeight).toBe('bold')
node.dispatchEvent(new CustomEvent('click'))
- expect(nativeClick).toHaveBeenCalled()
+ expect(click).toHaveBeenCalled()
+
+ // ...while declared ones remain props
+ expect(node.hasAttribute('foo')).toBe(false)
await nextTick()
expect(childUpdated).toHaveBeenCalled()
expect(grandChildUpdated).toHaveBeenCalled()
expect(node.getAttribute('id')).toBe('test')
- expect(node.hasAttribute('foo')).toBe(false)
expect(node.getAttribute('class')).toBe('c2 c1')
expect(node.style.color).toBe('red')
expect(node.style.fontWeight).toBe('bold')
+
+ expect(node.hasAttribute('foo')).toBe(false)
})
})
(props: Readonly<P>, slots: Slots, attrs: Data): any
pure?: boolean
props?: ComponentPropsOptions<P>
- inheritAttrs?: boolean
displayName?: string
}
computed?: ComponentComputedOptions<This>
watch?: ComponentWatchOptions<This>
displayName?: string
- inheritAttrs?: boolean
}
export interface ComponentOptions<This = ComponentInstance>
Prop,
PropType
} from './componentOptions'
-import {
- EMPTY_OBJ,
- nativeOnRE,
- vnodeHookRE,
- camelize,
- hyphenate,
- capitalize
-} from './utils'
+import { EMPTY_OBJ, camelize, hyphenate, capitalize } from './utils'
export function initializeProps(
instance: ComponentInstance,
// resolve raw VNode data.
// - filter out reserved keys (key, ref, slots)
-// - extract class, style and nativeOn* into $attrs (to be merged onto child
+// - extract class and style into $attrs (to be merged onto child
// component root)
// - for the rest:
// - if has declared props: put declared ones in `props`, the rest in `attrs`
if (key === 'key' || key === 'ref' || key === 'slots') {
continue
}
- // class, style, nativeOn & directive hooks are always extracted into a
- // separate `attrs` object, which can then be merged onto child component
- // root. in addition, if the component has explicitly declared props, then
- // any non-matching props are extracted into `attrs` as well.
- if (
- key === 'class' ||
- key === 'style' ||
- vnodeHookRE.test(key) ||
- nativeOnRE.test(key) ||
- (hasDeclaredProps && !options.hasOwnProperty(key))
- ) {
+ // any non-declared data are put into a separate `attrs` object
+ // for spreading
+ if (hasDeclaredProps && !options.hasOwnProperty(key)) {
;(attrs || (attrs = {}))[key] = rawData[key]
} else {
props[key] = rawData[key]
export function renderInstanceRoot(instance: ComponentInstance): VNode {
let vnode
try {
- vnode = instance.render.call(instance.$proxy, h, {
- props: instance.$props,
- slots: instance.$slots,
- attrs: instance.$attrs
- })
+ vnode = instance.render.call(
+ instance.$proxy,
+ instance.$props,
+ instance.$slots,
+ instance.$attrs
+ )
} catch (e1) {
handleError(e1, instance, ErrorTypes.RENDER)
if (__DEV__ && instance.renderError) {
}
}
}
- return normalizeComponentRoot(
- vnode,
- instance.$parentVNode,
- instance.$attrs,
- instance.constructor.inheritAttrs
- )
+ return normalizeComponentRoot(vnode, instance.$parentVNode)
}
export function teardownComponentInstance(instance: ComponentInstance) {
export function normalizeComponentRoot(
vnode: any,
- componentVNode: VNode | null,
- attrs: Record<string, any> | void,
- inheritAttrs: boolean | void
+ componentVNode: VNode | null
): VNode {
if (vnode == null) {
vnode = createTextVNode('')
vnode = createTextVNode(vnode + '')
} else if (Array.isArray(vnode)) {
if (vnode.length === 1) {
- vnode = normalizeComponentRoot(
- vnode[0],
- componentVNode,
- attrs,
- inheritAttrs
- )
+ vnode = normalizeComponentRoot(vnode[0], componentVNode)
} else {
vnode = createFragment(vnode)
}
componentVNode &&
(flags & VNodeFlags.COMPONENT || flags & VNodeFlags.ELEMENT)
) {
- if (
- inheritAttrs !== false &&
- attrs !== void 0 &&
- Object.keys(attrs).length > 0
- ) {
- vnode = cloneVNode(vnode, attrs)
- } else if (el) {
+ if (el) {
vnode = cloneVNode(vnode)
}
if (flags & VNodeFlags.COMPONENT) {
proto.beforeUnmount = value
} else if (key === 'destroyed') {
proto.unmounted = value
+ } else {
+ proto[key] = value
}
} else {
proto[key] = value
const { props, attrs } = resolveProps(data, render.props)
const subTree = (vnode.children = normalizeComponentRoot(
render(props, slots || EMPTY_OBJ, attrs || EMPTY_OBJ),
- vnode,
- attrs,
- render.inheritAttrs
+ vnode
))
mount(subTree, container, parentComponent, isSVG, endNode)
vnode.el = subTree.el as RenderNode
const { props, attrs } = resolveProps(nextData, render.props)
const nextTree = (nextVNode.children = normalizeComponentRoot(
render(props, nextSlots || EMPTY_OBJ, attrs || EMPTY_OBJ),
- nextVNode,
- attrs,
- render.inheritAttrs
+ nextVNode
))
patch(prevTree, nextTree, container, parentComponent, isSVG)
nextVNode.el = nextTree.el
createFragment,
createPortal
} from './vdom'
-import { isObservable, unwrap } from '@vue/observer'
+import { isObservable } from '@vue/observer'
export const Fragment = Symbol()
export const Portal = Symbol()
if (children === void 0) children = null
// if value is observable, create a clone of original
- // so that we can mutate it later on.
+ // so that we can normalize its class/style
if (isObservable(data)) {
- data = Object.assign({}, unwrap(data))
+ data = Object.assign({}, data)
}
let key = null
export { nextTick } from '@vue/scheduler'
// Internal API
-export { createComponentInstance } from './componentUtils'
+export {
+ createComponentInstance,
+ createComponentClassFromOptions
+} from './componentUtils'
// Optional APIs
// these are imported on-demand and can be tree-shaken
export const NOOP = () => {}
export const onRE = /^on/
-export const nativeOnRE = /^nativeOn/
export const vnodeHookRE = /^vnode/
-export const handlersRE = /^on|^nativeOn|^vnode/
+export const handlersRE = /^on|^vnode/
export const reservedPropRE = /^(?:key|ref|slots)$|^vnode/
export function normalizeStyle(
extraData.style
])
} else if (handlersRE.test(key)) {
- // on*, nativeOn*, vnode*
+ // on*, vnode*
const existing = clonedData[key]
clonedData[key] = existing
? [].concat(existing, extraData[key])
import { patchDOMProp } from './modules/props'
import { patchEvent } from './modules/events'
-export const onRE = /^on|^nativeOn/
+export const onRE = /^on/
const domPropsRE = /^domProps/
export function patchData(
render,
nextTick,
Component,
- createComponentInstance
+ createComponentInstance,
+ createComponentClassFromOptions
} from '@vue/renderer-dom'
// Note: typing for this is intentionally loose, as it will be using 2.x types.
// in compat mode, h() can take an options object and will convert it
// to a 3.x class-based component.
- const vnode = h(options)
+ const Component = createComponentClassFromOptions(options)
+ const vnode = h(Component)
// the component class is cached on the options object as ._normalized
- const instance = createComponentInstance(vnode, options._normalized, null)
+ const instance = createComponentInstance(vnode, Component, null)
// set the instance on the vnode before mounting.
// the mount function will skip creating a new instance if it finds an
// existing one.
}
export default Vue
-export * from '@vue/renderer-dom'
projects / thirdparty / vuejs / core.git / commitdiff
