webpack 5.106.1 → 5.107.0

package/lib/ProgressPlugin.js

@@ -9,9 +9,21 @@ const Compiler = require("./Compiler");
 const MultiCompiler = require("./MultiCompiler");
 const NormalModule = require("./NormalModule");
 const { contextify } = require("./util/identifier");
+const memoize = require("./util/memoize");
+
+const getColors = memoize(() => {
+	const cli = require("./cli");
+
+	return cli.createColors({ useColor: cli.isColorSupported() });
+});
+
+const BAR_LENGTH = 25;
+const BLOCK_CHAR = "━";
+const BULLET_ICON = "●";
 
 /** @typedef {import("tapable").Tap} Tap */
 /**
+ * Defines the hook type used by this module.
  * @template T, R, AdditionalOptions
  * @typedef {import("tapable").Hook<T, R, AdditionalOptions>} Hook
  */
@@ -23,19 +35,23 @@ const { contextify } = require("./util/identifier");
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./ModuleFactory").ModuleFactoryResult} ModuleFactoryResult */
 /** @typedef {import("./logging/Logger").Logger} Logger */
+/** @typedef {import("./cli").Colors} Colors */
 
 /**
+ * Defines the async queue type used by this module.
  * @template T, K, R
  * @typedef {import("./util/AsyncQueue")<T, K, R>} AsyncQueue
  */
 
 /**
+ * Defines the counts data type used by this module.
  * @typedef {object} CountsData
  * @property {number} modulesCount modules count
  * @property {number} dependenciesCount dependencies count
  */
 
 /**
+ * Returns median.
  * @param {number} a a
  * @param {number} b b
  * @param {number} c c
@@ -46,72 +62,126 @@ const median3 = (a, b, c) => a + b + c - Math.max(a, b, c) - Math.min(a, b, c);
 /** @typedef {(percentage: number, msg: string, ...args: string[]) => void} HandlerFn */
 
 /**
+ * @param {Logger} logger logger
+ * @param {{ value: string | undefined, time: number }[]} lastStateInfo mutable state
+ * @param {number} percentage percentage
+ * @param {string} msg msg
+ * @param {string[]} args args
+ */
+const reportProfile = (logger, lastStateInfo, percentage, msg, args) => {
+	if (percentage === 0) {
+		lastStateInfo.length = 0;
+	}
+	const fullState = [msg, ...args];
+	const state = fullState.map((s) => s.replace(/\d+\/\d+ /g, ""));
+	const now = Date.now();
+	const len = Math.max(state.length, lastStateInfo.length);
+	for (let i = len; i >= 0; i--) {
+		const stateItem = i < state.length ? state[i] : undefined;
+		const lastStateItem =
+			i < lastStateInfo.length ? lastStateInfo[i] : undefined;
+		if (lastStateItem) {
+			if (stateItem !== lastStateItem.value) {
+				const diff = now - lastStateItem.time;
+				if (lastStateItem.value) {
+					let reportState = lastStateItem.value;
+					if (i > 0) {
+						reportState = `${lastStateInfo[i - 1].value} > ${reportState}`;
+					}
+					const stateMsg = `${" | ".repeat(i)}${diff} ms ${reportState}`;
+					const d = diff;
+					// This depends on timing so we ignore it for coverage
+					/* eslint-disable no-lone-blocks */
+					/* istanbul ignore next */
+					{
+						if (d > 10000) {
+							logger.error(stateMsg);
+						} else if (d > 1000) {
+							logger.warn(stateMsg);
+						} else if (d > 10) {
+							logger.info(stateMsg);
+						} else if (d > 5) {
+							logger.log(stateMsg);
+						} else {
+							logger.debug(stateMsg);
+						}
+					}
+					/* eslint-enable no-lone-blocks */
+				}
+				if (stateItem === undefined) {
+					lastStateInfo.length = i;
+				} else {
+					lastStateItem.value = stateItem;
+					lastStateItem.time = now;
+					lastStateInfo.length = i + 1;
+				}
+			}
+		} else {
+			lastStateInfo[i] = {
+				value: stateItem,
+				time: now
+			};
+		}
+	}
+};
+
+/**
+ * @param {string} name progress bar name
+ * @param {string} color progress bar color
+ * @returns {(percentage: number) => string} bar renderer
+ */
+const createReportBar = (name, color) => {
+	const c = getColors();
+
+	return (percentage) => {
+		const w = Math.round(percentage * BAR_LENGTH);
+		const filled = BLOCK_CHAR.repeat(w);
+		const empty = BLOCK_CHAR.repeat(BAR_LENGTH - w);
+		const colorFn =
+			color in c ? c[/** @type {keyof Colors} */ (color)] : c.green;
+
+		return `${[BULLET_ICON, name, filled].map(colorFn).join(" ")}${c.white(empty)}`;
+	};
+};
+
+/** @typedef {Required<Exclude<NonNullable<ProgressPluginOptions["progressBar"]>, boolean>>} ProgressBarOptions */
+
+/**
+ * Creates a default handler.
  * @param {boolean | null | undefined} profile need profile
  * @param {Logger} logger logger
+ * @param {ProgressBarOptions | false} progressBar render bar
  * @returns {HandlerFn} default handler
  */
-const createDefaultHandler = (profile, logger) => {
+const createDefaultHandler = (profile, logger, progressBar) => {
 	/** @type {{ value: string | undefined, time: number }[]} */
 	const lastStateInfo = [];
 
 	/** @type {HandlerFn} */
 	const defaultHandler = (percentage, msg, ...args) => {
 		if (profile) {
-			if (percentage === 0) {
-				lastStateInfo.length = 0;
-			}
-			const fullState = [msg, ...args];
-			const state = fullState.map((s) => s.replace(/\d+\/\d+ /g, ""));
-			const now = Date.now();
-			const len = Math.max(state.length, lastStateInfo.length);
-			for (let i = len; i >= 0; i--) {
-				const stateItem = i < state.length ? state[i] : undefined;
-				const lastStateItem =
-					i < lastStateInfo.length ? lastStateInfo[i] : undefined;
-				if (lastStateItem) {
-					if (stateItem !== lastStateItem.value) {
-						const diff = now - lastStateItem.time;
-						if (lastStateItem.value) {
-							let reportState = lastStateItem.value;
-							if (i > 0) {
-								reportState = `${lastStateInfo[i - 1].value} > ${reportState}`;
-							}
-							const stateMsg = `${" | ".repeat(i)}${diff} ms ${reportState}`;
-							const d = diff;
-							// This depends on timing so we ignore it for coverage
-							/* eslint-disable no-lone-blocks */
-							/* istanbul ignore next */
-							{
-								if (d > 10000) {
-									logger.error(stateMsg);
-								} else if (d > 1000) {
-									logger.warn(stateMsg);
-								} else if (d > 10) {
-									logger.info(stateMsg);
-								} else if (d > 5) {
-									logger.log(stateMsg);
-								} else {
-									logger.debug(stateMsg);
-								}
-							}
-							/* eslint-enable no-lone-blocks */
-						}
-						if (stateItem === undefined) {
-							lastStateInfo.length = i;
-						} else {
-							lastStateItem.value = stateItem;
-							lastStateItem.time = now;
-							lastStateInfo.length = i + 1;
-						}
-					}
-				} else {
-					lastStateInfo[i] = {
-						value: stateItem,
-						time: now
-					};
-				}
+			reportProfile(logger, lastStateInfo, percentage, msg, args);
+		}
+
+		if (progressBar) {
+			const reportBar = createReportBar(progressBar.name, progressBar.color);
+			const c = getColors();
+			/** @type {string} */
+			const currentBar = reportBar(percentage);
+
+			if (percentage === 1) {
+				logger.status();
+			} else if (msg) {
+				logger.status(
+					`${currentBar} (${Math.floor(percentage * 100)}%)`,
+					`\n${[msg, ...args].map(c.gray).join(" ")}`
+				);
+			} else {
+				logger.status(`${currentBar} (${Math.floor(percentage * 100)}%)`);
 			}
+			return;
 		}
+
 		logger.status(`${Math.floor(percentage * 100)}%`, msg, ...args);
 		if (percentage === 1 || (!msg && args.length === 0)) logger.status();
 	};
@@ -122,6 +192,7 @@ const createDefaultHandler = (profile, logger) => {
 const SKIPPED_QUEUE_CONTEXTS = ["import-module", "load-module"];
 
 /**
+ * Defines the report progress callback.
  * @callback ReportProgress
  * @param {number} p percentage
  * @param {...string} args additional arguments
@@ -142,11 +213,13 @@ const DEFAULT_OPTIONS = {
 	dependencies: true,
 	activeModules: false,
 	entries: true,
-	percentBy: null
+	percentBy: null,
+	progressBar: false
 };
 
 class ProgressPlugin {
 	/**
+	 * Returns a progress reporter, if any.
 	 * @param {Compiler} compiler the current compiler
 	 * @returns {ReportProgress | undefined} a progress reporter, if any
 	 */
@@ -155,6 +228,7 @@ class ProgressPlugin {
 	}
 
 	/**
+	 * Creates an instance of ProgressPlugin.
 	 * @param {ProgressPluginArgument} options options
 	 */
 	constructor(options = {}) {
@@ -167,21 +241,26 @@ class ProgressPlugin {
 		/** @type {ProgressPluginOptions} */
 		this.options = options;
 
-		this.profile = options.profile || DEFAULT_OPTIONS.profile;
-		this.handler = options.handler;
-		this.modulesCount = options.modulesCount || DEFAULT_OPTIONS.modulesCount;
-		this.dependenciesCount =
-			options.dependenciesCount || DEFAULT_OPTIONS.dependenciesCount;
-		this.showEntries = options.entries || DEFAULT_OPTIONS.entries;
-		this.showModules = options.modules || DEFAULT_OPTIONS.modules;
-		this.showDependencies =
-			options.dependencies || DEFAULT_OPTIONS.dependencies;
-		this.showActiveModules =
-			options.activeModules || DEFAULT_OPTIONS.activeModules;
-		this.percentBy = options.percentBy || DEFAULT_OPTIONS.percentBy;
+		const merged = { ...DEFAULT_OPTIONS, ...options };
+		this.profile = merged.profile;
+		this.handler = merged.handler;
+		this.modulesCount = merged.modulesCount;
+		this.dependenciesCount = merged.dependenciesCount;
+		this.showEntries = merged.entries;
+		this.showModules = merged.modules;
+		this.showDependencies = merged.dependencies;
+		this.showActiveModules = merged.activeModules;
+		this.percentBy = merged.percentBy;
+
+		const progressBar = merged.progressBar === true ? {} : merged.progressBar;
+		/** @type {ProgressBarOptions | false} */
+		this.progressBar = progressBar
+			? { name: "Build", color: "green", ...progressBar }
+			: false;
 	}
 
 	/**
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler | MultiCompiler} compiler webpack compiler
 	 * @returns {void}
 	 */
@@ -190,7 +269,8 @@ class ProgressPlugin {
 			this.handler ||
 			createDefaultHandler(
 				this.profile,
-				compiler.getInfrastructureLogger("webpack.Progress")
+				compiler.getInfrastructureLogger("webpack.Progress"),
+				this.progressBar
 			);
 		if (compiler instanceof MultiCompiler) {
 			this._applyOnMultiCompiler(compiler, handler);
@@ -200,6 +280,7 @@ class ProgressPlugin {
 	}
 
 	/**
+	 * Apply on multi compiler.
 	 * @param {MultiCompiler} compiler webpack multi-compiler
 	 * @param {HandlerFn} handler function that executes for every progress step
 	 * @returns {void}
@@ -219,6 +300,7 @@ class ProgressPlugin {
 	}
 
 	/**
+	 * Processes the provided compiler.
 	 * @param {Compiler} compiler webpack compiler
 	 * @param {HandlerFn} handler function that executes for every progress step
 	 * @returns {void}
@@ -333,6 +415,7 @@ class ProgressPlugin {
 		};
 
 		/**
+		 * Processes the provided factorize queue.
 		 * @template T
 		 * @param {AsyncQueue<FactorizeModuleOptions, string, Module | ModuleFactoryResult>} factorizeQueue async queue
 		 * @param {T} _item item
@@ -355,6 +438,7 @@ class ProgressPlugin {
 		};
 
 		/**
+		 * Processes the provided add module queue.
 		 * @template T
 		 * @param {AsyncQueue<Module, string, Module>} addModuleQueue async queue
 		 * @param {T} _item item
@@ -369,6 +453,7 @@ class ProgressPlugin {
 
 		// only used when showActiveModules is set
 		/**
+		 * Processes the provided module.
 		 * @param {Module} module the module
 		 */
 		const moduleBuild = (module) => {
@@ -381,6 +466,7 @@ class ProgressPlugin {
 		};
 
 		/**
+		 * Processes the provided entry.
 		 * @param {Dependency} entry entry dependency
 		 * @param {EntryOptions} options options object
 		 */
@@ -390,6 +476,7 @@ class ProgressPlugin {
 		};
 
 		/**
+		 * Processes the provided module.
 		 * @param {Module} module the module
 		 */
 		const moduleDone = (module) => {
@@ -412,6 +499,7 @@ class ProgressPlugin {
 		};
 
 		/**
+		 * Processes the provided entry.
 		 * @param {Dependency} entry entry dependency
 		 * @param {EntryOptions} options options object
 		 */
@@ -606,6 +694,7 @@ class ProgressPlugin {
 			}
 		});
 		/**
+		 * Processes the provided hook.
 		 * @template {Hook<EXPECTED_ANY, EXPECTED_ANY, EXPECTED_ANY>} T
 		 * @param {T} hook hook
 		 * @param {number} progress progress from 0 to 1
@@ -629,6 +718,7 @@ class ProgressPlugin {
 					handler(progress, category, name);
 				},
 				/**
+				 * Processes the provided tap.
 				 * @param {Tap} tap tap
 				 */
 				tap(tap) {

package/lib/ProvidePlugin.js

@@ -24,6 +24,7 @@ const PLUGIN_NAME = "ProvidePlugin";
 
 class ProvidePlugin {
 	/**
+	 * Creates an instance of ProvidePlugin.
 	 * @param {Record<string, string | string[]>} definitions the provided identifiers
 	 */
 	constructor(definitions) {
@@ -31,7 +32,7 @@ class ProvidePlugin {
 	}
 
 	/**
-	 * Apply the plugin
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
 	 * @returns {void}
 	 */
@@ -53,6 +54,7 @@ class ProvidePlugin {
 					new ProvidedDependency.Template()
 				);
 				/**
+				 * Handles the hook callback for this code path.
 				 * @param {JavascriptParser} parser the parser
 				 * @param {JavascriptParserOptions} parserOptions options
 				 * @returns {void}

package/lib/RawModule.js

@@ -36,6 +36,7 @@ const makeSerializable = require("./util/makeSerializable");
 
 class RawModule extends Module {
 	/**
+	 * Creates an instance of RawModule.
 	 * @param {string} source source code
 	 * @param {string} identifier unique identifier
 	 * @param {string=} readableIdentifier readable identifier
@@ -50,6 +51,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Returns the source types this module can generate.
 	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
@@ -57,6 +59,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Returns the unique identifier used to reference this module.
 	 * @returns {string} a unique identifier of the module
 	 */
 	identifier() {
@@ -64,6 +67,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Returns the estimated size for the requested source type.
 	 * @param {string=} type the source type for which the size should be estimated
 	 * @returns {number} the estimated size of the module (must be non-zero)
 	 */
@@ -72,6 +76,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Returns a human-readable identifier for this module.
 	 * @param {RequestShortener} requestShortener the request shortener
 	 * @returns {string} a user readable identifier of the module
 	 */
@@ -82,6 +87,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Checks whether the module needs to be rebuilt for the current build state.
 	 * @param {NeedBuildContext} context context info
 	 * @param {NeedBuildCallback} callback callback function, returns true, if the module needs a rebuild
 	 * @returns {void}
@@ -91,6 +97,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Builds the module using the provided compilation context.
 	 * @param {WebpackOptions} options webpack options
 	 * @param {Compilation} compilation the compilation
 	 * @param {ResolverWithOptions} resolver the resolver
@@ -107,6 +114,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Gets side effects connection state.
 	 * @param {ModuleGraph} moduleGraph the module graph
 	 * @returns {ConnectionState} how this module should be connected to referencing modules when consumed for side-effects only
 	 */
@@ -119,6 +127,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Generates code and runtime requirements for this module.
 	 * @param {CodeGenerationContext} context context for code generation
 	 * @returns {CodeGenerationResult} result
 	 */
@@ -137,6 +146,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Updates the hash with the data contributed by this instance.
 	 * @param {Hash} hash the hash used to track dependencies
 	 * @param {UpdateHashContext} context context
 	 * @returns {void}
@@ -147,6 +157,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Serializes this instance into the provided serializer context.
 	 * @param {ObjectSerializerContext} context context
 	 */
 	serialize(context) {
@@ -161,6 +172,7 @@ class RawModule extends Module {
 	}
 
 	/**
+	 * Restores this instance from the provided deserializer context.
 	 * @param {ObjectDeserializerContext} context context
 	 */
 	deserialize(context) {

package/lib/RecordIdsPlugin.js

@@ -13,6 +13,7 @@ const identifierUtils = require("./util/identifier");
 /** @typedef {import("./Module")} Module */
 
 /**
+ * Defines the records chunks type used by this module.
  * @typedef {object} RecordsChunks
  * @property {Record<string, number>=} byName
  * @property {Record<string, number>=} bySource
@@ -20,18 +21,21 @@ const identifierUtils = require("./util/identifier");
  */
 
 /**
+ * Defines the records modules type used by this module.
  * @typedef {object} RecordsModules
  * @property {Record<string, number>=} byIdentifier
  * @property {number[]=} usedIds
  */
 
 /**
+ * Defines the records type used by this module.
  * @typedef {object} Records
  * @property {RecordsChunks=} chunks
  * @property {RecordsModules=} modules
  */
 
 /**
+ * Defines the record ids plugin options type used by this module.
  * @typedef {object} RecordIdsPluginOptions
  * @property {boolean=} portableIds true, when ids need to be portable
  */
@@ -42,6 +46,7 @@ const PLUGIN_NAME = "RecordIdsPlugin";
 
 class RecordIdsPlugin {
 	/**
+	 * Creates an instance of RecordIdsPlugin.
 	 * @param {RecordIdsPluginOptions=} options object
 	 */
 	constructor(options) {
@@ -49,6 +54,7 @@ class RecordIdsPlugin {
 	}
 
 	/**
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the Compiler
 	 * @returns {void}
 	 */
@@ -62,6 +68,7 @@ class RecordIdsPlugin {
 			);
 
 		/**
+		 * Gets module identifier.
 		 * @param {Module} module the module
 		 * @returns {string} the (portable) identifier
 		 */
@@ -113,6 +120,7 @@ class RecordIdsPlugin {
 			/** @typedef {string[]} ChunkSources */
 
 			/**
+			 * Gets chunk sources.
 			 * @param {Chunk} chunk the chunk
 			 * @returns {ChunkSources} sources of the chunk
 			 */

package/lib/RequestShortener.js

@@ -9,8 +9,14 @@ const { contextify } = require("./util/identifier");
 
 /** @typedef {import("./util/identifier").AssociatedObjectForCache} AssociatedObjectForCache */
 
+/**
+ * Shortens absolute or verbose request strings so diagnostics and stats output
+ * can be rendered relative to a chosen base directory.
+ */
 class RequestShortener {
 	/**
+	 * Binds a context-aware shortening function to the provided directory and
+	 * optional cache owner.
 	 * @param {string} dir the directory
 	 * @param {AssociatedObjectForCache=} associatedObjectForCache an object to which the cache will be attached
 	 */
@@ -22,6 +28,8 @@ class RequestShortener {
 	}
 
 	/**
+	 * Returns a request string rewritten relative to the configured directory
+	 * when one is provided.
 	 * @param {string | undefined | null} request the request to shorten
 	 * @returns {string | undefined | null} the shortened request
 	 */

package/lib/ResolverFactory.js

@@ -20,6 +20,7 @@ const {
 
 /** @typedef {WebpackResolveOptions & { dependencyType?: string, resolveToContext?: boolean }} ResolveOptionsWithDependencyType */
 /**
+ * Defines the with options type used by this module.
  * @typedef {object} WithOptions
  * @property {(options: Partial<ResolveOptionsWithDependencyType>) => ResolverWithOptions} withOptions create a resolver with additional/different options
  */
@@ -31,6 +32,7 @@ const {
 const EMPTY_RESOLVE_OPTIONS = {};
 
 /**
+ * Convert to resolve options.
  * @param {ResolveOptionsWithDependencyType} resolveOptionsWithDepType enhanced options
  * @returns {ResolveOptions} merged options
  */
@@ -69,6 +71,7 @@ const convertToResolveOptions = (resolveOptionsWithDepType) => {
 };
 
 /**
+ * Represents the resolver factory runtime component.
  * @typedef {object} ResolverCache
  * @property {WeakMap<ResolveOptionsWithDependencyType, ResolverWithOptions>} direct
  * @property {Map<string, ResolverWithOptions>} stringified
@@ -91,6 +94,7 @@ module.exports = class ResolverFactory {
 	}
 
 	/**
+	 * Returns the resolver.
 	 * @param {string} type type of resolver
 	 * @param {ResolveOptionsWithDependencyType=} resolveOptions options
 	 * @returns {ResolverWithOptions} the resolver
@@ -121,6 +125,7 @@ module.exports = class ResolverFactory {
 	}
 
 	/**
+	 * Returns the resolver.
 	 * @param {string} type type of resolver
 	 * @param {ResolveOptionsWithDependencyType} resolveOptionsWithDepType options
 	 * @returns {ResolverWithOptions} the resolver

package/lib/RuntimeGlobals.js

@@ -83,12 +83,7 @@ module.exports.createScript = "__webpack_require__.ts";
  */
 module.exports.createScriptUrl = "__webpack_require__.tu";
 
-/**
- * merge multiple CSS stylesheets (CSSStyleSheet or string) into one CSS text string
- * Arguments: (sheets: Array<CSSStyleSheet | string> | CSSStyleSheet | string) => string
- */
 module.exports.cssInjectStyle = "__webpack_require__.is";
-module.exports.cssMergeStyleSheets = "__webpack_require__.mcs";
 
 /**
  * The current scope when getting a module from a remote
@@ -391,6 +386,11 @@ module.exports.runtimeId = "__webpack_require__.j";
  */
 module.exports.scriptNonce = "__webpack_require__.nc";
 
+/**
+ * set .name to "default" for anonymous default exports per ES spec
+ */
+module.exports.setAnonymousDefaultName = "__webpack_require__.dn";
+
 /**
  * an object with all share scopes
  */
@@ -410,6 +410,7 @@ module.exports.startup = "__webpack_require__.x";
 module.exports.startupEntrypoint = "__webpack_require__.X";
 
 /**
+ * Describes how this item operation behaves.
  * @deprecated
  * creating a default startup function with the entry modules
  */