@atlaspack/transformer-react-refresh-wrap 2.14.11 → 2.14.13

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaspack/transformer-react-refresh-wrap
 
+## 2.14.13
+
+### Patch Changes
+
+- [#633](https://github.com/atlassian-labs/atlaspack/pull/633) [`26aa9c5`](https://github.com/atlassian-labs/atlaspack/commit/26aa9c599d2be45ce1438a74c5fa22f39b9b554b) Thanks [@sbhuiyan-atlassian](https://github.com/sbhuiyan-atlassian)! - Ported various HMR changes from Parcel
+
+- Updated dependencies [[`26aa9c5`](https://github.com/atlassian-labs/atlaspack/commit/26aa9c599d2be45ce1438a74c5fa22f39b9b554b), [`0501255`](https://github.com/atlassian-labs/atlaspack/commit/05012550da35b05ce7d356a8cc29311e7f9afdca)]:
+  - @atlaspack/feature-flags@2.18.1
+  - @atlaspack/utils@2.15.1
+  - @atlaspack/plugin@2.14.13
+
+## 2.14.12
+
+### Patch Changes
+
+- Updated dependencies [[`e39c6cf`](https://github.com/atlassian-labs/atlaspack/commit/e39c6cf05f7e95ce5420dbcea66f401b1cbd397c)]:
+  - @atlaspack/utils@2.15.0
+  - @atlaspack/plugin@2.14.12
+
 ## 2.14.11
 
 ### Patch Changes

package/lib/ReactRefreshWrapTransformer.js

@@ -18,6 +18,13 @@ function _plugin() {
   };
   return data;
 }
+function _featureFlags() {
+  const data = require("@atlaspack/feature-flags");
+  _featureFlags = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function shouldExclude(asset, options) {
   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');
@@ -30,11 +37,13 @@ var _default = exports.default = new (_plugin().Transformer)({
     if (shouldExclude(asset, options)) {
       return [asset];
     }
-    let wrapperPath = `@atlaspack/transformer-react-refresh-wrap/${_path().default.basename(__dirname)}/helpers/helpers.js`;
+    const helperFilename = (0, _featureFlags().getFeatureFlag)('hmrImprovements') ? 'helpers-new.js' : 'helpers.js';
+    let wrapperPath = `@atlaspack/transformer-react-refresh-wrap/${_path().default.basename(__dirname)}/helpers/${helperFilename}`;
     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)});
+${(0, _featureFlags().getFeatureFlag)('hmrImprovements') ? `${name}.init();` : ''}
 var prevRefreshReg = window.$RefreshReg$;
 var prevRefreshSig = window.$RefreshSig$;
 ${name}.prelude(module);

package/lib/helpers/helpers-new.js

@@ -0,0 +1,197 @@
+"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 {
+    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);
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = undefined;
+          lastTime = Date.now();
+          func.call(null, args);
+        }, delay);
+      }
+    };
+  }
+}
+var enqueueUpdate = debounce(function () {
+  Refresh.performReactRefresh();
+}, 30);
+module.exports.init = function () {
+  if (!window.$RefreshReg$) {
+    Refresh.injectIntoGlobalHook(window);
+    window.$RefreshReg$ = function () {};
+    window.$RefreshSig$ = function () {
+      return function (type) {
+        return type;
+      };
+    };
+    if (typeof window !== 'undefined') {
+      let ErrorOverlay = require('react-error-overlay');
+      ErrorOverlay.setEditorHandler(function (errorLocation) {
+        let file = `${errorLocation.fileName}:${errorLocation.lineNumber || 1}:${errorLocation.colNumber || 1}`;
+        fetch(`/__parcel_launch_editor?file=${encodeURIComponent(file)}`);
+      });
+      ErrorOverlay.startReportingRuntimeErrors({
+        onError: function () {}
+      });
+      window.addEventListener('parcelhmraccept', () => {
+        ErrorOverlay.dismissRuntimeErrors();
+      });
+    }
+  }
+};
+
+// Everything 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.
+
+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);
+    if (module.hot) {
+      module.hot.dispose(function (data) {
+        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 && !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.
+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 && !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;
+  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 && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
+      continue;
+    }
+    var exportValue = exports[key];
+    var typeID = id + ' %exports% ' + key;
+    Refresh.register(exportValue, typeID);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/transformer-react-refresh-wrap",
-  "version": "2.14.11",
+  "version": "2.14.13",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -15,9 +15,11 @@
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@atlaspack/plugin": "2.14.11",
-    "@atlaspack/utils": "2.14.11",
-    "react-refresh": ">=0.9 <=0.14"
+    "@atlaspack/feature-flags": "2.18.1",
+    "@atlaspack/plugin": "2.14.13",
+    "@atlaspack/utils": "2.15.1",
+    "react-error-overlay": "6.0.9",
+    "react-refresh": ">=0.9 <=0.16"
   },
   "type": "commonjs"
 }

package/src/ReactRefreshWrapTransformer.js

@@ -2,6 +2,7 @@
 
 import path from 'path';
 import {Transformer} from '@atlaspack/plugin';
+import {getFeatureFlag} from '@atlaspack/feature-flags';
 
 function shouldExclude(asset, options) {
   return (
@@ -32,15 +33,20 @@ export default (new Transformer({
       return [asset];
     }
 
+    const helperFilename = getFeatureFlag('hmrImprovements')
+      ? 'helpers-new.js'
+      : 'helpers.js';
+
     let wrapperPath = `@atlaspack/transformer-react-refresh-wrap/${path.basename(
       __dirname,
-    )}/helpers/helpers.js`;
+    )}/helpers/${helperFilename}`;
 
     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)});
+${getFeatureFlag('hmrImprovements') ? `${name}.init();` : ''}
 var prevRefreshReg = window.$RefreshReg$;
 var prevRefreshSig = window.$RefreshSig$;
 ${name}.prelude(module);

package/src/helpers/helpers-new.js

@@ -0,0 +1,212 @@
+var Refresh = require('react-refresh/runtime');
+
+function debounce(func, delay) {
+  if (process.env.NODE_ENV === 'test') {
+    return function (args) {
+      func.call(null, args);
+    };
+  } else {
+    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);
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = undefined;
+          lastTime = Date.now();
+          func.call(null, args);
+        }, delay);
+      }
+    };
+  }
+}
+var enqueueUpdate = debounce(function () {
+  Refresh.performReactRefresh();
+}, 30);
+
+module.exports.init = function () {
+  if (!window.$RefreshReg$) {
+    Refresh.injectIntoGlobalHook(window);
+    window.$RefreshReg$ = function () {};
+    window.$RefreshSig$ = function () {
+      return function (type) {
+        return type;
+      };
+    };
+
+    if (typeof window !== 'undefined') {
+      let ErrorOverlay = require('react-error-overlay');
+      ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
+        let file = `${errorLocation.fileName}:${
+          errorLocation.lineNumber || 1
+        }:${errorLocation.colNumber || 1}`;
+        fetch(`/__parcel_launch_editor?file=${encodeURIComponent(file)}`);
+      });
+
+      ErrorOverlay.startReportingRuntimeErrors({
+        onError: function () {},
+      });
+
+      window.addEventListener('parcelhmraccept', () => {
+        ErrorOverlay.dismissRuntimeErrors();
+      });
+    }
+  }
+};
+
+// Everything 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.
+
+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);
+
+    if (module.hot) {
+      module.hot.dispose(function (data) {
+        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 && !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.
+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 && !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;
+  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 && !isESM) {
+      // Don't invoke getters for CJS as they may have side effects.
+      continue;
+    }
+    var exportValue = exports[key];
+    var typeID = id + ' %exports% ' + key;
+    Refresh.register(exportValue, typeID);
+  }
+}