diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts index d830e716a21..672af193e92 100644 --- 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(`
`).code) + .toMatchInlineSnapshot(` + "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") + + return function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`
\`) + }" + `) + + // should not inject attrs if not root + expect(compile(`
`).code) + .toMatchInlineSnapshot(` + " + return function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`
\`) + }" + `) + expect(compile(``).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 b368fd2ec92..79ab24eccd7 100644 --- 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