]> git.ipfire.org Git - thirdparty/vuejs/core.git/commitdiff
fix(ssr): fix hydration mismatch caused by multi-line comments inside slot
authorEvan You <yyx990803@gmail.com>
Thu, 19 May 2022 03:36:29 +0000 (11:36 +0800)
committerEvan You <yyx990803@gmail.com>
Thu, 19 May 2022 03:36:31 +0000 (11:36 +0800)
fix #5355

packages/server-renderer/__tests__/ssrSlot.spec.ts
packages/server-renderer/src/helpers/ssrRenderSlot.ts

index a68569cacdfc4db4587db12899e7c52d9ddaaa8f..baf8f227806b33b67d74c312dcbee3b81c8cfaf6 100644 (file)
@@ -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(
index 9234e51732581b51cfc8a9da4656e37758d0a9f9..8f746ec1e471fcdf34c41d914cf167009dc88683 100644 (file)
@@ -82,7 +82,7 @@ export function ssrRenderSlotInner(
   }
 }
 
-const commentRE = /<!--.*?-->/g
+const commentRE = /<!--[^]*?-->/gm
 function isComment(item: SSRBufferItem) {
   return (
     typeof item === 'string' &&