fix(ssr): fix ssr scopeId on component root

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

@@ -12,7 +12,7 @@ import {
 } from 'vue'
 import { escapeHtml, mockWarn } from '@vue/shared'
 import { renderToString } from '../src/renderToString'
-import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
+import { ssrRenderSlot, SSRSlot } from '../src/helpers/ssrRenderSlot'
 import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent'
 
 mockWarn()
@@ -222,9 +222,9 @@ describe('ssr: renderToString', () => {
                   { msg: 'hello' },
                   {
                     // optimized slot using string push
-                    default: ({ msg }: any, push: any, _p: any) => {
+                    default: (({ msg }, push, _p) => {
                       push(`<span>${msg}</span>`)
-                    },
+                    }) as SSRSlot,
                     // important to avoid slots being normalized
                     _: 1 as any
                   },

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

@@ -0,0 +1,62 @@
+import { createApp, withScopeId } from 'vue'
+import { renderToString } from '../src/renderToString'
+import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
+
+describe('ssr: scoped id on component root', () => {
+  test('basic', async () => {
+    const withParentId = withScopeId('parent')
+
+    const Child = {
+      ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
+        push(`<div${ssrRenderAttrs(attrs)}></div>`)
+      }
+    }
+
+    const Comp = {
+      ssrRender: withParentId((ctx: any, push: any, parent: any) => {
+        push(ssrRenderComponent(Child), null, null, parent)
+      })
+    }
+
+    const result = await renderToString(createApp(Comp))
+    expect(result).toBe(`<div parent></div>`)
+  })
+
+  test('inside slot', async () => {
+    const withParentId = withScopeId('parent')
+
+    const Child = {
+      ssrRender: (_: any, push: any, _parent: any, attrs: any) => {
+        push(`<div${ssrRenderAttrs(attrs)} child></div>`)
+      }
+    }
+
+    const Wrapper = {
+      __scopeId: 'wrapper',
+      ssrRender: (ctx: any, push: any, parent: any) => {
+        ssrRenderSlot(ctx.$slots, 'default', {}, null, push, parent)
+      }
+    }
+
+    const Comp = {
+      ssrRender: withParentId((_: any, push: any, parent: any) => {
+        push(
+          ssrRenderComponent(
+            Wrapper,
+            null,
+            {
+              default: withParentId((_: any, push: any, parent: any) => {
+                push(ssrRenderComponent(Child, null, null, parent))
+              }),
+              _: 1
+            } as any,
+            parent
+          )
+        )
+      })
+    }
+
+    const result = await renderToString(createApp(Comp))
+    expect(result).toBe(`<!--[--><div parent wrapper-s child></div><!--]-->`)
+  })
+})