webpack 5.99.9 → 5.100.1

package/lib/RuntimeTemplate.js

@@ -8,6 +8,10 @@
 const InitFragment = require("./InitFragment");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
+const {
+	getMakeDeferredNamespaceModeFromExportsType,
+	getOptimizedDeferredModule
+} = require("./runtime/MakeDeferredNamespaceObjectRuntime");
 const { equals } = require("./util/ArrayHelpers");
 const compileBooleanMatcher = require("./util/compileBooleanMatcher");
 const propertyAccess = require("./util/propertyAccess");
@@ -51,9 +55,7 @@ Module has these incoming connections: ${Array.from(
 		`\n - ${
 			connection.originModule && connection.originModule.identifier()
 		} ${connection.dependency && connection.dependency.type} ${
-			(connection.explanations &&
-				Array.from(connection.explanations).join(", ")) ||
-			""
+			(connection.explanations && [...connection.explanations].join(", ")) || ""
 		}`
 ).join("")}`;
 
@@ -72,8 +74,9 @@ function getGlobalObject(definition) {
 		// call expression
 		// expression in parentheses
 		/^([_\p{L}][_0-9\p{L}]*)?\(.*\)$/iu.test(trimmed)
-	)
+	) {
 		return trimmed;
+	}
 
 	return `Object(${trimmed})`;
 }
@@ -216,8 +219,9 @@ class RuntimeTemplate {
 			lastWasExpr = isExpr;
 		}
 		if (lastWasExpr) concatenationCost -= 3;
-		if (typeof args[0] !== "string" && typeof args[1] === "string")
+		if (typeof args[0] !== "string" && typeof args[1] === "string") {
 			concatenationCost -= 3;
+		}
 
 		if (concatenationCost <= templateCost) return this._es5Concatenation(args);
 
@@ -770,8 +774,8 @@ class RuntimeTemplate {
 		);
 		runtimeRequirements.add(RuntimeGlobals.runtimeId);
 		return compileBooleanMatcher.fromLists(
-			Array.from(positiveRuntimeIds),
-			Array.from(negativeRuntimeIds)
+			[...positiveRuntimeIds],
+			[...negativeRuntimeIds]
 		)(RuntimeGlobals.runtimeId);
 	}
 
@@ -779,22 +783,26 @@ class RuntimeTemplate {
 	 * @param {object} options options object
 	 * @param {boolean=} options.update whether a new variable should be created or the existing one updated
 	 * @param {Module} options.module the module
+	 * @param {ModuleGraph} options.moduleGraph the module graph
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {string} options.request the request that should be printed as comment
 	 * @param {string} options.importVar name of the import variable
 	 * @param {Module} options.originModule module in which the statement is emitted
 	 * @param {boolean=} options.weak true, if this is a weak dependency
 	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {boolean=} options.defer if set, the module will be deferred
 	 * @returns {[string, string]} the import statement and the compat statement
 	 */
 	importStatement({
 		update,
 		module,
+		moduleGraph,
 		chunkGraph,
 		request,
 		importVar,
 		originModule,
 		weak,
+		defer,
 		runtimeRequirements
 	}) {
 		if (!module) {
@@ -805,6 +813,29 @@ class RuntimeTemplate {
 				""
 			];
 		}
+
+		/** @type {Set<Module>} */
+		const innerAsyncDependencies = new Set();
+		defer = defer && (module.buildMeta ? !module.buildMeta.async : true);
+
+		if (this.compilation.options.experiments.deferImport && defer) {
+			const seen = new Set();
+			(function gatherInnerAsyncDependencies(mod) {
+				if (!moduleGraph.isAsync(mod) || seen.has(mod)) return;
+				seen.add(mod);
+				if (mod.buildMeta && mod.buildMeta.async) {
+					innerAsyncDependencies.add(mod);
+				} else {
+					for (const dep of mod.dependencies) {
+						const module = moduleGraph.getModule(dep);
+						if (module) {
+							gatherInnerAsyncDependencies(module);
+						}
+					}
+				}
+			})(module);
+		}
+
 		if (chunkGraph.getModuleId(module) === null) {
 			if (weak) {
 				// only weak referenced modules don't get an id
@@ -840,9 +871,19 @@ class RuntimeTemplate {
 			(originModule.buildMeta).strictHarmonyModule
 		);
 		runtimeRequirements.add(RuntimeGlobals.require);
-		const importContent = `/* harmony import */ ${optDeclaration}${importVar} = ${RuntimeGlobals.require}(${moduleId});\n`;
+		let importContent;
+		if (defer) {
+			importContent = `/* deferred harmony import */ ${optDeclaration}${importVar} = ${getOptimizedDeferredModule(
+				this,
+				exportsType,
+				moduleId,
+				Array.from(innerAsyncDependencies, mod => chunkGraph.getModuleId(mod))
+			)};\n`;
+		} else {
+			importContent = `/* harmony import */ ${optDeclaration}${importVar} = ${RuntimeGlobals.require}(${moduleId});\n`;
+		}
 
-		if (exportsType === "dynamic") {
+		if (exportsType === "dynamic" && !defer) {
 			runtimeRequirements.add(RuntimeGlobals.compatGetDefaultExport);
 			return [
 				importContent,
@@ -856,6 +897,7 @@ class RuntimeTemplate {
 	 * @template GenerateContext
 	 * @param {object} options options
 	 * @param {ModuleGraph} options.moduleGraph the module graph
+	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {Module} options.module the module
 	 * @param {string} options.request the request
 	 * @param {string | string[]} options.exportName the export name
@@ -868,10 +910,12 @@ class RuntimeTemplate {
 	 * @param {InitFragment<GenerateContext>[]} options.initFragments init fragments will be added here
 	 * @param {RuntimeSpec} options.runtime runtime for which this code will be generated
 	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {boolean=} options.defer if true, the module will be deferred.
 	 * @returns {string} expression
 	 */
 	exportFromImport({
 		moduleGraph,
+		chunkGraph,
 		module,
 		request,
 		exportName,
@@ -883,13 +927,16 @@ class RuntimeTemplate {
 		importVar,
 		initFragments,
 		runtime,
-		runtimeRequirements
+		runtimeRequirements,
+		defer
 	}) {
 		if (!module) {
 			return this.missingModule({
 				request
 			});
 		}
+
+		defer = defer && (module.buildMeta ? !module.buildMeta.async : true);
 		if (!Array.isArray(exportName)) {
 			exportName = exportName ? [exportName] : [];
 		}
@@ -900,7 +947,21 @@ class RuntimeTemplate {
 		);
 
 		if (defaultInterop) {
+			// when the defaultInterop is used (when a ESM imports a CJS module),
 			if (exportName.length > 0 && exportName[0] === "default") {
+				if (defer && exportsType !== "namespace") {
+					const access = `${importVar}.a${propertyAccess(exportName, 1)}`;
+					if (isCall || asiSafe === undefined) {
+						return access;
+					}
+					return asiSafe ? `(${access})` : `;(${access})`;
+				}
+				// accessing the .default property is same thing as `require()` the module.
+
+				// For example:
+				// import mod from "cjs";    mod.default.x;
+				// is translated to
+				// var mod = require("cjs"); mod.x;
 				switch (exportsType) {
 					case "dynamic":
 						if (isCall) {
@@ -918,7 +979,11 @@ class RuntimeTemplate {
 						break;
 				}
 			} else if (exportName.length > 0) {
+				// the property used is not .default.
+				// For example:
+				// import * as ns from "cjs"; cjs.prop;
 				if (exportsType === "default-only") {
+					// in the strictest case, it is a runtime error (e.g. NodeJS behavior of CJS-ESM interop).
 					return `/* non-default import from non-esm module */undefined${propertyAccess(
 						exportName,
 						1
@@ -929,10 +994,17 @@ class RuntimeTemplate {
 				) {
 					return "/* __esModule */true";
 				}
+			} else if (defer) {
+				// now exportName.length is 0
+				// fall through to the end of this function, create the namespace there.
 			} else if (
 				exportsType === "default-only" ||
 				exportsType === "default-with-named"
 			) {
+				// now exportName.length is 0, which means the namespace object is used in an unknown way
+				// for example:
+				// import * as ns from "cjs"; console.log(ns);
+				// we will need to createFakeNamespaceObject that simulates ES Module namespace object
 				runtimeRequirements.add(RuntimeGlobals.createFakeNamespaceObject);
 				initFragments.push(
 					new InitFragment(
@@ -952,6 +1024,8 @@ class RuntimeTemplate {
 
 		if (exportName.length > 0) {
 			const exportsInfo = moduleGraph.getExportsInfo(module);
+			// in some case the exported item is renamed (get this by getUsedName). for example,
+			// x.default might be emitted as x.Z (default is renamed to Z)
 			const used = exportsInfo.getUsedName(exportName, runtime);
 			if (!used) {
 				const comment = Template.toNormalComment(
@@ -962,7 +1036,9 @@ class RuntimeTemplate {
 			const comment = equals(used, exportName)
 				? ""
 				: `${Template.toNormalComment(propertyAccess(exportName))} `;
-			const access = `${importVar}${comment}${propertyAccess(used)}`;
+			const access = `${importVar}${
+				defer ? ".a" : ""
+			}${comment}${propertyAccess(used)}`;
 			if (isCall && callContext === false) {
 				return asiSafe
 					? `(0,${access})`
@@ -972,6 +1048,30 @@ class RuntimeTemplate {
 			}
 			return access;
 		}
+		if (defer) {
+			initFragments.push(
+				new InitFragment(
+					`var ${importVar}_deferred_namespace_cache;\n`,
+					InitFragment.STAGE_CONSTANTS,
+					-1,
+					`${importVar}_deferred_namespace_cache`
+				)
+			);
+
+			runtimeRequirements.add(RuntimeGlobals.makeDeferredNamespaceObject);
+			const id = chunkGraph.getModuleId(module);
+			const type = getMakeDeferredNamespaceModeFromExportsType(exportsType);
+			const init = `${
+				RuntimeGlobals.makeDeferredNamespaceObject
+			}(${JSON.stringify(id)}, ${type})`;
+
+			return `/*#__PURE__*/ ${
+				asiSafe ? "" : asiSafe === false ? ";" : "Object"
+			}(${importVar}_deferred_namespace_cache || (${importVar}_deferred_namespace_cache = ${init}))`;
+		}
+		// if we hit here, the importVar is either
+		// - already a ES module namespace object
+		// - or imported by a way that does not need interop.
 		return importVar;
 	}
 

package/lib/SourceMapDevToolModuleOptionsPlugin.js

@@ -10,6 +10,8 @@ const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 /** @typedef {import("../declarations/plugins/SourceMapDevToolPlugin").SourceMapDevToolPluginOptions} SourceMapDevToolPluginOptions */
 /** @typedef {import("./Compilation")} Compilation */
 
+const PLUGIN_NAME = "SourceMapDevToolModuleOptionsPlugin";
+
 class SourceMapDevToolModuleOptionsPlugin {
 	/**
 	 * @param {SourceMapDevToolPluginOptions} options options
@@ -25,34 +27,22 @@ class SourceMapDevToolModuleOptionsPlugin {
 	apply(compilation) {
 		const options = this.options;
 		if (options.module !== false) {
-			compilation.hooks.buildModule.tap(
-				"SourceMapDevToolModuleOptionsPlugin",
-				module => {
-					module.useSourceMap = true;
-				}
-			);
-			compilation.hooks.runtimeModule.tap(
-				"SourceMapDevToolModuleOptionsPlugin",
-				module => {
-					module.useSourceMap = true;
-				}
-			);
+			compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+				module.useSourceMap = true;
+			});
+			compilation.hooks.runtimeModule.tap(PLUGIN_NAME, module => {
+				module.useSourceMap = true;
+			});
 		} else {
-			compilation.hooks.buildModule.tap(
-				"SourceMapDevToolModuleOptionsPlugin",
-				module => {
-					module.useSimpleSourceMap = true;
-				}
-			);
-			compilation.hooks.runtimeModule.tap(
-				"SourceMapDevToolModuleOptionsPlugin",
-				module => {
-					module.useSimpleSourceMap = true;
-				}
-			);
+			compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+				module.useSimpleSourceMap = true;
+			});
+			compilation.hooks.runtimeModule.tap(PLUGIN_NAME, module => {
+				module.useSimpleSourceMap = true;
+			});
 		}
 		JavascriptModulesPlugin.getCompilationHooks(compilation).useSourceMap.tap(
-			"SourceMapDevToolModuleOptionsPlugin",
+			PLUGIN_NAME,
 			() => true
 		);
 	}

package/lib/SourceMapDevToolPlugin.js

@@ -13,7 +13,7 @@ const ProgressPlugin = require("./ProgressPlugin");
 const SourceMapDevToolModuleOptionsPlugin = require("./SourceMapDevToolModuleOptionsPlugin");
 const createSchemaValidation = require("./util/create-schema-validation");
 const createHash = require("./util/createHash");
-const { relative, dirname } = require("./util/fs");
+const { dirname, relative } = require("./util/fs");
 const generateDebugId = require("./util/generateDebugId");
 const { makePathsAbsolute } = require("./util/identifier");
 
@@ -28,12 +28,12 @@ const { makePathsAbsolute } = require("./util/identifier");
 /** @typedef {import("./Compilation").AssetInfo} AssetInfo */
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./Module")} Module */
-/** @typedef {import("./NormalModule").SourceMap} SourceMap */
+/** @typedef {import("./NormalModule").RawSourceMap} RawSourceMap */
 /** @typedef {import("./TemplatedPathPlugin").TemplatePath} TemplatePath */
 /** @typedef {import("./util/fs").OutputFileSystem} OutputFileSystem */
 
 const validate = createSchemaValidation(
-	require("../schemas/plugins/SourceMapDevToolPlugin.check.js"),
+	require("../schemas/plugins/SourceMapDevToolPlugin.check"),
 	() => require("../schemas/plugins/SourceMapDevToolPlugin.json"),
 	{
 		name: "SourceMap DevTool Plugin",
@@ -47,7 +47,7 @@ const validate = createSchemaValidation(
  * @property {(string | Module)[]} modules
  * @property {string} source
  * @property {string} file
- * @property {SourceMap} sourceMap
+ * @property {RawSourceMap} sourceMap
  * @property {ItemCacheFacade} cacheItem cache item
  */
 
@@ -95,17 +95,17 @@ const getTaskForFile = (
 	cacheItem
 ) => {
 	let source;
-	/** @type {SourceMap} */
+	/** @type {RawSourceMap} */
 	let sourceMap;
 	/**
 	 * Check if asset can build source map
 	 */
 	if (asset.sourceAndMap) {
 		const sourceAndMap = asset.sourceAndMap(options);
-		sourceMap = /** @type {SourceMap} */ (sourceAndMap.map);
+		sourceMap = /** @type {RawSourceMap} */ (sourceAndMap.map);
 		source = sourceAndMap.source;
 	} else {
-		sourceMap = /** @type {SourceMap} */ (asset.map(options));
+		sourceMap = /** @type {RawSourceMap} */ (asset.map(options));
 		source = asset.source();
 	}
 	if (!sourceMap || typeof source !== "string") return;
@@ -270,8 +270,9 @@ class SourceMapDevToolPlugin {
 										/**
 										 * Add file to chunk, if not presented there
 										 */
-										if (cachedFile !== file && chunk !== undefined)
+										if (cachedFile !== file && chunk !== undefined) {
 											chunk.auxiliaryFiles.add(cachedFile);
+										}
 									}
 
 									reportProgress(
@@ -362,13 +363,13 @@ class SourceMapDevToolPlugin {
 							 * all modules in defined order (longest identifier first)
 							 * @type {Array<string | Module>}
 							 */
-							const allModules = Array.from(
-								moduleToSourceNameMapping.keys()
-							).sort((a, b) => {
-								const ai = typeof a === "string" ? a : a.identifier();
-								const bi = typeof b === "string" ? b : b.identifier();
-								return ai.length - bi.length;
-							});
+							const allModules = [...moduleToSourceNameMapping.keys()].sort(
+								(a, b) => {
+									const ai = typeof a === "string" ? a : a.identifier();
+									const bi = typeof b === "string" ? b : b.identifier();
+									return ai.length - bi.length;
+								}
+							);
 
 							// find modules with conflicting source names
 							for (let idx = 0; idx < allModules.length; idx++) {
@@ -548,8 +549,9 @@ class SourceMapDevToolPlugin {
 											sourceMapAsset,
 											sourceMapAssetInfo
 										);
-										if (chunk !== undefined)
+										if (chunk !== undefined) {
 											chunk.auxiliaryFiles.add(sourceMapFile);
+										}
 									} else {
 										if (currentSourceMappingURLComment === false) {
 											throw new Error(
@@ -573,7 +575,7 @@ class SourceMapDevToolPlugin {
 													() =>
 														`data:application/json;charset=utf-8;base64,${Buffer.from(
 															sourceMapString,
-															"utf-8"
+															"utf8"
 														).toString("base64")}`
 												)
 										);

package/lib/Template.js

@@ -410,7 +410,7 @@ class Template {
 }
 
 module.exports = Template;
-module.exports.NUMBER_OF_IDENTIFIER_START_CHARS =
-	NUMBER_OF_IDENTIFIER_START_CHARS;
 module.exports.NUMBER_OF_IDENTIFIER_CONTINUATION_CHARS =
 	NUMBER_OF_IDENTIFIER_CONTINUATION_CHARS;
+module.exports.NUMBER_OF_IDENTIFIER_START_CHARS =
+	NUMBER_OF_IDENTIFIER_START_CHARS;

package/lib/TemplatedPathPlugin.js

@@ -5,9 +5,9 @@
 
 "use strict";
 
-const mime = require("mime-types");
 const { basename, extname } = require("path");
 const util = require("util");
+const mime = require("mime-types");
 const Chunk = require("./Chunk");
 const Module = require("./Module");
 const { parseResource } = require("./util/identifier");

package/lib/WarnDeprecatedOptionPlugin.js

@@ -9,6 +9,8 @@ const WebpackError = require("./WebpackError");
 
 /** @typedef {import("./Compiler")} Compiler */
 
+const PLUGIN_NAME = "WarnDeprecatedOptionPlugin";
+
 class WarnDeprecatedOptionPlugin {
 	/**
 	 * Create an instance of the plugin
@@ -28,14 +30,11 @@ class WarnDeprecatedOptionPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		compiler.hooks.thisCompilation.tap(
-			"WarnDeprecatedOptionPlugin",
-			compilation => {
-				compilation.warnings.push(
-					new DeprecatedOptionWarning(this.option, this.value, this.suggestion)
-				);
-			}
-		);
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+			compilation.warnings.push(
+				new DeprecatedOptionWarning(this.option, this.value, this.suggestion)
+			);
+		});
 	}
 }
 

package/lib/WatchIgnorePlugin.js

@@ -15,8 +15,9 @@ const createSchemaValidation = require("./util/create-schema-validation");
 /** @typedef {import("./util/fs").WatchFileSystem} WatchFileSystem */
 /** @typedef {import("./util/fs").WatchMethod} WatchMethod */
 /** @typedef {import("./util/fs").Watcher} Watcher */
+
 const validate = createSchemaValidation(
-	require("../schemas/plugins/WatchIgnorePlugin.check.js"),
+	require("../schemas/plugins/WatchIgnorePlugin.check"),
 	() => require("../schemas/plugins/WatchIgnorePlugin.json"),
 	{
 		name: "Watch Ignore Plugin",
@@ -38,8 +39,8 @@ class IgnoringWatchFileSystem {
 
 	/** @type {WatchMethod} */
 	watch(files, dirs, missing, startTime, options, callback, callbackUndelayed) {
-		files = Array.from(files);
-		dirs = Array.from(dirs);
+		files = [...files];
+		dirs = [...dirs];
 		/**
 		 * @param {string} path path to check
 		 * @returns {boolean} true, if path is ignored

package/lib/WebpackIsIncludedPlugin.js

@@ -55,8 +55,9 @@ class WebpackIsIncludedPlugin {
 								expr.type !== "CallExpression" ||
 								expr.arguments.length !== 1 ||
 								expr.arguments[0].type === "SpreadElement"
-							)
+							) {
 								return;
+							}
 
 							const request = parser.evaluateExpression(expr.arguments[0]);