Merge React Refresh runtime and transformer (#10056)

packages/configs/default/index.json

@@ -50,7 +50,6 @@
   "runtimes": [
     "@parcel/runtime-js",
     "@parcel/runtime-browser-hmr",
-    "@parcel/runtime-react-refresh",
     "@parcel/runtime-service-worker"
   ],
   "optimizers": {

packages/configs/default/package.json

@@ -36,7 +36,6 @@
     "@parcel/resolver-default": "2.13.3",
     "@parcel/runtime-browser-hmr": "2.13.3",
     "@parcel/runtime-js": "2.13.3",
-    "@parcel/runtime-react-refresh": "2.13.3",
     "@parcel/runtime-service-worker": "2.13.3",
     "@parcel/transformer-babel": "2.13.3",
     "@parcel/transformer-css": "2.13.3",

packages/configs/repl/index.json

@@ -16,11 +16,7 @@
     "url:*": ["@parcel/transformer-raw"]
   },
   "namers": ["@parcel/namer-default"],
-  "runtimes": [
-    "@parcel/runtime-js",
-    "@parcel/runtime-browser-hmr",
-    "@parcel/runtime-react-refresh"
-  ],
+  "runtimes": ["@parcel/runtime-js", "@parcel/runtime-browser-hmr"],
   "optimizers": {
     "*.{js,mjs,cjs}": ["@parcel/optimizer-terser"],
     "*.css": ["@parcel/optimizer-css"]

packages/configs/repl/package.json

@@ -26,7 +26,6 @@
     "@parcel/resolver-repl-runtimes": "2.13.3",
     "@parcel/runtime-browser-hmr": "2.13.3",
     "@parcel/runtime-js": "2.13.3",
-    "@parcel/runtime-react-refresh": "2.13.3",
     "@parcel/transformer-babel": "2.13.3",
     "@parcel/transformer-css": "2.13.3",
     "@parcel/transformer-html": "2.13.3",

packages/core/integration-tests/test/integration/react-refresh-inline-script/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "react": "*"
+    "react": "^19"
   }
 }

packages/dev/repl/src/parcel/BrowserPackageManager.js

@@ -29,7 +29,6 @@ import resolverDefault from '@parcel/resolver-default';
 import resolverREPLRuntimes from '@parcel/resolver-repl-runtimes';
 import runtimeHMR from '@parcel/runtime-browser-hmr';
 import runtimeJs from '@parcel/runtime-js';
-import runtimeReactRefresh from '@parcel/runtime-react-refresh';
 import transformerBabel from '@parcel/transformer-babel';
 import transformerCss from '@parcel/transformer-css';
 import transformerHtml from '@parcel/transformer-html';
@@ -57,7 +56,6 @@ export const BUILTINS = {
   '@parcel/resolver-repl-runtimes': resolverREPLRuntimes,
   '@parcel/runtime-browser-hmr': runtimeHMR,
   '@parcel/runtime-js': runtimeJs,
-  '@parcel/runtime-react-refresh': runtimeReactRefresh,
   '@parcel/transformer-babel': transformerBabel,
   '@parcel/transformer-css': transformerCss,
   '@parcel/transformer-html': transformerHtml,

packages/transformers/react-refresh-wrap/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@parcel/plugin": "2.13.3",
     "@parcel/utils": "2.13.3",
-    "react-refresh": ">=0.9 <=0.14"
+    "react-error-overlay": "6.0.9",
+    "react-refresh": ">=0.9 <=0.16"
   }
 }

packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js

@@ -41,6 +41,7 @@ export default (new Transformer({
     let name = `$parcel$ReactRefreshHelpers$${asset.id.slice(-4)}`;
 
     code = `var ${name} = require(${JSON.stringify(wrapperPath)});
+${name}.init();
 var prevRefreshReg = globalThis.$RefreshReg$;
 var prevRefreshSig = globalThis.$RefreshSig$;
 ${name}.prelude(module);

packages/transformers/react-refresh-wrap/src/helpers/helpers.js

@@ -1,5 +1,4 @@
 var Refresh = require('react-refresh/runtime');
-var {version} = require('react-refresh/package.json');
 
 function debounce(func, delay) {
   if (process.env.NODE_ENV === 'test') {
@@ -33,24 +32,42 @@ var enqueueUpdate = debounce(function () {
   Refresh.performReactRefresh();
 }, 30);
 
+module.exports.init = function () {
+  if (!globalThis.$RefreshReg$) {
+    Refresh.injectIntoGlobalHook(globalThis);
+    globalThis.$RefreshReg$ = function () {};
+    globalThis.$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) {
-  globalThis.__REACT_REFRESH_VERSION_TRANSFORMER = version;
   globalThis.$RefreshReg$ = function (type, id) {
-    if (
-      globalThis.__REACT_REFRESH_VERSION_TRANSFORMER &&
-      globalThis.__REACT_REFRESH_VERSION_RUNTIME &&
-      globalThis.__REACT_REFRESH_VERSION_TRANSFORMER !==
-        globalThis.__REACT_REFRESH_VERSION_RUNTIME
-    ) {
-      // Both versions were set and they did not match
-      throw new Error(
-        `react-refresh versions did not match between transformer and runtime. Please check your dependencies. Transformer: ${globalThis.__REACT_REFRESH_VERSION_TRANSFORMER}, Runtime: ${globalThis.__REACT_REFRESH_VERSION_RUNTIME}`,
-      );
-    }
     Refresh.register(type, module.id + ' ' + id);
   };
   globalThis.$RefreshSig$ = Refresh.createSignatureFunctionForTransform;

yarn.lock

@@ -12322,10 +12322,10 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-"react-refresh@>=0.9 <=0.14":
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
-  integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
+"react-refresh@>=0.9 <=0.16":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.16.0.tgz#e7d45625f05c9709466d09348a25d22f79b2ad23"
+  integrity sha512-FPvF2XxTSikpJxcr+bHut2H4gJ17+18Uy20D5/F+SKzFap62R3cM5wH6b8WN3LyGSYeQilLEcJcR1fjBSI2S1A==
 
 react-resizable-panels@^0.0.61:
   version "0.0.61"