Przeglądaj źródła

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

fix #5355
Evan You 3 lat temu
rodzic
commit
e1bc2681ef

+ 30 - 0
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(

+ 1 - 1
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' &&