fix(compiler-ssr): only inject fallthrough attrs for root transition/keep-alive

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index d830e716a219c1275b5be515b59b6ea2d837ad36..672af193e92c4a4302dd4752ae1cd96d6b9cf092 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -290,6 +290,25 @@ describe('ssr: components', () => {
         }"
       `)
 
+      // should inject attrs if root with coomments
+      expect(compile(`<!--root--><transition><div/></transition>`).code)
+        .toMatchInlineSnapshot(`
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
+        }"
+      `)
+
+      // should not inject attrs if not root
+      expect(compile(`<div/><transition><div/></transition>`).code)
+        .toMatchInlineSnapshot(`
+        "
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[--><div></div><div></div><!--]-->\`)
+        }"
+      `)
+
       expect(compile(`<keep-alive><foo/></keep-alive>`).code)
         .toMatchInlineSnapshot(`
         "const { resolveComponent: _resolveComponent } = require(\\"vue\\")

diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index b368fd2ec92330eb08846a09e078ce39ade3d4ce..79ab24eccd7aa5d8e26039bdd6759585640a35cd 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -11,8 +11,11 @@ import {
   isBuiltInType
 } from '@vue/compiler-dom'
 
+const filterChild = (node: ParentNode) =>
+  node.children.filter(n => n.type !== NodeTypes.COMMENT)
+
 const hasSingleChild = (node: ParentNode): boolean =>
-  node.children.filter(n => n.type !== NodeTypes.COMMENT).length === 1
+  filterChild(node).length === 1
 
 export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
   // _attrs is provided as a function argument.
@@ -28,10 +31,13 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
     (isBuiltInType(node.tag, 'Transition') ||
       isBuiltInType(node.tag, 'KeepAlive'))
   ) {
-    if (hasSingleChild(node)) {
-      injectFallthroughAttrs(node.children[0])
+    const rootChildren = filterChild(context.root)
+    if (rootChildren.length === 1 && rootChildren[0] === node) {
+      if (hasSingleChild(node)) {
+        injectFallthroughAttrs(node.children[0])
+      }
+      return
     }
-    return
   }
 
   const parent = context.parent