Revert "Revert webpack config"

This reverts commit 8ac83e8.

Author: MajorLift

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,116 @@ 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.',
+      '/__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/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,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.

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",

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"
@@ -33485,6 +33496,7 @@ __metadata:
     react-beautiful-dnd: "npm:^13.1.1"
     react-chartjs-2: "npm:^5.2.0"
     react-compiler-runtime: "npm:19.1.0-rc.3"
+    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"
@@ -37649,6 +37661,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"