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<!---->'
+    )
   })
 })