From 3dd02ea5eb3555f43ceb0cd816575cc1b324adbd Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 22 Dec 2024 19:30:01 -0500 Subject: [PATCH 1/2] Merge React Refresh runtime and transformer --- packages/configs/default/index.json | 1 - .../react-refresh-inline-script/package.json | 2 +- packages/runtimes/react-refresh/package.json | 28 ------- .../react-refresh/src/ReactRefreshRuntime.js | 74 ------------------- .../react-refresh-wrap/package.json | 3 +- .../src/ReactRefreshWrapTransformer.js | 1 + .../react-refresh-wrap/src/helpers/helpers.js | 43 +++++++---- yarn.lock | 8 +- 8 files changed, 38 insertions(+), 122 deletions(-) delete mode 100644 packages/runtimes/react-refresh/package.json delete mode 100644 packages/runtimes/react-refresh/src/ReactRefreshRuntime.js diff --git a/packages/configs/default/index.json b/packages/configs/default/index.json index 974ad645f0f..de133550b75 100644 --- a/packages/configs/default/index.json +++ b/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": { diff --git a/packages/core/integration-tests/test/integration/react-refresh-inline-script/package.json b/packages/core/integration-tests/test/integration/react-refresh-inline-script/package.json index e04e63e83ad..f0e3cd3c482 100644 --- a/packages/core/integration-tests/test/integration/react-refresh-inline-script/package.json +++ b/packages/core/integration-tests/test/integration/react-refresh-inline-script/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "react": "*" + "react": "^19" } } diff --git a/packages/runtimes/react-refresh/package.json b/packages/runtimes/react-refresh/package.json deleted file mode 100644 index ef62d366ab3..00000000000 --- a/packages/runtimes/react-refresh/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "@parcel/runtime-react-refresh", - "version": "2.13.3", - "license": "MIT", - "publishConfig": { - "access": "public" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - }, - "repository": { - "type": "git", - "url": "https://github.com/parcel-bundler/parcel.git" - }, - "main": "lib/ReactRefreshRuntime.js", - "source": "src/ReactRefreshRuntime.js", - "engines": { - "node": ">= 16.0.0", - "parcel": "^2.13.3" - }, - "dependencies": { - "@parcel/plugin": "2.13.3", - "@parcel/utils": "2.13.3", - "react-error-overlay": "6.0.9", - "react-refresh": ">=0.9 <=0.14" - } -} diff --git a/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js b/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js deleted file mode 100644 index 384d365e96d..00000000000 --- a/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js +++ /dev/null @@ -1,74 +0,0 @@ -// @flow strict-local - -import {Runtime} from '@parcel/plugin'; -import {loadConfig} from '@parcel/utils'; -// $FlowFixMe Package json is untyped -import {version} from 'react-refresh/package.json'; - -const CODE = ` -let Refresh = require('react-refresh/runtime'); -globalThis.__REACT_REFRESH_VERSION_RUNTIME = '${version}'; - -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(); - }); -} -`; - -export default (new Runtime({ - async apply({bundle, options}) { - if ( - bundle.type !== 'js' || - !options.hmrOptions || - !bundle.env.isBrowser() || - bundle.env.isLibrary || - bundle.env.isWorker() || - bundle.env.isWorklet() || - options.mode !== 'development' || - bundle.env.sourceType !== 'module' - ) { - return; - } - - let entries = bundle.getEntryAssets(); - for (let entry of entries) { - // TODO: do this in loadConfig - but it doesn't have access to the bundle... - let pkg = await loadConfig( - options.inputFS, - entry.filePath, - ['package.json'], - options.projectRoot, - ); - if ( - pkg?.config?.dependencies?.react || - pkg?.config?.devDependencies?.react || - pkg?.config?.peerDependencies?.react - ) { - return { - filePath: __filename, - code: CODE, - isEntry: true, - }; - } - } - }, -}): Runtime); diff --git a/packages/transformers/react-refresh-wrap/package.json b/packages/transformers/react-refresh-wrap/package.json index 60ae5d60e1c..7699d0470ee 100644 --- a/packages/transformers/react-refresh-wrap/package.json +++ b/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" } } diff --git a/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js b/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js index 1058e65f5e7..6b8a7a0ef4e 100644 --- a/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js +++ b/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); diff --git a/packages/transformers/react-refresh-wrap/src/helpers/helpers.js b/packages/transformers/react-refresh-wrap/src/helpers/helpers.js index 40cd5a405a1..382237c96aa 100644 --- a/packages/transformers/react-refresh-wrap/src/helpers/helpers.js +++ b/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; diff --git a/yarn.lock b/yarn.lock index b9575f77adf..ad4b90ff850 100644 --- a/yarn.lock +++ b/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" From 11ccb288f656fd7b2e93ba000970079dccf4abd8 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 22 Dec 2024 19:45:42 -0500 Subject: [PATCH 2/2] fix deps --- packages/configs/default/package.json | 1 - packages/configs/repl/index.json | 6 +----- packages/configs/repl/package.json | 1 - packages/dev/repl/src/parcel/BrowserPackageManager.js | 2 -- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/configs/default/package.json b/packages/configs/default/package.json index 9c97e7ddeba..a933aeaf0c4 100644 --- a/packages/configs/default/package.json +++ b/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", diff --git a/packages/configs/repl/index.json b/packages/configs/repl/index.json index 09b050094f0..b98cc0a56e6 100644 --- a/packages/configs/repl/index.json +++ b/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"] diff --git a/packages/configs/repl/package.json b/packages/configs/repl/package.json index 6f60463f8c2..542c7c1e827 100644 --- a/packages/configs/repl/package.json +++ b/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", diff --git a/packages/dev/repl/src/parcel/BrowserPackageManager.js b/packages/dev/repl/src/parcel/BrowserPackageManager.js index c14bc15d99c..6970db533e3 100644 --- a/packages/dev/repl/src/parcel/BrowserPackageManager.js +++ b/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,