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

…keep-alive
vuejs · May 18, 2022 · c65b805 · c65b805
1 parent c03459b
commit c65b805
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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