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,7 @@
 import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 import { parse } from 'dotenv';
+import type { ReactCompilerLoaderOption } from 'react-compiler-webpack';
 import { setEnvironmentVariables } from '../../build/set-environment-variables';
 import type { Variables } from '../../lib/variables';
 import type { BuildTypesConfig, BuildType } from '../../lib/build-type';
@@ -189,3 +190,105 @@ 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,
+  sources: (filename) => {
+    if (!filename.includes('/ui/')) {
+      return false;
+    }
+    const excludePatterns = [
+      '.test.',
+      '.stories.',
+      '.container.',
+      '/ui/index.js',
+      '/__mocks__/',
+      '/__snapshots__/',
+      '/constants/',
+      '/helpers/',
+      '/ducks/',
+      '/selectors/',
+      '/store/',
+    ];
+    if (excludePatterns.some((pattern) => filename.includes(pattern))) {
+      return false;
+    }
+    return true;
+  },
+} as const satisfies ReactCompilerLoaderOption;
+
+/**
+ * Get the React Compiler logger instance for accessing statistics
+ */
+export function getReactCompilerLogger(): ReactCompilerLogger {
+  return reactCompilerLogger;
+}

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 };
@@ -319,6 +338,17 @@ const config = {
         dependency: 'url',
         type: 'asset/resource',
       },
+      {
+        test: /\.(?:js|mjs|jsx|ts|mts|tsx)$/u,
+        include: /\/ui\//u,
+        exclude: NODE_MODULES_RE,
+        use: [
+          {
+            loader: reactCompilerLoader,
+            options: defineReactCompilerLoaderOption(reactCompilerOptions),
+          },
+        ],
+      },
       // own typescript, and own typescript with jsx
       {
         test: /\.(?:ts|mts|tsx)$/u,

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
       }
@@ -1559,10 +1559,12 @@
       },
       "globals": {
         "Buffer": true,
+        "File": true,
         "TextDecoder": true,
         "URL": true,
         "__DEV__": true,
         "atob": true,
+        "btoa": true,
         "compile": true,
         "console": true,
         "define": 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

@@ -616,7 +616,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-tailwindcss": "^3.18.0",
@@ -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",

yarn.lock

@@ -834,7 +834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.25.9, @babel/plugin-syntax-jsx@npm:^7.7.2":
+"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.25.9, @babel/plugin-syntax-jsx@npm:^7.27.1, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.27.1
   resolution: "@babel/plugin-syntax-jsx@npm:7.27.1"
   dependencies:
@@ -933,6 +933,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-typescript@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.27.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.27.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/87836f7e32af624c2914c73cd6b9803cf324e07d43f61dbb973c6a86f75df725e12540d91fac7141c14b697aa9268fd064220998daced156e96ac3062d7afb41
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
@@ -24415,9 +24426,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-compiler@npm:19.1.0-rc.2":
-  version: 19.1.0-rc.2
-  resolution: "eslint-plugin-react-compiler@npm:19.1.0-rc.2"
+"eslint-plugin-react-compiler@npm:19.0.0-beta-af1b7da-20250417":
+  version: 19.0.0-beta-af1b7da-20250417
+  resolution: "eslint-plugin-react-compiler@npm:19.0.0-beta-af1b7da-20250417"
   dependencies:
     "@babel/core": "npm:^7.24.4"
     "@babel/parser": "npm:^7.24.4"
@@ -24427,7 +24438,7 @@ __metadata:
     zod-validation-error: "npm:^3.0.3"
   peerDependencies:
     eslint: ">=7"
-  checksum: 10/cabdcbe884722049c11e84a13d1b2747c0612c61b23505fdf7b69dd9ee26e0f4bb86452486708fb359205ab5770b279d8dabac3a2d0c4409a176773eed7a4471
+  checksum: 10/199dc13cd81d4765e424661b7c268498f421bb91e6e25a6e9ba485ec5e99d7651dafd0ece7f43638237e2065043f635c1b4cf7639516d4efb6506f07b1d69346
   languageName: node
   linkType: hard
 
@@ -33388,7 +33399,7 @@ __metadata:
     eslint-plugin-node: "npm:^11.1.0"
     eslint-plugin-prettier: "npm:^5.5.1"
     eslint-plugin-react: "npm:^7.37.5"
-    eslint-plugin-react-compiler: "npm:19.1.0-rc.2"
+    eslint-plugin-react-compiler: "npm:19.0.0-beta-af1b7da-20250417"
     eslint-plugin-react-hooks: "npm:^5.2.0"
     eslint-plugin-storybook: "npm:^0.6.15"
     eslint-plugin-tailwindcss: "npm:^3.18.0"
@@ -33486,6 +33497,7 @@ __metadata:
     react-beautiful-dnd: "npm:^13.1.1"
     react-chartjs-2: "npm:^5.2.0"
     react-compiler-runtime: "npm:^1.0.0"
+    react-compiler-webpack: "npm:0.2.1"
     react-devtools: "npm:^6.1.5"
     react-devtools-core: "npm:^6.1.5"
     react-dom: "npm:^17.0.2"
@@ -37650,6 +37662,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-compiler-webpack@npm:0.2.1":
+  version: 0.2.1
+  resolution: "react-compiler-webpack@npm:0.2.1"
+  dependencies:
+    "@babel/core": "npm:^7.28.4"
+    "@babel/plugin-syntax-jsx": "npm:^7.27.1"
+    "@babel/plugin-syntax-typescript": "npm:^7.27.1"
+  peerDependencies:
+    babel-plugin-react-compiler: "*"
+  checksum: 10/5571abebe68334969f3a40c6c21a4a6c3d8ba8a63c91348eac1209624e58e5b373609677244bbbd7480a094517c1b15f75d54400a91914728d74c9194d76775a
+  languageName: node
+  linkType: hard
+
 "react-devtools-core@npm:6.1.5, react-devtools-core@npm:^6.1.5":
   version: 6.1.5
   resolution: "react-devtools-core@npm:6.1.5"