feat(portal): SSR support for portal disabled prop

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

@@ -17,16 +17,42 @@ describe('ssrRenderPortal', () => {
               _push(`<div>content</div>`)
             },
             '#target',
+            false,
             _parent
           )
         }
       }),
       ctx
     )
-    expect(html).toBe('<!--portal-->')
+    expect(html).toBe('<!--portal start--><!--portal end-->')
     expect(ctx.portals!['#target']).toBe(`<div>content</div><!---->`)
   })
 
+  test('portal rendering (compiled + disabled)', async () => {
+    const ctx: SSRContext = {}
+    const html = await renderToString(
+      createApp({
+        data() {
+          return { msg: 'hello' }
+        },
+        ssrRender(_ctx, _push, _parent) {
+          ssrRenderPortal(
+            _push,
+            _push => {
+              _push(`<div>content</div>`)
+            },
+            '#target',
+            true,
+            _parent
+          )
+        }
+      }),
+      ctx
+    )
+    expect(html).toBe('<!--portal start--><div>content</div><!--portal end-->')
+    expect(ctx.portals!['#target']).toBe(`<!---->`)
+  })
+
   test('portal rendering (vnode)', async () => {
     const ctx: SSRContext = {}
     const html = await renderToString(
@@ -39,10 +65,27 @@ describe('ssrRenderPortal', () => {
       ),
       ctx
     )
-    expect(html).toBe('<!--portal-->')
+    expect(html).toBe('<!--portal start--><!--portal end-->')
     expect(ctx.portals!['#target']).toBe('<span>hello</span><!---->')
   })
 
+  test('portal rendering (vnode + disabled)', async () => {
+    const ctx: SSRContext = {}
+    const html = await renderToString(
+      h(
+        Portal,
+        {
+          target: `#target`,
+          disabled: true
+        },
+        h('span', 'hello')
+      ),
+      ctx
+    )
+    expect(html).toBe('<!--portal start--><span>hello</span><!--portal end-->')
+    expect(ctx.portals!['#target']).toBe(`<!---->`)
+  })
+
   test('multiple portals with same target', async () => {
     const ctx: SSRContext = {}
     const html = await renderToString(
@@ -58,7 +101,9 @@ describe('ssrRenderPortal', () => {
       ]),
       ctx
     )
-    expect(html).toBe('<div><!--portal--><!--portal--></div>')
+    expect(html).toBe(
+      '<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>'
+    )
     expect(ctx.portals!['#target']).toBe(
       '<span>hello</span><!---->world<!---->'
     )

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

@@ -1,16 +1,31 @@
 import { ComponentInternalInstance, ssrContextKey } from 'vue'
-import { SSRContext, createBuffer, PushFn } from '../renderToString'
+import {
+  SSRContext,
+  createBuffer,
+  PushFn,
+  SSRBufferItem
+} from '../renderToString'
 
 export function ssrRenderPortal(
   parentPush: PushFn,
   contentRenderFn: (push: PushFn) => void,
   target: string,
+  disabled: boolean,
   parentComponent: ComponentInternalInstance
 ) {
-  parentPush('<!--portal-->')
-  const { getBuffer, push } = createBuffer()
-  contentRenderFn(push)
-  push(`<!---->`) // portal end anchor
+  parentPush('<!--portal start-->')
+
+  let portalContent: SSRBufferItem
+
+  if (disabled) {
+    contentRenderFn(parentPush)
+    portalContent = `<!---->`
+  } else {
+    const { getBuffer, push } = createBuffer()
+    contentRenderFn(push)
+    push(`<!---->`) // portal end anchor
+    portalContent = getBuffer()
+  }
 
   const context = parentComponent.appContext.provides[
     ssrContextKey as any
@@ -18,8 +33,10 @@ export function ssrRenderPortal(
   const portalBuffers =
     context.__portalBuffers || (context.__portalBuffers = {})
   if (portalBuffers[target]) {
-    portalBuffers[target].push(getBuffer())
+    portalBuffers[target].push(portalContent)
   } else {
-    portalBuffers[target] = [getBuffer()]
+    portalBuffers[target] = [portalContent]
   }
+
+  parentPush('<!--portal end-->')
 }

packages/server-renderer/src/renderToString.ts

@@ -366,6 +366,7 @@ function renderPortalVNode(
   parentComponent: ComponentInternalInstance
 ) {
   const target = vnode.props && vnode.props.target
+  const disabled = vnode.props && vnode.props.disabled
   if (!target) {
     warn(`[@vue/server-renderer] Portal is missing target prop.`)
     return []
@@ -386,6 +387,7 @@ function renderPortalVNode(
       )
     },
     target,
+    disabled || disabled === '',
     parentComponent
   )
 }