refactor: remove filterSingleRootElement and refine attribute fallthrough for Teleport and DynamicFragment with a new root flag.

Author: edison1105

packages/runtime-vapor/src/component.ts

@@ -90,7 +90,7 @@ import {
   setCurrentHydrationNode,
 } from './dom/hydration'
 import { _next, createElement } from './dom/node'
-import { type TeleportFragment, isVaporTeleport } from './components/Teleport'
+import { TeleportFragment, isVaporTeleport } from './components/Teleport'
 import {
   type KeepAliveInstance,
   findParentKeepAlive,
@@ -407,14 +407,17 @@ export function setupComponent(
     component.inheritAttrs !== false &&
     Object.keys(instance.attrs).length
   ) {
-    const root = filterSingleRootElement(instance.block)
+    const root = getRootElement(instance.block, false)
     if (root) {
       renderEffect(() => applyFallthroughProps(root, instance.attrs))
     } else if (
       __DEV__ &&
-      !instance.accessedAttrs &&
-      isArray(instance.block) &&
-      instance.block.length
+      ((!instance.accessedAttrs &&
+        isArray(instance.block) &&
+        instance.block.length) ||
+        // preventing attrs fallthrough on Teleport
+        // consistent with VDOM Teleport behavior
+        instance.block instanceof TeleportFragment)
     ) {
       warnExtraneousAttributes(instance.attrs)
     }
@@ -873,6 +876,7 @@ export function getRootElement(
   }
 
   if (isFragment(block)) {
+    if (block instanceof DynamicFragment) block.root = true
     const { nodes } = block
     if (nodes instanceof Element && (nodes as any).$root) {
       return nodes
@@ -901,22 +905,3 @@ export function getRootElement(
     return hasComment ? singleRoot : undefined
   }
 }
-
-export function filterSingleRootElement(block: Block): Element | undefined {
-  let singleRoot
-  if (block instanceof Element) {
-    singleRoot = block
-  } else if (isArray(block)) {
-    for (const b of block) {
-      if (b instanceof Element) {
-        if (singleRoot) {
-          // has more than 1 non-comment child
-          return
-        } else {
-          singleRoot = b
-        }
-      }
-    }
-  }
-  return singleRoot
-}

packages/runtime-vapor/src/components/Teleport.ts

@@ -9,14 +9,12 @@ import {
   queuePostFlushCb,
   resolveTeleportTarget,
   warn,
-  warnExtraneousAttributes,
 } from '@vue/runtime-dom'
 import { type Block, type BlockFn, insert, remove } from '../block'
 import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
   type LooseRawSlots,
-  type VaporComponentInstance,
   isVaporComponent,
 } from '../component'
 import { rawPropsProxyHandlers } from '../componentProps'
@@ -148,18 +146,6 @@ export class TeleportFragment extends VaporFragment<Block[]> {
       this.$transition = applyTransitionHooks(this.nodes, this.$transition)
     }
 
-    // preventing attrs fallthrough
-    // consistent with VDOM Teleport behavior
-    const instance = this.parentComponent as VaporComponentInstance
-    // TODO: check if component root
-    if (
-      __DEV__ &&
-      instance.hasFallthrough &&
-      Object.keys(instance.attrs).length
-    ) {
-      warnExtraneousAttributes(instance.attrs)
-    }
-
     insert(
       this.nodes,
       (this.mountContainer = parent),

packages/runtime-vapor/src/fragment.ts

@@ -77,6 +77,7 @@ export class DynamicFragment extends VaporFragment {
   current?: BlockFn
   fallback?: BlockFn
   anchorLabel?: string
+  root?: boolean
 
   // get the kept-alive scope when used in keep-alive
   getScope?: (key: any) => EffectScope | undefined
@@ -195,29 +196,32 @@ export class DynamicFragment extends VaporFragment {
         this.$transition = applyTransitionHooks(this.nodes, transition)
       }
 
-      // fallthrough attrs
-      // TODO: check if component root
-      if (
-        this.parentComponent &&
-        (this.parentComponent as VaporComponentInstance)!.hasFallthrough &&
-        Object.keys(this.parentComponent!.attrs).length
-      ) {
-        if (this.nodes instanceof Element) {
-          applyFallthroughProps(this.nodes, this.parentComponent!.attrs)
-        } else if (__DEV__ && this.anchorLabel === 'slot') {
-          // preventing attrs fallthrough
-          // consistent with VDOM Teleport behavior
-          warnExtraneousAttributes(this.parentComponent!.attrs)
-        }
-      }
-
       if (this.beforeMount) {
         this.beforeMount.forEach(hook =>
           hook(this.current, this.nodes, this.scope!),
         )
       }
 
       if (parent) {
+        // fallthrough attrs
+        if (
+          this.root &&
+          this.parentComponent &&
+          (this.parentComponent as VaporComponentInstance)!.hasFallthrough &&
+          Object.keys(this.parentComponent!.attrs).length
+        ) {
+          if (this.nodes instanceof Element) {
+            applyFallthroughProps(this.nodes, this.parentComponent!.attrs)
+          } else if (
+            __DEV__ &&
+            // preventing attrs fallthrough on slots
+            // consistent with VDOM slots behavior
+            this.anchorLabel === 'slot'
+          ) {
+            warnExtraneousAttributes(this.parentComponent!.attrs)
+          }
+        }
+
         insert(this.nodes, parent, this.anchor)
         if (this.updated) {
           this.updated.forEach(hook => hook(this.nodes))