feat(portal): SSR support for multi portal shared target

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

@@ -4,16 +4,15 @@ import { ssrRenderPortal } from '../src/helpers/ssrRenderPortal'
 
 describe('ssrRenderPortal', () => {
   test('portal rendering (compiled)', async () => {
-    const ctx = {
-      portals: {}
-    } as SSRContext
-    await renderToString(
+    const ctx: SSRContext = {}
+    const html = await renderToString(
       createApp({
         data() {
           return { msg: 'hello' }
         },
         ssrRender(_ctx, _push, _parent) {
           ssrRenderPortal(
+            _push,
             _push => {
               _push(`<div>content</div>`)
             },
@@ -24,12 +23,13 @@ describe('ssrRenderPortal', () => {
       }),
       ctx
     )
-    expect(ctx.portals!['#target']).toBe(`<div>content</div>`)
+    expect(html).toBe('<!--portal-->')
+    expect(ctx.portals!['#target']).toBe(`<div>content</div><!---->`)
   })
 
   test('portal rendering (vnode)', async () => {
     const ctx: SSRContext = {}
-    await renderToString(
+    const html = await renderToString(
       h(
         Portal,
         {
@@ -39,6 +39,28 @@ describe('ssrRenderPortal', () => {
       ),
       ctx
     )
-    expect(ctx.portals!['#target']).toBe('<span>hello</span>')
+    expect(html).toBe('<!--portal-->')
+    expect(ctx.portals!['#target']).toBe('<span>hello</span><!---->')
+  })
+
+  test('multiple portals with same target', async () => {
+    const ctx: SSRContext = {}
+    const html = await renderToString(
+      h('div', [
+        h(
+          Portal,
+          {
+            target: `#target`
+          },
+          h('span', 'hello')
+        ),
+        h(Portal, { target: `#target` }, 'world')
+      ]),
+      ctx
+    )
+    expect(html).toBe('<div><!--portal--><!--portal--></div>')
+    expect(ctx.portals!['#target']).toBe(
+      '<span>hello</span><!---->world<!---->'
+    )
   })
 })

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

@@ -2,19 +2,24 @@ import { ComponentInternalInstance, ssrContextKey } from 'vue'
 import { SSRContext, createBuffer, PushFn } from '../renderToString'
 
 export function ssrRenderPortal(
+  parentPush: PushFn,
   contentRenderFn: (push: PushFn) => void,
   target: string,
   parentComponent: ComponentInternalInstance
 ) {
+  parentPush('<!--portal-->')
   const { getBuffer, push } = createBuffer()
-
   contentRenderFn(push)
+  push(`<!---->`) // portal end anchor
 
   const context = parentComponent.appContext.provides[
     ssrContextKey as any
   ] as SSRContext
   const portalBuffers =
     context.__portalBuffers || (context.__portalBuffers = {})
-
-  portalBuffers[target] = getBuffer()
+  if (portalBuffers[target]) {
+    portalBuffers[target].push(getBuffer())
+  } else {
+    portalBuffers[target] = [getBuffer()]
+  }
 }

packages/server-renderer/src/renderToString.ts

@@ -32,6 +32,7 @@ import { compile } from '@vue/compiler-ssr'
 import { ssrRenderAttrs } from './helpers/ssrRenderAttrs'
 import { SSRSlots } from './helpers/ssrRenderSlot'
 import { CompilerError } from '@vue/compiler-dom'
+import { ssrRenderPortal } from './helpers/ssrRenderPortal'
 
 const {
   isVNode,
@@ -63,10 +64,7 @@ export type Props = Record<string, unknown>
 export type SSRContext = {
   [key: string]: any
   portals?: Record<string, string>
-  __portalBuffers?: Record<
-    string,
-    ResolvedSSRBuffer | Promise<ResolvedSSRBuffer>
-  >
+  __portalBuffers?: Record<string, SSRBuffer>
 }
 
 export function createBuffer() {
@@ -259,7 +257,7 @@ function renderVNode(
       } else if (shapeFlag & ShapeFlags.COMPONENT) {
         push(renderComponentVNode(vnode, parentComponent))
       } else if (shapeFlag & ShapeFlags.PORTAL) {
-        renderPortalVNode(vnode, parentComponent)
+        renderPortalVNode(push, vnode, parentComponent)
       } else if (shapeFlag & ShapeFlags.SUSPENSE) {
         renderVNode(
           push,
@@ -363,6 +361,7 @@ function applySSRDirectives(
 }
 
 function renderPortalVNode(
+  push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance
 ) {
@@ -377,20 +376,18 @@ function renderPortalVNode(
     )
     return []
   }
-
-  const { getBuffer, push } = createBuffer()
-  renderVNodeChildren(
+  ssrRenderPortal(
     push,
-    vnode.children as VNodeArrayChildren,
+    push => {
+      renderVNodeChildren(
+        push,
+        vnode.children as VNodeArrayChildren,
+        parentComponent
+      )
+    },
+    target,
     parentComponent
   )
-  const context = parentComponent.appContext.provides[
-    ssrContextKey as any
-  ] as SSRContext
-  const portalBuffers =
-    context.__portalBuffers || (context.__portalBuffers = {})
-
-  portalBuffers[target] = getBuffer()
 }
 
 async function resolvePortals(context: SSRContext) {
@@ -399,7 +396,9 @@ async function resolvePortals(context: SSRContext) {
     for (const key in context.__portalBuffers) {
       // note: it's OK to await sequentially here because the Promises were
       // created eagerly in parallel.
-      context.portals[key] = unrollBuffer(await context.__portalBuffers[key])
+      context.portals[key] = unrollBuffer(
+        await Promise.all(context.__portalBuffers[key])
+      )
     }
   }
 }