Переглянути джерело

fix(compiler-ssr): handle ssr attr fallthrough when preserve whitespace (#12304)

close #8072
edison 6 місяців тому
батько
коміт
4783118919

+ 25 - 0
packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts

@@ -48,6 +48,31 @@ describe('ssr: attrs fallthrough', () => {
       `)
   })
 
+  //#8072
+  test(`fallthrough component content (with whitespace: 'preserve')`, () => {
+    expect(
+      compile(
+        `
+      <a v-if="to">Foo</a>
+      <a v-else>Bar</a>
+    `,
+        {
+          whitespace: 'preserve',
+        },
+      ).code,
+    ).toMatchInlineSnapshot(`
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.to) {
+            _push(\`<a\${_ssrRenderAttrs(_attrs)}>Foo</a>\`)
+          } else {
+            _push(\`<a\${_ssrRenderAttrs(_attrs)}>Bar</a>\`)
+          }
+        }"
+      `)
+  })
+
   test('should not inject to fallthrough component content if not root', () => {
     expect(compile(`<div/><transition><div/></transition>`).code)
       .toMatchInlineSnapshot(`

+ 2 - 1
packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts

@@ -7,11 +7,12 @@ import {
   type TemplateChildNode,
   createSimpleExpression,
   findDir,
+  isCommentOrWhitespace,
   locStub,
 } from '@vue/compiler-dom'
 
 const filterChild = (node: ParentNode) =>
-  node.children.filter(n => n.type !== NodeTypes.COMMENT)
+  node.children.filter(n => !isCommentOrWhitespace(n))
 
 const hasSingleChild = (node: ParentNode): boolean =>
   filterChild(node).length === 1