fix(compiler-ssr): fix missing scopeId on server-rendered TransitionG…

…roup (#7557) close #7554
vuejs · Oct 20, 2023 · 61c1357 · 61c1357
1 parent 36c99a9
commit 61c1357
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git 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
@@ -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,14 +60,17 @@ 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(`<`)
       context.pushStringPart(tag.exp!)
       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}>`)