From 0f5b0f11fa1e68156f9884e390d3db4fe05dfd4c Mon Sep 17 00:00:00 2001 From: Piotr Tomczewski Date: Wed, 9 Oct 2024 00:26:02 +0200 Subject: [PATCH 1/2] chore: use official react-compiler-runtime package - Replaced local `react-compiler-runtime` with the official npm package. - Updated Babel config to target React 18 by changing `runtimeModule` to `target: '18'`. - Removed local `react-compiler-runtime` implementation and its dependencies from `lib/` directory. - Updated references in `package-lock.json` and `package.json` to point to the official package. --- babel.config.js | 2 +- lib/react-compiler-runtime/index.js | 21 -------------------- lib/react-compiler-runtime/package.json | 10 ---------- package-lock.json | 26 ++++++++++++------------- package.json | 4 ++-- 5 files changed, 16 insertions(+), 47 deletions(-) delete mode 100644 lib/react-compiler-runtime/index.js delete mode 100644 lib/react-compiler-runtime/package.json diff --git a/babel.config.js b/babel.config.js index 663eb29d5d2..a53738363d3 100644 --- a/babel.config.js +++ b/babel.config.js @@ -3,7 +3,7 @@ require('dotenv').config(); const IS_E2E_TESTING = process.env.E2E_TESTING === 'true'; const ReactCompilerConfig = { - runtimeModule: 'react-compiler-runtime', + target: '18', environment: { enableTreatRefLikeIdentifiersAsRefs: true, }, diff --git a/lib/react-compiler-runtime/index.js b/lib/react-compiler-runtime/index.js deleted file mode 100644 index 54e88d2b703..00000000000 --- a/lib/react-compiler-runtime/index.js +++ /dev/null @@ -1,21 +0,0 @@ -// lib/react-compiler-runtime.js -const $empty = Symbol.for("react.memo_cache_sentinel"); -const React = require('react'); -/** - * DANGER: this hook is NEVER meant to be called directly! - * - * Note that this is a temporary userspace implementation of this function - * from React 19. It is not as efficient and may invalidate more frequently - * than the official API. Better to upgrade to React 19 as soon as we can. - **/ -export function c(size) { - return React.useState(() => { - const $ = new Array(size); - for (let ii = 0; ii < size; ii++) { - $[ii] = $empty; - } - // @ts-ignore - $[$empty] = true; - return $; - })[0]; -} diff --git a/lib/react-compiler-runtime/package.json b/lib/react-compiler-runtime/package.json deleted file mode 100644 index 3a0323538b6..00000000000 --- a/lib/react-compiler-runtime/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "react-compiler-runtime", - "version": "0.0.1", - "description": "Runtime for React Compiler", - "license": "MIT", - "main": "index.js", - "dependencies": { - "react": "18.3.1" - } -} diff --git a/package-lock.json b/package-lock.json index a6d9eefc160..75cfd38f0a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -203,7 +203,7 @@ "babel-jest": "29.4.1", "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.0", - "babel-plugin-react-compiler": "0.0.0-experimental-334f00b-20240725", + "babel-plugin-react-compiler": "^0.0.0-experimental-8a03594-20241020", "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^4.0.0", @@ -248,7 +248,7 @@ "prettier": "^2.8.8", "pusher-js-mock": "^0.3.3", "react-compiler-healthcheck": "^0.0.0-experimental-ab3118d-20240725", - "react-compiler-runtime": "file:./lib/react-compiler-runtime", + "react-compiler-runtime": "^0.0.0-experimental-8a03594-20241020", "react-is": "^18.3.1", "react-native-clean-project": "^4.0.0-alpha4.0", "react-test-renderer": "18.3.1", @@ -278,14 +278,6 @@ "npm": "10.8.2" } }, - "lib/react-compiler-runtime": { - "version": "0.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "react": "18.3.1" - } - }, "node_modules/@actions/core": { "version": "1.10.0", "dev": true, @@ -18344,7 +18336,9 @@ } }, "node_modules/babel-plugin-react-compiler": { - "version": "0.0.0-experimental-334f00b-20240725", + "version": "0.0.0-experimental-8a03594-20241020", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-0.0.0-experimental-8a03594-20241020.tgz", + "integrity": "sha512-+UrYBajQdL89vy6Cwd1Cn/37gNUnRqoRoAKW1WApQfviuyYNO5rVfocnzdxAK8zOYZlOISR61vbH/i18NG+lig==", "dev": true, "license": "MIT", "dependencies": { @@ -34160,8 +34154,14 @@ } }, "node_modules/react-compiler-runtime": { - "resolved": "lib/react-compiler-runtime", - "link": true + "version": "0.0.0-experimental-8a03594-20241020", + "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-0.0.0-experimental-8a03594-20241020.tgz", + "integrity": "sha512-IDHaRvxTBKoq51sMTR6lbU10EllQXhRoE9dfTBirv6xTRyh4Rb5oObtibXzF47GNCDgwdxNNEg6sTlx+5dHfYA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "react": "^18.2.0 || ^19.0.0" + } }, "node_modules/react-content-loader": { "version": "7.0.0", diff --git a/package.json b/package.json index b5e950df415..b57fdec3edb 100644 --- a/package.json +++ b/package.json @@ -259,7 +259,7 @@ "babel-jest": "29.4.1", "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.0", - "babel-plugin-react-compiler": "0.0.0-experimental-334f00b-20240725", + "babel-plugin-react-compiler": "^0.0.0-experimental-8a03594-20241020", "babel-plugin-react-native-web": "^0.18.7", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^4.0.0", @@ -304,7 +304,7 @@ "prettier": "^2.8.8", "pusher-js-mock": "^0.3.3", "react-compiler-healthcheck": "^0.0.0-experimental-ab3118d-20240725", - "react-compiler-runtime": "file:./lib/react-compiler-runtime", + "react-compiler-runtime": "^0.0.0-experimental-8a03594-20241020", "react-is": "^18.3.1", "react-native-clean-project": "^4.0.0-alpha4.0", "react-test-renderer": "18.3.1", From 215f496c27e6fd11fd826249bc094da3905a3250 Mon Sep 17 00:00:00 2001 From: Piotr Tomczewski Date: Tue, 22 Oct 2024 11:52:33 +0200 Subject: [PATCH 2/2] fix(babel): ensure components compiled with react-compiler are tested in Jest - Fixed an issue where components compiled using `react-compiler` were not being tested in Jest. - Updated ReactCompilerConfig to exclude test files from compilation but still compile components imported in tests. --- babel.config.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/babel.config.js b/babel.config.js index a53738363d3..8e05e87cb6e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -7,6 +7,8 @@ const ReactCompilerConfig = { environment: { enableTreatRefLikeIdentifiersAsRefs: true, }, + // We exclude 'tests' directory from compilation, but still compile components imported in test files. + sources: (filename) => !filename.includes('tests/'), }; /** * Setting targets to node 20 to reduce JS bundle size @@ -52,6 +54,7 @@ const webpack = { const metro = { presets: [require('@react-native/babel-preset')], plugins: [ + ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! // This is needed due to a react-native bug: https://github.com/facebook/react-native/issues/29084#issuecomment-1030732709 // It is included in metro-react-native-babel-preset but needs to be before plugin-proposal-class-properties or FlatList will break '@babel/plugin-transform-flow-strip-types', @@ -154,11 +157,5 @@ module.exports = (api) => { const runningIn = api.caller((args = {}) => args.name); console.debug(' - running in: ', runningIn); - // don't include react-compiler in jest, because otherwise tests will fail - if (runningIn !== 'babel-jest') { - // must run first! - metro.plugins.unshift(['babel-plugin-react-compiler', ReactCompilerConfig]); - } - return ['metro', 'babel-jest'].includes(runningIn) ? metro : webpack; };