refactor: refine fallthrough attribute to single root elements across components and fragments.

Author: edison1105

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

@@ -580,22 +580,22 @@ describe('defineVaporCustomElement', () => {
   describe('attrs', () => {
     const E = defineVaporCustomElement({
       setup(_: any, { attrs }: any) {
-        const n0 = template('<div> </div>')() as any
+        const n0 = template('<div> </div>', true)() as any
         const x0 = txt(n0) as any
         renderEffect(() => setText(x0, toDisplayString(attrs.foo)))
-        return [n0]
+        return n0
       },
     })
     customElements.define('my-el-attrs', E)
 
     test('attrs via attribute', async () => {
       container.innerHTML = `<my-el-attrs foo="hello"></my-el-attrs>`
       const e = container.childNodes[0] as VaporElement
-      expect(e.shadowRoot!.innerHTML).toBe('<div>hello</div>')
+      expect(e.shadowRoot!.innerHTML).toBe('<div foo="hello">hello</div>')
 
       e.setAttribute('foo', 'changed')
       await nextTick()
-      expect(e.shadowRoot!.innerHTML).toBe('<div>changed</div>')
+      expect(e.shadowRoot!.innerHTML).toBe('<div foo="changed">changed</div>')
     })
 
     test('non-declared properties should not show up in $attrs', () => {

packages/runtime-vapor/src/apiCreateFor.ts

@@ -446,7 +446,7 @@ export const createFor = (
 
     // apply transition for new nodes
     if (frag.$transition) {
-      applyTransitionHooks(block.nodes, frag.$transition, false)
+      applyTransitionHooks(block.nodes, frag.$transition)
     }
 
     if (parent) insert(block.nodes, parent, anchor)

packages/runtime-vapor/src/component.ts

@@ -16,6 +16,7 @@ import {
   currentInstance,
   endMeasure,
   expose,
+  getComponentName,
   isAsyncWrapper,
   isKeepAlive,
   nextUid,
@@ -27,7 +28,6 @@ import {
   startMeasure,
   unregisterHMR,
   warn,
-  // warnExtraneousAttributes,
 } from '@vue/runtime-dom'
 import {
   type Block,
@@ -203,7 +203,10 @@ export function createComponent(
   const parentInstance = getParentInstance()
 
   if (
-    isSingleRoot &&
+    (isSingleRoot ||
+      // transition has attrs fallthrough
+      (parentInstance &&
+        getComponentName(parentInstance!.type) === 'VaporTransition')) &&
     component.inheritAttrs !== false &&
     isVaporComponent(parentInstance) &&
     parentInstance.hasFallthrough
@@ -403,7 +406,12 @@ export function setupComponent(
     component.inheritAttrs !== false &&
     Object.keys(instance.attrs).length
   ) {
-    renderEffect(() => applyFallthroughProps(instance.block, instance.attrs))
+    const root = filterSingleRootElement(instance.block)
+    if (root) {
+      renderEffect(() => applyFallthroughProps(root, instance.attrs))
+    } else if (__DEV__ && isArray(instance.block)) {
+      // TODO warn extraneous attributes
+    }
   }
 
   setActiveSub(prevSub)
@@ -418,17 +426,12 @@ export function setupComponent(
 export let isApplyingFallthroughProps = false
 
 export function applyFallthroughProps(
-  block: Block,
+  el: Element,
   attrs: Record<string, any>,
 ): void {
-  const el = getRootElement(block, false)
-  if (el) {
-    isApplyingFallthroughProps = true
-    setDynamicProps(el, [attrs])
-    isApplyingFallthroughProps = false
-  } else if (__DEV__) {
-    // warnExtraneousAttributes(attrs)
-  }
+  isApplyingFallthroughProps = true
+  setDynamicProps(el, [attrs])
+  isApplyingFallthroughProps = false
 }
 
 /**
@@ -869,3 +872,22 @@ 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

@@ -3,7 +3,6 @@ import {
   MismatchTypes,
   type TeleportProps,
   type TeleportTargetElement,
-  currentInstance,
   isMismatchAllowed,
   isTeleportDeferred,
   isTeleportDisabled,
@@ -16,6 +15,8 @@ import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
   type LooseRawSlots,
+  type VaporComponentInstance,
+  applyFallthroughProps,
   isVaporComponent,
 } from '../component'
 import { rawPropsProxyHandlers } from '../componentProps'
@@ -32,6 +33,7 @@ import {
   setCurrentHydrationNode,
 } from '../dom/hydration'
 import { applyTransitionHooks } from './Transition'
+import { getParentInstance } from '../componentSlots'
 
 export const VaporTeleportImpl = {
   name: 'VaporTeleport',
@@ -57,13 +59,12 @@ export class TeleportFragment extends VaporFragment<Block[]> {
   placeholder?: Node
   mountContainer?: ParentNode | null
   mountAnchor?: Node | null
-  parentComponent: GenericComponentInstance
 
   constructor(props: LooseRawProps, slots: LooseRawSlots) {
     super([])
     this.rawProps = props
     this.rawSlots = slots
-    this.parentComponent = currentInstance as GenericComponentInstance
+    this.parentComponent = getParentInstance()
     this.anchor = isHydrating
       ? undefined
       : __DEV__
@@ -144,8 +145,19 @@ export class TeleportFragment extends VaporFragment<Block[]> {
 
   private mount(parent: ParentNode, anchor: Node | null): void {
     if (this.$transition) {
-      applyTransitionHooks(this.nodes, this.$transition)
+      this.$transition = applyTransitionHooks(this.nodes, this.$transition)
     }
+
+    // fallthrough attrs
+    const instance = this.parentComponent as VaporComponentInstance
+    if (
+      instance.hasFallthrough &&
+      Object.keys(instance.attrs).length &&
+      this.nodes instanceof Element
+    ) {
+      applyFallthroughProps(this.nodes, instance.attrs)
+    }
+
     insert(
       this.nodes,
       (this.mountContainer = parent),

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

@@ -26,7 +26,7 @@ import {
   applyFallthroughProps,
   isVaporComponent,
 } from '../component'
-import { extend, isArray } from '@vue/shared'
+import { isArray } from '@vue/shared'
 import { renderEffect } from '../renderEffect'
 import { isFragment } from '../fragment'
 import {
@@ -85,15 +85,15 @@ export const VaporTransition: FunctionalVaporComponent = /*@__PURE__*/ decorate(
     renderEffect(() => {
       resolvedProps = resolveTransitionProps(props)
       if (isMounted) {
-        // only update props for Fragment block, for later reusing
+        // only update props for Fragment transition, for later reusing
         if (isFragment(children)) {
           children.$transition!.props = resolvedProps
         } else {
           const child = findTransitionBlock(children)
           if (child) {
             // replace existing transition hooks
             child.$transition!.props = resolvedProps
-            applyTransitionHooks(child, child.$transition!, undefined, true)
+            applyTransitionHooks(child, child.$transition!, true)
           }
         }
       } else {
@@ -102,33 +102,19 @@ export const VaporTransition: FunctionalVaporComponent = /*@__PURE__*/ decorate(
     })
 
     // fallthrough attrs
-    let fallthroughAttrs = true
-    if (instance.hasFallthrough) {
-      renderEffect(() => {
-        // attrs are accessed in advance
-        const resolvedAttrs = extend({}, attrs)
-        const child = findTransitionBlock(children)
-        if (child) {
-          // mark single root
-          ;(child as any).$root = true
-
-          applyFallthroughProps(child, resolvedAttrs)
-          // ensure fallthrough attrs are not happened again in
-          // applyTransitionHooks
-          fallthroughAttrs = false
-        }
-      })
+    if (
+      instance.hasFallthrough &&
+      Object.keys(attrs).length &&
+      children instanceof Element
+    ) {
+      renderEffect(() => applyFallthroughProps(children, attrs))
     }
 
-    const hooks = applyTransitionHooks(
-      children,
-      {
-        state: useTransitionState(),
-        props: resolvedProps!,
-        instance: instance,
-      } as VaporTransitionHooks,
-      fallthroughAttrs,
-    )
+    const hooks = applyTransitionHooks(children, {
+      state: useTransitionState(),
+      props: resolvedProps!,
+      instance: instance,
+    } as VaporTransitionHooks)
 
     if (resetDisplay && resolvedProps!.appear) {
       const child = findTransitionBlock(children)!
@@ -210,7 +196,6 @@ export function resolveTransitionHooks(
 export function applyTransitionHooks(
   block: Block,
   hooks: VaporTransitionHooks,
-  fallthroughAttrs: boolean = true,
   isResolved: boolean = false,
 ): VaporTransitionHooks {
   // filter out comment nodes
@@ -246,13 +231,6 @@ export function applyTransitionHooks(
   child.$transition = resolvedHooks
   if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks)
 
-  // fallthrough attrs
-  if (fallthroughAttrs && instance.hasFallthrough) {
-    // mark single root
-    ;(child as any).$root = true
-    applyFallthroughProps(child, instance.attrs)
-  }
-
   return resolvedHooks
 }
 

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

@@ -154,8 +154,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
       const container = createElement(tag)
       insert(slottedBlock, container)
       // fallthrough attrs
-      if (instance!.hasFallthrough) {
-        ;(container as any).$root = true
+      if (instance!.hasFallthrough && Object.keys(instance!.attrs).length) {
         renderEffect(() => applyFallthroughProps(container, instance!.attrs))
       }
       return container

packages/runtime-vapor/src/fragment.ts

@@ -11,11 +11,14 @@ import {
   remove,
 } from './block'
 import {
+  type GenericComponentInstance,
   type TransitionHooks,
   type VNode,
   queuePostFlushCb,
+  setCurrentInstance,
+  warnExtraneousAttributes,
 } from '@vue/runtime-dom'
-import type { VaporComponentInstance } from './component'
+import { type VaporComponentInstance, applyFallthroughProps } from './component'
 import type { NodeRef } from './apiTemplateRef'
 import {
   applyTransitionHooks,
@@ -28,6 +31,7 @@ import {
   locateFragmentEndAnchor,
   locateHydrationNode,
 } from './dom/hydration'
+import { getParentInstance } from './componentSlots'
 
 export class VaporFragment<T extends Block = Block>
   implements TransitionOptions
@@ -37,6 +41,7 @@ export class VaporFragment<T extends Block = Block>
   nodes: T
   vnode?: VNode | null = null
   anchor?: Node
+  parentComponent?: GenericComponentInstance | null
   fallback?: BlockFn
   insert?: (
     parent: ParentNode,
@@ -86,12 +91,14 @@ export class DynamicFragment extends VaporFragment {
 
   constructor(anchorLabel?: string) {
     super([])
+    this.parentComponent = getParentInstance()
     if (isHydrating) {
       this.anchorLabel = anchorLabel
       locateHydrationNode()
     } else {
       this.anchor =
         __DEV__ && anchorLabel ? createComment(anchorLabel) : createTextNode()
+      if (__DEV__) this.anchorLabel = anchorLabel
     }
   }
 
@@ -168,6 +175,8 @@ export class DynamicFragment extends VaporFragment {
     transition: VaporTransitionHooks | undefined,
     parent: ParentNode | null,
   ) {
+    // anchor isConnected indicates the this is an update render
+    const isUpdate = !!(this.anchor && this.anchor.isConnected)
     if (render) {
       // try to reuse the kept-alive scope
       const scope = this.getScope && this.getScope(this.current)
@@ -177,12 +186,30 @@ export class DynamicFragment extends VaporFragment {
         this.scope = new EffectScope()
       }
 
+      // switch current instance to parent instance during update
+      let prev
+      if (this.parentComponent && isUpdate)
+        prev = setCurrentInstance(this.parentComponent)
       this.nodes = this.scope.run(render) || []
+      if (this.parentComponent && isUpdate) setCurrentInstance(...prev!)
 
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition)
       }
 
+      // fallthrough attrs
+      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') {
+          warnExtraneousAttributes(this.parentComponent!.attrs)
+        }
+      }
+
       if (this.beforeMount) {
         this.beforeMount.forEach(hook =>
           hook(this.current, this.nodes, this.scope!),
@@ -191,8 +218,7 @@ export class DynamicFragment extends VaporFragment {
 
       if (parent) {
         insert(this.nodes, parent, this.anchor)
-        // anchor isConnected indicates the this render is updated
-        if (this.anchor.isConnected && this.updated) {
+        if (isUpdate && this.updated) {
           this.updated.forEach(hook => hook(this.nodes))
         }
       }