chore: add more cases

Author: edison1105

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

@@ -2942,6 +2942,106 @@ describe('Vapor Mode hydration', () => {
         `"<!--teleport start anchor--><span>baz</span><span class="baz"></span><!--teleport anchor-->"`,
       )
     })
+
+    test('multiple + integration', async () => {
+      const data = ref({
+        msg: ref('foo'),
+        fn1: vi.fn(),
+        fn2: vi.fn(),
+      })
+
+      const code = `
+          <teleport to="#teleport2">
+            <span>{{data.msg}}</span>
+            <span :class="data.msg" @click="data.fn1"></span>
+          </teleport>
+          <teleport to="#teleport2">
+            <span>{{data.msg}}2</span>
+            <span :class="data.msg + 2" @click="data.fn2"></span>
+          </teleport>`
+
+      const serverComp = compile(
+        `<template>${code}</template>`,
+        data,
+        undefined,
+        {
+          vapor: true,
+          ssr: true,
+        },
+      )
+
+      const teleportContainer = document.createElement('div')
+      teleportContainer.id = 'teleport2'
+      const ctx = {} as any
+      const mainHtml = await VueServerRenderer.renderToString(
+        runtimeDom.createSSRApp(serverComp),
+        ctx,
+      )
+      expect(mainHtml).toMatchInlineSnapshot(
+        `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`,
+      )
+
+      const teleportHtml = ctx.teleports!['#teleport2']
+      expect(teleportHtml).toMatchInlineSnapshot(
+        `"<!--teleport start anchor--><span>foo</span><span class="foo"></span><!--teleport anchor--><!--teleport start anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`,
+      )
+
+      teleportContainer.innerHTML = teleportHtml
+      document.body.appendChild(teleportContainer)
+
+      const { frag, container } = await mountWithHydration(mainHtml, code, data)
+
+      const teleports = frag as any as TeleportFragment[]
+      const teleport1 = teleports[0]
+      const teleport2 = teleports[1]
+      expect(teleport1.anchor).toBe(container.childNodes[2])
+      expect(teleport2.anchor).toBe(container.childNodes[4])
+
+      expect(teleport1.target).toBe(teleportContainer)
+      expect(teleport1.targetStart).toBe(teleportContainer.childNodes[0])
+      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])
+      expect((teleport2.nodes as Node[])[0]).toBe(
+        teleportContainer.childNodes[5],
+      )
+      expect(teleport2.targetAnchor).toBe(teleportContainer.childNodes[7])
+
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`,
+      )
+
+      // event handler
+      triggerEvent('click', teleportContainer.querySelector('.foo')!)
+      expect(data.value.fn1).toHaveBeenCalled()
+
+      triggerEvent('click', teleportContainer.querySelector('.foo2')!)
+      expect(data.value.fn2).toHaveBeenCalled()
+
+      data.value.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(teleportContainer.innerHTML)).toMatchInlineSnapshot(
+        `"<!--teleport start anchor--><span>bar</span><span class="bar"></span><!--teleport anchor--><!--teleport start anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`,
+      )
+    })
+
+    test('disabled', async () => {})
+
+    test('disabled + as component root', async () => {})
+
+    test('as component root', async () => {})
+
+    test('nested', async () => {})
+
+    test('unmount (full integration)', async () => {})
+
+    test('unmount (mismatch + full integration)', async () => {})
+
+    test('target change (mismatch + full integration)', async () => {})
   })
 
   describe.todo('Suspense')

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

@@ -9,13 +9,7 @@ import {
   warn,
 } from '@vue/runtime-dom'
 import { type Block, type BlockFn, insert, remove } from '../block'
-import {
-  child,
-  createComment,
-  createTextNode,
-  next,
-  querySelector,
-} from '../dom/node'
+import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
   type LooseRawSlots,
@@ -228,19 +222,17 @@ export class TeleportFragment extends VaporFragment {
     ))
     if (target) {
       const disabled = isTeleportDisabled(this.resolvedProps!)
-      const targetNode = (target as TeleportTargetElement)._lpa || child(target)
+      const targetNode =
+        (target as TeleportTargetElement)._lpa || target.firstChild
       if (disabled) {
         this.placeholder = currentHydrationNode!
-        let nextNode = next(this.placeholder)
+        let nextNode = this.placeholder.nextSibling!
         setCurrentHydrationNode(nextNode)
-        while (nextNode && !isComment(nextNode, 'teleport end')) {
-          nextNode = next(nextNode)
-        }
-        this.anchor = nextNode
+        this.anchor = locateTeleportEndAnchor(nextNode)!
         this.targetStart = targetNode
-        this.targetAnchor = targetNode && next(targetNode)
+        this.targetAnchor = targetNode && targetNode.nextSibling!
       } else {
-        this.anchor = next(currentHydrationNode!)
+        this.anchor = locateTeleportEndAnchor()!
         let targetAnchor = targetNode
         while (targetAnchor) {
           if (targetAnchor && targetAnchor.nodeType === 8) {
@@ -249,13 +241,13 @@ export class TeleportFragment extends VaporFragment {
             } else if ((targetAnchor as Comment).data === 'teleport anchor') {
               this.targetAnchor = targetAnchor
               ;(target as TeleportTargetElement)._lpa =
-                this.targetAnchor && next(this.targetAnchor)
+                this.targetAnchor && this.targetAnchor.nextSibling!
               break
             }
           }
-          targetAnchor = next(targetAnchor)
+          targetAnchor = targetAnchor.nextSibling!
         }
-        setCurrentHydrationNode(targetNode && next(targetNode))
+        setCurrentHydrationNode(targetNode && targetNode.nextSibling!)
       }
 
       this.initChildren()
@@ -269,3 +261,15 @@ export function isVaporTeleport(
 ): value is typeof VaporTeleportImpl {
   return value === VaporTeleportImpl
 }
+
+function locateTeleportEndAnchor(
+  node: Node = currentHydrationNode!,
+): Node | null {
+  while (node) {
+    if (isComment(node, 'teleport end')) {
+      return node
+    }
+    node = node.nextSibling as Node
+  }
+  return null
+}