From 4ecb4a70bc639f8c8d90ed352ce5f0f1e873807f Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Mon, 16 Oct 2023 17:43:33 +0800
Subject: [PATCH] test(hmr): improve #3033 fix description

---
 packages/vite/src/node/server/moduleGraph.ts              | 6 +++++-
 playground/hmr/__tests__/hmr.spec.ts                      | 8 ++++----
 playground/hmr/issue-3033/index.html                      | 2 --
 .../hmr/{issue-3033 => self-accept-within-circular}/a.js  | 0
 .../hmr/{issue-3033 => self-accept-within-circular}/b.js  | 0
 .../hmr/{issue-3033 => self-accept-within-circular}/c.js  | 2 +-
 playground/hmr/self-accept-within-circular/index.html     | 2 ++
 .../{issue-3033 => self-accept-within-circular}/index.js  | 0
 8 files changed, 12 insertions(+), 8 deletions(-)
 delete mode 100644 playground/hmr/issue-3033/index.html
 rename playground/hmr/{issue-3033 => self-accept-within-circular}/a.js (100%)
 rename playground/hmr/{issue-3033 => self-accept-within-circular}/b.js (100%)
 rename playground/hmr/{issue-3033 => self-accept-within-circular}/c.js (64%)
 create mode 100644 playground/hmr/self-accept-within-circular/index.html
 rename playground/hmr/{issue-3033 => self-accept-within-circular}/index.js (100%)

diff --git a/packages/vite/src/node/server/moduleGraph.ts b/packages/vite/src/node/server/moduleGraph.ts
index 18e0c39c56c735..888f8d72d35fcf 100644
--- a/packages/vite/src/node/server/moduleGraph.ts
+++ b/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
     }
diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
index ed779bbc3099ac..4c6caf5ab9271e 100644
--- a/playground/hmr/__tests__/hmr.spec.ts
+++ b/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')
diff --git a/playground/hmr/issue-3033/index.html b/playground/hmr/issue-3033/index.html
deleted file mode 100644
index aa40111b26c214..00000000000000
--- a/playground/hmr/issue-3033/index.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<script type="module" src="index.js"></script>
-<div class="issue-3033"></div>
diff --git a/playground/hmr/issue-3033/a.js b/playground/hmr/self-accept-within-circular/a.js
similarity index 100%
rename from playground/hmr/issue-3033/a.js
rename to playground/hmr/self-accept-within-circular/a.js
diff --git a/playground/hmr/issue-3033/b.js b/playground/hmr/self-accept-within-circular/b.js
similarity index 100%
rename from playground/hmr/issue-3033/b.js
rename to playground/hmr/self-accept-within-circular/b.js
diff --git a/playground/hmr/issue-3033/c.js b/playground/hmr/self-accept-within-circular/c.js
similarity index 64%
rename from playground/hmr/issue-3033/c.js
rename to playground/hmr/self-accept-within-circular/c.js
index 18ebe62aa9f0a7..2d0599a3836a43 100644
--- a/playground/hmr/issue-3033/c.js
+++ b/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)
 
diff --git a/playground/hmr/self-accept-within-circular/index.html b/playground/hmr/self-accept-within-circular/index.html
new file mode 100644
index 00000000000000..a15fe3cec6541c
--- /dev/null
+++ b/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>
diff --git a/playground/hmr/issue-3033/index.js b/playground/hmr/self-accept-within-circular/index.js
similarity index 100%
rename from playground/hmr/issue-3033/index.js
rename to playground/hmr/self-accept-within-circular/index.js