refactor: simplify TeleportFragment nodes to directly hold content instead of always an array.

revert: c9f9b85

Author: edison1105

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

@@ -3034,9 +3034,12 @@ describe('Vapor Mode hydration', () => {
       expect(teleport.anchor).toBe(container.lastChild)
       expect(teleport.target).toBe(teleportContainer)
       expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
-      const children = teleport.nodes[0] as Node[]
-      expect(children[0]).toBe(teleportContainer.childNodes[1])
-      expect(children[1]).toBe(teleportContainer.childNodes[2])
+      expect((teleport.nodes as Node[])[0]).toBe(
+        teleportContainer.childNodes[1],
+      )
+      expect((teleport.nodes as Node[])[1]).toBe(
+        teleportContainer.childNodes[2],
+      )
       expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[3])
 
       expect(container.innerHTML).toMatchInlineSnapshot(
@@ -3149,14 +3152,16 @@ describe('Vapor Mode hydration', () => {
 
       expect(teleport1.target).toBe(teleportContainer)
       expect(teleport1.targetStart).toBe(teleportContainer.childNodes[0])
-      const children1 = teleport1.nodes[0] as Node[]
-      expect(children1[0]).toBe(teleportContainer.childNodes[1])
+      expect((teleport1.nodes as Node[])[0]).toBe(
+        teleportContainer.childNodes[1],
+      )
       expect(teleport1.targetAnchor).toBe(teleportContainer.childNodes[3])
 
       expect(teleport2.target).toBe(teleportContainer)
       expect(teleport2.targetStart).toBe(teleportContainer.childNodes[4])
-      const children2 = teleport2.nodes[0] as Node[]
-      expect(children2[0]).toBe(teleportContainer.childNodes[5])
+      expect((teleport2.nodes as Node[])[0]).toBe(
+        teleportContainer.childNodes[5],
+      )
       expect(teleport2.targetAnchor).toBe(teleportContainer.childNodes[7])
 
       expect(container.innerHTML).toBe(
@@ -3240,9 +3245,8 @@ describe('Vapor Mode hydration', () => {
       expect(blocks[0]).toBe(container.childNodes[1])
 
       const teleport = blocks[1] as TeleportFragment
-      const children = teleport.nodes[0] as Node[]
-      expect(children[0]).toBe(container.childNodes[3])
-      expect(children[1]).toBe(container.childNodes[4])
+      expect((teleport.nodes as Node[])[0]).toBe(container.childNodes[3])
+      expect((teleport.nodes as Node[])[1]).toBe(container.childNodes[4])
       expect(teleport.anchor).toBe(container.childNodes[5])
       expect(teleport.target).toBe(teleportContainer)
       expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
@@ -3327,7 +3331,7 @@ describe('Vapor Mode hydration', () => {
       expect(teleport.anchor).toBe(container.childNodes[1])
       expect(teleport.target).toBe(teleportContainer)
       expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
-      expect(teleport.nodes[0]).toBe(teleportContainer.childNodes[1])
+      expect(teleport.nodes).toBe(teleportContainer.childNodes[1])
       expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[2])
     })
 
@@ -3355,11 +3359,11 @@ describe('Vapor Mode hydration', () => {
       expect(teleport.targetStart).toBe(teleportContainer.childNodes[0])
       expect(teleport.targetAnchor).toBe(teleportContainer.childNodes[3])
 
-      const childTeleport = teleport.nodes[0] as TeleportFragment
+      const childTeleport = teleport.nodes as TeleportFragment
       expect(childTeleport.anchor).toBe(teleportContainer.childNodes[2])
       expect(childTeleport.targetStart).toBe(teleportContainer.childNodes[4])
       expect(childTeleport.targetAnchor).toBe(teleportContainer.childNodes[6])
-      expect(childTeleport.nodes[0]).toBe(teleportContainer.childNodes[5])
+      expect(childTeleport.nodes).toBe(teleportContainer.childNodes[5])
     })
 
     test('unmount (full integration)', async () => {

packages/runtime-vapor/src/component.ts

@@ -875,7 +875,7 @@ export function getRootElement(
     return getRootElement(block.block, recurse)
   }
 
-  if (isFragment(block)) {
+  if (isFragment(block) && !(block instanceof TeleportFragment)) {
     if (block instanceof DynamicFragment) block.root = true
     const { nodes } = block
     if (nodes instanceof Element && (nodes as any).$root) {

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

@@ -43,7 +43,7 @@ export const VaporTeleportImpl = {
   },
 }
 
-export class TeleportFragment extends VaporFragment<Block[]> {
+export class TeleportFragment extends VaporFragment {
   anchor?: Node
   private rawProps?: LooseRawProps
   private resolvedProps?: TeleportProps
@@ -98,7 +98,7 @@ export class TeleportFragment extends VaporFragment<Block[]> {
       )
     })
 
-    const nodes = this.nodes[0]
+    const nodes = this.nodes
     // register updateCssVars to root fragments's update hooks so that
     // it will be called when root fragment changed
     if (this.parentComponent && this.parentComponent.ut) {
@@ -129,16 +129,14 @@ export class TeleportFragment extends VaporFragment<Block[]> {
   private handleChildrenUpdate(children: Block): void {
     // not mounted yet
     if (!this.parent || isHydrating) {
-      // Teleport nodes are always an array, preventing attrs fallthrough
-      // consistent with VDOM Teleport behavior.
-      this.nodes = [children]
+      this.nodes = children
       return
     }
 
     // teardown previous nodes
     remove(this.nodes, this.mountContainer!)
     // mount new nodes
-    insert((this.nodes = [children]), this.mountContainer!, this.mountAnchor!)
+    insert((this.nodes = children), this.mountContainer!, this.mountAnchor!)
   }
 
   private mount(parent: ParentNode, anchor: Node | null): void {

packages/runtime-vapor/src/hmr.ts

@@ -99,13 +99,12 @@ export function updateParentTeleportOnHmrReload(
   const teleport = instance.parentTeleport
   if (teleport) {
     newInstance.parentTeleport = teleport
-    const block = teleport.nodes[0]
-    if (block === instance) {
-      teleport.nodes[0] = newInstance
-    } else if (isArray(block)) {
-      for (let i = 0; i < block.length; i++) {
-        if (block[i] === instance) {
-          block[i] = newInstance
+    if (teleport.nodes === instance) {
+      teleport.nodes = newInstance
+    } else if (isArray(teleport.nodes)) {
+      for (let i = 0; i < teleport.nodes.length; i++) {
+        if (teleport.nodes[i] === instance) {
+          teleport.nodes[i] = newInstance
           break
         }
       }