test(hmr): improve #3033 fix description (#14645)

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/index.html

@@ -1,2 +0,0 @@
-<script type="module" src="index.js"></script>
-<div class="issue-3033"></div>

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>