webpack 5.59.0 → 5.94.0

package/lib/RuntimeTemplate.js

@@ -13,12 +13,18 @@ const compileBooleanMatcher = require("./util/compileBooleanMatcher");
 const propertyAccess = require("./util/propertyAccess");
 const { forEachRuntime, subtractRuntime } = require("./util/runtime");
 
+/** @typedef {import("../declarations/WebpackOptions").Environment} Environment */
 /** @typedef {import("../declarations/WebpackOptions").OutputNormalized} OutputOptions */
 /** @typedef {import("./AsyncDependenciesBlock")} AsyncDependenciesBlock */
+/** @typedef {import("./Chunk")} Chunk */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
+/** @typedef {import("./CodeGenerationResults").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./Module").BuildMeta} BuildMeta */
+/** @typedef {import("./Module").RuntimeRequirements} RuntimeRequirements */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./util/runtime").RuntimeSpec} RuntimeSpec */
@@ -28,27 +34,49 @@ const { forEachRuntime, subtractRuntime } = require("./util/runtime");
  * @param {ChunkGraph} chunkGraph the chunk graph
  * @returns {string} error message
  */
-const noModuleIdErrorMessage = (module, chunkGraph) => {
-	return `Module ${module.identifier()} has no id assigned.
+const noModuleIdErrorMessage = (
+	module,
+	chunkGraph
+) => `Module ${module.identifier()} has no id assigned.
 This should not happen.
 It's in these chunks: ${
-		Array.from(
-			chunkGraph.getModuleChunksIterable(module),
-			c => c.name || c.id || c.debugId
-		).join(", ") || "none"
-	} (If module is in no chunk this indicates a bug in some chunk/module optimization logic)
+	Array.from(
+		chunkGraph.getModuleChunksIterable(module),
+		c => c.name || c.id || c.debugId
+	).join(", ") || "none"
+} (If module is in no chunk this indicates a bug in some chunk/module optimization logic)
 Module has these incoming connections: ${Array.from(
-		chunkGraph.moduleGraph.getIncomingConnections(module),
-		connection =>
-			`\n - ${
-				connection.originModule && connection.originModule.identifier()
-			} ${connection.dependency && connection.dependency.type} ${
-				(connection.explanations &&
-					Array.from(connection.explanations).join(", ")) ||
-				""
-			}`
-	).join("")}`;
-};
+	chunkGraph.moduleGraph.getIncomingConnections(module),
+	connection =>
+		`\n - ${
+			connection.originModule && connection.originModule.identifier()
+		} ${connection.dependency && connection.dependency.type} ${
+			(connection.explanations &&
+				Array.from(connection.explanations).join(", ")) ||
+			""
+		}`
+).join("")}`;
+
+/**
+ * @param {string | undefined} definition global object definition
+ * @returns {string | undefined} save to use global object
+ */
+function getGlobalObject(definition) {
+	if (!definition) return definition;
+	const trimmed = definition.trim();
+
+	if (
+		// identifier, we do not need real identifier regarding ECMAScript/Unicode
+		/^[_\p{L}][_0-9\p{L}]*$/iu.test(trimmed) ||
+		// iife
+		// call expression
+		// expression in parentheses
+		/^([_\p{L}][_0-9\p{L}]*)?\(.*\)$/iu.test(trimmed)
+	)
+		return trimmed;
+
+	return `Object(${trimmed})`;
+}
 
 class RuntimeTemplate {
 	/**
@@ -60,6 +88,13 @@ class RuntimeTemplate {
 		this.compilation = compilation;
 		this.outputOptions = outputOptions || {};
 		this.requestShortener = requestShortener;
+		this.globalObject =
+			/** @type {string} */
+			(getGlobalObject(outputOptions.globalObject));
+		this.contentHashReplacement = "X".repeat(
+			/** @type {NonNullable<OutputOptions["hashDigestLength"]>} */
+			(outputOptions.hashDigestLength)
+		);
 	}
 
 	isIIFE() {
@@ -71,86 +106,209 @@ class RuntimeTemplate {
 	}
 
 	supportsConst() {
-		return this.outputOptions.environment.const;
+		return /** @type {Environment} */ (this.outputOptions.environment).const;
 	}
 
 	supportsArrowFunction() {
-		return this.outputOptions.environment.arrowFunction;
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.arrowFunction;
+	}
+
+	supportsAsyncFunction() {
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.asyncFunction;
+	}
+
+	supportsOptionalChaining() {
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.optionalChaining;
 	}
 
 	supportsForOf() {
-		return this.outputOptions.environment.forOf;
+		return /** @type {Environment} */ (this.outputOptions.environment).forOf;
 	}
 
 	supportsDestructuring() {
-		return this.outputOptions.environment.destructuring;
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.destructuring;
 	}
 
 	supportsBigIntLiteral() {
-		return this.outputOptions.environment.bigIntLiteral;
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.bigIntLiteral;
 	}
 
 	supportsDynamicImport() {
-		return this.outputOptions.environment.dynamicImport;
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.dynamicImport;
 	}
 
 	supportsEcmaScriptModuleSyntax() {
-		return this.outputOptions.environment.module;
+		return /** @type {Environment} */ (this.outputOptions.environment).module;
 	}
 
 	supportTemplateLiteral() {
-		// TODO
-		return false;
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.templateLiteral;
 	}
 
+	supportNodePrefixForCoreModules() {
+		return /** @type {Environment} */ (this.outputOptions.environment)
+			.nodePrefixForCoreModules;
+	}
+
+	/**
+	 * @param {string} returnValue return value
+	 * @param {string} args arguments
+	 * @returns {string} returning function
+	 */
 	returningFunction(returnValue, args = "") {
 		return this.supportsArrowFunction()
 			? `(${args}) => (${returnValue})`
 			: `function(${args}) { return ${returnValue}; }`;
 	}
 
+	/**
+	 * @param {string} args arguments
+	 * @param {string | string[]} body body
+	 * @returns {string} basic function
+	 */
 	basicFunction(args, body) {
 		return this.supportsArrowFunction()
 			? `(${args}) => {\n${Template.indent(body)}\n}`
 			: `function(${args}) {\n${Template.indent(body)}\n}`;
 	}
 
+	/**
+	 * @param {Array<string|{expr: string}>} args args
+	 * @returns {string} result expression
+	 */
+	concatenation(...args) {
+		const len = args.length;
+
+		if (len === 2) return this._es5Concatenation(args);
+		if (len === 0) return '""';
+		if (len === 1) {
+			return typeof args[0] === "string"
+				? JSON.stringify(args[0])
+				: `"" + ${args[0].expr}`;
+		}
+		if (!this.supportTemplateLiteral()) return this._es5Concatenation(args);
+
+		// cost comparison between template literal and concatenation:
+		// both need equal surroundings: `xxx` vs "xxx"
+		// template literal has constant cost of 3 chars for each expression
+		// es5 concatenation has cost of 3 + n chars for n expressions in row
+		// when a es5 concatenation ends with an expression it reduces cost by 3
+		// when a es5 concatenation starts with an single expression it reduces cost by 3
+		// e. g. `${a}${b}${c}` (3*3 = 9) is longer than ""+a+b+c ((3+3)-3 = 3)
+		// e. g. `x${a}x${b}x${c}x` (3*3 = 9) is shorter than "x"+a+"x"+b+"x"+c+"x" (4+4+4 = 12)
+
+		let templateCost = 0;
+		let concatenationCost = 0;
+
+		let lastWasExpr = false;
+		for (const arg of args) {
+			const isExpr = typeof arg !== "string";
+			if (isExpr) {
+				templateCost += 3;
+				concatenationCost += lastWasExpr ? 1 : 4;
+			}
+			lastWasExpr = isExpr;
+		}
+		if (lastWasExpr) concatenationCost -= 3;
+		if (typeof args[0] !== "string" && typeof args[1] === "string")
+			concatenationCost -= 3;
+
+		if (concatenationCost <= templateCost) return this._es5Concatenation(args);
+
+		return `\`${args
+			.map(arg => (typeof arg === "string" ? arg : `\${${arg.expr}}`))
+			.join("")}\``;
+	}
+
+	/**
+	 * @param {Array<string|{expr: string}>} args args (len >= 2)
+	 * @returns {string} result expression
+	 * @private
+	 */
+	_es5Concatenation(args) {
+		const str = args
+			.map(arg => (typeof arg === "string" ? JSON.stringify(arg) : arg.expr))
+			.join(" + ");
+
+		// when the first two args are expression, we need to prepend "" + to force string
+		// concatenation instead of number addition.
+		return typeof args[0] !== "string" && typeof args[1] !== "string"
+			? `"" + ${str}`
+			: str;
+	}
+
+	/**
+	 * @param {string} expression expression
+	 * @param {string} args arguments
+	 * @returns {string} expression function code
+	 */
 	expressionFunction(expression, args = "") {
 		return this.supportsArrowFunction()
 			? `(${args}) => (${expression})`
 			: `function(${args}) { ${expression}; }`;
 	}
 
+	/**
+	 * @returns {string} empty function code
+	 */
 	emptyFunction() {
 		return this.supportsArrowFunction() ? "x => {}" : "function() {}";
 	}
 
+	/**
+	 * @param {string[]} items items
+	 * @param {string} value value
+	 * @returns {string} destructure array code
+	 */
 	destructureArray(items, value) {
 		return this.supportsDestructuring()
 			? `var [${items.join(", ")}] = ${value};`
 			: Template.asString(
 					items.map((item, i) => `var ${item} = ${value}[${i}];`)
-			  );
+				);
 	}
 
+	/**
+	 * @param {string[]} items items
+	 * @param {string} value value
+	 * @returns {string} destructure object code
+	 */
 	destructureObject(items, value) {
 		return this.supportsDestructuring()
 			? `var {${items.join(", ")}} = ${value};`
 			: Template.asString(
 					items.map(item => `var ${item} = ${value}${propertyAccess([item])};`)
-			  );
+				);
 	}
 
+	/**
+	 * @param {string} args arguments
+	 * @param {string} body body
+	 * @returns {string} IIFE code
+	 */
 	iife(args, body) {
 		return `(${this.basicFunction(args, body)})()`;
 	}
 
+	/**
+	 * @param {string} variable variable
+	 * @param {string} array array
+	 * @param {string | string[]} body body
+	 * @returns {string} for each code
+	 */
 	forEach(variable, array, body) {
 		return this.supportsForOf()
 			? `for(const ${variable} of ${array}) {\n${Template.indent(body)}\n}`
 			: `${array}.forEach(function(${variable}) {\n${Template.indent(
 					body
-			  )}\n});`;
+				)}\n});`;
 	}
 
 	/**
@@ -178,10 +336,9 @@ class RuntimeTemplate {
 		}
 		if (!content) return "";
 		if (this.outputOptions.pathinfo) {
-			return Template.toComment(content) + " ";
-		} else {
-			return Template.toNormalComment(content) + " ";
+			return `${Template.toComment(content)} `;
 		}
+		return `${Template.toNormalComment(content)} `;
 	}
 
 	/**
@@ -237,10 +394,10 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
+	 * @param {object} options options object
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {Module} options.module the module
-	 * @param {string} options.request the request that should be printed as comment
+	 * @param {string=} options.request the request that should be printed as comment
 	 * @param {string=} options.idExpr expression to use as id expression
 	 * @param {"expression" | "promise" | "statements"} options.type which kind of code should be returned
 	 * @returns {string} the code
@@ -251,15 +408,14 @@ class RuntimeTemplate {
 			moduleId === null
 				? JSON.stringify("Module is not available (weak dependency)")
 				: idExpr
-				? `"Module '" + ${idExpr} + "' is not available (weak dependency)"`
-				: JSON.stringify(
-						`Module '${moduleId}' is not available (weak dependency)`
-				  );
-		const comment = request ? Template.toNormalComment(request) + " " : "";
-		const errorStatements =
-			`var e = new Error(${errorMessage}); ` +
-			comment +
-			"e.code = 'MODULE_NOT_FOUND'; throw e;";
+					? `"Module '" + ${idExpr} + "' is not available (weak dependency)"`
+					: JSON.stringify(
+							`Module '${moduleId}' is not available (weak dependency)`
+						);
+		const comment = request ? `${Template.toNormalComment(request)} ` : "";
+		const errorStatements = `var e = new Error(${errorMessage}); ${
+			comment
+		}e.code = 'MODULE_NOT_FOUND'; throw e;`;
 		switch (type) {
 			case "statements":
 				return errorStatements;
@@ -274,10 +430,10 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
+	 * @param {object} options options object
 	 * @param {Module} options.module the module
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {string} options.request the request that should be printed as comment
+	 * @param {string=} options.request the request that should be printed as comment
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
 	 * @returns {string} the expression
 	 */
@@ -303,12 +459,12 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
-	 * @param {Module} options.module the module
+	 * @param {object} options options object
+	 * @param {Module | null} options.module the module
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {string} options.request the request that should be printed as comment
+	 * @param {string=} options.request the request that should be printed as comment
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} the expression
 	 */
 	moduleRaw({ module, chunkGraph, request, weak, runtimeRequirements }) {
@@ -337,7 +493,7 @@ class RuntimeTemplate {
 			);
 		}
 		runtimeRequirements.add(RuntimeGlobals.require);
-		return `__webpack_require__(${this.moduleId({
+		return `${RuntimeGlobals.require}(${this.moduleId({
 			module,
 			chunkGraph,
 			request,
@@ -346,12 +502,12 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
-	 * @param {Module} options.module the module
+	 * @param {object} options options object
+	 * @param {Module | null} options.module the module
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {string} options.request the request that should be printed as comment
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} the expression
 	 */
 	moduleExports({ module, chunkGraph, request, weak, runtimeRequirements }) {
@@ -365,13 +521,13 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
+	 * @param {object} options options object
 	 * @param {Module} options.module the module
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {string} options.request the request that should be printed as comment
 	 * @param {boolean=} options.strict if the current module is in strict esm mode
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} the expression
 	 */
 	moduleNamespace({
@@ -434,7 +590,7 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
+	 * @param {object} options options object
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {AsyncDependenciesBlock=} options.block the current dependencies block
 	 * @param {Module} options.module the module
@@ -442,7 +598,7 @@ class RuntimeTemplate {
 	 * @param {string} options.message a message for the comment
 	 * @param {boolean=} options.strict if the current module is in strict esm mode
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} the promise expression
 	 */
 	moduleNamespacePromise({
@@ -533,7 +689,7 @@ class RuntimeTemplate {
 					)})`;
 				} else {
 					runtimeRequirements.add(RuntimeGlobals.require);
-					appending = `.then(__webpack_require__.bind(__webpack_require__, ${comment}${idExpr}))`;
+					appending = `.then(${RuntimeGlobals.require}.bind(${RuntimeGlobals.require}, ${comment}${idExpr}))`;
 				}
 				break;
 			case "dynamic":
@@ -559,7 +715,7 @@ class RuntimeTemplate {
 						)})`;
 					} else {
 						runtimeRequirements.add(RuntimeGlobals.require);
-						appending = `.then(__webpack_require__.bind(__webpack_require__, ${comment}${idExpr}))`;
+						appending = `.then(${RuntimeGlobals.require}.bind(${RuntimeGlobals.require}, ${comment}${idExpr}))`;
 					}
 					appending += `.then(${this.returningFunction(
 						`${RuntimeGlobals.createFakeNamespaceObject}(m, ${fakeType})`,
@@ -574,7 +730,7 @@ class RuntimeTemplate {
 							`${header}return ${returnExpression};`
 						)})`;
 					} else {
-						appending = `.then(${RuntimeGlobals.createFakeNamespaceObject}.bind(__webpack_require__, ${comment}${idExpr}, ${fakeType}))`;
+						appending = `.then(${RuntimeGlobals.createFakeNamespaceObject}.bind(${RuntimeGlobals.require}, ${comment}${idExpr}, ${fakeType}))`;
 					}
 				}
 				break;
@@ -584,11 +740,11 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options object
+	 * @param {object} options options object
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {RuntimeSpec=} options.runtime runtime for which this code will be generated
 	 * @param {RuntimeSpec | boolean=} options.runtimeCondition only execute the statement in some runtimes
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} expression
 	 */
 	runtimeConditionExpression({
@@ -602,12 +758,16 @@ class RuntimeTemplate {
 		/** @type {Set<string>} */
 		const positiveRuntimeIds = new Set();
 		forEachRuntime(runtimeCondition, runtime =>
-			positiveRuntimeIds.add(`${chunkGraph.getRuntimeId(runtime)}`)
+			positiveRuntimeIds.add(
+				`${chunkGraph.getRuntimeId(/** @type {string} */ (runtime))}`
+			)
 		);
 		/** @type {Set<string>} */
 		const negativeRuntimeIds = new Set();
 		forEachRuntime(subtractRuntime(runtime, runtimeCondition), runtime =>
-			negativeRuntimeIds.add(`${chunkGraph.getRuntimeId(runtime)}`)
+			negativeRuntimeIds.add(
+				`${chunkGraph.getRuntimeId(/** @type {string} */ (runtime))}`
+			)
 		);
 		runtimeRequirements.add(RuntimeGlobals.runtimeId);
 		return compileBooleanMatcher.fromLists(
@@ -617,8 +777,7 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 *
-	 * @param {Object} options options object
+	 * @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 {ChunkGraph} options.chunkGraph the chunk graph
@@ -626,7 +785,7 @@ class RuntimeTemplate {
 	 * @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 {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {[string, string]} the import statement and the compat statement
 	 */
 	importStatement({
@@ -678,10 +837,11 @@ class RuntimeTemplate {
 
 		const exportsType = module.getExportsType(
 			chunkGraph.moduleGraph,
-			originModule.buildMeta.strictHarmonyModule
+			/** @type {BuildMeta} */
+			(originModule.buildMeta).strictHarmonyModule
 		);
 		runtimeRequirements.add(RuntimeGlobals.require);
-		const importContent = `/* harmony import */ ${optDeclaration}${importVar} = __webpack_require__(${moduleId});\n`;
+		const importContent = `/* harmony import */ ${optDeclaration}${importVar} = ${RuntimeGlobals.require}(${moduleId});\n`;
 
 		if (exportsType === "dynamic") {
 			runtimeRequirements.add(RuntimeGlobals.compatGetDefaultExport);
@@ -694,7 +854,7 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {ModuleGraph} options.moduleGraph the module graph
 	 * @param {Module} options.module the module
 	 * @param {string} options.request the request
@@ -702,12 +862,12 @@ class RuntimeTemplate {
 	 * @param {Module} options.originModule the origin module
 	 * @param {boolean|undefined} options.asiSafe true, if location is safe for ASI, a bracket can be emitted
 	 * @param {boolean} options.isCall true, if expression will be called
-	 * @param {boolean} options.callContext when false, call context will not be preserved
+	 * @param {boolean | null} options.callContext when false, call context will not be preserved
 	 * @param {boolean} options.defaultInterop when true and accessing the default exports, interop code will be generated
 	 * @param {string} options.importVar the identifier name of the import variable
-	 * @param {InitFragment[]} options.initFragments init fragments will be added here
+	 * @param {InitFragment<TODO>[]} options.initFragments init fragments will be added here
 	 * @param {RuntimeSpec} options.runtime runtime for which this code will be generated
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} expression
 	 */
 	exportFromImport({
@@ -735,7 +895,8 @@ class RuntimeTemplate {
 		}
 		const exportsType = module.getExportsType(
 			moduleGraph,
-			originModule.buildMeta.strictHarmonyModule
+			/** @type {BuildMeta} */
+			(originModule.buildMeta).strictHarmonyModule
 		);
 
 		if (defaultInterop) {
@@ -744,13 +905,13 @@ class RuntimeTemplate {
 					case "dynamic":
 						if (isCall) {
 							return `${importVar}_default()${propertyAccess(exportName, 1)}`;
-						} else {
-							return asiSafe
-								? `(${importVar}_default()${propertyAccess(exportName, 1)})`
-								: asiSafe === false
+						}
+						return asiSafe
+							? `(${importVar}_default()${propertyAccess(exportName, 1)})`
+							: asiSafe === false
 								? `;(${importVar}_default()${propertyAccess(exportName, 1)})`
 								: `${importVar}_default.a${propertyAccess(exportName, 1)}`;
-						}
+
 					case "default-only":
 					case "default-with-named":
 						exportName = exportName.slice(1);
@@ -758,10 +919,10 @@ class RuntimeTemplate {
 				}
 			} else if (exportName.length > 0) {
 				if (exportsType === "default-only") {
-					return (
-						"/* non-default import from non-esm module */undefined" +
-						propertyAccess(exportName, 1)
-					);
+					return `/* non-default import from non-esm module */undefined${propertyAccess(
+						exportName,
+						1
+					)}`;
 				} else if (
 					exportsType !== "namespace" &&
 					exportName[0] === "__esModule"
@@ -800,27 +961,26 @@ class RuntimeTemplate {
 			}
 			const comment = equals(used, exportName)
 				? ""
-				: Template.toNormalComment(propertyAccess(exportName)) + " ";
+				: `${Template.toNormalComment(propertyAccess(exportName))} `;
 			const access = `${importVar}${comment}${propertyAccess(used)}`;
 			if (isCall && callContext === false) {
 				return asiSafe
 					? `(0,${access})`
 					: asiSafe === false
-					? `;(0,${access})`
-					: `/*#__PURE__*/Object(${access})`;
+						? `;(0,${access})`
+						: `/*#__PURE__*/Object(${access})`;
 			}
 			return access;
-		} else {
-			return importVar;
 		}
+		return importVar;
 	}
 
 	/**
-	 * @param {Object} options options
-	 * @param {AsyncDependenciesBlock} options.block the async block
+	 * @param {object} options options
+	 * @param {AsyncDependenciesBlock | undefined} options.block the async block
 	 * @param {string} options.message the message
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} expression
 	 */
 	blockPromise({ block, message, chunkGraph, runtimeRequirements }) {
@@ -847,24 +1007,45 @@ class RuntimeTemplate {
 		if (chunks.length === 1) {
 			const chunkId = JSON.stringify(chunks[0].id);
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
-			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId})`;
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
+			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId}${
+				fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+			})`;
 		} else if (chunks.length > 0) {
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
+			/**
+			 * @param {Chunk} chunk chunk
+			 * @returns {string} require chunk id code
+			 */
 			const requireChunkId = chunk =>
-				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)})`;
+				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)}${
+					fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+				})`;
 			return `Promise.all(${comment.trim()}[${chunks
 				.map(requireChunkId)
 				.join(", ")}])`;
-		} else {
-			return `Promise.resolve(${comment.trim()})`;
 		}
+		return `Promise.resolve(${comment.trim()})`;
 	}
 
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {AsyncDependenciesBlock} options.block the async block
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @param {string=} options.request request string used originally
 	 * @returns {string} expression
 	 */
@@ -893,10 +1074,10 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {Dependency} options.dependency the dependency
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @param {string=} options.request request string used originally
 	 * @returns {string} expression
 	 */
@@ -914,9 +1095,9 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * @param {Object} options options
+	 * @param {object} options options
 	 * @param {string} options.exportsArgument the name of the exports object
-	 * @param {Set<string>} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @returns {string} statement
 	 */
 	defineEsModuleFlagStatement({ exportsArgument, runtimeRequirements }) {
@@ -924,6 +1105,27 @@ class RuntimeTemplate {
 		runtimeRequirements.add(RuntimeGlobals.exports);
 		return `${RuntimeGlobals.makeNamespaceObject}(${exportsArgument});\n`;
 	}
+
+	/**
+	 * @param {object} options options object
+	 * @param {Module} options.module the module
+	 * @param {RuntimeSpec=} options.runtime runtime
+	 * @param {CodeGenerationResults} options.codeGenerationResults the code generation results
+	 * @returns {string} the url of the asset
+	 */
+	assetUrl({ runtime, module, codeGenerationResults }) {
+		if (!module) {
+			return "data:,";
+		}
+		const codeGen = codeGenerationResults.get(module, runtime);
+		const data = /** @type {NonNullable<CodeGenerationResult["data"]>} */ (
+			codeGen.data
+		);
+		const url = data.get("url");
+		if (url) return url.toString();
+		const assetPath = data.get("assetPathForCss");
+		return assetPath;
+	}
 }
 
 module.exports = RuntimeTemplate;