Set up react-compiler in webpack, babel build configs

Author: MajorLift

babel.config.js

@@ -1,5 +1,16 @@
 const path = require('path');
 
+const ReactCompilerConfig = {
+  target: '17',
+  sources: (filename) => {
+    return (
+      filename.indexOf('ui/') !== -1 &&
+      filename.indexOf('ui/pages/confirmations') === -1 &&
+      filename.indexOf('ui/components/app/identity') === -1
+    );
+  },
+};
+
 module.exports = function (api) {
   api.cache(false);
   return {
@@ -10,6 +21,7 @@ module.exports = function (api) {
       browsers: ['chrome >= 89', 'firefox >= 89'],
     },
     plugins: [
+      ['babel-plugin-react-compiler', ReactCompilerConfig],
       // `browserify` is old and busted, and doesn't support `??=` (and other
       // logical assignment operators). This plugin lets us target es2020-level
       // browsers (except we do still end up with transpiled logical assignment

development/webpack/constants.ts

@@ -0,0 +1,20 @@
+import { defineReactCompilerLoaderOption } from 'react-compiler-webpack';
+
+export const reactCompilerOptions = {
+  target: '17',
+  logger: null,
+  gating: null,
+  noEmit: true,
+  compilationMode: 'all',
+  eslintSuppressionRules: null,
+  flowSuppressions: false,
+  ignoreUseNoForget: false,
+  sources: (filename) => {
+    return (
+      filename.indexOf('ui/') !== -1 &&
+      filename.indexOf('ui/pages/confirmations') === -1 &&
+      filename.indexOf('ui/components/app/identity') === -1
+    );
+  },
+  enableReanimatedCheck: false,
+} as const satisfies Parameters<typeof defineReactCompilerLoaderOption>[0];

development/webpack/webpack.config.ts

@@ -18,6 +18,10 @@ import rtlCss from 'postcss-rtlcss';
 import autoprefixer from 'autoprefixer';
 import discardFonts from 'postcss-discard-font-face';
 import type ReactRefreshPluginType from '@pmmmwh/react-refresh-webpack-plugin';
+import {
+  defineReactCompilerLoaderOption,
+  reactCompilerLoader,
+} from 'react-compiler-webpack';
 import tailwindcss from 'tailwindcss';
 import { loadBuildTypesConfig } from '../lib/build-type';
 import {
@@ -36,6 +40,7 @@ import { getSwcLoader } from './utils/loaders/swcLoader';
 import { getVariables } from './utils/config';
 import { ManifestPlugin } from './utils/plugins/ManifestPlugin';
 import { getLatestCommit } from './utils/git';
+import { reactCompilerOptions } from './constants';
 
 const buildTypes = loadBuildTypesConfig();
 const { args, cacheKey, features } = parseArgv(argv.slice(2), buildTypes);
@@ -307,13 +312,27 @@ const config = {
       {
         test: /\.(?:ts|mts|tsx)$/u,
         exclude: NODE_MODULES_RE,
-        use: [tsxLoader, codeFenceLoader],
+        use: [
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption(reactCompilerOptions),
+          },
+          tsxLoader,
+          codeFenceLoader,
+        ],
       },
       // own javascript, and own javascript with jsx
       {
         test: /\.(?:js|mjs|jsx)$/u,
         exclude: NODE_MODULES_RE,
-        use: [jsxLoader, codeFenceLoader],
+        use: [
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption(reactCompilerOptions),
+          },
+          jsxLoader,
+          codeFenceLoader,
+        ],
       },
       // vendor javascript. We must transform all npm modules to ensure browser
       // compatibility.