expect(dummy).toBe(1)
})
- it('setup props should resolve the correct types from props object', async () => {
+ it.only('setup props should resolve the correct types from props object', async () => {
const count = ref(0)
let dummy
onUpdated,
createComponent
} from '@vue/runtime-dom'
+import { mockWarn } from '@vue/runtime-test'
describe('attribute fallthrough', () => {
+ mockWarn()
+
it('everything should be in props when component has no declared props', async () => {
const click = jest.fn()
const childUpdated = jest.fn()
expect(node.style.fontWeight).toBe('bold')
})
- it('should separate in attrs when component has declared props', async () => {
+ it('should implicitly fallthrough on single root nodes', async () => {
const click = jest.fn()
const childUpdated = jest.fn()
props: {
foo: Number
},
- setup(props, { attrs }) {
+ setup(props) {
onUpdated(childUpdated)
return () =>
h(
'div',
- mergeProps(
- {
- class: 'c2',
- style: { fontWeight: 'bold' }
- },
- attrs
- ),
+ {
+ class: 'c2',
+ style: { fontWeight: 'bold' }
+ },
props.foo
)
}
expect(node.hasAttribute('foo')).toBe(false)
})
- it('should fallthrough on multi-nested components', async () => {
+ it('should fallthrough for nested components', async () => {
const click = jest.fn()
const childUpdated = jest.fn()
const grandChildUpdated = jest.fn()
props: {
foo: Number
},
- setup(props, { attrs }) {
+ setup(props) {
onUpdated(grandChildUpdated)
return () =>
h(
'div',
- mergeProps(
- {
- class: 'c2',
- style: { fontWeight: 'bold' }
- },
- attrs
- ),
+ {
+ class: 'c2',
+ style: { fontWeight: 'bold' }
+ },
props.foo
)
}
expect(node.hasAttribute('foo')).toBe(false)
})
+
+ it('should not fallthrough with inheritAttrs: false', () => {
+ const Parent = {
+ render() {
+ return h(Child, { foo: 1, class: 'parent' })
+ }
+ }
+
+ const Child = createComponent({
+ props: ['foo'],
+ inheritAttrs: false,
+ render() {
+ return h('div', this.foo)
+ }
+ })
+
+ const root = document.createElement('div')
+ document.body.appendChild(root)
+ render(h(Parent), root)
+
+ // should not contain class
+ expect(root.innerHTML).toMatch(`<div>1</div>`)
+ })
+
+ it('explicit spreading with inheritAttrs: false', () => {
+ const Parent = {
+ render() {
+ return h(Child, { foo: 1, class: 'parent' })
+ }
+ }
+
+ const Child = createComponent({
+ props: ['foo'],
+ inheritAttrs: false,
+ render() {
+ return h(
+ 'div',
+ mergeProps(
+ {
+ class: 'child'
+ },
+ this.$attrs
+ ),
+ this.foo
+ )
+ }
+ })
+
+ const root = document.createElement('div')
+ document.body.appendChild(root)
+ render(h(Parent), root)
+
+ // should merge parent/child classes
+ expect(root.innerHTML).toMatch(`<div class="child parent">1</div>`)
+ })
+
+ it('should warn when fallthrough fails on non-single-root', () => {
+ const Parent = {
+ render() {
+ return h(Child, { foo: 1, class: 'parent' })
+ }
+ }
+
+ const Child = createComponent({
+ props: ['foo'],
+ render() {
+ return [h('div'), h('div')]
+ }
+ })
+
+ const root = document.createElement('div')
+ document.body.appendChild(root)
+ render(h(Parent), root)
+
+ expect(`Extraneous non-props attributes (class)`).toHaveBeenWarned()
+ })
+
+ it('should not warn when $attrs is used during render', () => {
+ const Parent = {
+ render() {
+ return h(Child, { foo: 1, class: 'parent' })
+ }
+ }
+
+ const Child = createComponent({
+ props: ['foo'],
+ render() {
+ return [h('div'), h('div', this.$attrs)]
+ }
+ })
+
+ const root = document.createElement('div')
+ document.body.appendChild(root)
+ render(h(Parent), root)
+
+ expect(`Extraneous non-props attributes`).not.toHaveBeenWarned()
+ expect(root.innerHTML).toBe(
+ `<!----><div></div><div class="parent"></div><!---->`
+ )
+ })
})
render?: Function
components?: Record<string, Component>
directives?: Record<string, Directive>
+ inheritAttrs?: boolean
}
export type ComponentOptionsWithoutProps<
D = {},
C extends ComputedOptions = {},
M extends MethodOptions = {},
- Props = { [key in PropNames]?: unknown }
+ Props = { [key in PropNames]?: any }
> = ComponentOptionsBase<Props, RawBindings, D, C, M> & {
props: PropNames[]
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>
export interface FunctionalComponent<P = {}> {
(props: P, ctx: SetupContext): VNodeChild
props?: ComponentPropsOptions<P>
+ inheritAttrs?: boolean
displayName?: string
}
instance.attrs = options
? __DEV__ && attrs != null
? readonly(attrs)
- : attrs!
+ : attrs || EMPTY_OBJ
: instance.props
}
import { UnwrapRef, ReactiveEffect } from '@vue/reactivity'
import { warn } from './warning'
import { Slots } from './componentSlots'
-import { currentRenderingInstance } from './componentRenderUtils'
+import {
+ currentRenderingInstance,
+ markAttrsAccessed
+} from './componentRenderUtils'
// public properties exposed on the proxy, which is used as the render context
// in templates (as `this` in the render option)
} else if (key === '$el') {
return target.vnode.el
} else if (hasOwn(publicPropertiesMap, key)) {
+ if (__DEV__ && key === '$attrs') {
+ markAttrsAccessed()
+ }
return target[publicPropertiesMap[key]]
}
// methods are only exposed when options are supported
FunctionalComponent,
Data
} from './component'
-import { VNode, normalizeVNode, createVNode, Comment } from './vnode'
+import {
+ VNode,
+ normalizeVNode,
+ createVNode,
+ Comment,
+ cloneVNode
+} from './vnode'
import { ShapeFlags } from './shapeFlags'
import { handleError, ErrorCodes } from './errorHandling'
-import { PatchFlags } from '@vue/shared'
+import { PatchFlags, EMPTY_OBJ } from '@vue/shared'
+import { warn } from './warning'
// mark the current rendering instance for asset resolution (e.g.
// resolveComponent, resolveDirective) during render
export let currentRenderingInstance: ComponentInternalInstance | null = null
+// dev only flag to track whether $attrs was used during render.
+// If $attrs was used during render then the warning for failed attrs
+// fallthrough can be suppressed.
+let accessedAttrs: boolean = false
+
+export function markAttrsAccessed() {
+ accessedAttrs = true
+}
+
export function renderComponentRoot(
instance: ComponentInternalInstance
): VNode {
let result
currentRenderingInstance = instance
+ if (__DEV__) {
+ accessedAttrs = false
+ }
try {
if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
result = normalizeVNode(instance.render!.call(renderProxy))
: render(props, null as any /* we know it doesn't need it */)
)
}
+
+ // attr merging
+ if (
+ Component.props != null &&
+ Component.inheritAttrs !== false &&
+ attrs !== EMPTY_OBJ &&
+ Object.keys(attrs).length
+ ) {
+ if (
+ result.shapeFlag & ShapeFlags.ELEMENT ||
+ result.shapeFlag & ShapeFlags.COMPONENT
+ ) {
+ result = cloneVNode(result, attrs)
+ } else if (__DEV__ && !accessedAttrs) {
+ warn(
+ `Extraneous non-props attributes (${Object.keys(attrs).join(',')}) ` +
+ `were passed to component but could not be automatically inhertied ` +
+ `because component renders fragment or text root nodes.`
+ )
+ }
+ }
} catch (err) {
handleError(err, instance, ErrorCodes.RENDER_FUNCTION)
result = createVNode(Comment)
return vnode
}
-export function cloneVNode(vnode: VNode): VNode {
+export function cloneVNode(vnode: VNode, extraProps?: Data): VNode {
return {
_isVNode: true,
type: vnode.type,
- props: vnode.props,
+ props: extraProps
+ ? vnode.props
+ ? mergeProps(vnode.props, extraProps)
+ : extraProps
+ : vnode.props,
key: vnode.key,
ref: vnode.ref,
children: vnode.children,
projects / thirdparty / vuejs / core.git / commitdiff
