fix(compiler-ssr): fix missing scopeId on server-rendered TransitionGroup (#7557)

close #7554

diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
index 3445a84fda91d981a707f56da26064760aedeed5..1be6a2c180c5926b3ff9727e872c8b3aa42eb70d 100644 (file)
--- 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 00b0d9dd45a11c8df41f71f6faf1fdd8f31b4be6..b0f96e4dd6c781b3e3b71da21df6fec0f5625f7a 100644 (file)
--- 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}>`)