Merge pull request #51183 from software-mansion-labs/fix/compiler-fas…

…t-refresh

[NoQA] Use official react-compiler-runtime package + fix fast refresh not refreshing components on mobile

.eslintrc.js

@@ -109,7 +109,6 @@ module.exports = {
         'plugin:prettier/recommended',
     ],
     plugins: ['@typescript-eslint', 'jsdoc', 'you-dont-need-lodash-underscore', 'react-native-a11y', 'react', 'testing-library', 'eslint-plugin-react-compiler', 'lodash', 'deprecation'],
-    ignorePatterns: ['lib/**'],
     parser: '@typescript-eslint/parser',
     parserOptions: {
         project: path.resolve(__dirname, './tsconfig.json'),

.prettierignore

@@ -18,8 +18,6 @@ package-lock.json
 *.markdown
 # We need to modify the import here specifically, hence we disable prettier to get rid of the sorted imports
 src/libs/E2E/reactNativeLaunchingTest.ts
-# Temporary while we keep react-compiler in our repo
-lib/**
 
 # Automatically generated files
 src/libs/SearchParser/searchParser.js

babel.config.js

@@ -3,11 +3,14 @@ require('dotenv').config();
 const IS_E2E_TESTING = process.env.E2E_TESTING === 'true';
 
 const ReactCompilerConfig = {
-    runtimeModule: 'react-compiler-runtime',
+    target: '18',
     environment: {
         enableTreatRefLikeIdentifiersAsRefs: true,
     },
+    // We exclude 'tests' directory from compilation, but still compile components imported in test files.
+    sources: (filename) => !filename.includes('tests/') && !filename.includes('node_modules/'),
 };
+
 /**
  * Setting targets to node 20 to reduce JS bundle size
  * It is also recommended by babel:
@@ -52,6 +55,8 @@ 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 +159,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;
 };

package.json

@@ -260,7 +260,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": "^19.0.0-beta-8a03594-20241020",
     "babel-plugin-react-native-web": "^0.18.7",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "clean-webpack-plugin": "^4.0.0",
@@ -281,7 +281,7 @@
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jsdoc": "^46.2.6",
     "eslint-plugin-lodash": "^7.4.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-8a03594-20241020",
     "eslint-plugin-react-native-a11y": "^3.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
@@ -304,8 +304,8 @@
     "portfinder": "^1.0.28",
     "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-healthcheck": "^19.0.0-beta-8a03594-20241020",
+    "react-compiler-runtime": "^19.0.0-beta-8a03594-20241020",
     "react-is": "^18.3.1",
     "react-native-clean-project": "^4.0.0-alpha4.0",
     "react-test-renderer": "18.3.1",

patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625+001+initial.patch → patches/react-compiler-healthcheck+19.0.0-beta-8a03594-20241020+001+initial.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-compiler-healthcheck/dist/index.js b/node_modules/react-compiler-healthcheck/dist/index.js
-index b427385..4bf23db 100755
+index 5a4060d..460339b 100755
 --- a/node_modules/react-compiler-healthcheck/dist/index.js
 +++ b/node_modules/react-compiler-healthcheck/dist/index.js
-@@ -69154,7 +69154,7 @@ var reactCompilerCheck = {
+@@ -56969,7 +56969,7 @@ var reactCompilerCheck = {
        compile(source, path);
      }
    },
@@ -11,11 +11,11 @@ index b427385..4bf23db 100755
      const totalComponents =
        SucessfulCompilation.length +
        countUniqueLocInEvents(OtherFailures) +
-@@ -69164,6 +69164,50 @@ var reactCompilerCheck = {
+@@ -56979,6 +56979,50 @@ var reactCompilerCheck = {
          `Successfully compiled ${SucessfulCompilation.length} out of ${totalComponents} components.`
        )
      );
-+    
++
 +    if (verbose) {
 +      for (const compilation of [...SucessfulCompilation, ...ActionableFailures, ...OtherFailures]) {
 +        const filename = compilation.fnLoc?.filename;
@@ -38,33 +38,33 @@ index b427385..4bf23db 100755
 +        if (compilation.kind === "CompileError") {
 +          const { reason, severity, loc } = compilation.detail;
 +
-+            const lnNo = loc.start?.line;
-+            const colNo = loc.start?.column;
++          const lnNo = loc.start?.line;
++          const colNo = loc.start?.column;
 +
-+            const isTodo = severity === ErrorSeverity.Todo;
++          const isTodo = severity === ErrorSeverity.Todo;
 +
-+            console.log(
-+              chalk[isTodo ? 'yellow' : 'red'](
-+                `Failed to compile ${
-+                  filename
-+                }${
-+                  lnNo !== undefined ? `:${lnNo}${
-+                    colNo !== undefined ? `:${colNo}` : ""
-+                  }.` : ""
-+                }`
-+              ),
-+              chalk[isTodo ? 'yellow' : 'red'](reason? `Reason: ${reason}` : "")
-+            );
-+            console.log("\n");
++          console.log(
++            chalk[isTodo ? 'yellow' : 'red'](
++              `Failed to compile ${
++                filename
++              }${
++                lnNo !== undefined ? `:${lnNo}${
++                  colNo !== undefined ? `:${colNo}` : ""
++                }.` : ""
++              }`
++            ),
++            chalk[isTodo ? 'yellow' : 'red'](reason? `Reason: ${reason}` : "")
++          );
++          console.log("\n");
 +        }
 +      }
 +    }
    },
  };
  const JsFileExtensionRE = /(js|ts|jsx|tsx)$/;
-@@ -69200,9 +69244,16 @@ function main() {
-         type: "string",
-         default: "**/+(*.{js,mjs,jsx,ts,tsx}|package.json)",
+@@ -57015,9 +57059,16 @@ function main() {
+         type: 'string',
+         default: '**/+(*.{js,mjs,jsx,ts,tsx}|package.json)',
        })
 +      .option('verbose', {
 +        description: 'run with verbose logging',
@@ -73,13 +73,13 @@ index b427385..4bf23db 100755
 +        alias: 'v',
 +      })
        .parseSync();
-     const spinner = ora("Checking").start();
+     const spinner = ora('Checking').start();
      let src = argv.src;
 +    let verbose = argv.verbose;
      const globOptions = {
        onlyFiles: true,
        ignore: [
-@@ -69222,7 +69273,7 @@ function main() {
+@@ -57037,7 +57088,7 @@ function main() {
        libraryCompatCheck.run(source, path);
      }
      spinner.stop();

patches/react-compiler-healthcheck+0.0.0-experimental-b130d5f-20240625+002+enable-ref-identifiers.patch → patches/react-compiler-healthcheck+19.0.0-beta-8a03594-20241020+002+enable-ref-identifiers.patch

@@ -1,28 +1,28 @@
 diff --git a/node_modules/react-compiler-healthcheck/dist/index.js b/node_modules/react-compiler-healthcheck/dist/index.js
-index 4bf23db..fa2ab22 100755
+index 460339b..17b0f96 100755
 --- a/node_modules/react-compiler-healthcheck/dist/index.js
 +++ b/node_modules/react-compiler-healthcheck/dist/index.js
-@@ -69088,6 +69088,9 @@ const COMPILER_OPTIONS = {
-   compilationMode: "infer",
-   panicThreshold: "critical_errors",
-   logger: logger,
+@@ -56902,6 +56902,9 @@ const COMPILER_OPTIONS = {
+   noEmit: true,
+   compilationMode: 'infer',
+   panicThreshold: 'critical_errors',
 +  environment: {
 +    enableTreatRefLikeIdentifiersAsRefs: true,
 +  },
+   logger: logger,
  };
  function isActionableDiagnostic(detail) {
-   switch (detail.severity) {
 diff --git a/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts b/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
-index 09c9b9b..d2418e0 100644
+index 3094548..fd05b76 100644
 --- a/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
 +++ b/node_modules/react-compiler-healthcheck/src/checks/reactCompiler.ts
-@@ -51,6 +51,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
-   compilationMode: "infer",
-   panicThreshold: "critical_errors",
-   logger,
+@@ -50,6 +50,9 @@ const COMPILER_OPTIONS: Partial<PluginOptions> = {
+   noEmit: true,
+   compilationMode: 'infer',
+   panicThreshold: 'critical_errors',
 +  environment: {
 +    enableTreatRefLikeIdentifiersAsRefs: true,
 +  },
+   logger,
  };
 
- function isActionableDiagnostic(detail: CompilerErrorDetailOptions) {