webpack/lib/HotModuleReplacementPlugin.js

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/

"use strict";

const { SyncBailHook } = require("tapable");
const { RawSource } = require("webpack-sources");
const ChunkGraph = require("./ChunkGraph");
const Compilation = require("./Compilation");
const HotUpdateChunk = require("./HotUpdateChunk");
const NormalModule = require("./NormalModule");
const RuntimeGlobals = require("./RuntimeGlobals");
const ConstDependency = require("./dependencies/ConstDependency");
const ImportMetaHotAcceptDependency = require("./dependencies/ImportMetaHotAcceptDependency");
const ImportMetaHotDeclineDependency = require("./dependencies/ImportMetaHotDeclineDependency");
const ModuleHotAcceptDependency = require("./dependencies/ModuleHotAcceptDependency");
const ModuleHotDeclineDependency = require("./dependencies/ModuleHotDeclineDependency");
const HotModuleReplacementRuntimeModule = require("./hmr/HotModuleReplacementRuntimeModule");
const JavascriptParser = require("./javascript/JavascriptParser");
const {
	evaluateToIdentifier,
	evaluateToString,
	toConstantDependency
} = require("./javascript/JavascriptParserHelpers");
const { find } = require("./util/SetHelpers");
const { compareModulesById } = require("./util/comparators");

/** @typedef {import("./Chunk")} Chunk */
/** @typedef {import("./Compiler")} Compiler */
/** @typedef {import("./Module")} Module */

/**
 * @typedef {Object} HMRJavascriptParserHooks
 * @property {SyncBailHook<[TODO, string[]], void>} hotAcceptCallback
 * @property {SyncBailHook<[TODO, string[]], void>} hotAcceptWithoutCallback
 */

/** @type {WeakMap<JavascriptParser, HMRJavascriptParserHooks>} */
const parserHooksMap = new WeakMap();

class HotModuleReplacementPlugin {
	/**
	 * @param {JavascriptParser} parser the parser
	 * @returns {HMRJavascriptParserHooks} the attached hooks
	 */
	static getParserHooks(parser) {
		if (!(parser instanceof JavascriptParser)) {
			throw new TypeError(
				"The 'parser' argument must be an instance of JavascriptParser"
			);
		}
		let hooks = parserHooksMap.get(parser);
		if (hooks === undefined) {
			hooks = {
				hotAcceptCallback: new SyncBailHook(["expression", "requests"]),
				hotAcceptWithoutCallback: new SyncBailHook(["expression", "requests"])
			};
			parserHooksMap.set(parser, hooks);
		}
		return hooks;
	}

	constructor(options) {
		this.options = options || {};
	}

	/**
	 * Apply the plugin
	 * @param {Compiler} compiler the compiler instance
	 * @returns {void}
	 */
	apply(compiler) {
		const runtimeRequirements = [RuntimeGlobals.module];

		const createAcceptHandler = (parser, ParamDependency) => {
			const {
				hotAcceptCallback,
				hotAcceptWithoutCallback
			} = HotModuleReplacementPlugin.getParserHooks(parser);

			return expr => {
				const module = parser.state.module;
				const dep = new ConstDependency(
					`${module.moduleArgument}.hot.accept`,
					expr.callee.range,
					runtimeRequirements
				);
				dep.loc = expr.loc;
				module.addPresentationalDependency(dep);
				if (expr.arguments.length >= 1) {
					const arg = parser.evaluateExpression(expr.arguments[0]);
					let params = [];
					let requests = [];
					if (arg.isString()) {
						params = [arg];
					} else if (arg.isArray()) {
						params = arg.items.filter(param => param.isString());
					}
					if (params.length > 0) {
						params.forEach((param, idx) => {
							const request = param.string;
							const dep = new ParamDependency(request, param.range);
							dep.optional = true;
							dep.loc = Object.create(expr.loc);
							dep.loc.index = idx;
							module.addDependency(dep);
							requests.push(request);
						});
						if (expr.arguments.length > 1) {
							hotAcceptCallback.call(expr.arguments[1], requests);
							parser.walkExpression(expr.arguments[1]); // other args are ignored
							return true;
						} else {
							hotAcceptWithoutCallback.call(expr, requests);
							return true;
						}
					}
				}
				parser.walkExpressions(expr.arguments);
				return true;
			};
		};

		const createDeclineHandler = (parser, ParamDependency) => expr => {
			const module = parser.state.module;
			const dep = new ConstDependency(
				`${module.moduleArgument}.hot.decline`,
				expr.callee.range,
				runtimeRequirements
			);
			dep.loc = expr.loc;
			module.addPresentationalDependency(dep);
			if (expr.arguments.length === 1) {
				const arg = parser.evaluateExpression(expr.arguments[0]);
				let params = [];
				if (arg.isString()) {
					params = [arg];
				} else if (arg.isArray()) {
					params = arg.items.filter(param => param.isString());
				}
				params.forEach((param, idx) => {
					const dep = new ParamDependency(param.string, param.range);
					dep.optional = true;
					dep.loc = Object.create(expr.loc);
					dep.loc.index = idx;
					module.addDependency(dep);
				});
			}
			return true;
		};

		const createHMRExpressionHandler = parser => expr => {
			const module = parser.state.module;
			const dep = new ConstDependency(
				`${module.moduleArgument}.hot`,
				expr.range,
				runtimeRequirements
			);
			dep.loc = expr.loc;
			module.addPresentationalDependency(dep);
			return true;
		};

		const applyModuleHot = parser => {
			parser.hooks.evaluateIdentifier.for("module.hot").tap(
				{
					name: "HotModuleReplacementPlugin",
					before: "NodeStuffPlugin"
				},
				expr => {
					return evaluateToIdentifier(
						"module.hot",
						"module",
						() => ["hot"],
						true
					)(expr);
				}
			);
			parser.hooks.call
				.for("module.hot.accept")
				.tap(
					"HotModuleReplacementPlugin",
					createAcceptHandler(parser, ModuleHotAcceptDependency)
				);
			parser.hooks.call
				.for("module.hot.decline")
				.tap(
					"HotModuleReplacementPlugin",
					createDeclineHandler(parser, ModuleHotDeclineDependency)
				);
			parser.hooks.expression
				.for("module.hot")
				.tap("HotModuleReplacementPlugin", createHMRExpressionHandler(parser));
		};

		const applyImportMetaHot = parser => {
			parser.hooks.evaluateIdentifier
				.for("import.meta.webpackHot")
				.tap("HotModuleReplacementPlugin", expr => {
					return evaluateToIdentifier(
						"import.meta.webpackHot",
						"import.meta",
						() => ["webpackHot"],
						true
					)(expr);
				});
			parser.hooks.call
				.for("import.meta.webpackHot.accept")
				.tap(
					"HotModuleReplacementPlugin",
					createAcceptHandler(parser, ImportMetaHotAcceptDependency)
				);
			parser.hooks.call
				.for("import.meta.webpackHot.decline")
				.tap(
					"HotModuleReplacementPlugin",
					createDeclineHandler(parser, ImportMetaHotDeclineDependency)
				);
			parser.hooks.expression
				.for("import.meta.webpackHot")
				.tap("HotModuleReplacementPlugin", createHMRExpressionHandler(parser));
		};

		const applyWebpackHash = parser => {
			parser.hooks.expression
				.for("__webpack_hash__")
				.tap(
					"HotModuleReplacementPlugin",
					toConstantDependency(parser, `${RuntimeGlobals.getFullHash}()`, [
						RuntimeGlobals.getFullHash
					])
				);
			parser.hooks.evaluateTypeof
				.for("__webpack_hash__")
				.tap("HotModuleReplacementPlugin", evaluateToString("string"));
		};

		compiler.hooks.compilation.tap(
			"HotModuleReplacementPlugin",
			(compilation, { normalModuleFactory }) => {
				// This applies the HMR plugin only to the targeted compiler
				// It should not affect child compilations
				if (compilation.compiler !== compiler) return;

				//#region module.hot.* API
				compilation.dependencyFactories.set(
					ModuleHotAcceptDependency,
					normalModuleFactory
				);
				compilation.dependencyTemplates.set(
					ModuleHotAcceptDependency,
					new ModuleHotAcceptDependency.Template()
				);
				compilation.dependencyFactories.set(
					ModuleHotDeclineDependency,
					normalModuleFactory
				);
				compilation.dependencyTemplates.set(
					ModuleHotDeclineDependency,
					new ModuleHotDeclineDependency.Template()
				);
				//#endregion

				//#region import.meta.webpackHot.* API
				compilation.dependencyFactories.set(
					ImportMetaHotAcceptDependency,
					normalModuleFactory
				);
				compilation.dependencyTemplates.set(
					ImportMetaHotAcceptDependency,
					new ImportMetaHotAcceptDependency.Template()
				);
				compilation.dependencyFactories.set(
					ImportMetaHotDeclineDependency,
					normalModuleFactory
				);
				compilation.dependencyTemplates.set(
					ImportMetaHotDeclineDependency,
					new ImportMetaHotDeclineDependency.Template()
				);
				//#endregion

				let hotIndex = 0;
				const fullHashModuleHashes = {};
				const moduleHashes = {};

				compilation.hooks.record.tap(
					"HotModuleReplacementPlugin",
					(compilation, records) => {
						if (records.hash === compilation.hash) return;
						const chunkGraph = compilation.chunkGraph;
						records.hash = compilation.hash;
						records.hotIndex = hotIndex;
						records.fullHashModuleHashes = fullHashModuleHashes;
						records.moduleHashes = moduleHashes;
						records.chunkHashs = {};
						for (const chunk of compilation.chunks) {
							records.chunkHashs[chunk.id] = chunk.hash;
						}
						records.chunkModuleIds = {};
						for (const chunk of compilation.chunks) {
							records.chunkModuleIds[
								chunk.id
							] = Array.from(
								chunkGraph.getOrderedChunkModulesIterable(
									chunk,
									compareModulesById(chunkGraph)
								),
								m => chunkGraph.getModuleId(m)
							);
						}
					}
				);
				/** @type {Set<Module>} */
				const updatedModules = new Set();
				/** @type {Set<Module>} */
				const lazyHashedModules = new Set();
				compilation.hooks.fullHash.tap("HotModuleReplacementPlugin", hash => {
					const chunkGraph = compilation.chunkGraph;
					const records = compilation.records;
					for (const chunk of compilation.chunks) {
						const modules = chunkGraph.getChunkFullHashModulesIterable(chunk);
						if (modules !== undefined) {
							for (const module of modules) {
								lazyHashedModules.add(module);
							}
						}
					}
					if (records.moduleHashes && records.fullHashModuleHashes) {
						for (const module of compilation.modules) {
							const identifier = module.identifier();
							const hash = chunkGraph.getModuleHash(module);
							if (lazyHashedModules.has(module)) {
								if (records.fullHashModuleHashes[identifier] !== hash) {
									updatedModules.add(module);
								}
								fullHashModuleHashes[identifier] = hash;
							} else {
								if (records.moduleHashes[identifier] !== hash) {
									updatedModules.add(module);
								}
								moduleHashes[identifier] = hash;
							}
						}
					} else {
						for (const module of compilation.modules) {
							const identifier = module.identifier();
							const hash = chunkGraph.getModuleHash(module);
							if (lazyHashedModules.has(module)) {
								fullHashModuleHashes[identifier] = hash;
							} else {
								moduleHashes[identifier] = hash;
							}
						}
					}
					hotIndex = records.hotIndex || 0;
					if (updatedModules.size > 0) hotIndex++;

					hash.update(`${hotIndex}`);
				});
				compilation.hooks.processAssets.tap(
					{
						name: "HotModuleReplacementPlugin",
						stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
					},
					() => {
						const chunkGraph = compilation.chunkGraph;
						const records = compilation.records;
						if (records.hash === compilation.hash) return;
						if (
							!records.moduleHashes ||
							!records.chunkHashs ||
							!records.chunkModuleIds
						) {
							return;
						}
						for (const module of lazyHashedModules) {
							const identifier = module.identifier();
							const hash = chunkGraph.getModuleHash(module);
							if (records.moduleHashes[identifier] !== hash) {
								updatedModules.add(module);
							}
							moduleHashes[identifier] = hash;
						}
						const hotUpdateMainContent = {
							c: [],
							r: [],
							m: undefined
						};
						const allRemovedModules = new Set();
						for (const key of Object.keys(records.chunkHashs)) {
							const currentChunk = find(
								compilation.chunks,
								chunk => `${chunk.id}` === key
							);
							if (currentChunk) {
								const chunkId = currentChunk.id;
								const newModules = chunkGraph
									.getChunkModules(currentChunk)
									.filter(module => updatedModules.has(module));
								const newRuntimeModules = Array.from(
									chunkGraph.getChunkRuntimeModulesIterable(currentChunk)
								).filter(module => updatedModules.has(module));
								const fullHashModules = chunkGraph.getChunkFullHashModulesIterable(
									currentChunk
								);
								const newFullHashModules =
									fullHashModules &&
									Array.from(fullHashModules).filter(module =>
										updatedModules.has(module)
									);
								/** @type {Set<number|string>} */
								const allModules = new Set();
								for (const module of chunkGraph.getChunkModulesIterable(
									currentChunk
								)) {
									allModules.add(chunkGraph.getModuleId(module));
								}
								const removedModules = records.chunkModuleIds[chunkId].filter(
									id => !allModules.has(id)
								);
								if (
									newModules.length > 0 ||
									newRuntimeModules.length > 0 ||
									removedModules.length > 0
								) {
									const hotUpdateChunk = new HotUpdateChunk();
									ChunkGraph.setChunkGraphForChunk(hotUpdateChunk, chunkGraph);
									hotUpdateChunk.id = chunkId;
									chunkGraph.attachModules(hotUpdateChunk, newModules);
									chunkGraph.attachRuntimeModules(
										hotUpdateChunk,
										newRuntimeModules
									);
									if (newFullHashModules) {
										chunkGraph.attachFullHashModules(
											hotUpdateChunk,
											newFullHashModules
										);
									}
									hotUpdateChunk.removedModules = removedModules;
									const renderManifest = compilation.getRenderManifest({
										chunk: hotUpdateChunk,
										hash: records.hash,
										fullHash: records.hash,
										outputOptions: compilation.outputOptions,
										moduleTemplates: compilation.moduleTemplates,
										dependencyTemplates: compilation.dependencyTemplates,
										codeGenerationResults: compilation.codeGenerationResults,
										runtimeTemplate: compilation.runtimeTemplate,
										moduleGraph: compilation.moduleGraph,
										chunkGraph
									});
									for (const entry of renderManifest) {
										const {
											path: filename,
											info: assetInfo
										} = compilation.getPathWithInfo(
											entry.filenameTemplate,
											entry.pathOptions
										);
										const source = entry.render();
										compilation.additionalChunkAssets.push(filename);
										compilation.emitAsset(filename, source, {
											hotModuleReplacement: true,
											...assetInfo
										});
										currentChunk.files.add(filename);
										compilation.hooks.chunkAsset.call(currentChunk, filename);
									}
									hotUpdateMainContent.c.push(chunkId);
								}
							} else {
								const chunkId = `${+key}` === key ? +key : key;
								hotUpdateMainContent.r.push(chunkId);
								for (const id of records.chunkModuleIds[chunkId])
									allRemovedModules.add(id);
							}
						}
						hotUpdateMainContent.m = Array.from(allRemovedModules);
						const source = new RawSource(JSON.stringify(hotUpdateMainContent));
						const {
							path: filename,
							info: assetInfo
						} = compilation.getPathWithInfo(
							compilation.outputOptions.hotUpdateMainFilename,
							{
								hash: records.hash
							}
						);
						compilation.emitAsset(filename, source, {
							hotModuleReplacement: true,
							...assetInfo
						});
					}
				);

				compilation.hooks.additionalTreeRuntimeRequirements.tap(
					"HotModuleReplacementPlugin",
					(chunk, runtimeRequirements) => {
						runtimeRequirements.add(RuntimeGlobals.hmrDownloadManifest);
						runtimeRequirements.add(RuntimeGlobals.hmrDownloadUpdateHandlers);
						runtimeRequirements.add(RuntimeGlobals.interceptModuleExecution);
						runtimeRequirements.add(RuntimeGlobals.moduleCache);
						compilation.addRuntimeModule(
							chunk,
							new HotModuleReplacementRuntimeModule()
						);
					}
				);

				normalModuleFactory.hooks.parser
					.for("javascript/auto")
					.tap("HotModuleReplacementPlugin", parser => {
						applyWebpackHash(parser);
						applyModuleHot(parser);
						applyImportMetaHot(parser);
					});
				normalModuleFactory.hooks.parser
					.for("javascript/dynamic")
					.tap("HotModuleReplacementPlugin", parser => {
						applyWebpackHash(parser);
						applyModuleHot(parser);
					});
				normalModuleFactory.hooks.parser
					.for("javascript/esm")
					.tap("HotModuleReplacementPlugin", parser => {
						applyWebpackHash(parser);
						applyImportMetaHot(parser);
					});

				NormalModule.getCompilationHooks(compilation).loader.tap(
					"HotModuleReplacementPlugin",
					context => {
						context.hot = true;
					}
				);
			}
		);
	}
}

module.exports = HotModuleReplacementPlugin;