feat(core): adjust attrs fallthrough behavior

packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts

@@ -8,8 +8,11 @@ import {
   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()
@@ -75,7 +78,7 @@ describe('attribute fallthrough', () => {
     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()
 
@@ -103,18 +106,15 @@ describe('attribute fallthrough', () => {
       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
           )
       }
@@ -147,7 +147,7 @@ describe('attribute fallthrough', () => {
     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()
@@ -183,18 +183,15 @@ describe('attribute fallthrough', () => {
       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
           )
       }
@@ -227,4 +224,104 @@ describe('attribute fallthrough', () => {
 
     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><!---->`
+    )
+  })
 })