From 9f4a39d0015db06c699d8bdd1bdfa5d9ef07acaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Jedli=C4=8Dka?= <adajedlicka@gmail.com>
Date: Thu, 30 Dec 2021 12:13:32 +0100
Subject: [PATCH 1/2] fix(ssr): render teleport inside async component

---
 .../__tests__/ssrTeleport.spec.ts             | 19 ++++++++++++++++++-
 .../server-renderer/src/renderToString.ts     |  4 +++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/server-renderer/__tests__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index fda95918615..d0e82644531 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -2,7 +2,7 @@
  * @jest-environment node
  */
 
-import { createApp, h, Teleport } from 'vue'
+import { createApp, createSSRApp, h, Teleport } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { SSRContext } from '../src/render'
 import { ssrRenderTeleport } from '../src/helpers/ssrRenderTeleport'
@@ -117,4 +117,21 @@ describe('ssrRenderTeleport', () => {
       '<span>hello</span><!---->world<!---->'
     )
   })
+
+  test('teleport inside async component', async () => {
+    const ctx: SSRContext = {}
+    const asyncComponent = {
+      template: '<teleport to="#target"><div>content</div></teleport>',
+      async setup() {}
+    }
+    const html = await renderToString(
+      createSSRApp({
+        template: '<async-component />',
+        components: { asyncComponent }
+      }),
+      ctx
+    )
+    expect(html).toBe('<!--teleport start--><!--teleport end-->')
+    expect(ctx.teleports!['#target']).toBe(`<div>content</div><!---->`)
+  })
 })
diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
index cf6e9759a35..f35ee9d62d9 100644
--- a/packages/server-renderer/src/renderToString.ts
+++ b/packages/server-renderer/src/renderToString.ts
@@ -63,9 +63,11 @@ export async function renderToString(
   input.provide(ssrContextKey, context)
   const buffer = await renderComponentVNode(vnode)
 
+  const result = await unrollBuffer(buffer as SSRBuffer)
+
   await resolveTeleports(context)
 
-  return unrollBuffer(buffer as SSRBuffer)
+  return result
 }
 
 async function resolveTeleports(context: SSRContext) {

From fcbe919f645c00ff705c9d87ff9b55daa976c845 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 13 May 2022 03:53:55 -0400
Subject: [PATCH 2/2] Update ssrTeleport.spec.ts

---
 packages/server-renderer/__tests__/ssrTeleport.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/server-renderer/__tests__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index d0e82644531..f26c903584a 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -2,7 +2,7 @@
  * @jest-environment node
  */
 
-import { createApp, createSSRApp, h, Teleport } from 'vue'
+import { createApp, h, Teleport } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { SSRContext } from '../src/render'
 import { ssrRenderTeleport } from '../src/helpers/ssrRenderTeleport'
@@ -125,7 +125,7 @@ describe('ssrRenderTeleport', () => {
       async setup() {}
     }
     const html = await renderToString(
-      createSSRApp({
+      h({
         template: '<async-component />',
         components: { asyncComponent }
       }),