Update refresh utils for Remix support (#191)

Author: ArnaudBarre

playground/hmr/__tests__/hmr.spec.ts

@@ -35,7 +35,7 @@ test("HMR invalidate", async ({ page }) => {
   // Edit export
   editFile("src/TitleWithExport.tsx", ["React", "React!"]);
   await waitForLogs(
-    "[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports",
+    '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh ("framework" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports',
     "[vite] hot updated: /src/App.tsx",
   );
   await expect(page.locator("h1")).toHaveText("Vite * React!");

src/index.ts

@@ -162,7 +162,7 @@ RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
   RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
   import.meta.hot.accept((nextExports) => {
     if (!nextExports) return;
-    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate("${id}", currentExports, nextExports);
     if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
   });
 });

src/refresh-runtime.js

@@ -581,41 +581,64 @@ function debounce(fn, delay) {
   };
 }
 
-const enqueueUpdate = debounce(performReactRefresh, 16);
+const hooks = [];
+window.__registerBeforePerformReactRefresh = (cb) => {
+  hooks.push(cb);
+};
+const enqueueUpdate = debounce(async () => {
+  if (hooks.length) await Promise.all(hooks.map((cb) => cb()));
+  performReactRefresh();
+}, 16);
 
 export function validateRefreshBoundaryAndEnqueueUpdate(
+  id,
   prevExports,
   nextExports,
 ) {
-  if (!predicateOnExport(prevExports, (key) => key in nextExports)) {
+  const ignoredExports = window.__getReactRefreshIgnoredExports?.({ id }) ?? [];
+  if (
+    predicateOnExport(
+      ignoredExports,
+      prevExports,
+      (key) => key in nextExports,
+    ) !== true
+  ) {
     return "Could not Fast Refresh (export removed)";
   }
-  if (!predicateOnExport(nextExports, (key) => key in prevExports)) {
+  if (
+    predicateOnExport(
+      ignoredExports,
+      nextExports,
+      (key) => key in prevExports,
+    ) !== true
+  ) {
     return "Could not Fast Refresh (new export)";
   }
 
   let hasExports = false;
   const allExportsAreComponentsOrUnchanged = predicateOnExport(
+    ignoredExports,
     nextExports,
     (key, value) => {
       hasExports = true;
       if (isLikelyComponentType(value)) return true;
       return prevExports[key] === nextExports[key];
     },
   );
-  if (hasExports && allExportsAreComponentsOrUnchanged) {
+  if (hasExports && allExportsAreComponentsOrUnchanged === true) {
     enqueueUpdate();
   } else {
-    return "Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports";
+    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports`;
   }
 }
 
-function predicateOnExport(moduleExports, predicate) {
+function predicateOnExport(ignoredExports, moduleExports, predicate) {
   for (const key in moduleExports) {
     if (key === "__esModule") continue;
+    if (ignoredExports.includes(key)) continue;
     const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
-    if (desc && desc.get) return false;
-    if (!predicate(key, moduleExports[key])) return false;
+    if (desc && desc.get) return key;
+    if (!predicate(key, moduleExports[key])) return key;
   }
   return true;
 }