feat: implement attribute fallthrough logic for functional components and adjust fragment attribute warning conditions.

Author: edison1105

packages/runtime-core/src/componentRenderUtils.ts

@@ -341,7 +341,7 @@ export function filterSingleRoot(
   return singleRoot
 }
 
-const getFunctionalFallthrough = (attrs: Data): Data | undefined => {
+export const getFunctionalFallthrough = (attrs: Data): Data | undefined => {
   let res: Data | undefined
   for (const key in attrs) {
     if (key === 'class' || key === 'style' || isOn(key)) {

packages/runtime-core/src/index.ts

@@ -678,4 +678,7 @@ export type { GenericComponent } from './component'
 /**
  * @internal
  */
-export { warnExtraneousAttributes } from './componentRenderUtils'
+export {
+  warnExtraneousAttributes,
+  getFunctionalFallthrough,
+} from './componentRenderUtils'

packages/runtime-vapor/__tests__/componentAttrs.spec.ts

@@ -66,67 +66,64 @@ describe('attribute fallthrough', () => {
     expect(host.innerHTML).toBe('<div id="b">2</div>')
   })
 
-  it.todo(
-    'should only allow whitelisted fallthrough on functional component with optional props',
-    async () => {
-      const click = vi.fn()
-      const childUpdated = vi.fn()
-
-      const count = ref(0)
+  it('should only allow whitelisted fallthrough on functional component with optional props', async () => {
+    const click = vi.fn()
+    const childUpdated = vi.fn()
 
-      function inc() {
-        count.value++
-        click()
-      }
+    const count = ref(0)
 
-      const Hello = () =>
-        createComponent(Child, {
-          foo: () => count.value + 1,
-          id: () => 'test',
-          class: () => 'c' + count.value,
-          style: () => ({
-            color: count.value ? 'red' : 'green',
-          }),
-          onClick: () => inc,
-        })
+    function inc() {
+      count.value++
+      click()
+    }
 
-      const { component: Child } = define((props: any) => {
-        childUpdated()
-        const n0 = template(
-          '<div class="c2" style="font-weight: bold"></div>',
-          true,
-        )() as Element
-        renderEffect(() => setElementText(n0, props.foo))
-        return n0
+    const Hello = () =>
+      createComponent(Child, {
+        foo: () => count.value + 1,
+        id: () => 'test',
+        class: () => 'c' + count.value,
+        style: () => ({
+          color: count.value ? 'red' : 'green',
+        }),
+        onClick: () => inc,
       })
 
-      const { host: root } = define(Hello).render()
-      expect(root.innerHTML).toBe(
-        '<div class="c2 c0" style="font-weight: bold; color: green;">1</div>',
-      )
-
-      const node = root.children[0] as HTMLElement
-
-      // not whitelisted
-      expect(node.getAttribute('id')).toBe(null)
-      expect(node.getAttribute('foo')).toBe(null)
-
-      // whitelisted: style, class, event listeners
-      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(click).toHaveBeenCalled()
-
-      await nextTick()
-      expect(childUpdated).toHaveBeenCalled()
-      expect(node.getAttribute('id')).toBe(null)
-      expect(node.getAttribute('foo')).toBe(null)
-      expect(node.getAttribute('class')).toBe('c2 c1')
-      expect(node.style.color).toBe('red')
-      expect(node.style.fontWeight).toBe('bold')
-    },
-  )
+    const { component: Child } = define((props: any) => {
+      childUpdated()
+      const n0 = template(
+        '<div class="c2" style="font-weight: bold"></div>',
+        true,
+      )() as Element
+      renderEffect(() => setElementText(n0, props.foo))
+      return n0
+    })
+
+    const { host: root } = define(Hello).render()
+    expect(root.innerHTML).toBe(
+      '<div class="c2 c0" style="font-weight: bold; color: green;">1</div>',
+    )
+
+    const node = root.children[0] as HTMLElement
+
+    // not whitelisted
+    expect(node.getAttribute('id')).toBe(null)
+    expect(node.getAttribute('foo')).toBe(null)
+
+    // whitelisted: style, class, event listeners
+    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(click).toHaveBeenCalled()
+
+    await nextTick()
+    expect(childUpdated).toHaveBeenCalled()
+    expect(node.getAttribute('id')).toBe(null)
+    expect(node.getAttribute('foo')).toBe(null)
+    expect(node.getAttribute('class')).toBe('c2 c1')
+    expect(node.style.color).toBe('red')
+    expect(node.style.fontWeight).toBe('bold')
+  })
 
   it('should allow all attrs on functional component with declared props', async () => {
     const click = vi.fn()
@@ -438,7 +435,7 @@ describe('attribute fallthrough', () => {
       },
     }
 
-    const Child = defineVaporComponent((_, { attrs }) => {
+    const { component: Child } = define((_: any, { attrs }: any) => {
       const n0 = template('<div></div>')() as Element
       const n1 = template('<div></div>')() as Element
       renderEffect(() => {

packages/runtime-vapor/src/component.ts

@@ -17,6 +17,7 @@ import {
   endMeasure,
   expose,
   getComponentName,
+  getFunctionalFallthrough,
   isAsyncWrapper,
   isKeepAlive,
   nextUid,
@@ -409,7 +410,12 @@ export function setupComponent(
       false,
     )
     if (root) {
-      renderEffect(() => applyFallthroughProps(root, instance.attrs))
+      renderEffect(() => {
+        const attrs = isFunction(component)
+          ? getFunctionalFallthrough(instance.attrs)
+          : instance.attrs
+        if (attrs) applyFallthroughProps(root, attrs)
+      })
     } else if (
       __DEV__ &&
       ((!instance.accessedAttrs &&

packages/runtime-vapor/src/fragment.ts

@@ -32,6 +32,7 @@ import {
   locateHydrationNode,
 } from './dom/hydration'
 import { getParentInstance } from './componentSlots'
+import { isArray } from '@vue/shared'
 
 export class VaporFragment<T extends Block = Block>
   implements TransitionOptions
@@ -213,7 +214,8 @@ export class DynamicFragment extends VaporFragment {
             __DEV__ &&
             // preventing attrs fallthrough on slots
             // consistent with VDOM slots behavior
-            this.anchorLabel === 'slot'
+            (this.anchorLabel === 'slot' ||
+              (isArray(this.nodes) && this.nodes.length))
           ) {
             warnExtraneousAttributes(this.attrs)
           }