webpack 5.106.2 → 5.107.1

package/lib/ProgressPlugin.js

@@ -9,6 +9,17 @@ 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 */
 /**
@@ -24,6 +35,7 @@ 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.
@@ -49,74 +61,127 @@ 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();
 	};
@@ -148,7 +213,8 @@ const DEFAULT_OPTIONS = {
 	dependencies: true,
 	activeModules: false,
 	entries: true,
-	percentBy: null
+	percentBy: null,
+	progressBar: false
 };
 
 class ProgressPlugin {
@@ -185,6 +251,12 @@ class ProgressPlugin {
 		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;
 	}
 
 	/**
@@ -197,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);

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
  */

package/lib/RuntimeModule.js

@@ -129,12 +129,14 @@ class RuntimeModule extends Module {
 		hash.update(this.name);
 		hash.update(`${this.stage}`);
 		try {
-			if (this.fullHash || this.dependentHash) {
-				// Do not use getGeneratedCode here, because i. e. compilation hash might be not
-				// ready at this point. We will cache it later instead.
-				hash.update(/** @type {string} */ (this.generate()));
-			} else {
-				hash.update(/** @type {string} */ (this.getGeneratedCode()));
+			const code =
+				this.fullHash || this.dependentHash
+					? // Do not use getGeneratedCode here, because i. e. compilation hash might be not
+						// ready at this point. We will cache it later instead.
+						this.generate()
+					: this.getGeneratedCode();
+			if (code !== null && code !== undefined) {
+				hash.update(code);
 			}
 		} catch (err) {
 			hash.update(/** @type {Error} */ (err).message);
@@ -207,7 +209,7 @@ class RuntimeModule extends Module {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
-		const AbstractMethodError = require("./AbstractMethodError");
+		const AbstractMethodError = require("./errors/AbstractMethodError");
 
 		throw new AbstractMethodError();
 	}

package/lib/RuntimePlugin.js

@@ -34,6 +34,7 @@ const OnChunksLoadedRuntimeModule = require("./runtime/OnChunksLoadedRuntimeModu
 const PublicPathRuntimeModule = require("./runtime/PublicPathRuntimeModule");
 const RelativeUrlRuntimeModule = require("./runtime/RelativeUrlRuntimeModule");
 const RuntimeIdRuntimeModule = require("./runtime/RuntimeIdRuntimeModule");
+const SetAnonymousDefaultNameRuntimeModule = require("./runtime/SetAnonymousDefaultNameRuntimeModule");
 const SystemContextRuntimeModule = require("./runtime/SystemContextRuntimeModule");
 const ToBinaryRuntimeModule = require("./runtime/ToBinaryRuntimeModule");
 const ShareRuntimeModule = require("./sharing/ShareRuntimeModule");
@@ -79,6 +80,7 @@ const GLOBALS_ON_REQUIRE = [
 	RuntimeGlobals.shareScopeMap,
 	RuntimeGlobals.initializeSharing,
 	RuntimeGlobals.loadScript,
+	RuntimeGlobals.setAnonymousDefaultName,
 	RuntimeGlobals.systemContext,
 	RuntimeGlobals.onChunksLoaded,
 	RuntimeGlobals.makeOptimizedDeferredNamespaceObject,
@@ -238,6 +240,15 @@ class RuntimePlugin {
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.setAnonymousDefaultName)
+				.tap(PLUGIN_NAME, (chunk) => {
+					compilation.addRuntimeModule(
+						chunk,
+						new SetAnonymousDefaultNameRuntimeModule()
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.runtimeId)
 				.tap(PLUGIN_NAME, (chunk) => {
@@ -270,7 +281,7 @@ class RuntimePlugin {
 
 						if (
 							typeof publicPath !== "string" ||
-							/\[(?:full)?hash\]/.test(publicPath)
+							FULLHASH_REGEXP.test(publicPath)
 						) {
 							module.fullHash = true;
 						}