From: Evan You <yyx990803@gmail.com>
Date: Thu, 19 May 2022 03:36:29 +0000 (+0800)
Subject: fix(ssr): fix hydration mismatch caused by multi-line comments inside slot
X-Git-Tag: v3.2.34~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e1bc2681ef64aed7975ad38950a478ae53c1abad;p=thirdparty%2Fvuejs%2Fcore.git

fix(ssr): fix hydration mismatch caused by multi-line comments inside slot

fix #5355
---

diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index a68569cacd..baf8f22780 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -49,6 +49,36 @@ describe('ssr: slot', () => {
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
+  test('empty slot (manual comments)', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<div><slot/></div>`
+            }
+          },
+          template: `<one><!--hello--></one>`
+        })
+      )
+    ).toBe(`<div><!--[--><!--]--></div>`)
+  })
+
+  test('empty slot (multi-line comments)', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<div><slot/></div>`
+            }
+          },
+          template: `<one><!--he\nllo--></one>`
+        })
+      )
+    ).toBe(`<div><!--[--><!--]--></div>`)
+  })
+
   test('multiple elements', async () => {
     expect(
       await renderToString(
diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index 9234e51732..8f746ec1e4 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -82,7 +82,7 @@ export function ssrRenderSlotInner(
   }
 }
 
-const commentRE = /<!--.*?-->/g
+const commentRE = /<!--[^]*?-->/gm
 function isComment(item: SSRBufferItem) {
   return (
     typeof item === 'string' &&