From 9f6f8b35c1fdfa5b76b834673e2f991c5fa7c9c5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 22 Jun 2021 14:19:14 -0400
Subject: [PATCH] fix(compiler-ssr): fix attr fallthrough for
 transition/keep-alive as template root

fix #3981
---
 .../compiler-ssr/__tests__/ssrComponent.spec.ts   |  7 ++++---
 .../src/transforms/ssrInjectFallthroughAttrs.ts   | 15 ++++++++++++++-
 .../src/transforms/ssrTransformComponent.ts       |  3 ++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index ed4ce384966..fe16096c102 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -269,9 +269,10 @@ describe('ssr: components', () => {
     test('built-in fallthroughs', () => {
       expect(compile(`<transition><div/></transition>`).code)
         .toMatchInlineSnapshot(`
-        "
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _push(\`<div></div>\`)
+          _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
         }"
       `)
 
@@ -283,7 +284,7 @@ describe('ssr: components', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           const _component_foo = _resolveComponent(\\"foo\\")
 
-          _push(_ssrRenderComponent(_component_foo, null, null, _parent))
+          _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
         }"
       `)
     })
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index 01ca66f50f5..b368fd2ec92 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -7,7 +7,8 @@ import {
   RootNode,
   TemplateChildNode,
   ParentNode,
-  findDir
+  findDir,
+  isBuiltInType
 } from '@vue/compiler-dom'
 
 const hasSingleChild = (node: ParentNode): boolean =>
@@ -21,6 +22,18 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
     context.identifiers._attrs = 1
   }
 
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    node.tagType === ElementTypes.COMPONENT &&
+    (isBuiltInType(node.tag, 'Transition') ||
+      isBuiltInType(node.tag, 'KeepAlive'))
+  ) {
+    if (hasSingleChild(node)) {
+      injectFallthroughAttrs(node.children[0])
+    }
+    return
+  }
+
   const parent = context.parent
   if (!parent || parent.type !== NodeTypes.ROOT) {
     return
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index bcfc7a1e687..312ffb7179b 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -180,7 +180,8 @@ export function ssrProcessComponent(
     } else if (component === TRANSITION_GROUP) {
       return ssrProcessTransitionGroup(node, context)
     } else {
-      // real fall-through (e.g. KeepAlive): just render its children.
+      // real fall-through: Transition / KeepAlive
+      // just render its children.
       processChildren(node.children, context)
     }
   } else {