From 61c135742795aa5e3189a79c7dec6afa21bbc8d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Fri, 20 Oct 2023 16:21:41 +0800
Subject: [PATCH] fix(compiler-ssr): fix missing scopeId on server-rendered
 TransitionGroup (#7557)

close #7554
---
 .../compiler-ssr/__tests__/ssrScopeId.spec.ts | 44 +++++++++++++++++++
 .../transforms/ssrTransformTransitionGroup.ts | 12 ++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
index 3445a84fda9..1be6a2c180c 100644
--- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -124,4 +124,48 @@ describe('ssr: scopeId', () => {
       }"
     `)
   })
+
+  // #7554
+  test('scopeId is correctly transform to scope attribute of transition-group ', () => {
+    expect(
+      compile(
+        `<transition-group tag="div" class="red"><span>hello</span></transition-group>`,
+        {
+          scopeId,
+          mode: 'module'
+        }
+      ).code
+    ).toMatchInlineSnapshot(`
+      "import { mergeProps as _mergeProps } from \\"vue\\"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+
+      export function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
+      }"
+    `)
+
+    // with dynamic tag
+    expect(
+      compile(
+        `<transition-group :tag="someTag" class="red"><span>hello</span></transition-group>`,
+        {
+          scopeId,
+          mode: 'module'
+        }
+      ).code
+    ).toMatchInlineSnapshot(`
+      "import { mergeProps as _mergeProps } from \\"vue\\"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+
+      export function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<\${
+          _ctx.someTag
+        }\${
+          _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))
+        } data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></\${
+          _ctx.someTag
+        }>\`)
+      }"
+    `)
+  })
 })
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
index 00b0d9dd45a..b0f96e4dd6c 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -18,6 +18,7 @@ const wipMap = new WeakMap<ComponentNode, WIPEntry>()
 interface WIPEntry {
   tag: AttributeNode | DirectiveNode
   propsExp: string | JSChildNode | null
+  scopeId: string | null
 }
 
 // phase 1: build props
@@ -45,7 +46,8 @@ export function ssrTransformTransitionGroup(
       }
       wipMap.set(node, {
         tag,
-        propsExp
+        propsExp,
+        scopeId: context.scopeId || null
       })
     }
   }
@@ -58,7 +60,7 @@ export function ssrProcessTransitionGroup(
 ) {
   const entry = wipMap.get(node)
   if (entry) {
-    const { tag, propsExp } = entry
+    const { tag, propsExp, scopeId } = entry
     if (tag.type === NodeTypes.DIRECTIVE) {
       // dynamic :tag
       context.pushStringPart(`<`)
@@ -66,6 +68,9 @@ export function ssrProcessTransitionGroup(
       if (propsExp) {
         context.pushStringPart(propsExp)
       }
+      if (scopeId) {
+        context.pushStringPart(` ${scopeId}`)
+      }
       context.pushStringPart(`>`)
 
       processChildren(
@@ -89,6 +94,9 @@ export function ssrProcessTransitionGroup(
       if (propsExp) {
         context.pushStringPart(propsExp)
       }
+      if (scopeId) {
+        context.pushStringPart(` ${scopeId}`)
+      }
       context.pushStringPart(`>`)
       processChildren(node, context, false, true)
       context.pushStringPart(`</${tag.value!.content}>`)