build: Enable React Compiler

.depcheckrc.yml

@@ -8,6 +8,7 @@ ignores:
   - '@lavamoat/webpack'
   - '@lavamoat/allow-scripts'
   - '@babel/runtime'
+  - 'react-compiler-runtime'
   - '@fortawesome/fontawesome-free'
   - 'punycode'
   # injected via build system
@@ -81,8 +82,10 @@ ignores:
   - 'path-browserify' # polyfill
   - 'nyc' # coverage
   - 'core-js-pure' # polyfills
+  - 'react-compiler-webpack'
   # babel
   - '@babel/plugin-transform-logical-assignment-operators'
+  - 'babel-plugin-react-compiler'
   # used in image optimization script
   - 'sharp'
   # trezor

.eslintrc.js

@@ -321,8 +321,9 @@ module.exports = {
           jsx: true,
         },
       },
-      plugins: ['react'],
+      plugins: ['react', 'react-compiler'],
       rules: {
+        'react-compiler/react-compiler': 'error',
         'react/no-unused-prop-types': 'error',
         'react/no-unused-state': 'error',
         'react/jsx-boolean-value': 'error',
@@ -363,8 +364,9 @@ module.exports = {
           jsx: true,
         },
       },
-      plugins: ['react'],
+      plugins: ['react', 'react-compiler'],
       rules: {
+        'react-compiler/react-compiler': 'error',
         'react/no-unused-prop-types': 'warn',
         'react/no-unused-state': 'warn',
         'react/jsx-boolean-value': 'off',

babel.config.js

@@ -1,5 +1,12 @@
 const path = require('path');
 
+const ReactCompilerConfig = {
+  target: '17',
+  sources: (filename) => {
+    return filename.includes('ui/') && !filename.includes('.test.');
+  },
+};
+
 module.exports = function (api) {
   api.cache(false);
   return {
@@ -10,6 +17,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/utils/config.ts

@@ -1,6 +1,8 @@
 import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 import { parse } from 'dotenv';
+import type { ReactCompilerLoaderOption } from 'react-compiler-webpack';
+import type { EnvironmentConfig } from 'babel-plugin-react-compiler';
 import { setEnvironmentVariables } from '../../build/set-environment-variables';
 import type { Variables } from '../../lib/variables';
 import type { BuildTypesConfig, BuildType } from '../../lib/build-type';
@@ -189,3 +191,20 @@ function loadConfigVars(
 
   return definitions;
 }
+
+export const reactCompilerOptions = {
+  target: '17',
+  logger: null,
+  gating: null,
+  noEmit: true,
+  compilationMode: 'all',
+  eslintSuppressionRules: null,
+  flowSuppressions: false,
+  ignoreUseNoForget: false,
+  sources: (filename) => {
+    return filename.includes('ui/') && !filename.includes('.test.');
+  },
+  enableReanimatedCheck: false,
+  environment: {} as EnvironmentConfig,
+  panicThreshold: 'none',
+} as const satisfies ReactCompilerLoaderOption;

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 {
@@ -33,7 +37,7 @@ import { transformManifest } from './utils/plugins/ManifestPlugin/helpers';
 import { parseArgv, getDryRunMessage } from './utils/cli';
 import { getCodeFenceLoader } from './utils/loaders/codeFenceLoader';
 import { getSwcLoader } from './utils/loaders/swcLoader';
-import { getVariables } from './utils/config';
+import { getVariables, reactCompilerOptions } from './utils/config';
 import { ManifestPlugin } from './utils/plugins/ManifestPlugin';
 import { getLatestCommit } from './utils/git';
 
@@ -320,6 +324,16 @@ const config = {
         exclude: NODE_MODULES_RE,
         use: [jsxLoader, codeFenceLoader],
       },
+      {
+        test: /\.(?:ts|mts|tsx|js|mjs|jsx)$/u,
+        include: join(context, '../ui'),
+        use: [
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption(reactCompilerOptions),
+          },
+        ],
+      },
       // vendor javascript. We must transform all npm modules to ensure browser
       // compatibility.
       {