Add React Compiler (bluesky-social#4161)

* Install babel-plugin-react-compiler

* Install eslint-plugin-react-compiler

* Add and configure react-compiler-runtime

React Compiler uses a small cache function from React 19 at runtime.
Until it's possible to use R19 on RN, this adds a userspace
implementation to polyfill the cache function

* Add eslint-plugin-react-compiler to config

* @lingui/macro should run as the first plugin

@lingui recommends running their `macro` plugin [first in the
pipeline](https://lingui.dev/ref/macro). Normally with the React
Compiler, the compiler plugin should run first as we want to see the
original code as it was written. However, this sometimes causes
conflicts with other babel plugins.

In this case, it looks like the @lingui/macro plugin does some very
light transformation that the compiler can still understand and compile
correctly, so let's run it first.

Before this commit, the compiler would cause the @lingui/macro plugin to
crash because it seems like it would strip off the `extra.raw` property
off of StringLiterals which was being used
[here](https://github.com/lingui/js-lingui/blob/1293412c5dcc565636403443788a5b5d4ca206c1/packages/macro/src/macroJsx.ts#L395).
I need to figure out why the compiler is doing that but for now this
works and should be a safe change unless there were specific reasons
the macro plugin was placed 2nd to last.

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'lingui',
     'simple-import-sort',
     'bsky-internal',
+    'eslint-plugin-react-compiler',
   ],
   rules: {
     // Temporary until https://github.com/facebook/react-native/pull/43756 gets into a release.
@@ -67,6 +68,7 @@ module.exports = {
       },
     ],
     'simple-import-sort/exports': 'warn',
+    'react-compiler/react-compiler': 'error',
   },
   ignorePatterns: [
     '**/__mocks__/*.ts',

.prettierignore

@@ -12,3 +12,4 @@
 android
 ios
 src/locale/locales
+lib/react-compiler-runtime

babel.config.js

@@ -19,6 +19,13 @@ module.exports = function (api) {
       ],
     ],
     plugins: [
+      'macros',
+      [
+        'babel-plugin-react-compiler',
+        {
+          runtimeModule: 'react-compiler-runtime',
+        },
+      ],
       [
         'module:react-native-dotenv',
         {
@@ -46,7 +53,6 @@ module.exports = function (api) {
           },
         },
       ],
-      'macros',
       'react-native-reanimated/plugin', // NOTE: this plugin MUST be last
     ],
     env: {

lib/react-compiler-runtime/index.js

@@ -0,0 +1,21 @@
+const React = require('react')
+const $empty = Symbol.for('react.memo_cache_sentinel')
+/**
+ * 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. Please upgrade to React 19 as soon as you can.
+ **/
+export function c(size) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  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,9 @@
+{
+  "name": "react-compiler-runtime",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "index.js",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}

package.json

@@ -161,6 +161,7 @@
     "psl": "^1.9.0",
     "react": "18.2.0",
     "react-avatar-editor": "^13.0.0",
+    "react-compiler-runtime": "file:./lib/react-compiler-runtime",
     "react-dom": "^18.2.0",
     "react-keyed-flatten-children": "^3.0.0",
     "react-native": "0.73.2",
@@ -235,13 +236,15 @@
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
     "babel-plugin-react-native-web": "^0.18.12",
     "babel-preset-expo": "^10.0.0",
     "eslint": "^8.19.0",
     "eslint-plugin-bsky-internal": "link:./eslint",
     "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-lingui": "^0.2.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-react-native-a11y": "^3.3.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "html-webpack-plugin": "^5.5.0",