feat(core): adjust attrs fallthrough behavior

packages/runtime-core/src/apiOptions.ts

@@ -62,6 +62,7 @@ export interface ComponentOptionsBase<
   render?: Function
   components?: Record<string, Component>
   directives?: Record<string, Directive>
+  inheritAttrs?: boolean
 }
 
 export type ComponentOptionsWithoutProps<
@@ -80,7 +81,7 @@ export type ComponentOptionsWithArrayProps<
   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>>

packages/runtime-core/src/component.ts

@@ -37,6 +37,7 @@ export type Data = { [key: string]: unknown }
 export interface FunctionalComponent<P = {}> {
   (props: P, ctx: SetupContext): VNodeChild
   props?: ComponentPropsOptions<P>
+  inheritAttrs?: boolean
   displayName?: string
 }
 

packages/runtime-core/src/componentProps.ts

@@ -202,7 +202,7 @@ export function resolveProps(
   instance.attrs = options
     ? __DEV__ && attrs != null
       ? readonly(attrs)
-      : attrs!
+      : attrs || EMPTY_OBJ
     : instance.props
 }
 

packages/runtime-core/src/componentProxy.ts

@@ -11,7 +11,10 @@ import {
 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)
@@ -109,6 +112,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
     } 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

packages/runtime-core/src/componentRenderUtils.ts

@@ -3,15 +3,31 @@ import {
   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 {
@@ -27,6 +43,9 @@ export function renderComponentRoot(
 
   let result
   currentRenderingInstance = instance
+  if (__DEV__) {
+    accessedAttrs = false
+  }
   try {
     if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
       result = normalizeVNode(instance.render!.call(renderProxy))
@@ -43,6 +62,27 @@ export function renderComponentRoot(
           : 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)

packages/runtime-core/src/vnode.ts

@@ -229,11 +229,15 @@ export function createVNode(
   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,