fix(ssr/teleport): support nested teleports in ssr

fix #5242

packages/server-renderer/__tests__/ssrTeleport.spec.ts

@@ -31,7 +31,9 @@ describe('ssrRenderTeleport', () => {
       ctx
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
-    expect(ctx.teleports!['#target']).toBe(`<div>content</div><!---->`)
+    expect(ctx.teleports!['#target']).toBe(
+      `<div>content</div><!--teleport anchor-->`
+    )
   })
 
   test('teleport rendering (compiled + disabled)', async () => {
@@ -58,7 +60,7 @@ describe('ssrRenderTeleport', () => {
     expect(html).toBe(
       '<!--teleport start--><div>content</div><!--teleport end-->'
     )
-    expect(ctx.teleports!['#target']).toBe(`<!---->`)
+    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
 
   test('teleport rendering (vnode)', async () => {
@@ -74,7 +76,9 @@ describe('ssrRenderTeleport', () => {
       ctx
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
-    expect(ctx.teleports!['#target']).toBe('<span>hello</span><!---->')
+    expect(ctx.teleports!['#target']).toBe(
+      '<span>hello</span><!--teleport anchor-->'
+    )
   })
 
   test('teleport rendering (vnode + disabled)', async () => {
@@ -93,7 +97,7 @@ describe('ssrRenderTeleport', () => {
     expect(html).toBe(
       '<!--teleport start--><span>hello</span><!--teleport end-->'
     )
-    expect(ctx.teleports!['#target']).toBe(`<!---->`)
+    expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
 
   test('multiple teleports with same target', async () => {
@@ -115,7 +119,7 @@ describe('ssrRenderTeleport', () => {
       '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>'
     )
     expect(ctx.teleports!['#target']).toBe(
-      '<span>hello</span><!---->world<!---->'
+      '<span>hello</span><!--teleport anchor-->world<!--teleport anchor-->'
     )
   })
 
@@ -133,7 +137,9 @@ describe('ssrRenderTeleport', () => {
       ctx
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
-    expect(ctx.teleports!['#target']).toBe(`<div>content</div><!---->`)
+    expect(ctx.teleports!['#target']).toBe(
+      `<div>content</div><!--teleport anchor-->`
+    )
   })
 
   test('teleport inside async component (stream)', async () => {
@@ -166,6 +172,8 @@ describe('ssrRenderTeleport', () => {
     )
     await p
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
-    expect(ctx.teleports!['#target']).toBe(`<div>content</div><!---->`)
+    expect(ctx.teleports!['#target']).toBe(
+      `<div>content</div><!--teleport anchor-->`
+    )
   })
 })

packages/server-renderer/src/helpers/ssrRenderTeleport.ts

@@ -10,28 +10,28 @@ export function ssrRenderTeleport(
 ) {
   parentPush('<!--teleport start-->')
 
-  let teleportContent: SSRBufferItem
-
-  if (disabled) {
-    contentRenderFn(parentPush)
-    teleportContent = `<!---->`
-  } else {
-    const { getBuffer, push } = createBuffer()
-    contentRenderFn(push)
-    push(`<!---->`) // teleport end anchor
-    teleportContent = getBuffer()
-  }
-
   const context = parentComponent.appContext.provides[
     ssrContextKey as any
   ] as SSRContext
   const teleportBuffers =
     context.__teleportBuffers || (context.__teleportBuffers = {})
-  if (teleportBuffers[target]) {
-    teleportBuffers[target].push(teleportContent)
+  const targetBuffer = teleportBuffers[target] || (teleportBuffers[target] = [])
+  // record current index of the target buffer to handle nested teleports
+  // since the parent needs to be rendered before the child
+  const bufferIndex = targetBuffer.length
+
+  let teleportContent: SSRBufferItem
+
+  if (disabled) {
+    contentRenderFn(parentPush)
+    teleportContent = `<!--teleport anchor-->`
   } else {
-    teleportBuffers[target] = [teleportContent]
+    const { getBuffer, push } = createBuffer()
+    contentRenderFn(push)
+    push(`<!--teleport anchor-->`)
+    teleportContent = getBuffer()
   }
 
+  targetBuffer.splice(bufferIndex, 0, teleportContent)
   parentPush('<!--teleport end-->')
 }