@tramvai/cli 2.111.1 → 2.117.0

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

package/src/utils/detectPortSync.ts

@@ -1,7 +1,23 @@
 import { execSync } from 'child_process';
 
-export const detectPortSync = (port: number): number => {
-  const commandResult = execSync(`npx detect-port ${port}`);
+interface Payload {
+  request?: number;
+  fallback: number;
+}
+
+/**
+ * Try to detect port synchronously considering the fact, that if user requests
+ * a port explicitly, we should not try to detect a free one.
+ *
+ * Also, handle zero port (it means any random port) as the edge case,
+ * because we must pass a final number to the config manager.
+ */
+export const detectPortSync = ({ request, fallback }: Payload): number => {
+  if (request !== undefined && request !== 0) {
+    return request;
+  }
+
+  const commandResult = execSync(`npx detect-port ${request ?? fallback}`);
 
   return parseInt(commandResult.toString('utf-8'), 10);
 };