fix: preserve html comments during dev

fix #1420
vitejs · Jan 7, 2021 · b295400 · b295400
1 parent b58c860
commit b295400
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts
@@ -63,6 +63,12 @@ function testPage(isNested: boolean) {
 
 describe('main', () => {
   testPage(false)
+
+  test('preserve comments', async () => {
+    const html = await page.innerHTML('body')
+    expect(html).toMatch(`<!-- comment one -->`)
+    expect(html).toMatch(`<!-- comment two -->`)
+  })
 })
 
 describe('nested', () => {

diff --git a/packages/playground/html/index.html b/packages/playground/html/index.html
@@ -1,5 +1,7 @@
 <link rel="stylesheet" href="./main.css">
 
+<!-- comment one -->
 <h1>Hello</h1>
+<!-- comment two -->
 
 <script type="module" src="./main.js"></script>
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -15,8 +15,13 @@ import { CLIENT_PUBLIC_PATH, FS_PREFIX } from '../../constants'
 
 const devHtmlHook: IndexHtmlTransformHook = (html, { path }) => {
   let index = -1
+  const comments: string[] = []
+
   html = html
-    .replace(htmlCommentRE, '')
+    .replace(htmlCommentRE, (m) => {
+      comments.push(m)
+      return `<!--VITE_COMMENT_${comments.length - 1}-->`
+    })
     .replace(scriptRE, (_match, _openTag, script) => {
       index++
       if (script) {
@@ -25,6 +30,7 @@ const devHtmlHook: IndexHtmlTransformHook = (html, { path }) => {
       }
       return _match
     })
+    .replace(/<!--VITE_COMMENT_(\d+)-->/g, (_, i) => comments[i])
 
   return {
     html,