Merge pull request #42287 from margelo/feat/react-compiler

[NoQA] feat: react-compiler

.eslintrc.js

@@ -95,7 +95,8 @@ module.exports = {
         'plugin:you-dont-need-lodash-underscore/all',
         'prettier',
     ],
-    plugins: ['@typescript-eslint', 'jsdoc', 'you-dont-need-lodash-underscore', 'react-native-a11y', 'react', 'testing-library'],
+    plugins: ['@typescript-eslint', 'jsdoc', 'you-dont-need-lodash-underscore', 'react-native-a11y', 'react', 'testing-library', 'eslint-plugin-react-compiler'],
+    ignorePatterns: ['lib/**'],
     parser: '@typescript-eslint/parser',
     parserOptions: {
         project: path.resolve(__dirname, './tsconfig.json'),
@@ -187,6 +188,7 @@ module.exports = {
                 touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
             },
         ],
+        'react-compiler/react-compiler': 'error',
 
         // Disallow usage of certain functions and imports
         'no-restricted-syntax': [

.prettierignore

@@ -17,3 +17,5 @@ package-lock.json
 *.md
 # 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/**

babel.config.js

@@ -2,8 +2,12 @@ require('dotenv').config();
 
 const IS_E2E_TESTING = process.env.E2E_TESTING === 'true';
 
+const ReactCompilerConfig = {
+    runtimeModule: 'react-compiler-runtime',
+};
 const defaultPresets = ['@babel/preset-react', '@babel/preset-env', '@babel/preset-flow', '@babel/preset-typescript'];
-let defaultPlugins = [
+const defaultPlugins = [
+    ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
     // Adding the commonjs: true option to react-native-web plugin can cause styling conflicts
     ['react-native-web'],
 
@@ -141,5 +145,11 @@ 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;
 };

lib/react-compiler-runtime/index.js

@@ -0,0 +1,21 @@
+// 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];
+}

lib/react-compiler-runtime/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "react-compiler-runtime",
+  "version": "0.0.1",
+  "description": "Runtime for React Compiler",
+  "license": "MIT",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^18.2.0"
+  }
+}