@parcel/transformer-react-refresh-wrap 2.0.0-nightly.149 → 2.0.0-nightly.1491

package/lib/ReactRefreshWrapTransformer.js

@@ -4,141 +4,60 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _semver = _interopRequireDefault(require("semver"));
-
-var _path = _interopRequireDefault(require("path"));
-
-var _plugin = require("@parcel/plugin");
-
-var _utils = require("@parcel/utils");
-
-var _sourceMap = _interopRequireDefault(require("@parcel/source-map"));
-
-var _generator = _interopRequireDefault(require("@babel/generator"));
-
-var _parser = require("@babel/parser");
-
-var _template = _interopRequireDefault(require("@babel/template"));
-
-var t = _interopRequireWildcard(require("@babel/types"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const WRAPPER = _path.default.join(__dirname, 'helpers', 'helpers.js');
-
-const wrapper = _template.default.statements(`
-var helpers = require(%%helper%%);
-var prevRefreshReg = window.$RefreshReg$;
-var prevRefreshSig = window.$RefreshSig$;
-helpers.prelude(module);
-
-try {
-  %%module%%
-  helpers.postlude(module);
-} finally {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
 }
-`);
-
+function _plugin() {
+  const data = require("@parcel/plugin");
+  _plugin = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function shouldExclude(asset, options) {
-  return !asset.isSource || !options.hot || !asset.env.isBrowser() || options.mode !== 'development' || !asset.getDependencies().find(v => v.moduleSpecifier === 'react');
+  return !asset.isSource || !options.hmrOptions || !asset.env.isBrowser() || asset.env.isLibrary || asset.env.isWorker() || asset.env.isWorklet() || options.mode !== 'development' || !asset.getDependencies().find(v => v.specifier === 'react' || v.specifier === 'react/jsx-runtime' || v.specifier === 'react/jsx-dev-runtime' || v.specifier === '@emotion/react' || v.specifier === '@emotion/react/jsx-runtime' || v.specifier === '@emotion/react/jsx-dev-runtime');
 }
-
-var _default = new _plugin.Transformer({
-  canReuseAST({
-    ast
-  }) {
-    return ast.type === 'babel' && _semver.default.satisfies(ast.version, '^7.0.0');
-  },
-
-  async parse({
+var _default = exports.default = new (_plugin().Transformer)({
+  async transform({
     asset,
     options
   }) {
     if (shouldExclude(asset, options)) {
-      return null;
-    }
-
-    let code = await asset.getCode();
-    return {
-      type: 'babel',
-      version: '7.0.0',
-      isDirty: false,
-      program: (0, _parser.parse)(code, {
-        sourceFilename: this.name,
-        allowReturnOutsideFunction: true,
-        strictMode: false,
-        sourceType: 'module',
-        plugins: ['exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport']
-      })
-    };
-  },
-
-  transform({
-    asset,
-    options
-  }) {
-    let ast = asset.ast;
-
-    if (!ast || shouldExclude(asset, options)) {
       return [asset];
     }
+    let wrapperPath = `@parcel/transformer-react-refresh-wrap/${_path().default.basename(__dirname)}/helpers/helpers.js`;
+    let code = await asset.getCode();
+    let map = await asset.getMap();
+    let name = `$parcel$ReactRefreshHelpers$${asset.id.slice(-4)}`;
+    code = `var ${name} = require(${JSON.stringify(wrapperPath)});
+var prevRefreshReg = window.$RefreshReg$;
+var prevRefreshSig = window.$RefreshSig$;
+${name}.prelude(module);
 
-    let wrapperPath = _path.default.relative(_path.default.dirname(asset.filePath), WRAPPER).replace(/\\/g, '/');
-
-    if (!wrapperPath.startsWith('.')) {
-      wrapperPath = './' + wrapperPath;
+try {
+${code}
+  ${name}.postlude(module);
+} finally {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+}`;
+    asset.setCode(code);
+    if (map) {
+      map.offsetLines(1, 6);
+      asset.setMap(map);
     }
 
-    ast.program.program.body = wrapper({
-      helper: t.stringLiteral(wrapperPath),
-      module: ast.program.program.body
-    });
-    ast.isDirty = true; // The JSTransformer has already run, do it manually
-
+    // The JSTransformer has already run, do it manually
     asset.addDependency({
-      moduleSpecifier: wrapperPath
+      specifier: wrapperPath,
+      specifierType: 'esm',
+      resolveFrom: __filename
     });
     return [asset];
-  },
-
-  async generate({
-    asset,
-    options
-  }) {
-    let code = await asset.getCode();
-    let res = {
-      code
-    };
-    let ast = asset.ast;
-
-    if (ast && ast.isDirty !== false) {
-      let sourceFileName = (0, _utils.relativeUrl)(options.projectRoot, asset.filePath);
-      let generated = (0, _generator.default)(ast.program, {
-        sourceMaps: options.sourceMaps,
-        sourceFileName: sourceFileName
-      }, code);
-      res.code = generated.code; // $FlowFixMe...
-
-      res.map = new _sourceMap.default(generated.rawMappings, {
-        [sourceFileName]: null
-      });
-    }
-
-    if (asset.meta.globals && asset.meta.globals.size > 0) {
-      res.code = Array.from(asset.meta.globals.values()).map(g => g ? g.code : '').join('\n') + '\n' + res.code;
-    }
-
-    delete asset.meta.globals;
-    return res;
   }
-
-});
-
-exports.default = _default;
+});

package/lib/helpers/helpers.js

@@ -1,27 +1,39 @@
 "use strict";
 
 var Refresh = require('react-refresh/runtime');
-
 function debounce(func, delay) {
   if (process.env.NODE_ENV === 'test') {
     return function (args) {
       func.call(null, args);
     };
   } else {
-    var timeout = undefined;
+    let timeout = undefined;
+    let lastTime = 0;
     return function (args) {
-      clearTimeout(timeout);
-      timeout = setTimeout(function () {
-        timeout = undefined;
+      // Call immediately if last call was more than the delay ago.
+      // Otherwise, set a timeout. This means the first call is fast
+      // (for the common case of a single update), and subsequent updates
+      // are batched.
+      let now = Date.now();
+      if (now - lastTime > delay) {
+        lastTime = now;
         func.call(null, args);
-      }, delay);
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = undefined;
+          lastTime = Date.now();
+          func.call(null, args);
+        }, delay);
+      }
     };
   }
 }
-
 var enqueueUpdate = debounce(function () {
   Refresh.performReactRefresh();
-}, 30); // Everthing below is either adapted or copied from
+}, 30);
+
+// Everthing below is either adapted or copied from
 // https://github.com/facebook/metro/blob/61de16bd1edd7e738dd0311c89555a644023ab2d/packages/metro/src/lib/polyfills/require.js
 // MIT License - Copyright (c) Facebook, Inc. and its affiliates.
 
@@ -29,158 +41,133 @@ module.exports.prelude = function (module) {
   window.$RefreshReg$ = function (type, id) {
     Refresh.register(type, module.id + ' ' + id);
   };
-
   window.$RefreshSig$ = Refresh.createSignatureFunctionForTransform;
 };
-
 module.exports.postlude = function (module) {
   if (isReactRefreshBoundary(module.exports)) {
     registerExportsForReactRefresh(module);
-    module.hot.dispose(function (data) {
-      data.prevExports = module.exports;
-    });
-    module.hot.accept(function (getParents) {
-      var prevExports = module.hot.data.prevExports;
-      var nextExports = module.exports; // Since we just executed the code for it, it's possible
-      // that the new exports make it ineligible for being a boundary.
-
-      var isNoLongerABoundary = !isReactRefreshBoundary(nextExports); // It can also become ineligible if its exports are incompatible
-      // with the previous exports.
-      // For example, if you add/remove/change exports, we'll want
-      // to re-execute the importing modules, and force those components
-      // to re-render. Similarly, if you convert a class component
-      // to a function, we want to invalidate the boundary.
-
-      var didInvalidate = shouldInvalidateReactRefreshBoundary(prevExports, nextExports);
-
-      if (isNoLongerABoundary || didInvalidate) {
-        // We'll be conservative. The only case in which we won't do a full
-        // reload is if all parent modules are also refresh boundaries.
-        // In that case we'll add them to the current queue.
-        var parents = getParents();
-
-        if (parents.length === 0) {
-          // Looks like we bubbled to the root. Can't recover from that.
+    if (module.hot) {
+      module.hot.dispose(function (data) {
+        if (Refresh.hasUnrecoverableErrors()) {
           window.location.reload();
-          return;
         }
-
-        return parents;
-      }
-
-      enqueueUpdate();
-    });
-
-    if (Refresh.hasUnrecoverableErrors()) {
-      window.location.reload();
+        data.prevExports = module.exports;
+      });
+      module.hot.accept(function (getParents) {
+        var prevExports = module.hot.data.prevExports;
+        var nextExports = module.exports;
+        // Since we just executed the code for it, it's possible
+        // that the new exports make it ineligible for being a boundary.
+        var isNoLongerABoundary = !isReactRefreshBoundary(nextExports);
+        // It can also become ineligible if its exports are incompatible
+        // with the previous exports.
+        // For example, if you add/remove/change exports, we'll want
+        // to re-execute the importing modules, and force those components
+        // to re-render. Similarly, if you convert a class component
+        // to a function, we want to invalidate the boundary.
+        var didInvalidate = shouldInvalidateReactRefreshBoundary(prevExports, nextExports);
+        if (isNoLongerABoundary || didInvalidate) {
+          // We'll be conservative. The only case in which we won't do a full
+          // reload is if all parent modules are also refresh boundaries.
+          // In that case we'll add them to the current queue.
+          var parents = getParents();
+          if (parents.length === 0) {
+            // Looks like we bubbled to the root. Can't recover from that.
+            window.location.reload();
+            return;
+          }
+          return parents;
+        }
+        enqueueUpdate();
+      });
     }
   }
 };
-
 function isReactRefreshBoundary(exports) {
   if (Refresh.isLikelyComponentType(exports)) {
     return true;
   }
-
   if (exports == null || typeof exports !== 'object') {
     // Exit if we can't iterate over exports.
     return false;
   }
-
   var hasExports = false;
   var areAllExportsComponents = true;
-
+  let isESM = ('__esModule' in exports);
   for (var key in exports) {
     hasExports = true;
-
     if (key === '__esModule') {
       continue;
     }
-
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       return false;
     }
-
     var exportValue = exports[key];
-
     if (!Refresh.isLikelyComponentType(exportValue)) {
       areAllExportsComponents = false;
     }
   }
-
   return hasExports && areAllExportsComponents;
 }
-
 function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
   var prevSignature = getRefreshBoundarySignature(prevExports);
   var nextSignature = getRefreshBoundarySignature(nextExports);
-
   if (prevSignature.length !== nextSignature.length) {
     return true;
   }
-
   for (var i = 0; i < nextSignature.length; i++) {
     if (prevSignature[i] !== nextSignature[i]) {
       return true;
     }
   }
-
   return false;
-} // When this signature changes, it's unsafe to stop at this refresh boundary.
-
+}
 
+// When this signature changes, it's unsafe to stop at this refresh boundary.
 function getRefreshBoundarySignature(exports) {
   var signature = [];
   signature.push(Refresh.getFamilyByType(exports));
-
   if (exports == null || typeof exports !== 'object') {
     // Exit if we can't iterate over exports.
     // (This is important for legacy environments.)
     return signature;
   }
-
+  let isESM = ('__esModule' in exports);
   for (var key in exports) {
     if (key === '__esModule') {
       continue;
     }
-
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-
-    if (desc && desc.get) {
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       continue;
     }
-
     var exportValue = exports[key];
     signature.push(key);
     signature.push(Refresh.getFamilyByType(exportValue));
   }
-
   return signature;
 }
-
 function registerExportsForReactRefresh(module) {
   var exports = module.exports,
-      id = module.id;
+    id = module.id;
   Refresh.register(exports, id + ' %exports%');
-
   if (exports == null || typeof exports !== 'object') {
     // Exit if we can't iterate over exports.
     // (This is important for legacy environments.)
     return;
   }
-
+  let isESM = ('__esModule' in exports);
   for (var key in exports) {
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       continue;
     }
-
     var exportValue = exports[key];
-    Refresh.register(exportValue, id + ' %exports% ' + key);
+    var typeID = id + ' %exports% ' + key;
+    Refresh.register(exportValue, typeID);
   }
 }

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-react-refresh-wrap",
-  "version": "2.0.0-nightly.149+453f7b0b",
+  "version": "2.0.0-nightly.1491+fdf495ba3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,19 +16,13 @@
   "main": "lib/ReactRefreshWrapTransformer.js",
   "source": "src/ReactRefreshWrapTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1489+fdf495ba3"
   },
   "dependencies": {
-    "@babel/generator": "^7.0.0",
-    "@babel/parser": "^7.0.0",
-    "@babel/template": "^7.0.0",
-    "@babel/types": "^7.0.0",
-    "@parcel/plugin": "2.0.0-nightly.149+453f7b0b",
-    "@parcel/source-map": "2.0.0-nightly.149+453f7b0b",
-    "@parcel/utils": "2.0.0-nightly.149+453f7b0b",
-    "react-refresh": "^0.6.0",
-    "semver": "^5.4.1"
+    "@parcel/plugin": "2.0.0-nightly.1491+fdf495ba3",
+    "@parcel/utils": "2.0.0-nightly.1491+fdf495ba3",
+    "react-refresh": "^0.9.0"
   },
-  "gitHead": "453f7b0bf295e6a7cbec5d24fab4c48e21e6168f"
+  "gitHead": "fdf495ba3c8ed727d10e87cc9697bc9ef5ec997a"
 }

package/src/ReactRefreshWrapTransformer.js

@@ -1,138 +1,71 @@
 // @flow
 
-import type {StringLiteral, Statement} from '@babel/types';
-
-import semver from 'semver';
 import path from 'path';
 import {Transformer} from '@parcel/plugin';
-import {relativeUrl} from '@parcel/utils';
-import SourceMap from '@parcel/source-map';
-import generate from '@babel/generator';
-import {parse} from '@babel/parser';
-import template from '@babel/template';
-import * as t from '@babel/types';
-
-const WRAPPER = path.join(__dirname, 'helpers', 'helpers.js');
-
-const wrapper = template.statements<{|
-  helper: StringLiteral,
-  module: Array<Statement>,
-|}>(`
-var helpers = require(%%helper%%);
-var prevRefreshReg = window.$RefreshReg$;
-var prevRefreshSig = window.$RefreshSig$;
-helpers.prelude(module);
-
-try {
-  %%module%%
-  helpers.postlude(module);
-} finally {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-}
-`);
 
 function shouldExclude(asset, options) {
   return (
     !asset.isSource ||
-    !options.hot ||
+    !options.hmrOptions ||
     !asset.env.isBrowser() ||
+    asset.env.isLibrary ||
+    asset.env.isWorker() ||
+    asset.env.isWorklet() ||
     options.mode !== 'development' ||
-    !asset.getDependencies().find(v => v.moduleSpecifier === 'react')
+    !asset
+      .getDependencies()
+      .find(
+        v =>
+          v.specifier === 'react' ||
+          v.specifier === 'react/jsx-runtime' ||
+          v.specifier === 'react/jsx-dev-runtime' ||
+          v.specifier === '@emotion/react' ||
+          v.specifier === '@emotion/react/jsx-runtime' ||
+          v.specifier === '@emotion/react/jsx-dev-runtime',
+      )
   );
 }
 
-export default new Transformer({
-  canReuseAST({ast}) {
-    return ast.type === 'babel' && semver.satisfies(ast.version, '^7.0.0');
-  },
-
-  async parse({asset, options}) {
+export default (new Transformer({
+  async transform({asset, options}) {
     if (shouldExclude(asset, options)) {
-      return null;
+      return [asset];
     }
 
+    let wrapperPath = `@parcel/transformer-react-refresh-wrap/${path.basename(
+      __dirname,
+    )}/helpers/helpers.js`;
+
     let code = await asset.getCode();
-    return {
-      type: 'babel',
-      version: '7.0.0',
-      isDirty: false,
-      program: parse(code, {
-        sourceFilename: this.name,
-        allowReturnOutsideFunction: true,
-        strictMode: false,
-        sourceType: 'module',
-        plugins: ['exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport'],
-      }),
-    };
-  },
+    let map = await asset.getMap();
+    let name = `$parcel$ReactRefreshHelpers$${asset.id.slice(-4)}`;
 
-  transform({asset, options}) {
-    let ast = asset.ast;
-    if (!ast || shouldExclude(asset, options)) {
-      return [asset];
-    }
+    code = `var ${name} = require(${JSON.stringify(wrapperPath)});
+var prevRefreshReg = window.$RefreshReg$;
+var prevRefreshSig = window.$RefreshSig$;
+${name}.prelude(module);
 
-    let wrapperPath = path
-      .relative(path.dirname(asset.filePath), WRAPPER)
-      .replace(/\\/g, '/');
-    if (!wrapperPath.startsWith('.')) {
-      wrapperPath = './' + wrapperPath;
-    }
+try {
+${code}
+  ${name}.postlude(module);
+} finally {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+}`;
 
-    ast.program.program.body = wrapper({
-      helper: t.stringLiteral(wrapperPath),
-      module: ast.program.program.body,
-    });
-    ast.isDirty = true;
+    asset.setCode(code);
+    if (map) {
+      map.offsetLines(1, 6);
+      asset.setMap(map);
+    }
 
     // The JSTransformer has already run, do it manually
     asset.addDependency({
-      moduleSpecifier: wrapperPath,
+      specifier: wrapperPath,
+      specifierType: 'esm',
+      resolveFrom: __filename,
     });
 
     return [asset];
   },
-
-  async generate({asset, options}) {
-    let code = await asset.getCode();
-    let res = {
-      code,
-    };
-
-    let ast = asset.ast;
-    if (ast && ast.isDirty !== false) {
-      let sourceFileName: string = relativeUrl(
-        options.projectRoot,
-        asset.filePath,
-      );
-
-      let generated = generate(
-        ast.program,
-        {
-          sourceMaps: options.sourceMaps,
-          sourceFileName: sourceFileName,
-        },
-        code,
-      );
-
-      res.code = generated.code;
-      // $FlowFixMe...
-      res.map = new SourceMap(generated.rawMappings, {
-        [sourceFileName]: null,
-      });
-    }
-
-    if (asset.meta.globals && asset.meta.globals.size > 0) {
-      res.code =
-        Array.from(asset.meta.globals.values())
-          .map(g => (g ? g.code : ''))
-          .join('\n') +
-        '\n' +
-        res.code;
-    }
-    delete asset.meta.globals;
-
-    return res;
-  },
-});
+}): Transformer);

package/src/helpers/helpers.js

@@ -2,21 +2,33 @@ var Refresh = require('react-refresh/runtime');
 
 function debounce(func, delay) {
   if (process.env.NODE_ENV === 'test') {
-    return function(args) {
+    return function (args) {
       func.call(null, args);
     };
   } else {
-    var timeout = undefined;
-    return function(args) {
-      clearTimeout(timeout);
-      timeout = setTimeout(function() {
-        timeout = undefined;
+    let timeout = undefined;
+    let lastTime = 0;
+    return function (args) {
+      // Call immediately if last call was more than the delay ago.
+      // Otherwise, set a timeout. This means the first call is fast
+      // (for the common case of a single update), and subsequent updates
+      // are batched.
+      let now = Date.now();
+      if (now - lastTime > delay) {
+        lastTime = now;
         func.call(null, args);
-      }, delay);
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = undefined;
+          lastTime = Date.now();
+          func.call(null, args);
+        }, delay);
+      }
     };
   }
 }
-var enqueueUpdate = debounce(function() {
+var enqueueUpdate = debounce(function () {
   Refresh.performReactRefresh();
 }, 30);
 
@@ -24,53 +36,56 @@ var enqueueUpdate = debounce(function() {
 // https://github.com/facebook/metro/blob/61de16bd1edd7e738dd0311c89555a644023ab2d/packages/metro/src/lib/polyfills/require.js
 // MIT License - Copyright (c) Facebook, Inc. and its affiliates.
 
-module.exports.prelude = function(module) {
-  window.$RefreshReg$ = function(type, id) {
+module.exports.prelude = function (module) {
+  window.$RefreshReg$ = function (type, id) {
     Refresh.register(type, module.id + ' ' + id);
   };
   window.$RefreshSig$ = Refresh.createSignatureFunctionForTransform;
 };
 
-module.exports.postlude = function(module) {
+module.exports.postlude = function (module) {
   if (isReactRefreshBoundary(module.exports)) {
     registerExportsForReactRefresh(module);
 
-    module.hot.dispose(function(data) {
-      data.prevExports = module.exports;
-    });
-
-    module.hot.accept(function(getParents) {
-      var prevExports = module.hot.data.prevExports;
-      var nextExports = module.exports;
-      // Since we just executed the code for it, it's possible
-      // that the new exports make it ineligible for being a boundary.
-      var isNoLongerABoundary = !isReactRefreshBoundary(nextExports);
-      // It can also become ineligible if its exports are incompatible
-      // with the previous exports.
-      // For example, if you add/remove/change exports, we'll want
-      // to re-execute the importing modules, and force those components
-      // to re-render. Similarly, if you convert a class component
-      // to a function, we want to invalidate the boundary.
-      var didInvalidate = shouldInvalidateReactRefreshBoundary(
-        prevExports,
-        nextExports,
-      );
-      if (isNoLongerABoundary || didInvalidate) {
-        // We'll be conservative. The only case in which we won't do a full
-        // reload is if all parent modules are also refresh boundaries.
-        // In that case we'll add them to the current queue.
-        var parents = getParents();
-        if (parents.length === 0) {
-          // Looks like we bubbled to the root. Can't recover from that.
+    if (module.hot) {
+      module.hot.dispose(function (data) {
+        if (Refresh.hasUnrecoverableErrors()) {
           window.location.reload();
-          return;
         }
-        return parents;
-      }
-      enqueueUpdate();
-    });
-    if (Refresh.hasUnrecoverableErrors()) {
-      window.location.reload();
+
+        data.prevExports = module.exports;
+      });
+
+      module.hot.accept(function (getParents) {
+        var prevExports = module.hot.data.prevExports;
+        var nextExports = module.exports;
+        // Since we just executed the code for it, it's possible
+        // that the new exports make it ineligible for being a boundary.
+        var isNoLongerABoundary = !isReactRefreshBoundary(nextExports);
+        // It can also become ineligible if its exports are incompatible
+        // with the previous exports.
+        // For example, if you add/remove/change exports, we'll want
+        // to re-execute the importing modules, and force those components
+        // to re-render. Similarly, if you convert a class component
+        // to a function, we want to invalidate the boundary.
+        var didInvalidate = shouldInvalidateReactRefreshBoundary(
+          prevExports,
+          nextExports,
+        );
+        if (isNoLongerABoundary || didInvalidate) {
+          // We'll be conservative. The only case in which we won't do a full
+          // reload is if all parent modules are also refresh boundaries.
+          // In that case we'll add them to the current queue.
+          var parents = getParents();
+          if (parents.length === 0) {
+            // Looks like we bubbled to the root. Can't recover from that.
+            window.location.reload();
+            return;
+          }
+          return parents;
+        }
+        enqueueUpdate();
+      });
     }
   }
 };
@@ -85,14 +100,15 @@ function isReactRefreshBoundary(exports) {
   }
   var hasExports = false;
   var areAllExportsComponents = true;
+  let isESM = '__esModule' in exports;
   for (var key in exports) {
     hasExports = true;
     if (key === '__esModule') {
       continue;
     }
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       return false;
     }
     var exportValue = exports[key];
@@ -126,12 +142,14 @@ function getRefreshBoundarySignature(exports) {
     // (This is important for legacy environments.)
     return signature;
   }
+  let isESM = '__esModule' in exports;
   for (var key in exports) {
     if (key === '__esModule') {
       continue;
     }
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-    if (desc && desc.get) {
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       continue;
     }
     var exportValue = exports[key];
@@ -150,10 +168,11 @@ function registerExportsForReactRefresh(module) {
     // (This is important for legacy environments.)
     return;
   }
+  let isESM = '__esModule' in exports;
   for (var key in exports) {
     var desc = Object.getOwnPropertyDescriptor(exports, key);
-    if (desc && desc.get) {
-      // Don't invoke getters as they may have side effects.
+    if (desc && desc.get && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
       continue;
     }
     var exportValue = exports[key];