fix(ssr): support resolve tag name from _attrs in transition group rendering

Author: edison1105

packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts

@@ -11,11 +11,17 @@ describe('transition-group', () => {
       "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_attrs.tag) {
+          _push(\`<\${_attrs.tag}>\`)
+        }
         _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
           _push(\`<div></div>\`)
         })
         _push(\`<!--]-->\`)
+        if (_attrs.tag) {
+          _push(\`</\${_attrs.tag}>\`)
+        }
       }"
     `)
   })
@@ -114,6 +120,9 @@ describe('transition-group', () => {
       "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
+        if (_attrs.tag) {
+          _push(\`<\${_attrs.tag}>\`)
+        }
         _push(\`<!--[-->\`)
         _ssrRenderList(10, (i) => {
           _push(\`<div></div>\`)
@@ -125,6 +134,9 @@ describe('transition-group', () => {
           _push(\`<div>ok</div>\`)
         }
         _push(\`<!--]-->\`)
+        if (_attrs.tag) {
+          _push(\`</\${_attrs.tag}>\`)
+        }
       }"
     `)
   })

packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts

@@ -6,7 +6,10 @@ import {
   NodeTypes,
   type TransformContext,
   buildProps,
+  createBlockStatement,
   createCallExpression,
+  createIfStatement,
+  createSimpleExpression,
   findProp,
 } from '@vue/compiler-dom'
 import { SSR_RENDER_ATTRS } from '../runtimeHelpers'
@@ -112,7 +115,37 @@ export function ssrProcessTransitionGroup(
       context.pushStringPart(`</${tag.value!.content}>`)
     }
   } else {
+    // #12827 _attrs fallthrough may contain tag property
+    const hasFallthroughAttrs = node.props.some(
+      p =>
+        p.type === NodeTypes.DIRECTIVE &&
+        p.name === 'bind' &&
+        p.exp &&
+        p.exp.type === NodeTypes.SIMPLE_EXPRESSION &&
+        p.exp.content === '_attrs',
+    )
+    if (hasFallthroughAttrs) {
+      context.pushStatement(
+        createIfStatement(
+          createSimpleExpression('_attrs.tag'),
+          createBlockStatement([
+            createSimpleExpression('_push(`<${_attrs.tag}>`)'),
+          ]),
+        ),
+      )
+    }
     // fragment
     processChildren(node, context, true, true, true)
+
+    if (hasFallthroughAttrs) {
+      context.pushStatement(
+        createIfStatement(
+          createSimpleExpression('_attrs.tag'),
+          createBlockStatement([
+            createSimpleExpression('_push(`</${_attrs.tag}>`)'),
+          ]),
+        ),
+      )
+    }
   }
 }