build: Enable React Compiler for Browserify builds, fix react-compiler/react-compiler ESLint rule violations

.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
@@ -83,6 +84,7 @@ ignores:
   - 'core-js-pure' # polyfills
   # babel
   - '@babel/plugin-transform-logical-assignment-operators'
+  - 'babel-plugin-react-compiler'
   # used in image optimization script
   - 'sharp'
   # trezor

.eslintrc.js

@@ -320,8 +320,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',
@@ -362,8 +363,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

@@ -2,13 +2,23 @@ const path = require('path');
 
 module.exports = function (api) {
   api.cache(false);
+  const slash = `\\${path.sep}`;
   return {
     parserOpts: {
       strictMode: true,
     },
     targets: {
       browsers: ['chrome >= 89', 'firefox >= 89'],
     },
+    overrides: [
+      {
+        test: new RegExp(
+          `^${path.join(__dirname, 'ui')}${slash}(?:components|contexts|hooks|layouts|pages)${slash}(?:.(?!\\.(?:test|stories|container)))+\\.(?:m?[jt]s|[jt]sx)$`,
+          'u',
+        ),
+        plugins: [['babel-plugin-react-compiler', { target: '17' }]],
+      },
+    ],
     plugins: [
       // `browserify` is old and busted, and doesn't support `??=` (and other
       // logical assignment operators). This plugin lets us target es2020-level