@tramvai/cli 5.53.81 → 5.53.111

package/src/commands/benchmark/benchmark.ts

@@ -1,59 +1,194 @@
-import mdtable from 'mdtable';
-import prettyBytes from 'pretty-bytes';
+import { table, TableUserConfig } from 'table';
+import isEmpty from '@tinkoff/utils/is/empty';
+
 import type { Context } from '../../models/context';
 import type { CommandResult } from '../../models/command';
 import type { Result } from '../../api/benchmark';
+import type { CompilationStats } from '../../api/benchmark/types';
+import { DEFAULT_TIMES } from '../../api/benchmark/const';
 
 import { app } from '../index';
 
-const roundStats = (n: number) => Math.round(100 * n) / 100;
+export function toFixedDigits(num: number, digits = 2): number {
+  if (digits === 0) {
+    return Math.floor(num);
+  }
+  return +num.toFixed(digits);
+}
+
+const getUnit = (num: number) => (num > 1 ? 'mins' : 'min');
+
+export function formatCosts(costs: number): string {
+  // more than 1s
+  if (costs >= 1000) {
+    const sec = costs / 1000;
+    // more than 1min
+    if (sec >= 60) {
+      let mins = sec / 60;
+
+      mins = toFixedDigits(mins, 0);
+      const mUnit = getUnit(mins);
+      const restSec = toFixedDigits(sec % 60, 0);
+
+      if (restSec > 0) {
+        return `${mins}${mUnit} ${restSec}s`;
+      }
+      return `${mins}${mUnit}`;
+    }
+
+    return `${toFixedDigits(sec, 1)}s`;
+  }
+
+  if (costs >= 10) {
+    return `${+toFixedDigits(costs, 0)}ms`;
+  }
+
+  if (costs >= 1) {
+    return `${+toFixedDigits(costs, 1)}ms`;
+  }
+
+  let r = +toFixedDigits(costs, 2);
+
+  if (r === 0) {
+    r = +toFixedDigits(costs, 3);
+  }
+
+  return `${r}ms`;
+}
+
+const formatValues = (measures: Record<string, number>) => {
+  const result: [string, string][] = [];
+
+  for (const measureName in measures) {
+    const measureValue = measures[measureName];
+    result.push([measureName, formatCosts(measureValue)]);
+  }
+
+  return result;
+};
+
+const filterStats = (measures: Record<string, number>) => {
+  const entries = Object.entries(measures);
+  entries.sort((a, b) => b[1] - a[1]);
 
-const formatTimeStats = (stats: Result[string]['client']) => {
-  return `${roundStats(stats.mean)}ms ± ${roundStats(stats.variance)}%`;
+  return entries.slice(0, 5).reduce((acc, [key, value]) => {
+    acc[key] = value;
+    return acc;
+  }, {});
 };
 
-const formatMemoryStats = (stats: Result[string]['client']) => {
-  const value = prettyBytes(stats.mean, {
-    maximumFractionDigits: 2,
-  });
+const getInfo = (compilationStats: CompilationStats) => {
+  const { totalBuildCosts, loaderBuildCosts, pluginBuildCosts } = compilationStats;
+
+  const totalBuildInfo = formatValues(totalBuildCosts);
+  const loaderInfo = formatValues(filterStats(loaderBuildCosts));
+  const pluginInfo = formatValues(filterStats(pluginBuildCosts));
 
-  return `${value} ± ${roundStats(stats.variance)}%`;
+  return { totalBuildInfo, loaderInfo, pluginInfo };
 };
 
-const formatStatsTable = (stats: Result) => {
-  const header = [''] as string[];
-  const alignment = ['C'] as string[];
-  const rows = [['time'], ['mem']] as string[][];
+const mergeTotalInfo = (
+  server?: [string, string][] | undefined,
+  client?: [string, string][] | undefined
+) => {
+  const result = [];
 
-  for (const key in stats) {
-    header.push(key);
-    alignment.push('C');
+  for (let i = 0; i < (server?.length ?? client?.length); i++) {
+    result.push([
+      server?.[i][0] ?? client?.[i][0] ?? '-',
+      server?.[i][1] ?? '0',
+      client?.[i][1] ?? '0',
+    ]);
+  }
+
+  return result;
+};
 
-    const { client, server, maxMemoryRss } = stats[key];
+const mergeAdditionalInfo = (
+  server?: [string, string][] | undefined,
+  client?: [string, string][] | undefined
+) => {
+  const result = [];
 
-    rows[0].push(`${formatTimeStats(client)} / ${formatTimeStats(server)}`);
-    rows[1].push(formatMemoryStats(maxMemoryRss));
+  for (let i = 0; i < (server?.length ?? client?.length); i++) {
+    result.push([
+      server?.[i][0] ?? '-',
+      server?.[i][1] ?? '0',
+      client?.[i][0] ?? '-',
+      client?.[i][1] ?? 0,
+    ]);
   }
 
-  return mdtable(
-    {
-      header,
-      alignment,
-      rows,
-    },
-    {
-      borders: true,
-      padding: 1,
-    }
-  );
+  return result;
+};
+
+const formatBuildTime = (totalBuildTime) =>
+  totalBuildTime ? `${(totalBuildTime / 1000).toFixed(2)}s` : '-';
+
+const formatMemoryRss = (memoryRss) => (memoryRss ? `${(memoryRss / 1000000).toFixed(2)}mb` : '-');
+
+const formatStatsTables = (stats: Result, times: number | undefined = DEFAULT_TIMES) => {
+  const {
+    clientBuildTime,
+    clientCompilationStats,
+    serverBuildTime,
+    serverCompilationStats,
+    maxMemoryRss,
+    clientMaxMemoryRss,
+    serverMaxMemoryRss,
+  } = stats;
+  const serverInfo = !isEmpty(serverCompilationStats) && getInfo(serverCompilationStats);
+  const clientInfo = !isEmpty(clientCompilationStats) && getInfo(clientCompilationStats);
+
+  const totalBuildData = [
+    [`Mean durations (${times} times)`, 'server', 'client'],
+    ['Total build time', formatBuildTime(serverBuildTime), formatBuildTime(clientBuildTime)],
+    maxMemoryRss
+      ? ['Total memory', formatMemoryRss(maxMemoryRss), '']
+      : ['Total memory', formatMemoryRss(serverMaxMemoryRss), formatMemoryRss(clientMaxMemoryRss)],
+    ...mergeTotalInfo(serverInfo.totalBuildInfo, clientInfo.totalBuildInfo),
+  ].filter(Boolean);
+
+  const totalBuildTableConfig: TableUserConfig = {
+    columns: [{ alignment: 'left' }, { alignment: 'center' }, { alignment: 'center' }],
+  };
+
+  if (maxMemoryRss) {
+    // @ts-expect-error
+    totalBuildTableConfig.spanningCells = [{ col: 1, row: 2, colSpan: 2, alignment: 'center' }];
+  }
+
+  const mergedLoadersInfo = mergeAdditionalInfo(serverInfo.loaderInfo, clientInfo.loaderInfo);
+  const mergedPluginsInfo = mergeAdditionalInfo(serverInfo.pluginInfo, clientInfo.pluginInfo);
+  const additionalBuildData = [
+    ['server', '', 'client', ''],
+    ['Loaders', '', '', ''],
+    ...mergedLoadersInfo,
+    ['Plugins', '', '', ''],
+    ...mergedPluginsInfo,
+  ];
+
+  const additionalBuildTableConfig: TableUserConfig = {
+    spanningCells: [
+      { col: 0, row: 0, colSpan: 2, alignment: 'center' },
+      { col: 2, row: 0, colSpan: 2, alignment: 'center' },
+      { col: 0, row: 1, colSpan: 4, alignment: 'center' },
+      { col: 0, row: mergedLoadersInfo.length + 2, colSpan: 4, alignment: 'center' },
+    ],
+  };
+
+  return [
+    table(totalBuildData, totalBuildTableConfig),
+    table(additionalBuildData, additionalBuildTableConfig),
+  ];
 };
 
-export default async (context: Context, parameters): Promise<CommandResult | any> => {
+export default async (_context: Context, parameters): Promise<CommandResult | any> => {
   const { command, times, ...commandOptions } = parameters;
 
   const stats = await app.run('benchmark', { command, times, commandOptions });
 
-  console.log(formatStatsTable(stats));
+  formatStatsTables(stats, times).forEach((buildTable) => console.log(buildTable));
 
   return Promise.resolve({
     status: 'ok',

package/src/commands/benchmark/command.ts

@@ -36,6 +36,18 @@ export class BenchmarkCommand extends CLICommand<Params> {
       description:
         'Specify the names of the bundles that need to be collected, other bundles will not be collected and their request will fail with an error',
     },
+    {
+      name: '--fileCache',
+      value: '[fileCache]',
+      transformer: (value: string) => value !== 'false',
+      description: 'Enable/disable persistent file cache for used cli builder',
+    },
+    {
+      name: '-t, --buildType',
+      value: '[type]',
+      description: 'Build type <client|server>',
+      defaultValue: 'client',
+    },
     {
       name: '--times',
       value: '[times]',

package/src/commands/build/command.ts

@@ -54,6 +54,12 @@ class BuildCommand extends CLICommand<Params> {
       value: '[forPublish]',
       description: '<package> Prepare library package.json for publication',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--fileCache',
       value: '[fileCache]',

package/src/commands/new/templates/shared/package.json.hbs

@@ -9,7 +9,7 @@
     "start": "tramvai start {{configEntry.name}}",
     "build": "tramvai build {{configEntry.name}}",
     "preview": "tramvai start-prod {{configEntry.name}}",
-    "analyze": "tramvai analyze {{configEntry.name}}",
+    "analyze": "tramvai {{configEntry.name}} --analyze=statoscope",
     "lint": "eslint --ext .ts,.tsx --ignore-path .gitignore ."{{#if isJest}},
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",

package/src/commands/start/command.ts

@@ -95,6 +95,12 @@ export class StartCommand extends CLICommand<Params> {
       value: '[showConfig]',
       description: 'Show config with which cli was launched',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--onlyBundles',
       value: '[onlyBundles]',

package/src/commands/update/checkVersionValidator.ts

@@ -1,7 +1,7 @@
 import { packageHasVersion } from '../../utils/commands/dependencies/packageHasVersion';
 import type { Params } from './update';
 
-export const checkVersion = async (_, { to: version = 'latest' }: Params) => {
+export const checkVersion = async (context, { to: version = 'latest' }: Params) => {
   if (version === 'latest') {
     return {
       name: 'checkVersion',
@@ -9,7 +9,9 @@ export const checkVersion = async (_, { to: version = 'latest' }: Params) => {
     };
   }
 
-  if (await packageHasVersion('@tramvai/core', version)) {
+  const registryUrl = await context.packageManager.getRegistryUrl();
+
+  if (await packageHasVersion('@tramvai/core', version, registryUrl)) {
     return {
       name: 'checkVersion',
       status: 'ok',

package/src/commands/update/dependantLibs.ts

@@ -7,13 +7,15 @@ export const getLibPackageVersion = async (
   name: string,
   version: string,
   resolvedVersion: string,
+  registryUrl: string,
   spinner: Ora
 ): Promise<string | undefined> => {
   const unifiedModule = DEPENDANT_LIBS_MAP.get(name);
 
   if (!unifiedModule) {
     try {
-      return await getLatestPackageVersion(name, { version });
+      // @ts-expect-error uncomplete type definition, `registryUrl` is supported
+      return await getLatestPackageVersion(name, { version, registryUrl });
     } catch (e) {
       // clear the spinner to be able to log info that should be preserved in the output
       // the idea borrowed from [here](https://github.com/sindresorhus/ora/issues/120)

package/src/commands/update/update.ts

@@ -16,7 +16,10 @@ export default async (
   context: Context,
   { to: version = 'latest', tag }: Params
 ): Promise<CommandResult> => {
-  const resolvedVersion = tag ? version : await getLatestPackageVersion('@tramvai/cli', version);
+  const registry = await context.packageManager.getRegistryUrl();
+  const resolvedVersion = tag
+    ? version
+    : await getLatestPackageVersion('@tramvai/cli', registry, version);
   const currentVersion = await findTramvaiVersion();
 
   if (!currentVersion) {
@@ -40,12 +43,12 @@ export default async (
   if (context.packageManager.workspaces) {
     await Promise.all(
       context.packageManager.workspaces.map((directory) =>
-        updatePackageJson(version, resolvedVersion, currentVersion, tag, directory)
+        updatePackageJson(version, resolvedVersion, currentVersion, registry, tag, directory)
       )
     );
   }
 
-  await updatePackageJson(version, resolvedVersion, currentVersion, tag);
+  await updatePackageJson(version, resolvedVersion, currentVersion, registry, tag);
 
   context.logger.event({
     type: 'info',

package/src/commands/update/updatePackageJson.spec.ts

@@ -76,7 +76,12 @@ it('should update tramvai deps to latest versions', async () => {
     return {};
   });
 
-  await updatePackageJson(LATEST_TRAMVAI_VERSION, LATEST_TRAMVAI_VERSION, CURRENT_TRAMVAI_VERSION);
+  await updatePackageJson(
+    LATEST_TRAMVAI_VERSION,
+    LATEST_TRAMVAI_VERSION,
+    CURRENT_TRAMVAI_VERSION,
+    'fake-registry'
+  );
 
   // eslint-disable-next-line jest/no-interpolation-in-snapshots
   expect(mockFsWrite.mock.calls[0]).toMatchInlineSnapshot(`
@@ -138,7 +143,12 @@ it('prerelease should be resolved and used for dependant libs', async () => {
     return {};
   });
 
-  await updatePackageJson('prerelease', LATEST_TRAMVAI_VERSION, CURRENT_TRAMVAI_VERSION);
+  await updatePackageJson(
+    'prerelease',
+    LATEST_TRAMVAI_VERSION,
+    CURRENT_TRAMVAI_VERSION,
+    'fake-registry'
+  );
 
   // eslint-disable-next-line jest/no-interpolation-in-snapshots
   expect(mockFsWrite.mock.calls[0]).toMatchInlineSnapshot(`
@@ -201,7 +211,13 @@ it('dist tag should be used for dependant libs', async () => {
     return {};
   });
 
-  await updatePackageJson('prerelease', 'prerelease', CURRENT_TRAMVAI_VERSION, true);
+  await updatePackageJson(
+    'prerelease',
+    'prerelease',
+    CURRENT_TRAMVAI_VERSION,
+    'fake-registry',
+    true
+  );
 
   // eslint-disable-next-line jest/no-interpolation-in-snapshots
   expect(mockFsWrite.mock.calls[0]).toMatchInlineSnapshot(`

package/src/commands/update/updatePackageJson.ts

@@ -13,6 +13,7 @@ const updateDependencies = (
   resolvedVersion: string,
   currentVersion: string,
   tag: boolean,
+  registryUrl: string,
   spinner: Ora
 ) => {
   return pMap<string, void>(
@@ -25,12 +26,12 @@ const updateDependencies = (
       } else if (isDependantLib(dep)) {
         const libVersion = tag
           ? resolvedVersion
-          : await getLibPackageVersion(dep, version, resolvedVersion, spinner);
+          : await getLibPackageVersion(dep, version, resolvedVersion, registryUrl, spinner);
         nextVersion = libVersion;
       }
 
       if (nextVersion) {
-        const depHasVersion = await packageHasVersion(dep, nextVersion);
+        const depHasVersion = await packageHasVersion(dep, nextVersion, registryUrl);
 
         // clear the spinner to be able to log info that should be preserved in the output
         // the idea borrowed from [here](https://github.com/sindresorhus/ora/issues/120)
@@ -62,6 +63,7 @@ export const updatePackageJson = async (
   version: string,
   resolvedVersion: string,
   currentVersion: string,
+  registryUrl: string,
   tag?: boolean,
   path = '.'
 ) => {
@@ -78,6 +80,7 @@ export const updatePackageJson = async (
       resolvedVersion,
       currentVersion,
       tag,
+      registryUrl,
       spinner
     );
     await updateDependencies(
@@ -86,6 +89,7 @@ export const updatePackageJson = async (
       resolvedVersion,
       currentVersion,
       tag,
+      registryUrl,
       spinner
     );
     await updateDependencies(
@@ -94,6 +98,7 @@ export const updatePackageJson = async (
       resolvedVersion,
       currentVersion,
       tag,
+      registryUrl,
       spinner
     );
 

package/src/config/configManager.ts

@@ -37,9 +37,11 @@ export interface Settings<E extends Env> {
   profile?: boolean;
   noServerRebuild?: boolean;
   noClientRebuild?: boolean;
+  benchmark?: boolean;
   resolveSymlinks?: boolean;
   showConfig?: boolean;
   onlyBundles?: string[];
+  analyze?: false | 'bundle' | 'whybundled' | 'statoscope' | 'rsdoctor';
   disableProdOptimization?: boolean;
   fileCache?: boolean;
 }
@@ -131,8 +133,10 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
     profile: false,
     noClientRebuild: false,
     noServerRebuild: false,
+    benchmark: false,
     resolveSymlinks: true,
     disableProdOptimization: false,
+    analyze: false,
     onlyBundles: [],
     // according to measures fileCache in webpack doesn't affect
     // performance much so enable it by default as it always was before

package/src/library/webpack/blocks/css.ts

@@ -1,11 +1,12 @@
-import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import path from 'path';
 import type Config from 'webpack-chain';
 import ExtractCssChunks from 'mini-css-extract-plugin';
 import { createGenerator } from '@tinkoff/minicss-class-generator';
+
 import { safeRequire } from '../../../utils/safeRequire';
 import type { ConfigManager } from '../../../config/configManager';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
+import { getActualTarget, getBrowserslistTargets } from '../utils/browserslist';
 
 const cssLocalIdentNameDevDefault = '[name]__[local]_[minicss]';
 const cssLocalIdentNameProdDefault = '[minicss]';
@@ -21,8 +22,9 @@ interface Options {
 export const cssWebpackRulesFactory =
   (configManager: ConfigManager<CliConfigEntry>, options: Options = {}) =>
   (config: Config) => {
-    const { env, sourceMap, buildType } = configManager;
+    const { env, sourceMap, buildType, experiments, target } = configManager;
     const {
+      rootDir,
       postcss: {
         config: postcssConfig,
         cssLocalIdentName = env === 'production'
@@ -31,6 +33,9 @@ export const cssWebpackRulesFactory =
         cssModulePattern,
       },
     } = configManager;
+    const isServer = configManager.buildType === 'server';
+    const actualTarget = getActualTarget(target, isServer);
+    const browsersListTargets = getBrowserslistTargets(rootDir, actualTarget);
     const localIdentName = options.localIdentName ?? cssLocalIdentName;
 
     const configCssLoader = (cfg) => {
@@ -73,17 +78,33 @@ export const cssWebpackRulesFactory =
         typeof postcssConfig === 'undefined'
       ) ?? {};
 
-    const postcssOptionsFn = (...args) => ({
-      ...postcssCfg,
-      plugins: [
-        require('postcss-modules-tilda'),
-        require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+    // https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts
+    const postcssOptionsFn = (loaderContext: any) => {
+      const isFnConfig = typeof postcssCfg === 'function';
+      // TODO: async config fn support?
+      const defaultConfig = isFnConfig ? postcssCfg(loaderContext) : postcssCfg;
+      // eslint-disable-next-line no-nested-ternary
+      const defaultPlugins = defaultConfig.plugins ? defaultConfig.plugins : [];
+
+      return {
+        config: false,
+        ...defaultConfig,
         // TODO: придумать как прокинуть настройки browserslist в autoprefixer - сейчас autoprefixer добавляется в самом приложении и из
         // конфига нет возможности задавать динамический env в зависимости от сборки. Подсунуть в сам autoprefixer после его инициализации тоже
         // тоже не получится - https://github.com/postcss/autoprefixer/blob/10.3.1/lib/autoprefixer.js#L108
-        ...(applyOrReturn(args, postcssCfg.plugins) || []),
-      ],
-    });
+        plugins: Array.isArray(defaultPlugins)
+          ? [
+              require('postcss-modules-tilda'),
+              require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+              ...defaultPlugins,
+            ]
+          : {
+              'postcss-modules-tilda': {},
+              'postcss-modules-values-replace': { importsAsModuleRequests: true },
+              ...defaultPlugins,
+            },
+      };
+    };
 
     // otherwise postcss-loader will use cosmiconfig to resolve postcss configuration file
     // https://github.com/webpack-contrib/postcss-loader/blob/6f470db420f6febbea729080921050e8fe353226/src/index.js#L38
@@ -93,12 +114,27 @@ export const cssWebpackRulesFactory =
       .rule('css')
       .test(/\.css$/)
       .batch(configCssLoader)
-      .use('postcss')
-      .loader('postcss-loader')
-      .options({
-        sourceMap,
-        postcssOptions: postcssOptionsFn,
-      });
+      .when(
+        experiments.lightningcss,
+        (cfg) => {
+          const lightningcss = require('lightningcss');
+
+          return cfg
+            .use('lightningcss')
+            .loader('lightningcss-loader')
+            .options({
+              options: {
+                implementation: lightningcss,
+                targets: browsersListTargets,
+              },
+            });
+        },
+        (cfg) =>
+          cfg.use('postcss').loader('postcss-loader').options({
+            sourceMap,
+            postcssOptions: postcssOptionsFn,
+          })
+      );
   };
 
 export default cssWebpackRulesFactory;

package/src/library/webpack/blocks/js.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type Config from 'webpack-chain';
 import { modernLibsFilter } from '@tinkoff/is-modern-lib';
 import { applyThreadLoader } from '../utils/threadLoader';
@@ -5,25 +6,22 @@ import type { ConfigManager } from '../../../config/configManager';
 import { getTranspilerConfig, addTranspilerLoader } from '../utils/transpiler';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 
-// eslint-disable-next-line import/no-default-export
-export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
-  const { transpileOnlyModernLibs } = configManager;
-
-  const rule = config.module
-    .rule('js')
-    .test(/\.[cm]?js[x]?$/)
-    .batch(applyThreadLoader(configManager));
+const projectRulesName = 'project';
+const nodeModuleRulesName = 'node_module';
 
+const applyProjectRules = (rule, configManager) => {
   rule
-    .oneOf('project')
+    .oneOf(projectRulesName)
     .exclude.add(/node_modules/)
     .end()
     .use('transpiler')
-    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)))
+    .end();
+};
 
+const applyNodeModulesRules = (rule, configManager) => {
   rule
-    .oneOf('node_module')
-    .when(transpileOnlyModernLibs, (cfg) => cfg.include.add(modernLibsFilter))
+    .oneOf(nodeModuleRulesName)
     .merge({
       // true value forces to use file extensions for importing mjs modules
       // but we want to use mjs if it exists anyway
@@ -32,3 +30,54 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
     .use('transpiler')
     .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager, { hot: false })));
 };
+
+// eslint-disable-next-line import/no-default-export
+export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
+  const { transpileOnlyModernLibs } = configManager;
+  const { include } = configManager.experiments.transpilation;
+  const shouldTranspileOnlyModern = transpileOnlyModernLibs || include === 'only-modern';
+
+  const rule = config.module
+    .rule('js')
+    .test(/\.[cm]?js[x]?$/)
+    .batch(applyThreadLoader(configManager));
+
+  if (configManager.env === 'production') {
+    applyProjectRules(rule, configManager);
+    applyNodeModulesRules(rule, configManager);
+
+    if (shouldTranspileOnlyModern) {
+      rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+    }
+  } else {
+    const shouldSkipTranspiling = include === 'none';
+    const shouldSelectiveTranspile = Array.isArray(include);
+
+    if (shouldSkipTranspiling) {
+      rule.exclude
+        .add(/node_modules/)
+        .end()
+        .use('transpiler')
+        .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    } else {
+      applyProjectRules(rule, configManager);
+      applyNodeModulesRules(rule, configManager);
+
+      if (shouldSelectiveTranspile) {
+        const includeForTranspiling = (<string[]>include).map((includePath) =>
+          // require.resolve return absolute path to entrypoint of dependency
+          // but we need root dirname of dependency inside node_modules
+          path.dirname(require.resolve(`${includePath}/package.json`))
+        );
+
+        includeForTranspiling.forEach((includePath) => {
+          rule.oneOf(nodeModuleRulesName).include.add(includePath);
+        });
+      } else if (shouldTranspileOnlyModern) {
+        if (shouldTranspileOnlyModern) {
+          rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+        }
+      }
+    }
+  }
+};