webpack 5.107.2 → 5.108.0

package/lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -150,6 +150,13 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_module`
 			: undefined;
 
+		const cst = runtimeTemplate.renderConst();
+		const lt = runtimeTemplate.renderLet();
+		const installedChunksObject = `{\n${Template.indent(
+			Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
+				",\n"
+			)
+		)}\n}`;
 		return Template.asString([
 			withBaseURI
 				? this._generateBaseUri(chunk, rootOutputDir)
@@ -158,18 +165,14 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 			"// object to store loaded and loading chunks",
 			"// undefined = chunk not loaded, null = chunk preloaded/prefetched",
 			"// [resolve, Promise] = chunk loading, 0 = chunk loaded",
-			`var installedChunks = ${
-				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
-			}{`,
-			Template.indent(
-				Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
-					",\n"
-				)
-			),
-			"};",
+			`${cst} installedChunks = ${
+				stateExpression
+					? runtimeTemplate.assignOr(stateExpression, installedChunksObject)
+					: installedChunksObject
+			};`,
 			"",
 			withLoading || withExternalInstallChunk
-				? `var installChunk = ${runtimeTemplate.basicFunction("data", [
+				? `${cst} installChunk = ${runtimeTemplate.basicFunction("data", [
 						runtimeTemplate.destructureObject(
 							[
 								RuntimeGlobals.esmIds,
@@ -211,7 +214,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 							hasJsMatcher !== false
 								? Template.indent([
 										"// import() chunk loading for javascript",
-										`var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
+										`${lt} installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
 										'if(installedChunkData !== 0) { // 0 means "already installed".',
 										Template.indent([
 											"",
@@ -227,7 +230,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 													: `if(${hasJsMatcher("chunkId")}) {`,
 												Template.indent([
 													"// setup Promise in chunk cache",
-													`var promise = ${importFunctionName}(${
+													`${lt} promise = ${importFunctionName}(${
 														compilation.outputOptions.publicPath === "auto"
 															? JSON.stringify(rootOutputDir)
 															: RuntimeGlobals.publicPath
@@ -240,7 +243,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 															"throw e;"
 														]
 													)});`,
-													`var promise = Promise.race([promise, new Promise(${runtimeTemplate.expressionFunction(
+													`promise = Promise.race([promise, new Promise(${runtimeTemplate.expressionFunction(
 														"installedChunkData = installedChunks[chunkId] = [resolve]",
 														"resolve"
 													)})])`,
@@ -263,6 +266,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 				? `${
 						RuntimeGlobals.prefetchChunkHandlers
 					}.j = ${runtimeTemplate.basicFunction("chunkId", [
+						// prefetch is a browser-only resource hint; no-op without a DOM (e.g. node side of a universal build)
 						isNeutralPlatform
 							? "if (typeof document === 'undefined') return;"
 							: "",
@@ -275,7 +279,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 							"installedChunks[chunkId] = null;",
 							linkPrefetch.call(
 								Template.asString([
-									"var link = document.createElement('link');",
+									`${cst} link = document.createElement('link');`,
 									charset ? "link.charset = 'utf-8';" : "",
 									crossOriginLoading
 										? `link.crossOrigin = ${JSON.stringify(
@@ -303,6 +307,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 				? `${
 						RuntimeGlobals.preloadChunkHandlers
 					}.j = ${runtimeTemplate.basicFunction("chunkId", [
+						// preload is a browser-only resource hint; no-op without a DOM (e.g. node side of a universal build)
 						isNeutralPlatform
 							? "if (typeof document === 'undefined') return;"
 							: "",
@@ -315,7 +320,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 							"installedChunks[chunkId] = null;",
 							linkPreload.call(
 								Template.asString([
-									"var link = document.createElement('link');",
+									`${cst} link = document.createElement('link');`,
 									charset ? "link.charset = 'utf-8';" : "",
 									`if (${RuntimeGlobals.scriptNonce}) {`,
 									Template.indent(
@@ -370,30 +375,30 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 								"resolve, reject",
 								[
 									"// start update chunk loading",
-									`var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkUpdateScriptFilename}(chunkId);`,
-									`var onResolve = ${runtimeTemplate.basicFunction("obj", [
-										`var updatedModules = obj.${RuntimeGlobals.esmModules};`,
-										`var updatedRuntime = obj.${RuntimeGlobals.esmRuntime};`,
+									`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkUpdateScriptFilename}(chunkId);`,
+									`${cst} onResolve = ${runtimeTemplate.basicFunction("obj", [
+										`${cst} updatedModules = obj.${RuntimeGlobals.esmModules};`,
+										`${cst} updatedRuntime = obj.${RuntimeGlobals.esmRuntime};`,
 										"if(updatedRuntime) currentUpdateRuntime.push(updatedRuntime);",
 										"for(var moduleId in updatedModules) {",
 										Template.indent([
 											`if(${RuntimeGlobals.hasOwnProperty}(updatedModules, moduleId)) {`,
 											Template.indent([
 												"currentUpdate[moduleId] = updatedModules[moduleId];",
-												"if(updatedModulesList) updatedModulesList.push(moduleId);"
+												`${runtimeTemplate.optionalChaining("updatedModulesList", "push(moduleId)")};`
 											]),
 											"}"
 										]),
 										"}",
 										"resolve(obj);"
 									])};`,
-									`var onReject = ${runtimeTemplate.basicFunction("error", [
-										"var errorMsg = error.message || 'unknown reason';",
+									`${cst} onReject = ${runtimeTemplate.basicFunction("error", [
+										`${cst} errorMsg = error.message || 'unknown reason';`,
 										"error.message = 'Loading hot update chunk ' + chunkId + ' failed.\\n(' + errorMsg + ')';",
 										"error.name = 'ChunkLoadError';",
 										"reject(error);"
 									])}`,
-									`var loadScript = ${runtimeTemplate.basicFunction(
+									`${cst} loadScript = ${runtimeTemplate.basicFunction(
 										"url, onResolve, onReject",
 										[
 											`return ${importFunctionName}(/* webpackIgnore: true */ url).then(onResolve).catch(onReject)`

package/lib/hmr/HotModuleReplacement.runtime.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /*
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Tobias Koppers @sokra
@@ -6,33 +5,115 @@
 
 "use strict";
 
-var $interceptModuleExecution$ = undefined;
-var $moduleCache$ = undefined;
-var $hmrModuleData$ = undefined;
-/** @type {() => Promise}  */
-var $hmrDownloadManifest$ = undefined;
-var $hmrDownloadUpdateHandlers$ = undefined;
-var $hmrInvalidateModuleHandlers$ = undefined;
-var __webpack_require__ = undefined;
+/** @typedef {string | number} ModuleId */
+/** @typedef {Record<string, unknown>} HotData */
+/** @typedef {(data: HotData) => void} DisposeHandler */
+/** @typedef {(outdatedDependencies: ModuleId[]) => void} AcceptCallback */
+/** @typedef {(err: Error, context: { moduleId: ModuleId, dependencyId?: ModuleId, module?: HotModule }) => void} AcceptErrorHandler */
+/** @typedef {(status: string) => (Promise<void> | void)} StatusHandler */
+/** @typedef {Record<string, unknown>} ApplyOptions */
+/** @typedef {(reportError: (err: Error) => void) => Promise<ModuleId[]>} ApplyFn */
+/** @typedef {{ (id: ModuleId): unknown, e: (chunkId: ModuleId, fetchPriority?: string) => Promise<unknown>, [name: string]: unknown }} WebpackRequire */
+
+/**
+ * @typedef {object} ApplyResult
+ * @property {Error=} error fatal error that aborts the update
+ * @property {(() => void)=} dispose dispose phase of the update
+ * @property {ApplyFn=} apply apply phase of the update
+ */
+
+/** @typedef {(options: ApplyOptions) => ApplyResult} ApplyHandler */
+/** @typedef {(moduleId: ModuleId, applyHandlers: ApplyHandler[]) => void} InvalidateModuleHandler */
+/** @typedef {(chunkIds: ModuleId[], removedChunks: ModuleId[], removedModules: ModuleId[], promises: Promise<unknown>[], applyHandlers: ApplyHandler[], updatedModulesList: ModuleId[], css: ModuleId[] | undefined, forceLoadChunks: ModuleId[] | undefined) => void} DownloadUpdateHandler */
+
+/**
+ * @typedef {object} HMRManifest
+ * @property {ModuleId[]} c updated chunk ids
+ * @property {ModuleId[]} r removed chunk ids
+ * @property {ModuleId[]} m removed module ids
+ * @property {ModuleId[]=} css updated css chunk ids
+ * @property {ModuleId[]=} f chunk ids to force-load
+ */
+
+/**
+ * @typedef {object} HotModule
+ * @property {ModuleId} id module id
+ * @property {Hot} hot hot API of the module
+ * @property {ModuleId[]} parents ids of modules requiring this module
+ * @property {ModuleId[]} children ids of modules required by this module
+ */
+
+/**
+ * @typedef {object} Hot
+ * @property {Record<ModuleId, AcceptCallback>} _acceptedDependencies accept callbacks by dependency id
+ * @property {Record<ModuleId, AcceptErrorHandler | undefined>} _acceptedErrorHandlers error handlers by dependency id
+ * @property {Record<ModuleId, boolean>} _declinedDependencies declined dependency ids
+ * @property {boolean | EXPECTED_FUNCTION} _selfAccepted true or the self-accept error handler
+ * @property {boolean} _selfDeclined module declined itself
+ * @property {boolean} _selfInvalidated module invalidated itself
+ * @property {DisposeHandler[]} _disposeHandlers registered dispose handlers
+ * @property {boolean} _main module is the entry of the update
+ * @property {() => void} _requireSelf re-require the module on apply
+ * @property {boolean} active module is not disposed
+ * @property {(dep?: ModuleId | ModuleId[] | AcceptCallback, callback?: AcceptCallback, errorHandler?: AcceptErrorHandler) => void} accept accept updates
+ * @property {(dep?: ModuleId | ModuleId[]) => void} decline decline updates
+ * @property {(callback: DisposeHandler) => void} dispose add a dispose handler
+ * @property {(callback: DisposeHandler) => void} addDisposeHandler add a dispose handler
+ * @property {(callback: DisposeHandler) => void} removeDisposeHandler remove a dispose handler
+ * @property {() => void} invalidate invalidate the module
+ * @property {(applyOnUpdate?: boolean | ApplyOptions) => Promise<ModuleId[] | null>} check check for an update
+ * @property {(options?: ApplyOptions) => Promise<ModuleId[]>} apply apply a checked update
+ * @property {(l?: StatusHandler) => string | void} status get status or add a status handler
+ * @property {(l: StatusHandler) => void} addStatusHandler add a status handler
+ * @property {(l: StatusHandler) => void} removeStatusHandler remove a status handler
+ * @property {HotData} data data left from the previous dispose
+ */
+
+/** @typedef {{ module: HotModule, require: WebpackRequire, id: ModuleId }} InterceptOptions */
+
+// Globals injected by code generation; declared here only to type the template.
+/* eslint-disable no-unassigned-vars */
+/** @type {((options: InterceptOptions) => void)[]} */
+var $interceptModuleExecution$;
+/** @type {Record<ModuleId, HotModule>} */
+var $moduleCache$;
+/** @type {Record<ModuleId, HotData>} */
+var $hmrModuleData$;
+/** @type {() => Promise<HMRManifest | void>} */
+var $hmrDownloadManifest$;
+/** @type {Record<string, DownloadUpdateHandler>} */
+var $hmrDownloadUpdateHandlers$;
+/** @type {Record<string, InvalidateModuleHandler>} */
+var $hmrInvalidateModuleHandlers$;
+/** @type {(id: ModuleId) => unknown} */
+var __webpack_require__;
+/* eslint-enable no-unassigned-vars */
 
 module.exports = function () {
+	/** @type {Record<ModuleId, HotData>} */
 	var currentModuleData = {};
 	var installedModules = $moduleCache$;
 
 	// module and require creation
+	/** @type {ModuleId | undefined} */
 	var currentChildModule;
+	/** @type {ModuleId[]} */
 	var currentParents = [];
 
 	// status
+	/** @type {StatusHandler[]} */
 	var registeredStatusHandlers = [];
 	var currentStatus = "idle";
 
 	// while downloading
 	var blockingPromises = 0;
+	/** @type {(() => void)[]} */
 	var blockingPromisesWaiting = [];
 
 	// The update info
+	/** @type {ApplyHandler[] | undefined} */
 	var currentUpdateApplyHandlers;
+	/** @type {ModuleId[] | undefined} */
 	var queuedInvalidatedModules;
 
 	$hmrModuleData$ = currentModuleData;
@@ -50,9 +131,18 @@ module.exports = function () {
 	$hmrDownloadUpdateHandlers$ = {};
 	$hmrInvalidateModuleHandlers$ = {};
 
+	/**
+	 * @param {WebpackRequire} require the original require function
+	 * @param {ModuleId} moduleId module id
+	 * @returns {WebpackRequire} hot-aware require function
+	 */
 	function createRequire(require, moduleId) {
 		var me = installedModules[moduleId];
 		if (!me) return require;
+		/**
+		 * @param {ModuleId} request requested module id
+		 * @returns {unknown} module exports
+		 */
 		var fn = function (request) {
 			if (me.hot.active) {
 				if (installedModules[request]) {
@@ -78,6 +168,10 @@ module.exports = function () {
 			}
 			return require(request);
 		};
+		/**
+		 * @param {string} name property name
+		 * @returns {PropertyDescriptor} descriptor forwarding to require
+		 */
 		var createPropertyDescriptor = function (name) {
 			return {
 				configurable: true,
@@ -95,14 +189,20 @@ module.exports = function () {
 				Object.defineProperty(fn, name, createPropertyDescriptor(name));
 			}
 		}
-		fn.e = function (chunkId, fetchPriority) {
+		/** @type {WebpackRequire} */ (fn).e = function (chunkId, fetchPriority) {
 			return trackBlockingPromise(require.e(chunkId, fetchPriority));
 		};
-		return fn;
+		return /** @type {WebpackRequire} */ (fn);
 	}
 
+	/**
+	 * @param {ModuleId} moduleId module id
+	 * @param {HotModule} me the module
+	 * @returns {Hot} hot API
+	 */
 	function createModuleHotObject(moduleId, me) {
 		var _main = currentChildModule !== moduleId;
+		/** @type {Hot} */
 		var hot = {
 			// private stuff
 			_acceptedDependencies: {},
@@ -159,7 +259,7 @@ module.exports = function () {
 						Object.keys($hmrInvalidateModuleHandlers$).forEach(function (key) {
 							$hmrInvalidateModuleHandlers$[key](
 								moduleId,
-								currentUpdateApplyHandlers
+								/** @type {ApplyHandler[]} */ (currentUpdateApplyHandlers)
 							);
 						});
 						setStatus("ready");
@@ -168,7 +268,7 @@ module.exports = function () {
 						Object.keys($hmrInvalidateModuleHandlers$).forEach(function (key) {
 							$hmrInvalidateModuleHandlers$[key](
 								moduleId,
-								currentUpdateApplyHandlers
+								/** @type {ApplyHandler[]} */ (currentUpdateApplyHandlers)
 							);
 						});
 						break;
@@ -208,8 +308,13 @@ module.exports = function () {
 		return hot;
 	}
 
+	/**
+	 * @param {string} newStatus new status
+	 * @returns {Promise<void>} promise resolving when all handlers ran
+	 */
 	function setStatus(newStatus) {
 		currentStatus = newStatus;
+		/** @type {(Promise<void> | void)[]} */
 		var results = [];
 
 		for (var i = 0; i < registeredStatusHandlers.length; i++)
@@ -232,6 +337,10 @@ module.exports = function () {
 		}
 	}
 
+	/**
+	 * @param {Promise<unknown>} promise blocking promise
+	 * @returns {Promise<unknown>} the same promise
+	 */
 	function trackBlockingPromise(promise) {
 		switch (currentStatus) {
 			case "ready":
@@ -246,15 +355,25 @@ module.exports = function () {
 		}
 	}
 
+	/**
+	 * @param {() => Promise<ModuleId[]>} fn function to run once unblocked
+	 * @returns {Promise<ModuleId[]>} result of fn
+	 */
 	function waitForBlockingPromises(fn) {
 		if (blockingPromises === 0) return fn();
-		return new Promise(function (resolve) {
-			blockingPromisesWaiting.push(function () {
-				resolve(fn());
-			});
-		});
+		return /** @type {Promise<ModuleId[]>} */ (
+			new Promise(function (resolve) {
+				blockingPromisesWaiting.push(function () {
+					resolve(fn());
+				});
+			})
+		);
 	}
 
+	/**
+	 * @param {boolean | ApplyOptions=} applyOnUpdate apply the update right away
+	 * @returns {Promise<ModuleId[] | null>} updated module ids or null
+	 */
 	function hotCheck(applyOnUpdate) {
 		if (currentStatus !== "idle") {
 			throw new Error("check() is only allowed in idle status");
@@ -271,6 +390,7 @@ module.exports = function () {
 				}
 
 				return setStatus("prepare").then(function () {
+					/** @type {ModuleId[]} */
 					var updatedModules = [];
 					currentUpdateApplyHandlers = [];
 
@@ -284,12 +404,13 @@ module.exports = function () {
 								update.r,
 								update.m,
 								promises,
-								currentUpdateApplyHandlers,
+								/** @type {ApplyHandler[]} */ (currentUpdateApplyHandlers),
 								updatedModules,
-								update.css
+								update.css,
+								update.f
 							);
 							return promises;
-						}, [])
+						}, /** @type {Promise<unknown>[]} */ ([]))
 					).then(function () {
 						return waitForBlockingPromises(function () {
 							if (applyOnUpdate) {
@@ -304,6 +425,10 @@ module.exports = function () {
 			});
 	}
 
+	/**
+	 * @param {ApplyOptions=} options apply options
+	 * @returns {Promise<ModuleId[]>} updated module ids
+	 */
 	function hotApply(options) {
 		if (currentStatus !== "ready") {
 			return Promise.resolve().then(function () {
@@ -317,13 +442,19 @@ module.exports = function () {
 		return internalApply(options);
 	}
 
+	/**
+	 * @param {boolean | ApplyOptions=} options apply options
+	 * @returns {Promise<ModuleId[]>} updated module ids
+	 */
 	function internalApply(options) {
 		options = options || {};
 
 		applyInvalidatedModules();
 
-		var results = currentUpdateApplyHandlers.map(function (handler) {
-			return handler(options);
+		var results = /** @type {ApplyHandler[]} */ (
+			currentUpdateApplyHandlers
+		).map(function (handler) {
+			return handler(/** @type {ApplyOptions} */ (options));
 		});
 		currentUpdateApplyHandlers = undefined;
 
@@ -349,13 +480,22 @@ module.exports = function () {
 		// Now in "apply" phase
 		var applyPromise = setStatus("apply");
 
+		/** @type {Error | undefined} */
 		var error;
+		/**
+		 * @param {Error} err error thrown while applying
+		 * @returns {void}
+		 */
 		var reportError = function (err) {
 			if (!error) error = err;
 		};
 
+		/** @type {ModuleId[]} */
 		var outdatedModules = [];
 
+		/**
+		 * @returns {Promise<ModuleId[]>} updated module ids
+		 */
 		var onAccepted = function () {
 			return Promise.all([disposePromise, applyPromise]).then(function () {
 				// handle errors in accept handlers and self accepted module load
@@ -386,7 +526,7 @@ module.exports = function () {
 					return result.apply;
 				})
 				.map(function (result) {
-					return result.apply(reportError);
+					return /** @type {ApplyFn} */ (result.apply)(reportError);
 				})
 		)
 			.then(function (applyResults) {
@@ -401,16 +541,21 @@ module.exports = function () {
 			.then(onAccepted);
 	}
 
+	/**
+	 * @returns {boolean | undefined} true when invalidated modules were applied
+	 */
 	function applyInvalidatedModules() {
 		if (queuedInvalidatedModules) {
 			if (!currentUpdateApplyHandlers) currentUpdateApplyHandlers = [];
 			Object.keys($hmrInvalidateModuleHandlers$).forEach(function (key) {
-				queuedInvalidatedModules.forEach(function (moduleId) {
-					$hmrInvalidateModuleHandlers$[key](
-						moduleId,
-						currentUpdateApplyHandlers
-					);
-				});
+				/** @type {ModuleId[]} */ (queuedInvalidatedModules).forEach(
+					function (moduleId) {
+						$hmrInvalidateModuleHandlers$[key](
+							moduleId,
+							/** @type {ApplyHandler[]} */ (currentUpdateApplyHandlers)
+						);
+					}
+				);
 			});
 			queuedInvalidatedModules = undefined;
 			return true;

package/lib/hmr/HotModuleReplacementRuntimeModule.js

@@ -9,6 +9,8 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 
+/** @typedef {import("../Compilation")} Compilation */
+
 class HotModuleReplacementRuntimeModule extends RuntimeModule {
 	constructor() {
 		super("hot module replacement", RuntimeModule.STAGE_BASIC);
@@ -19,9 +21,14 @@ class HotModuleReplacementRuntimeModule extends RuntimeModule {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
+		const { runtimeTemplate } = /** @type {Compilation} */ (this.compilation);
 		return Template.getFunctionContent(
 			require("./HotModuleReplacement.runtime")
 		)
+			.replace(
+				"Object.prototype.hasOwnProperty.call(require, name)",
+				runtimeTemplate.objectHasOwn("require", "name")
+			)
 			.replace(
 				/\$interceptModuleExecution\$/g,
 				RuntimeGlobals.interceptModuleExecution