@gravity-ui/app-builder 0.44.0 → 0.44.1-beta.0

package/dist/common/config.js

@@ -238,6 +238,7 @@ async function normalizeClientConfig(client, mode) {
         lazyCompilation: undefined,
         bundler: client.bundler || 'webpack',
         javaScriptLoader: client.javaScriptLoader || 'babel',
+        reactCompiler: client.reactCompiler ?? false,
     };
     if (mode === 'dev') {
         if (client.lazyCompilation) {

package/dist/common/models/index.d.ts

@@ -17,6 +17,7 @@ import type { UploadOptions } from '../s3-upload/upload';
 import type { TerserOptions } from 'terser-webpack-plugin';
 import type { ReactRefreshPluginOptions } from '@pmmmwh/react-refresh-webpack-plugin/types/lib/types';
 import type { moduleFederationPlugin } from '@module-federation/enhanced';
+import type { PluginOptions as ReactCompilerOptions } from 'babel-plugin-react-compiler';
 type Bundler = 'webpack' | 'rspack';
 type JavaScriptLoader = 'babel' | 'swc';
 type ServerCompiler = 'typescript' | 'swc';
@@ -233,6 +234,24 @@ export interface ClientConfig {
     disableReactRefresh?: boolean;
     /** Disable or configure react-refresh in dev mode */
     reactRefresh?: false | ((options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions);
+    /**
+     * Enable React Compiler (babel-plugin-react-compiler).
+     *
+     * For React 17/18 set `target` and install `react-compiler-runtime`:
+     * ```ts
+     * reactCompiler: { target: '18' }
+     * ```
+     *
+     * For gradual adoption use `sources` to limit compilation to specific files:
+     * ```ts
+     * // compile only files inside a specific directory
+     * reactCompiler: { sources: (filename) => filename.includes('/src/features/my-feature/') }
+     *
+     * // or pass an array of directory paths
+     * reactCompiler: { sources: ['src/features/new-feature', 'src/components/Button'] }
+     * ```
+     */
+    reactCompiler?: boolean | ReactCompilerOptions;
     /**
      * Detect modules with circular dependencies
      */
@@ -384,7 +403,8 @@ export interface ServiceConfig {
     verbose?: boolean;
     configPath?: string;
 }
-export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh' | 'transformCssWithLightningCss'> & {
+export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh' | 'transformCssWithLightningCss' | 'reactCompiler'> & {
+    reactCompiler: boolean | ReactCompilerOptions;
     bundler: Bundler;
     javaScriptLoader: JavaScriptLoader;
     /**

package/dist/common/webpack/config.js

@@ -512,17 +512,26 @@ async function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, confi
                     ],
                 };
             }
-            return {
+            const swcLoader = {
                 loader: 'builtin:swc-loader',
                 options: rspackSwcConfig,
             };
+            return config.reactCompiler
+                ? [swcLoader, createReactCompilerBabelLoader(config)]
+                : [swcLoader];
         }
-        return {
+        const swcLoader = {
             loader: require.resolve('swc-loader'),
             options: swcConfig,
         };
+        return config.reactCompiler
+            ? [swcLoader, createReactCompilerBabelLoader(config)]
+            : [swcLoader];
     }
     const plugins = [];
+    if (config.reactCompiler) {
+        plugins.push(getReactCompilerPlugin(config.reactCompiler));
+    }
     if (!isSsr) {
         if (isEnvDevelopment && config.reactRefresh !== false) {
             plugins.push([
@@ -547,17 +556,45 @@ async function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, confi
         presets: [(0, babel_1.babelPreset)({ newJsxTransform: config.newJsxTransform, isSsr })],
         plugins,
     }, { configType, isSsr });
+    return [
+        {
+            loader: require.resolve('babel-loader'),
+            options: {
+                sourceType: 'unambiguous',
+                ...babelTransformOptions,
+                babelrc: false,
+                configFile: false,
+                compact: isEnvProduction,
+                sourceMaps: !config.disableSourceMapGeneration,
+                cacheCompression: isEnvProduction,
+                cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
+            },
+        },
+    ];
+}
+function getReactCompilerPlugin(reactCompiler) {
+    return [
+        require.resolve('babel-plugin-react-compiler'),
+        typeof reactCompiler === 'object' ? reactCompiler : {},
+    ];
+}
+function createReactCompilerBabelLoader(config) {
     return {
         loader: require.resolve('babel-loader'),
         options: {
-            sourceType: 'unambiguous',
-            ...babelTransformOptions,
+            plugins: [
+                getReactCompilerPlugin(config.reactCompiler),
+                require.resolve('@babel/plugin-syntax-jsx'),
+                [
+                    require.resolve('@babel/plugin-syntax-typescript'),
+                    { isTSX: true, allExtensions: true },
+                ],
+            ],
             babelrc: false,
             configFile: false,
-            compact: isEnvProduction,
-            sourceMaps: !config.disableSourceMapGeneration,
-            cacheCompression: isEnvProduction,
-            cacheDirectory: config.babelCacheDirectory ? config.babelCacheDirectory : true,
+            sourceType: 'unambiguous',
+            cacheDirectory: true,
+            cacheCompression: false,
         },
     };
 }
@@ -612,7 +649,7 @@ async function createWorkerRule(options) {
     return {
         test: /\.worker\.[jt]sx?$/,
         exclude: /node_modules/,
-        use: [...ruleset, await createJavaScriptLoader(options)],
+        use: [...ruleset, ...(await createJavaScriptLoader(options))],
     };
 }
 function createSassStylesRule(options) {
@@ -738,7 +775,7 @@ function createIconsRule({ isEnvProduction, config, isSsr }, jsLoader) {
         ...(jsLoader
             ? {
                 use: [
-                    jsLoader,
+                    ...jsLoader,
                     {
                         loader: require.resolve('@svgr/webpack'),
                         options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.44.0",
+  "version": "0.44.1-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -74,6 +74,7 @@
     "@swc/plugin-transform-imports": "12.0.1",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-tsconfig-paths-module-resolver": "^1.0.4",
@@ -173,7 +174,8 @@
   "peerDependencies": {
     "@sentry/webpack-plugin": "^2.7.1",
     "lightningcss": "^1.21.5",
-    "monaco-editor-webpack-plugin": "*"
+    "monaco-editor-webpack-plugin": "*",
+    "react-compiler-runtime": "*"
   },
   "peerDependenciesMeta": {
     "lightningcss": {
@@ -184,6 +186,9 @@
     },
     "@sentry/webpack-plugin": {
       "optional": true
+    },
+    "react-compiler-runtime": {
+      "optional": true
     }
   },
   "nano-staged": {