@vitejs/plugin-react 3.0.0 → 3.1.0-beta.0

package/README.md

@@ -105,3 +105,11 @@ Otherwise, you'll probably get this error:
 ```
 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
 ```
+
+## Consistent components exports
+
+For React refresh to work correctly, your file should only export React components. You can find a good explanation in the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).
+
+If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
+
+You can catch mistakes and get more detailed warning with this [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh).

package/dist/index.cjs

@@ -32,14 +32,7 @@ const runtimeFilePath = path.join(
 const runtimeCode = `
 const exports = {}
 ${fs.readFileSync(runtimeFilePath, "utf-8")}
-function debounce(fn, delay) {
-  let handle
-  return () => {
-    clearTimeout(handle)
-    handle = setTimeout(fn, delay)
-  }
-}
-exports.performReactRefresh = debounce(exports.performReactRefresh, 16)
+${fs.readFileSync(_require.resolve("./refreshUtils.js"), "utf-8")}
 export default exports
 `;
 const preambleCode = `
@@ -70,59 +63,26 @@ if (import.meta.hot) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
-const timeout = `
-  if (!window.__vite_plugin_react_timeout) {
-    window.__vite_plugin_react_timeout = setTimeout(() => {
-      window.__vite_plugin_react_timeout = 0;
-      RefreshRuntime.performReactRefresh();
-    }, 30);
-  }
-`;
-const checkAndAccept = `
-function isReactRefreshBoundary(mod) {
-  if (mod == null || typeof mod !== 'object') {
-    return false;
-  }
-  let hasExports = false;
-  let areAllExportsComponents = true;
-  for (const exportName in mod) {
-    hasExports = true;
-    if (exportName === '__esModule') {
-      continue;
-    }
-    const desc = Object.getOwnPropertyDescriptor(mod, exportName);
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
-      return false;
-    }
-    const exportValue = mod[exportName];
-    if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
-      areAllExportsComponents = false;
-    }
-  }
-  return hasExports && areAllExportsComponents;
-}
-
-import.meta.hot.accept(mod => {
-  if (isReactRefreshBoundary(mod)) {
-    ${timeout}
-  } else {
-    import.meta.hot.invalidate();
-  }
-});
-`;
 const footer = `
 if (import.meta.hot) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 
-  ${checkAndAccept}
+  import(/* @vite-ignore */ import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
+  });
 }`;
 function addRefreshWrapper(code, id) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer;
+  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
 }
 
 const prependReactImportCode = "import React from 'react'; ";
+const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 function viteReact(opts = {}) {
   let devBase = "/";
   let filter = vite.createFilter(opts.include, opts.exclude);
@@ -269,6 +229,9 @@ function viteReact(opts = {}) {
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
           "importMeta",
+          // This plugin is applied before esbuild transforms the code,
+          // so we need to enable some stage 3 syntax that is supported in
+          // TypeScript and some environments already.
           "topLevelAwait",
           "classProperties",
           "classPrivateProperties",
@@ -297,11 +260,12 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
+          // Vite handles sourcemap flattening
           inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;
-          if (useFastRefresh && /\$RefreshReg\$\(/.test(code2)) {
+          if (useFastRefresh && refreshContentRE.test(code2)) {
             code2 = addRefreshWrapper(code2, id);
           }
           return {
@@ -351,6 +315,9 @@ function viteReact(opts = {}) {
     config() {
       return {
         optimizeDeps: {
+          // We can't add `react-dom` because the dependency is `react-dom/client`
+          // for React 18 while it's `react-dom` for React 17. We'd need to detect
+          // what React version the user has installed.
           include: [reactJsxRuntimeId, reactJsxDevRuntimeId, "react"]
         }
       };

package/dist/index.mjs

@@ -17,14 +17,7 @@ const runtimeFilePath = path.join(
 const runtimeCode = `
 const exports = {}
 ${fs.readFileSync(runtimeFilePath, "utf-8")}
-function debounce(fn, delay) {
-  let handle
-  return () => {
-    clearTimeout(handle)
-    handle = setTimeout(fn, delay)
-  }
-}
-exports.performReactRefresh = debounce(exports.performReactRefresh, 16)
+${fs.readFileSync(_require.resolve("./refreshUtils.js"), "utf-8")}
 export default exports
 `;
 const preambleCode = `
@@ -55,59 +48,26 @@ if (import.meta.hot) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
-const timeout = `
-  if (!window.__vite_plugin_react_timeout) {
-    window.__vite_plugin_react_timeout = setTimeout(() => {
-      window.__vite_plugin_react_timeout = 0;
-      RefreshRuntime.performReactRefresh();
-    }, 30);
-  }
-`;
-const checkAndAccept = `
-function isReactRefreshBoundary(mod) {
-  if (mod == null || typeof mod !== 'object') {
-    return false;
-  }
-  let hasExports = false;
-  let areAllExportsComponents = true;
-  for (const exportName in mod) {
-    hasExports = true;
-    if (exportName === '__esModule') {
-      continue;
-    }
-    const desc = Object.getOwnPropertyDescriptor(mod, exportName);
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
-      return false;
-    }
-    const exportValue = mod[exportName];
-    if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
-      areAllExportsComponents = false;
-    }
-  }
-  return hasExports && areAllExportsComponents;
-}
-
-import.meta.hot.accept(mod => {
-  if (isReactRefreshBoundary(mod)) {
-    ${timeout}
-  } else {
-    import.meta.hot.invalidate();
-  }
-});
-`;
 const footer = `
 if (import.meta.hot) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 
-  ${checkAndAccept}
+  import(/* @vite-ignore */ import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
+  });
 }`;
 function addRefreshWrapper(code, id) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer;
+  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
 }
 
 const prependReactImportCode = "import React from 'react'; ";
+const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 function viteReact(opts = {}) {
   let devBase = "/";
   let filter = createFilter(opts.include, opts.exclude);
@@ -254,6 +214,9 @@ function viteReact(opts = {}) {
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
           "importMeta",
+          // This plugin is applied before esbuild transforms the code,
+          // so we need to enable some stage 3 syntax that is supported in
+          // TypeScript and some environments already.
           "topLevelAwait",
           "classProperties",
           "classPrivateProperties",
@@ -282,11 +245,12 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
+          // Vite handles sourcemap flattening
           inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;
-          if (useFastRefresh && /\$RefreshReg\$\(/.test(code2)) {
+          if (useFastRefresh && refreshContentRE.test(code2)) {
             code2 = addRefreshWrapper(code2, id);
           }
           return {
@@ -336,6 +300,9 @@ function viteReact(opts = {}) {
     config() {
       return {
         optimizeDeps: {
+          // We can't add `react-dom` because the dependency is `react-dom/client`
+          // for React 18 while it's `react-dom` for React 17. We'd need to detect
+          // what React version the user has installed.
           include: [reactJsxRuntimeId, reactJsxDevRuntimeId, "react"]
         }
       };

package/dist/refreshUtils.js

@@ -0,0 +1,57 @@
+function debounce(fn, delay) {
+  let handle
+  return () => {
+    clearTimeout(handle)
+    handle = setTimeout(fn, delay)
+  }
+}
+
+const enqueueUpdate = debounce(exports.performReactRefresh, 16)
+
+// Taken from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/lib/runtime/RefreshUtils.js#L141
+// This allows to resister components not detected by SWC like styled component
+function registerExportsForReactRefresh(filename, moduleExports) {
+  for (const key in moduleExports) {
+    if (key === '__esModule') continue
+    const exportValue = moduleExports[key]
+    if (exports.isLikelyComponentType(exportValue)) {
+      exports.register(exportValue, filename + ' ' + key)
+    }
+  }
+}
+
+function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
+  if (!predicateOnExport(prevExports, (key) => !!nextExports[key])) {
+    return 'Could not Fast Refresh (export removed)'
+  }
+
+  let hasExports = false
+  const allExportsAreComponentsOrUnchanged = predicateOnExport(
+    nextExports,
+    (key, value) => {
+      hasExports = true
+      if (exports.isLikelyComponentType(value)) return true
+      if (!prevExports[key]) return false
+      return prevExports[key] === nextExports[key]
+    },
+  )
+  if (hasExports && allExportsAreComponentsOrUnchanged) {
+    enqueueUpdate()
+  } else {
+    return 'Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react#consistent-components-exports'
+  }
+}
+
+function predicateOnExport(moduleExports, predicate) {
+  for (const key in moduleExports) {
+    if (key === '__esModule') continue
+    const desc = Object.getOwnPropertyDescriptor(moduleExports, key)
+    if (desc && desc.get) return false
+    if (!predicate(key, moduleExports[key])) return false
+  }
+  return true
+}
+
+exports.registerExportsForReactRefresh = registerExportsForReactRefresh
+exports.validateRefreshBoundaryAndEnqueueUpdate =
+  validateRefreshBoundaryAndEnqueueUpdate

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "3.0.0",
+  "version": "3.1.0-beta.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
-    "Alec Larson"
+    "Alec Larson",
+    "Arnaud Barré"
   ],
   "files": [
     "dist"
@@ -21,7 +22,7 @@
   },
   "scripts": {
     "dev": "unbuild --stub",
-    "build": "unbuild && pnpm run patch-cjs",
+    "build": "unbuild && pnpm run patch-cjs && tsx scripts/copyRefreshUtils.ts",
     "patch-cjs": "tsx ../../scripts/patchCJS.ts",
     "prepublishOnly": "npm run build"
   },
@@ -38,13 +39,13 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-transform-react-jsx-self": "^7.18.6",
     "@babel/plugin-transform-react-jsx-source": "^7.19.6",
     "magic-string": "^0.27.0",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^4.1.0-beta.0"
   }
 }