stash

Author: MajorLift

.depcheckrc.yml

@@ -82,6 +82,7 @@ ignores:
   - 'path-browserify' # polyfill
   - 'nyc' # coverage
   - 'core-js-pure' # polyfills
+  - 'react-compiler-webpack' # build tool
   # babel
   - '@babel/plugin-transform-logical-assignment-operators'
   - 'babel-plugin-react-compiler'

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,117 @@ function loadConfigVars(
 
   return definitions;
 }
+
+/**
+ * React Compiler logger that tracks compilation statistics
+ */
+class ReactCompilerLogger {
+  private compiledCount = 0;
+
+  private skippedCount = 0;
+
+  private errorCount = 0;
+
+  private compiledFiles: string[] = [];
+
+  private skippedFiles: string[] = [];
+
+  private errorFiles: string[] = [];
+
+  logEvent(filename: string | null, event: { kind: string; reason?: string }) {
+    if (filename === null) {
+      return;
+    }
+    switch (event.kind) {
+      case 'CompileSuccess':
+        this.compiledCount++;
+        this.compiledFiles.push(filename);
+        // console.log(`✅ Compiled: ${filename}`);
+        break;
+      case 'CompileSkip':
+        this.skippedCount++;
+        this.skippedFiles.push(filename);
+        break;
+      case 'CompileError':
+        this.errorCount++;
+        this.errorFiles.push(filename);
+        // console.error(
+        //   `❌ React Compiler error in ${filename}: ${event.reason || 'Unknown error'}`,
+        // );
+        break;
+      default:
+        // Ignore other event types
+        break;
+    }
+  }
+
+  getStats() {
+    return {
+      compiled: this.compiledCount,
+      skipped: this.skippedCount,
+      errors: this.errorCount,
+      total: this.compiledCount + this.skippedCount + this.errorCount,
+      compiledFiles: this.compiledFiles,
+      skippedFiles: this.skippedFiles,
+      errorFiles: this.errorFiles,
+    };
+  }
+
+  logSummary() {
+    const stats = this.getStats();
+    console.log('\n📊 React Compiler Statistics:');
+    console.log(`   ✅ Compiled: ${stats.compiled} files`);
+    console.log(`   ⏭️  Skipped: ${stats.skipped} files`);
+    console.log(`   ❌ Errors: ${stats.errors} files`);
+    console.log(`   📦 Total processed: ${stats.total} files`);
+  }
+}
+
+// Create a singleton logger instance
+const reactCompilerLogger = new ReactCompilerLogger();
+
+export const reactCompilerOptions = {
+  target: '17',
+  logger: reactCompilerLogger,
+  gating: null,
+  noEmit: false,
+  compilationMode: 'all',
+  eslintSuppressionRules: null,
+  flowSuppressions: false,
+  ignoreUseNoForget: false,
+  sources: (filename) => {
+    if (!filename.includes('/ui/')) {
+      return false;
+    }
+    const excludePatterns = [
+      '.test.',
+      '.stories.',
+      '.container.',
+      '/ui/index.js',
+      '/__mocks__/',
+      '/__snapshots__/',
+      '/constants/',
+      '/helpers/',
+      '/ducks/',
+      '/selectors/',
+      '/store/',
+      '/component-library/',
+    ];
+    if (excludePatterns.some((pattern) => filename.includes(pattern))) {
+      return false;
+    }
+    return true;
+  },
+  enableReanimatedCheck: false,
+  environment: {} as EnvironmentConfig,
+  dynamicGating: null,
+  panicThreshold: 'none',
+  customOptOutDirectives: null,
+} as const satisfies ReactCompilerLoaderOption;
+
+/**
+ * Get the React Compiler logger instance for accessing statistics
+ */
+export function getReactCompilerLogger(): ReactCompilerLogger {
+  return reactCompilerLogger;
+}

development/webpack/utils/loaders/swcLoader.ts

@@ -1,4 +1,3 @@
-import { sep } from 'node:path';
 import type { LoaderContext } from 'webpack';
 import { type JSONSchema7 } from 'schema-utils/declarations/validate';
 import { validate } from 'schema-utils';
@@ -173,23 +172,15 @@ type SchemaOptions = { keepDefaultedPropertiesOptional: true };
 export type SwcLoaderOptions = FromSchema<typeof schema, SchemaOptions>;
 
 type Context = LoaderContext<SwcLoaderOptions>;
-export default function swcLoader(this: Context, src: string, srcMap?: string) {
+export default function swcLoader(this: Context, src: string) {
   const pluginOptions = this.getOptions();
   validate(schema, pluginOptions, { name: 'swcLoader' });
 
   const options: Options = {
     ...pluginOptions,
     envName: this.mode,
     filename: this.resourcePath,
-    inputSourceMap:
-      // some files in node_modules claim to have sourcemaps when they do
-      // not[0], and SWC has a bug where logs to stderror if it tries to use a
-      // sourcemap that does not exist[1]. So we disable sourcemaps for
-      // node_modules. Ideally, we would not disable them, as they *are* useful
-      // for debugging.
-      // [0]: https://github.com/trezor/trezor-suite/issues/20298
-      // [1]: https://github.com/swc-project/swc/issues/9416
-      this.resourcePath.includes(`${sep}node_modules${sep}`) ? false : srcMap,
+    inputSourceMap: false,
     sourceFileName: this.resourcePath,
     sourceMaps: this.sourceMap,
     swcrc: false,

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,11 @@ 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,
+  getReactCompilerLogger,
+} from './utils/config';
 import { ManifestPlugin } from './utils/plugins/ManifestPlugin';
 import { getLatestCommit } from './utils/git';
 
@@ -210,6 +218,17 @@ if (args.progress) {
   const { ProgressPlugin } = require('webpack');
   plugins.push(new ProgressPlugin());
 }
+
+// React Compiler statistics logger plugin
+plugins.push({
+  apply(compiler) {
+    compiler.hooks.done.tap('ReactCompilerStatsPlugin', () => {
+      const logger = getReactCompilerLogger();
+      logger.logSummary();
+    });
+  },
+} as WebpackPluginInstance);
+
 // #endregion plugins
 
 const swcConfig = { args, browsersListQuery, isDevelopment };
@@ -323,13 +342,24 @@ const config = {
       {
         test: /\.(?:ts|mts|tsx)$/u,
         exclude: NODE_MODULES_RE,
-        use: [tsxLoader, codeFenceLoader],
+        use: [tsxLoader],
       },
       // own javascript, and own javascript with jsx
       {
         test: /\.(?:js|mjs|jsx)$/u,
         exclude: NODE_MODULES_RE,
-        use: [jsxLoader, codeFenceLoader],
+        use: [jsxLoader],
+      },
+      {
+        test: /\.(?:js|mjs|jsx|ts|mts|tsx)$/u,
+        exclude: NODE_MODULES_RE,
+        use: [
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption(reactCompilerOptions),
+          },
+          codeFenceLoader,
+        ],
       },
       // vendor javascript. We must transform all npm modules to ensure browser
       // compatibility.

lavamoat/build-system/policy.json

@@ -291,7 +291,7 @@
         "@babel/preset-env>@babel/helper-plugin-utils": true
       }
     },
-    "@babel/preset-typescript>@babel/plugin-syntax-jsx": {
+    "react-compiler-webpack>@babel/plugin-syntax-jsx": {
       "packages": {
         "@babel/preset-env>@babel/helper-plugin-utils": true
       }
@@ -584,7 +584,7 @@
         "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-annotate-as-pure": true,
         "@babel/core>@babel/helper-module-transforms>@babel/helper-module-imports": true,
         "@babel/preset-env>@babel/helper-plugin-utils": true,
-        "@babel/preset-typescript>@babel/plugin-syntax-jsx": true
+        "react-compiler-webpack>@babel/plugin-syntax-jsx": true
       }
     },
     "@babel/preset-react>@babel/plugin-transform-react-pure-annotations": {
@@ -768,7 +768,7 @@
       "packages": {
         "@babel/preset-env>@babel/helper-plugin-utils": true,
         "@babel/preset-env>@babel/helper-validator-option": true,
-        "@babel/preset-typescript>@babel/plugin-syntax-jsx": true,
+        "react-compiler-webpack>@babel/plugin-syntax-jsx": true,
         "@babel/preset-env>@babel/plugin-transform-modules-commonjs": true,
         "@babel/preset-typescript>@babel/plugin-transform-typescript": true
       }

lavamoat/webpack/mv2/policy.json

@@ -4847,6 +4847,14 @@
         "react": true
       }
     },
+    "react-compiler-runtime": {
+      "globals": {
+        "console.error": true
+      },
+      "packages": {
+        "react": true
+      }
+    },
     "react-devtools-core": {
       "globals": {
         "CSSStyleRule": true,

lavamoat/webpack/mv3/policy.json

@@ -3372,6 +3372,14 @@
         "react": true
       }
     },
+    "react-compiler-runtime": {
+      "globals": {
+        "console.error": true
+      },
+      "packages": {
+        "react": true
+      }
+    },
     "react-devtools-core": {
       "globals": {
         "CSSStyleRule": true,

package.json

@@ -682,6 +682,7 @@
     "process": "^0.11.10",
     "pumpify": "^2.0.1",
     "randomcolor": "^0.5.4",
+    "react-compiler-webpack": "0.2.1",
     "react-devtools": "^6.1.5",
     "react-devtools-core": "^6.1.5",
     "react-syntax-highlighter": "^15.5.0",

ui/components/app/assets/token-list/token-list.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import React, { useContext, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { type CaipChainId, type Hex } from '@metamask/utils';
@@ -154,7 +156,7 @@ function TokenList({ onTokenClick, safeChains }: TokenListProps) {
   ]);
 
   const virtualizer = useVirtualizer({
-    count: sortedFilteredTokens.length,
+    count: sortedFilteredTokens?.length ?? 0,
     getScrollElement: () => scrollContainerRef?.current || null,
     estimateSize: () => ASSET_CELL_HEIGHT,
     overscan: 5,

ui/components/app/toast-master/toast-master.js

@@ -330,6 +330,8 @@ function SurveyToastMayDelete() {
 }
 
 function PrivacyPolicyToast() {
+  'use no memo';
+
   const t = useI18nContext();
 
   const { showPrivacyPolicyToast, newPrivacyPolicyToastShownDate } =