test(hmr): improve #3033 fix description

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

@@ -150,7 +150,11 @@ export class ModuleGraph {
  mod.ssrModule = null
  mod.ssrError = null
 
- // Fix #3033
+ // https://github.com/vitejs/vite/issues/3033
+ // Given b.js -> c.js -> b.js (arrow means top-level import), if c.js self-accepts
+ // and refetches itself, the execution order becomes c.js -> b.js -> c.js. The import
+ // order matters here as it will fail. The workaround for now is to not hmr invalidate
+ // b.js so that c.js refetches the already cached b.js, skipping the import loop.
  if (hmrBoundaries.includes(mod)) {
  return
  }

playground/hmr/__tests__/hmr.spec.ts

@@ -800,11 +800,11 @@ if (import.meta.hot) {
  await untilUpdated(() => el.textContent(), '2')
  })
 
- test('issue-3033', async () => {
- await page.goto(viteTestUrl + '/issue-3033/index.html')
- const el = await page.$('.issue-3033')
+ test('hmr works for self-accepted module within circular imported files', async () => {
+ await page.goto(viteTestUrl + '/self-accept-within-circular/index.html')
+ const el = await page.$('.self-accept-within-circular')
  expect(await el.textContent()).toBe('c')
- editFile('issue-3033/c.js', (code) =>
+ editFile('self-accept-within-circular/c.js', (code) =>
  code.replace(`export const c = 'c'`, `export const c = 'cc'`),
  )
  await untilUpdated(() => el.textContent(), 'cc')

playground/hmr/issue-3033/c.js → playground/hmr/self-accept-within-circular/c.js

@@ -3,7 +3,7 @@ import './b'
 export const c = 'c'
 
 function render(content) {
- document.querySelector('.issue-3033').textContent = content
+ document.querySelector('.self-accept-within-circular').textContent = content
 }
 render(c)
 

playground/hmr/self-accept-within-circular/index.html

@@ -0,0 +1,2 @@
+<script type="module" src="index.js"></script>
+<div class="self-accept-within-circular"></div>