refactor: code

Author: alexander-akait

package.json

@@ -97,7 +97,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
     "typescript-eslint": "^8.35.0",
-    "webpack": "^5.99.1",
+    "webpack": "^5.101.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^5.1.0"
   },

packages/webpack-cli/src/types.ts

@@ -1,9 +1,9 @@
 import { type stringifyChunked } from "@discoveryjs/json-ext";
-import { type Colorette } from "colorette";
 import { type Command, type CommandOptions, type Option, type ParseOptions } from "commander";
 import { type prepare } from "rechoir";
 import {
   type AssetEmittedInfo,
+  type Colors,
   type Compiler,
   type Configuration,
   type EntryOptions,
@@ -12,7 +12,6 @@ import {
   type MultiCompilerOptions,
   type MultiStats,
   type Stats,
-  type StatsOptions,
   type WebpackError,
   type WebpackOptionsNormalized,
   default as webpack,
@@ -27,14 +26,9 @@ import {
  * Webpack CLI
  */
 
-// TODO remove me and get it from webpack types
-type ChildrenStatsOptions = undefined | string | boolean | StatsOptions;
-type MultiStatsOptions = Omit<StatsOptions, "children"> & {
-  children?: ChildrenStatsOptions | ChildrenStatsOptions[];
-};
-
 type WebpackCallback = (err: Error | undefined, stats: Stats | MultiStats | undefined) => void;
 
+// TODO remove me in the next major release, we don't need extra interface
 interface IWebpackCLI {
   colors: WebpackCLIColors;
   logger: WebpackCLILogger;
@@ -83,7 +77,7 @@ interface IWebpackCLI {
   runWebpack(options: WebpackRunOptions, isWatchCommand: boolean): Promise<void>;
 }
 
-interface WebpackCLIColors extends Colorette {
+interface WebpackCLIColors extends Colors {
   isColorSupported: boolean;
 }
 
@@ -327,7 +321,6 @@ export {
   type JsonExt,
   type LoadableWebpackConfiguration,
   type ModuleName,
-  type MultiStatsOptions,
   type PackageInstallOptions,
   type PackageManager,
   type Path,

packages/webpack-cli/src/webpack-cli.ts

@@ -3,6 +3,7 @@ import { type Help, type ParseOptions } from "commander";
 import {
   type Compiler,
   type MultiCompiler,
+  type MultiStatsOptions,
   type StatsOptions,
   type WebpackError,
   default as webpack,
@@ -26,7 +27,6 @@ import {
   type JsonExt,
   type LoadableWebpackConfiguration,
   type ModuleName,
-  type MultiStatsOptions,
   type PackageInstallOptions,
   type PackageManager,
   type Path,
@@ -103,9 +103,12 @@ class WebpackCLI implements IWebpackCLI {
     this.program = program;
     this.program.name("webpack");
     this.program.configureOutput({
-      writeErr: this.logger.error,
-      outputError: (str, write) =>
-        write(`Error: ${this.capitalizeFirstLetter(str.replace(/^error:/, "").trim())}`),
+      writeErr: (str) => {
+        this.logger.error(str);
+      },
+      outputError: (str, write) => {
+        write(`Error: ${this.capitalizeFirstLetter(str.replace(/^error:/, "").trim())}`);
+      },
     });
   }
 
@@ -134,6 +137,20 @@ class WebpackCLI implements IWebpackCLI {
   }
 
   createColors(useColor?: boolean): WebpackCLIColors {
+    try {
+      const { cli } = require("webpack");
+
+      if (typeof cli.createColors === "function") {
+        const { createColors, isColorSupported } = cli;
+        const shouldUseColor = useColor || isColorSupported();
+
+        return { ...createColors({ useColor: shouldUseColor }), isColorSupported: shouldUseColor };
+      }
+    } catch {
+      // Nothing
+    }
+
+    // TODO remove `colorette` and set [email protected] as the minimum supported version in the next major release
     const { createColors, isColorSupported } = require("colorette");
 
     const shouldUseColor = useColor || isColorSupported;
@@ -1323,16 +1340,14 @@ class WebpackCLI implements IWebpackCLI {
     });
 
     this.program.option("--color", "Enable colors on console.");
-    this.program.on("option:color", function color() {
-      // @ts-expect-error shadowing 'this' is intended
+    this.program.on("option:color", function color(this: WebpackCLICommand) {
       const { color } = this.opts();
 
       cli.isColorSupportChanged = color;
       cli.colors = cli.createColors(color);
     });
     this.program.option("--no-color", "Disable colors on console.");
-    this.program.on("option:no-color", function noColor() {
-      // @ts-expect-error shadowing 'this' is intended
+    this.program.on("option:no-color", function noColor(this: WebpackCLICommand) {
       const { color } = this.opts();
 
       cli.isColorSupportChanged = color;
@@ -1830,8 +1845,7 @@ class WebpackCLI implements IWebpackCLI {
           false,
           moduleType,
         );
-        // @ts-expect-error error type assertion
-      } catch (error: Error) {
+      } catch (error) {
         this.logger.error(`Failed to load '${configPath}' config`);
 
         if (this.isValidationError(error)) {
@@ -2328,8 +2342,10 @@ class WebpackCLI implements IWebpackCLI {
     return config;
   }
 
-  isValidationError(error: Error): error is WebpackError {
-    return error instanceof this.webpack.ValidationError || error.name === "ValidationError";
+  isValidationError(error: unknown): error is WebpackError {
+    return (
+      error instanceof this.webpack.ValidationError || (error as Error).name === "ValidationError"
+    );
   }
 
   async createCompiler(
@@ -2360,9 +2376,8 @@ class WebpackCLI implements IWebpackCLI {
               callback(error as Error | undefined, stats);
             }
           : callback,
-      );
-      // @ts-expect-error error type assertion
-    } catch (error: Error) {
+      )!;
+    } catch (error) {
       if (this.isValidationError(error)) {
         this.logger.error(error.message);
       } else {

yarn.lock

@@ -11911,10 +11911,10 @@ webpack-sources@^3.3.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.3.3.tgz#d4bf7f9909675d7a070ff14d0ef2a4f3c982c723"
   integrity sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==
 
-webpack@^5.99.1:
-  version "5.100.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.100.2.tgz#e2341facf9f7de1d702147c91bcb65b693adf9e8"
-  integrity sha512-QaNKAvGCDRh3wW1dsDjeMdDXwZm2vqq3zn6Pvq4rHOEOGSaUMgOOjG2Y9ZbIGzpfkJk9ZYTHpDqgDfeBDcnLaw==
+webpack@^5.101.0:
+  version "5.101.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.101.0.tgz#4b81407ffad9857f81ff03f872e3369b9198cc9d"
+  integrity sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==
   dependencies:
     "@types/eslint-scope" "^3.7.7"
     "@types/estree" "^1.0.8"