fix(hmr): don't fallback to full reload if the HTML is imported from JS

Author: sapphi-red

packages/vite/src/node/server/hmr.ts

@@ -690,7 +690,12 @@ export function updateModules(
 
   // html file cannot be hot updated
   const isClientHtmlChange =
-    file.endsWith('.html') && environment.name === 'client'
+    file.endsWith('.html') &&
+    environment.name === 'client' &&
+    // if the html file is imported as a module, we assume that this file is
+    // not used as the template for top-level request response
+    // (i.e. not used by the middleware).
+    modules.every((mod) => mod.type !== 'js')
 
   if (needFullReload || isClientHtmlChange) {
     const reason =

playground/assets/__tests__/assets.spec.ts

@@ -1,4 +1,5 @@
 import path from 'node:path'
+import { stripVTControlCharacters } from 'node:util'
 import { describe, expect, test } from 'vitest'
 import {
   browserLogs,
@@ -463,6 +464,20 @@ test('Unknown extension assets import', async () => {
 
 test('?raw import', async () => {
   expect(await page.textContent('.raw')).toMatch('SVG')
+  expect(await page.textContent('.raw-html')).toBe('<div>partial</div>\n')
+
+  if (isBuild) return
+  editFile('nested/partial.html', (code) =>
+    code.replace('<div>partial</div>', '<div>partial updated</div>'),
+  )
+  await expect
+    .poll(() => page.textContent('.raw-html'))
+    .toBe('<div>partial updated</div>\n')
+  expect(browserLogs).toStrictEqual(
+    expect.arrayContaining([
+      expect.stringContaining('hot updated: /nested/partial.html?raw via'),
+    ]),
+  )
 })
 
 test('?no-inline svg import', async () => {

playground/assets/index.html

@@ -265,6 +265,7 @@ <h2>Unknown extension assets import</h2>
 
 <h2>?raw import</h2>
 <code class="raw"></code>
+<code class="raw-html"></code>
 
 <h2>?no-inline svg import</h2>
 <code class="no-inline-svg"></code>
@@ -546,6 +547,12 @@ <h3>assets in template</h3>
   import rawSvg from './nested/fragment.svg?raw'
   text('.raw', rawSvg)
 
+  import rawHtml from './nested/partial.html?raw'
+  text('.raw-html', rawHtml)
+  import.meta.hot?.accept('./nested/partial.html?raw', (m) => {
+    text('.raw-html', m.default)
+  })
+
   import noInlineSvg from './nested/fragment.svg?no-inline'
   text('.no-inline-svg', noInlineSvg)
 

playground/assets/nested/partial.html

@@ -0,0 +1 @@
+<div>partial</div>