@tramvai/cli 5.18.3 → 5.20.0

package/src/commands/analyze/command.ts

@@ -4,6 +4,7 @@ import { checkConfigExists } from '../../validators/commands/checkConfigExists';
 import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
 import { checkSwcDependencies } from '../../validators/commands/checkSwcDependencies';
+import { checkReactCompilerDependencies } from '../../validators/commands/checkReactCompilerDependencies';
 
 export type Params = {
   target: string;
@@ -51,6 +52,7 @@ class AnalyzeCommand extends CLICommand<Params> {
     runMigrationsAndCheckVersions,
     checkPwaDependencies,
     checkSwcDependencies,
+    checkReactCompilerDependencies,
   ];
 
   action(parameters: Params) {

package/src/commands/build/command.ts

@@ -6,6 +6,7 @@ import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigr
 import type { BuildCommand as BuildCommandType } from '../../api/build';
 import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 import { checkSwcDependencies } from '../../validators/commands/checkSwcDependencies';
+import { checkReactCompilerDependencies } from '../../validators/commands/checkReactCompilerDependencies';
 
 export type Params = Parameters<BuildCommandType>[0] & {
   target: string;
@@ -85,6 +86,7 @@ class BuildCommand extends CLICommand<Params> {
     checkDependencies,
     checkPwaDependencies,
     checkSwcDependencies,
+    checkReactCompilerDependencies,
   ];
 
   action(parameters: Params) {

package/src/commands/start/command.ts

@@ -6,6 +6,7 @@ import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigr
 import type { StartCommand as StartCommandType } from '../../api/start';
 import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 import { checkSwcDependencies } from '../../validators/commands/checkSwcDependencies';
+import { checkReactCompilerDependencies } from '../../validators/commands/checkReactCompilerDependencies';
 
 export type Params = Parameters<StartCommandType>[0] & {
   target: string;
@@ -138,6 +139,7 @@ export class StartCommand extends CLICommand<Params> {
     checkDependencies,
     checkPwaDependencies,
     checkSwcDependencies,
+    checkReactCompilerDependencies,
   ];
 
   action(parameters) {

package/src/commands/start-prod/command.ts

@@ -4,6 +4,7 @@ import { checkApplication } from '../../validators/commands/checkBuild';
 import { runMigrationsAndCheckVersions } from '../../validators/commands/runMigrationsAndCheckVersions';
 import { checkPwaDependencies } from '../../validators/commands/checkPwaDependencies';
 import { checkSwcDependencies } from '../../validators/commands/checkSwcDependencies';
+import { checkReactCompilerDependencies } from '../../validators/commands/checkReactCompilerDependencies';
 
 export interface Params {
   target: string;
@@ -111,6 +112,7 @@ export class StartProdCommand extends CLICommand<Params> {
     runMigrationsAndCheckVersions,
     checkPwaDependencies,
     checkSwcDependencies,
+    checkReactCompilerDependencies,
   ];
 
   action(parameters: Params) {

package/src/library/babel/index.ts

@@ -3,6 +3,8 @@ import browserslist from 'browserslist';
 import envTargets from '@tinkoff/browserslist-config';
 import { sync as resolve } from 'resolve';
 import type { TransformOptions } from '@babel/core';
+
+import { getReactCompilerPlugin } from './plugins/react-compiler';
 import type { TranspilerConfig } from '../webpack/utils/transpiler';
 
 const envConfig = {
@@ -48,6 +50,7 @@ export const babelConfigFactory = ({
   hot = false,
   excludesPresetEnv,
   rootDir = process.cwd(),
+  reactCompiler = false,
 }: Partial<TranspilerConfig>) => {
   const cfg = envConfig[env] || {};
   let resultTarget = target;
@@ -118,6 +121,8 @@ export const babelConfigFactory = ({
       .filter(Boolean) as TransformOptions['presets'],
 
     plugins: [
+      // React compiler must be the first plugin in the chain
+      getReactCompilerPlugin({ isServer, options: reactCompiler }),
       // TODO: useESModules is deprecated and should work automatically - https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
       ['@babel/transform-runtime', { useESModules: !(isServer && env === 'development') }],
       path.resolve(__dirname, './plugins/lazy-component/legacy-universal-replace'), // TODO: удалить плагин после того как отпадёт необходимость поддерживать легаси

package/src/library/babel/plugins/react-compiler.ts

@@ -0,0 +1,39 @@
+import { resolveReactVersion } from '../../../utils/resolveReactVersion';
+import type { ReactCompilerOptions } from '../../../typings/configEntry/cli';
+
+type ReactCompilerTarget = '17' | '18' | '19';
+
+const resolveTarget = (): ReactCompilerTarget => {
+  const resolved = resolveReactVersion();
+  const major = resolved.major.toString() as ReactCompilerTarget;
+
+  if (['17', '18', '19'].includes(major)) {
+    return major;
+  }
+
+  throw new Error(
+    `Resolved React version is ${resolved.version} which is not supported. Supported versions are 17, 18 and 19.`
+  );
+};
+
+export const getReactCompilerPlugin = ({
+  options,
+  isServer,
+}: {
+  options: boolean | ReactCompilerOptions;
+  isServer: boolean;
+}) => {
+  if (!options || isServer) {
+    return undefined;
+  }
+
+  const compilerOptions = typeof options === 'boolean' ? {} : options;
+
+  return [
+    'babel-plugin-react-compiler',
+    {
+      ...compilerOptions,
+      target: resolveTarget(),
+    },
+  ];
+};

package/src/library/webpack/utils/transpiler.ts

@@ -5,7 +5,7 @@ import { getSwcOptions } from '../../swc';
 import { babelConfigFactory } from '../../babel';
 import type { Env } from '../../../typings/Env';
 import type { Target } from '../../../typings/target';
-import type { CliConfigEntry } from '../../../typings/configEntry/cli';
+import type { CliConfigEntry, ReactCompilerOptions } from '../../../typings/configEntry/cli';
 
 export type TranspilerConfig = {
   env: Env;
@@ -23,6 +23,7 @@ export type TranspilerConfig = {
   hot: boolean;
   excludesPresetEnv: string[];
   rootDir: string;
+  reactCompiler: boolean | ReactCompilerOptions;
 };
 
 export const addTranspilerLoader =
@@ -56,7 +57,7 @@ export const getTranspilerConfig = (
     alias,
     enableFillActionNamePlugin,
     excludesPresetEnv,
-    experiments: { enableFillDeclareActionNamePlugin },
+    experiments: { enableFillDeclareActionNamePlugin, reactCompiler },
   } = configManager;
   const { env, modern } = configManager;
 
@@ -80,7 +81,8 @@ Just check or add configuration to your tsconfig file and remove alias from tram
     loader: true,
     modules: false,
     typescript: false,
-    ...overrideOptions,
     enableFillDeclareActionNamePlugin,
+    reactCompiler,
+    ...overrideOptions,
   };
 };

package/src/models/config.spec.ts

@@ -71,6 +71,7 @@ it('should populate defaults for config', () => {
                 "enabled": false,
               },
             },
+            "reactCompiler": false,
             "reactTransitions": false,
             "serverRunner": "thread",
             "transpilation": {
@@ -146,6 +147,7 @@ it('should populate defaults for config', () => {
               "useImportModule": true,
             },
             "minifier": "terser",
+            "reactCompiler": false,
             "transpilation": {
               "loader": "babel",
             },
@@ -314,6 +316,7 @@ it('should populate defaults for overridable options', () => {
                 "enabled": false,
               },
             },
+            "reactCompiler": false,
             "reactTransitions": false,
             "serverRunner": "thread",
             "transpilation": {
@@ -407,6 +410,7 @@ it('should populate defaults for overridable options', () => {
               "useImportModule": true,
             },
             "minifier": "terser",
+            "reactCompiler": false,
             "transpilation": {
               "loader": {
                 "development": "babel",

package/src/schema/autogeneratedSchema.json

@@ -940,6 +940,45 @@
               "title": "Включает использование плагина fill-declare-action-name",
               "default": false,
               "type": "boolean"
+            },
+            "reactCompiler": {
+              "description": "https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",
+              "title": "Enable React Compiler. You can pass some options, or use it with meaningful defaults.",
+              "default": false,
+              "anyOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "sources": {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
+                    "compilationMode": {
+                      "enum": [
+                        "all",
+                        "annotation",
+                        "infer"
+                      ],
+                      "type": "string"
+                    },
+                    "panicThreshold": {
+                      "title": "Determines the point at which compiler should throw an error",
+                      "enum": [
+                        "ALL_ERRORS",
+                        "CRITICAL_ERRORS",
+                        "NONE"
+                      ],
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             }
           },
           "additionalProperties": false
@@ -1188,23 +1227,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@7335": {
+                        "__@match@7341": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@7337": {
+                        "__@replace@7343": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@7340": {
+                        "__@search@7346": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@7342": {
+                        "__@split@7348": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@7344": {
+                        "__@matchAll@7350": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -1715,6 +1754,45 @@
               "title": "Включает использование плагина fill-declare-action-name",
               "default": false,
               "type": "boolean"
+            },
+            "reactCompiler": {
+              "description": "https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",
+              "title": "Enable React Compiler. You can pass some options, or use it with meaningful defaults.",
+              "default": false,
+              "anyOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "sources": {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
+                    "compilationMode": {
+                      "enum": [
+                        "all",
+                        "annotation",
+                        "infer"
+                      ],
+                      "type": "string"
+                    },
+                    "panicThreshold": {
+                      "title": "Determines the point at which compiler should throw an error",
+                      "enum": [
+                        "ALL_ERRORS",
+                        "CRITICAL_ERRORS",
+                        "NONE"
+                      ],
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             }
           },
           "additionalProperties": false
@@ -1901,23 +1979,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@7335": {
+                        "__@match@7341": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@7337": {
+                        "__@replace@7343": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@7340": {
+                        "__@search@7346": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@7342": {
+                        "__@split@7348": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@7344": {
+                        "__@matchAll@7350": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -2428,6 +2506,45 @@
               "title": "Включает использование плагина fill-declare-action-name",
               "default": false,
               "type": "boolean"
+            },
+            "reactCompiler": {
+              "description": "https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",
+              "title": "Enable React Compiler. You can pass some options, or use it with meaningful defaults.",
+              "default": false,
+              "anyOf": [
+                {
+                  "type": "object",
+                  "properties": {
+                    "sources": {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
+                    "compilationMode": {
+                      "enum": [
+                        "all",
+                        "annotation",
+                        "infer"
+                      ],
+                      "type": "string"
+                    },
+                    "panicThreshold": {
+                      "title": "Determines the point at which compiler should throw an error",
+                      "enum": [
+                        "ALL_ERRORS",
+                        "CRITICAL_ERRORS",
+                        "NONE"
+                      ],
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
             }
           },
           "additionalProperties": false
@@ -2614,23 +2731,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@7335": {
+                        "__@match@7341": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@7337": {
+                        "__@replace@7343": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@7340": {
+                        "__@search@7346": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@7342": {
+                        "__@split@7348": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@7344": {
+                        "__@matchAll@7350": {
                           "type": "object",
                           "additionalProperties": false
                         }

package/src/schema/tramvai.spec.ts

@@ -100,6 +100,7 @@ describe('JSON schema для tramvai.json', () => {
                   "enabled": false,
                 },
               },
+              "reactCompiler": false,
               "reactTransitions": false,
               "serverRunner": "thread",
               "transpilation": {
@@ -175,6 +176,7 @@ describe('JSON schema для tramvai.json', () => {
                 "useImportModule": true,
               },
               "minifier": "terser",
+              "reactCompiler": false,
               "transpilation": {
                 "loader": "babel",
               },

package/src/typings/configEntry/cli.ts

@@ -21,6 +21,21 @@ type Notifications = {
   activateTerminalOnError?: boolean;
 };
 
+export type ReactCompilerOptions = {
+  /*
+   * @title Array of paths which React compiler applies to. Ignore node_moduled by default
+   */
+  sources?: Array<string>;
+  /*
+   * @title Determines the strategy for determining which functions to compile
+   */
+  compilationMode?: 'infer' | 'annotation' | 'all';
+  /**
+   * @title Determines the point at which compiler should throw an error
+   */
+  panicThreshold?: 'ALL_ERRORS' | 'CRITICAL_ERRORS' | 'NONE';
+};
+
 export type WebpackExperiments = Omit<
   Configuration['experiments'],
   'buildHttp' | 'lazyCompilation' | 'css'
@@ -85,6 +100,14 @@ export interface Experiments {
    * @default false
    */
   enableFillDeclareActionNamePlugin: boolean;
+
+  /**
+   * https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
+   *
+   * @title Enable React Compiler. You can pass some options, or use it with meaningful defaults.
+   * @default false
+   */
+  reactCompiler?: boolean | ReactCompilerOptions;
 }
 
 /**

package/src/utils/resolveReactVersion.ts

@@ -0,0 +1,8 @@
+import once from '@tinkoff/utils/function/once';
+import semver from 'semver';
+
+export const resolveReactVersion = once(() => {
+  const reactVersion = require('react').version;
+
+  return semver.parse(reactVersion);
+});

package/src/validators/commands/checkReactCompilerDependencies.ts

@@ -0,0 +1,82 @@
+import type { Validator } from './validator.h';
+import type { TranspilationLoader } from '../../typings/configEntry/cli';
+import type { ApplicationConfigEntry } from '../../typings/configEntry/application';
+import { resolveReactVersion } from '../../utils/resolveReactVersion';
+
+type ReactCompilerTarget = '17' | '18' | '19';
+
+const VALIDATOR_NAME = 'checkReactCompilerDependencies';
+
+const getLoaderFromConfig = (config: ApplicationConfigEntry): TranspilationLoader => {
+  const field = config.experiments?.transpilation?.loader;
+
+  if (field === undefined) {
+    return 'babel';
+  }
+
+  if (typeof field === 'string') {
+    return field as unknown as TranspilationLoader;
+  }
+
+  return field[process.env.NODE_ENV] ?? 'babel';
+};
+
+const resolveBabelPlugin = () => {
+  try {
+    require.resolve('babel-plugin-react-compiler');
+  } catch (error) {
+    if (error.code === 'MODULE_NOT_FOUND') {
+      throw new Error(
+        'Can not resolve the `babel-plugin-react-compiler`. It is required to use the React Compiler. Please install it.'
+      );
+    }
+
+    throw error;
+  }
+};
+
+const resolveCompilerRuntime = (reactMajor: ReactCompilerTarget) => {
+  if (reactMajor === '19') {
+    return;
+  }
+
+  try {
+    require.resolve('react-compiler-runtime');
+  } catch (error) {
+    if (error.code === 'MODULE_NOT_FOUND') {
+      throw new Error(
+        'React versions prior to 19 require the `react-compiler-runtime` package to be installed. Please install it.'
+      );
+    }
+
+    throw error;
+  }
+};
+
+export const checkReactCompilerDependencies: Validator = async ({ config }, params) => {
+  const configEntry = config.getProject(params.target) as ApplicationConfigEntry;
+
+  if (!configEntry.experiments?.reactCompiler) {
+    return { name: VALIDATOR_NAME, status: 'ok' };
+  }
+
+  const loader = getLoaderFromConfig(configEntry);
+
+  if (loader === 'swc') {
+    throw new Error(`React compiler is not supported when using SWC transpiler.`);
+  }
+
+  const reactVersion = resolveReactVersion();
+  const reactMajor = reactVersion.major.toString() as ReactCompilerTarget;
+
+  if (!['17', '18', '19'].includes(reactMajor)) {
+    throw new Error(
+      `Resolved React version is ${reactVersion.version} which is not supported. Supported versions are 17, 18 and 19.`
+    );
+  }
+
+  resolveBabelPlugin();
+  resolveCompilerRuntime(reactMajor);
+
+  return { name: VALIDATOR_NAME, status: 'ok' };
+};

package/src/validators/commands/checkSwcDependencies.ts

@@ -1,6 +1,6 @@
 import { sync as resolve } from 'resolve';
 import type { Validator } from './validator.h';
-import type { Experiments, TranspilationLoader, Minifier } from '../../typings/configEntry/cli';
+import type { TranspilationLoader, Minifier } from '../../typings/configEntry/cli';
 
 const validator = 'checkSwcDependencies';