@tramvai/cli 2.112.0 → 2.117.2

package/src/library/swc/index.ts

@@ -5,7 +5,7 @@ import browserslist from 'browserslist';
 import envTargets from '@tinkoff/browserslist-config';
 import { sync as resolve } from 'resolve';
 import findCacheDir from 'find-cache-dir';
-import type { Config } from '@swc/core';
+import type { Options as SwcOptions } from '@swc/core';
 import type { TranspilerConfig } from '../webpack/utils/transpiler';
 
 const TRAMVAI_SWC_TARGET_PATH = '@tramvai/swc-integration/target/wasm32-wasi';
@@ -13,7 +13,7 @@ const TRAMVAI_SWC_TARGET_PATH = '@tramvai/swc-integration/target/wasm32-wasi';
 const NOT_SUPPORTED_FIELDS = ['alias', 'generateDataQaTag', 'enableFillActionNamePlugin'];
 let warningWasShown = false;
 
-export const getSwcOptions = (config: TranspilerConfig): Config => {
+export const getSwcOptions = (config: TranspilerConfig): SwcOptions => {
   const {
     env = 'development',
     target,
@@ -109,9 +109,9 @@ Having swc config may conflict with @tramvai/cli configuration`
     module: {
       type: modules || 'es6',
     },
+    isModule: 'unknown',
     jsc: {
-      // TODO: should trim output size, but doesn't work well with some libs
-      // externalHelpers: true,
+      externalHelpers: true,
       parser: {
         syntax: typescript ? 'typescript' : 'ecmascript',
         decorators: true,
@@ -129,8 +129,6 @@ Having swc config may conflict with @tramvai/cli configuration`
           globals: {
             // let the webpack replace NODE_ENV as replacement with swc may mess up with tests
             envs: [],
-            // @ts-ignore
-            // TODO: there is not typings for typeofs, but the field is mentioned in docs
             typeofs: removeTypeofWindow
               ? {
                   window: isServer ? 'undefined' : 'object',

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

@@ -2,7 +2,6 @@ import type Config from 'webpack-chain';
 import { modernLibsFilter } from '@tinkoff/is-modern-lib';
 import { createWorkerPoolTranspiler } from '../utils/workersPool';
 import type { ConfigManager } from '../../../config/configManager';
-import type { TranspilerConfig } from '../utils/transpiler';
 import { getTranspilerConfig, addTranspilerLoader } from '../utils/transpiler';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 
@@ -10,56 +9,33 @@ import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
   const { transpileOnlyModernLibs } = configManager;
 
-  const jsRule = (transpilerConfig: TranspilerConfig) => (rule: Config.Rule) => {
-    const cfg = rule
-      .test(/\.[cm]?js[x]?$/)
-      .oneOf('default')
-      // TODO разобраться почему на винде все плохо с thread-loader
-      .when(process.platform !== 'win32' && !configManager.debug, (cfg) =>
-        cfg
-          .use('thread')
-          .loader('thread-loader')
-          .options(createWorkerPoolTranspiler(configManager))
-          .end()
-      )
-      .use('transpiler');
+  const rule = config.module
+    .rule('js')
+    .test(/\.[cm]?js[x]?$/)
+    // TODO: разобраться почему на винде все плохо с thread-loader
+    .when(process.platform !== 'win32' && !configManager.debug, (cfg) =>
+      cfg
+        .use('thread')
+        .loader('thread-loader')
+        .options(createWorkerPoolTranspiler(configManager))
+        .end()
+    );
 
-    return addTranspilerLoader(configManager, cfg, transpilerConfig);
-  };
+  rule
+    .oneOf('project')
+    .exclude.add(/node_modules/)
+    .end()
+    .use('transpiler')
+    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
 
-  if (transpileOnlyModernLibs) {
-    config.module
-      .rule('js:project')
-      .exclude.add(/node_modules/)
-      .end()
-      .batch(jsRule(getTranspilerConfig(configManager)));
-
-    config.module
-      .rule('js:node_modules')
-      .include.add(modernLibsFilter)
-      .end()
-      .batch(jsRule(getTranspilerConfig(configManager, { hot: false })))
-      .merge({
-        // TODO: некоторые пакеты неправильно описывают импорты для es модулей
-        // https://github.com/babel/babel/issues/12058
-        resolve: { fullySpecified: false },
-      });
-  } else {
-    config.module
-      .rule('js:project')
-      .exclude.add(/node_modules/)
-      .end()
-      .batch(jsRule(getTranspilerConfig(configManager)));
-
-    config.module
-      .rule('js:node_modules')
-      .include.add(/node_modules/)
-      .end()
-      .batch(jsRule(getTranspilerConfig(configManager, { hot: false })))
-      .merge({
-        // TODO: некоторые пакеты неправильно описывают импорты для es модулей
-        // https://github.com/babel/babel/issues/12058
-        resolve: { fullySpecified: false },
-      });
-  }
+  rule
+    .oneOf('node_module')
+    .when(transpileOnlyModernLibs, (cfg) => cfg.include.add(modernLibsFilter))
+    .merge({
+      // true value forces to use file extensions for importing mjs modules
+      // but we want to use mjs if it exists anyway
+      resolve: { fullySpecified: false },
+    })
+    .use('transpiler')
+    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager, { hot: false })));
 };

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

@@ -1,5 +1,6 @@
 import path from 'path';
 import type Config from 'webpack-chain';
+import type { PagesResolveOptions } from '../loaders/pagesResolve';
 import type { ConfigManager } from '../../../config/configManager';
 import type { ApplicationConfigEntry } from '../../../typings/configEntry/application';
 
@@ -20,7 +21,7 @@ export const pagesResolve =
         rootDir: configManager.rootDir,
         root: configManager.root,
         extensions: config.resolve.extensions.values(),
-      })
+      } as PagesResolveOptions)
       .end()
       // babel-loader is required to process this file
       .enforce('pre');

package/src/library/webpack/blocks/pwa/client.ts

@@ -26,7 +26,7 @@ export const pwaBlock =
     config.batch(pwaSharedBlock(configManager));
 
     if (
-      !safeRequireResolve('@tramvai/module-progressive-web-app') &&
+      !safeRequireResolve('@tramvai/module-progressive-web-app', true) &&
       (pwa.workbox?.enabled || pwa.webmanifest?.enabled)
     ) {
       throw Error('PWA functional requires @tramvai/module-progressive-web-app installed');

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

@@ -1,25 +1,27 @@
-import Config from 'webpack-chain';
+import type Config from 'webpack-chain';
 import type { ConfigManager } from '../../../config/configManager';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
-import js from './js';
-import ts from './ts';
+import { addTranspilerLoader, getTranspilerConfig } from '../utils/transpiler';
 
 export const serverInline = (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
   // создаём клиентский конфиг и отключаем modern режим
   const clientConfigManager = configManager.withSettings({ buildType: 'client', modern: false });
 
-  const clientConfig = new Config().batch(js(clientConfigManager)).batch(ts(clientConfigManager));
-
-  const addInlineHandler = (type: string, extension: string) => {
+  const addInlineHandler = (type: string) => {
     config.module
       .rule(type)
       .oneOf('inline')
-      .before('default')
-      .test(new RegExp(`\\.inline(\\.es)?\\.${extension}$`))
-      .uses.merge(clientConfig.module.rule(type).oneOfs.get('default').uses.entries());
+      .before('project')
+      .test(new RegExp(`\\.inline(\\.es)?\\.${type}$`))
+      .use('transpiler')
+      .batch(
+        addTranspilerLoader(
+          clientConfigManager,
+          getTranspilerConfig(clientConfigManager, { typescript: type === 'ts' })
+        )
+      );
   };
 
-  addInlineHandler('js:project', 'js');
-  addInlineHandler('js:node_modules', 'js');
-  addInlineHandler('ts:project', 'ts');
+  addInlineHandler('js');
+  addInlineHandler('ts');
 };

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

@@ -7,13 +7,12 @@ import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
   const transpilerConfig = getTranspilerConfig(configManager, { typescript: true });
 
-  const cfg = config.module
-    .rule('ts:project')
+  config.module
+    .rule('ts')
     .test(/\.ts[x]?$/)
     .exclude.add(/node_modules/)
     .end()
-    .oneOf('default')
-    // TODO разобраться почему на винде все плохо с thread-loader
+    // TODO: разобраться почему на винде все плохо с thread-loader
     .when(process.platform !== 'win32', (cfg) =>
       cfg
         .use('thread')
@@ -21,7 +20,7 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
         .options(createWorkerPoolTranspiler(configManager))
         .end()
     )
-    .use('transpiler');
-
-  return addTranspilerLoader(configManager, cfg, transpilerConfig);
+    .oneOf('project')
+    .use('transpiler')
+    .batch(addTranspilerLoader(configManager, transpilerConfig));
 };

package/src/library/webpack/loaders/pagesResolve.ts

@@ -8,7 +8,7 @@ const LAYOUT_FILENAME = '_layout.tsx';
 const ERROR_BOUNDARY_FILENAME = '_error.tsx';
 const WILDCARD_TOKEN = '[...';
 
-interface Options {
+export interface PagesResolveOptions {
   rootDir: string;
   root: string;
   extensions: string[];
@@ -22,8 +22,9 @@ const removeExtension = (filename: string): string => {
 };
 
 // eslint-disable-next-line func-style
-const pagesResolve: LoaderDefinitionFunction<Options> = function () {
+const pagesResolve: LoaderDefinitionFunction<PagesResolveOptions> = function () {
   const { fileSystemPages, rootDir, root, extensions } = this.getOptions();
+  const extensionsRegexp = new RegExp(`\\.(${extensions.map((ext) => ext.slice(1)).join('|')})$`);
   const fsLayouts: string[] = [];
   const fsErrorBoundaries: string[] = [];
   const fsWildcards: string[] = [];
@@ -34,9 +35,11 @@ const pagesResolve: LoaderDefinitionFunction<Options> = function () {
   const filesToPages = ({
     pagesRootDirectory,
     isRoutes = false,
+    test,
   }: {
     pagesRootDirectory: string;
     isRoutes?: boolean;
+    test: RegExp;
   }) => {
     const pagesDir = path.resolve(rootDir, root, pagesRootDirectory);
 
@@ -51,9 +54,10 @@ const pagesResolve: LoaderDefinitionFunction<Options> = function () {
 
     for (const file of pagesFiles) {
       const extname = path.extname(file);
-      const name = file.replace(new RegExp(`\\${extname}$`), '').replace(/\\/g, '/');
+      const normalizedFile = file.replace(/\\/g, '/');
 
-      if (extensions.indexOf(extname) !== -1) {
+      if (test.test(normalizedFile)) {
+        const name = normalizedFile.replace(new RegExp(`\\${extname}$`), '');
         const pageComponentName = `@/${pagesRootDirectory}/${name}`;
         const pageComponentPath = path.resolve(pagesDir, name).replace(/\\/g, '\\\\');
         const chunkname = pageComponentName.replace(/\//g, '_');
@@ -112,11 +116,15 @@ const pagesResolve: LoaderDefinitionFunction<Options> = function () {
     ? filesToPages({
         pagesRootDirectory: fileSystemPages.routesDir,
         isRoutes: true,
+        test: new RegExp(`index${extensionsRegexp.source}`),
       })
     : [];
   const fsPages = fileSystemPages.pagesDir
     ? filesToPages({
         pagesRootDirectory: fileSystemPages.pagesDir,
+        test: fileSystemPages.componentsPattern
+          ? new RegExp(fileSystemPages.componentsPattern)
+          : extensionsRegexp,
       })
     : [];
 

package/src/library/webpack/plugins/ModuleFederationFixRange.ts

@@ -1,10 +1,8 @@
 import type webpack from 'webpack';
 import type { Compiler, NormalModule } from 'webpack';
-import { sync as resolve } from 'resolve';
-import type packageJson from 'package-json';
-import chalk from 'chalk';
+import { WebpackError } from 'webpack';
 // eslint-disable-next-line no-restricted-imports
-import { parseRange } from 'webpack/lib/util/semver';
+import { parseRange, satisfy } from 'webpack/lib/util/semver';
 import { isDependantLib, isUnifiedVersion } from '../../../utils/tramvaiVersions';
 
 const PLUGIN_NAME = 'ModuleFederationValidateDuplicates';
@@ -22,19 +20,6 @@ interface SharedModule extends NormalModule {
   options?: SharedModuleOptions;
 }
 
-const resolvePackageVersion = (name: string, basedir: string) => {
-  try {
-    const packageJsonPath = resolve(`${name}/package.json`, {
-      basedir,
-    });
-    const packageJson: packageJson.FullMetadataOptions = require(packageJsonPath);
-
-    return packageJson.version;
-  } catch (error: any) {
-    console.warn(`ModuleFederation: could not infer version for package "${name}"`);
-  }
-};
-
 export interface ModuleFederationFixRangeOptions {
   flexibleTramvaiVersions: boolean;
 }
@@ -42,14 +27,14 @@ export interface ModuleFederationFixRangeOptions {
 export class ModuleFederationFixRange implements webpack.WebpackPluginInstance {
   private flexibleTramvaiVersions: boolean;
   // { name: { importResolved: { number }} }
-  private sharedModules: Map<string, Map<string, Set<number>>> = new Map();
+  private sharedModules: Map<string, Map<string, Set<SharedModule>>> = new Map();
 
   constructor({ flexibleTramvaiVersions }: ModuleFederationFixRangeOptions) {
     this.flexibleTramvaiVersions = flexibleTramvaiVersions ?? false;
   }
 
   apply(compiler: Compiler) {
-    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (_, { normalModuleFactory }) => {
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation, { normalModuleFactory }) => {
       normalModuleFactory.hooks.factorize.intercept({
         register: (tap) => {
           if (tap.name === 'ConsumeSharedPlugin') {
@@ -59,7 +44,24 @@ export class ModuleFederationFixRange implements webpack.WebpackPluginInstance {
               const module: SharedModule | undefined = await originalFn(...args);
 
               if (module?.options) {
-                this.fixVersionRange(module);
+                const { shareKey: name, importResolved } = module.options;
+
+                let shared = this.sharedModules.get(name);
+
+                if (!shared) {
+                  shared = new Map();
+                  this.sharedModules.set(name, shared);
+                }
+
+                let modules = shared.get(importResolved);
+
+                if (!modules) {
+                  modules = new Set();
+                  shared.set(importResolved, modules);
+                }
+
+                // save major version of the semver array
+                modules.add(module);
               }
 
               return module;
@@ -69,71 +71,91 @@ export class ModuleFederationFixRange implements webpack.WebpackPluginInstance {
           return tap;
         },
       });
-    });
-
-    compiler.hooks.done.tap(PLUGIN_NAME, () => {
-      const duplicates: Array<{ name: string; paths: string[] }> = [];
-      const criticalDuplicates: Array<{ name: string; path: string }> = [];
 
-      for (const [name, shared] of this.sharedModules) {
-        if (shared.size > 1) {
-          duplicates.push({
-            name,
-            paths: [...shared.keys()],
-          });
-        }
-
-        for (const [path, versions] of shared) {
-          if (versions.size > 1) {
-            criticalDuplicates.push({ name, path });
+      // eslint-disable-next-line max-statements
+      compilation.hooks.optimizeDependencies.tap(PLUGIN_NAME, () => {
+        for (const [name, sharedModulesByName] of this.sharedModules.entries()) {
+          const hasDuplicates = sharedModulesByName.size > 1;
+
+          for (const [importResolved, sharedModulesByPath] of sharedModulesByName.entries()) {
+            if (hasDuplicates) {
+              const error = new WebpackError(
+                `This file is a duplicate for a module "${name}" that resolved to different path`
+              );
+              error.file = importResolved;
+              compilation.warnings.push(error);
+            }
+
+            let validModule: SharedModule;
+            let validVersion: string;
+            const invalidModules = new Set<SharedModule>();
+
+            for (const sharedModule of sharedModulesByPath) {
+              const connections = compilation.moduleGraph.getOutgoingConnections(sharedModule);
+
+              for (const { module } of connections) {
+                const resolvedVersion = module.resourceResolveData?.descriptionFileData?.version;
+                this.fixVersionRange(sharedModule, resolvedVersion);
+
+                const requiredVersion = sharedModule?.options?.requiredVersion;
+
+                if (requiredVersion && resolvedVersion) {
+                  if (satisfy(requiredVersion, resolvedVersion)) {
+                    validModule = sharedModule;
+                    validVersion = resolvedVersion;
+                  } else {
+                    invalidModules.add(sharedModule);
+                  }
+                }
+                // there should by only one outgoing module for ConsumeSharedModule
+                break;
+              }
+            }
+
+            if (invalidModules.size > 0 && validModule) {
+              for (const sharedModule of invalidModules) {
+                const error = new WebpackError(
+                  `Shared module has been actually resolved to ${validVersion} instead of the expected`
+                );
+                error.module = sharedModule;
+                compilation.warnings.push(error);
+
+                // replace invalid module with valid version (invalid anyway are resolved to wrong version)
+                // to prevent any issues with shared dependencies
+                compilation.moduleGraph.moveModuleConnections(
+                  sharedModule,
+                  validModule,
+                  (connection) => {
+                    // ignore any outgoing connections as we want to ignore that module entirely and all its dependencies
+                    return connection.originModule !== sharedModule;
+                  }
+                );
+              }
+            }
           }
         }
-      }
-
-      // reset sharedModules info after compilation has ended
-      this.sharedModules = new Map();
-
-      if (duplicates.length) {
-        console.warn(`⚠️  ModuleFederation: Found duplicates for next shared modules:
-${duplicates
-  .map(({ name, paths }) => {
-    return `\t${chalk.yellowBright(name)}: ${paths.join(', ')}`;
-  })
-  .join('\n')}
-        `);
-      }
 
-      if (criticalDuplicates.length) {
-        console.error(
-          `❗ ModuleFederation: Found duplicates for shared modules with different major versions that are resolved to the same path:
-${criticalDuplicates
-  .map(({ name, path }) => {
-    return `\t${chalk.red(name)}: ${path}`;
-  })
-  .join('\n')}`
-        );
-
-        throw new Error(
-          'ModuleFederation: Different major versions have resolved to the same path for shared modules, please review errors above'
-        );
-      }
+        // reset sharedModules info after validation
+        this.sharedModules = new Map();
+      });
     });
   }
 
-  fixVersionRange(module: SharedModule) {
+  fixVersionRange(sharedModule: SharedModule, resolvedVersion?: string) {
     const {
       options,
-      options: { shareKey: name, singleton, importResolved },
+      options: { shareKey: name, singleton },
       context,
-    } = module;
+    } = sharedModule;
     let { requiredVersion } = options;
 
+    // if version was not resolved automatically then get the version
+    // from actual module
     // ignore singletons as the actual version won't change anything
     // and usually it is just a react and co libraries
     if (!requiredVersion && context && !singleton) {
-      const version = resolvePackageVersion(name, context);
-      if (version) {
-        requiredVersion = parseRange(version);
+      if (resolvedVersion) {
+        requiredVersion = parseRange(resolvedVersion);
       }
     }
 
@@ -153,22 +175,5 @@ ${criticalDuplicates
 
     // change version in webpack module
     options.requiredVersion = requiredVersion;
-
-    let shared = this.sharedModules.get(name);
-
-    if (!shared) {
-      shared = new Map();
-      this.sharedModules.set(name, shared);
-    }
-
-    let versions = shared.get(importResolved);
-
-    if (!versions) {
-      versions = new Set();
-      shared.set(importResolved, versions);
-    }
-
-    // save major version of the semver array
-    versions.add(requiredVersion[1]);
   }
 }

package/src/library/webpack/plugins/WebpackBar/utils/log-update.ts

@@ -69,6 +69,7 @@ export default class LogUpdate {
         }
 
         this._onData(data);
+        return stream.write[originalWrite].call(stream, data, ...args);
       };
 
       // Backup original write fn
@@ -93,7 +94,12 @@ export default class LogUpdate {
   }
 
   _onData(data) {
-    this.extraLines += data;
+    const str = String(data);
+    const lines = str.split('\n').length - 1;
+    if (lines > 0) {
+      this.prevLineCount += lines;
+      this.extraLines += data;
+    }
   }
 
   render(lines) {

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

@@ -14,12 +14,15 @@ export const addSvgrLoader = (
     .rule('svgr')
     .test(/\.svg$/)
     // @todo: `issuer: /\.tsx?$/` нужен или нет?
-    .set('resourceQuery', /react/);
-
-  addTranspilerLoader(configManager, svgrConfig.use('svgr-transpiler'), {
-    ...transpilerConfig,
-    typescript: true,
-  });
+    .set('resourceQuery', /react/)
+    .use('svgr-transpiler')
+    .batch(
+      addTranspilerLoader(configManager, {
+        ...transpilerConfig,
+        typescript: true,
+      })
+    )
+    .end();
 
   svgrConfig.use('svgr').loader('@svgr/webpack').options({ babel: false, svgo: svgoOptions }).end();
 };

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

@@ -25,29 +25,27 @@ export type TranspilerConfig = {
   rootDir: string;
 };
 
-export const addTranspilerLoader = (
-  configManager: ConfigManager<CliConfigEntry>,
-  rule: Config.Use,
-  transpilerConfig: TranspilerConfig
-) => {
-  const { loader } = configManager.experiments.transpilation;
+export const addTranspilerLoader =
+  (configManager: ConfigManager<CliConfigEntry>, transpilerConfig: TranspilerConfig) =>
+  (rule: Config.Use) => {
+    const { loader } = configManager.experiments.transpilation;
 
-  if (loader === 'swc') {
-    try {
-      resolve('@tramvai/swc-integration/package.json', { basedir: configManager.rootDir });
-    } catch (error) {
-      throw new Error(`You are using swc loader for the transpilation, but required module is not installed.
+    if (loader === 'swc') {
+      try {
+        resolve('@tramvai/swc-integration/package.json', { basedir: configManager.rootDir });
+      } catch (error) {
+        throw new Error(`You are using swc loader for the transpilation, but required module is not installed.
 Please run "npx tramvai add --dev @tramvai/swc-integration" to fix the problem
       `);
-    }
+      }
 
-    return rule.loader('swc-loader').options(getSwcOptions(transpilerConfig)).end();
-  }
+      return rule.loader('swc-loader').options(getSwcOptions(transpilerConfig)).end();
+    }
 
-  if (loader === 'babel') {
-    return rule.loader('babel-loader').options(babelConfig(transpilerConfig)).end();
-  }
-};
+    if (loader === 'babel') {
+      return rule.loader('babel-loader').options(babelConfig(transpilerConfig)).end();
+    }
+  };
 
 export const getTranspilerConfig = (
   configManager: ConfigManager<CliConfigEntry>,

package/src/schema/autogeneratedSchema.json

@@ -96,6 +96,10 @@
                   "type": "string"
                 }
               ]
+            },
+            "componentsPattern": {
+              "title": "Test Regexp to add only files with specific name to list of FS Components",
+              "type": "string"
             }
           },
           "additionalProperties": false

package/src/typings/build/Builder.ts

@@ -41,6 +41,7 @@ export type GetBuildStats = () => {
   clientBuildTime?: number;
   clientModernBuildTime?: number;
   serverBuildTime?: number;
+  maxMemoryRss?: number;
 };
 
 export type BuildType = 'client' | 'server' | 'clientModern';

package/src/typings/configEntry/application.ts

@@ -158,6 +158,10 @@ export interface ApplicationConfigEntry extends CliConfigEntry {
      * @default "pages"
      */
     pagesDir: string | false;
+    /**
+     * @title Test Regexp to add only files with specific name to list of FS Components
+     */
+    componentsPattern: string;
   };
   /**
    * @title Configure the options on webpack splitChunks