Merge pull request #13576 from StateFarmIns/async-hmr-handlers

Allow HMR status handlers to return a Promise
webpack · Jul 18, 2021 · a87dba4 · a87dba4
2 parents 7102df3 + ef4aa56
commit a87dba4
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 66 deletions.
diff --git a/lib/hmr/HotModuleReplacement.runtime.js b/lib/hmr/HotModuleReplacement.runtime.js
@@ -9,6 +9,7 @@ var $interceptModuleExecution$ = undefined;
 var $moduleCache$ = undefined;
 // eslint-disable-next-line no-unused-vars
 var $hmrModuleData$ = undefined;
+/** @type {() => Promise}  */
 var $hmrDownloadManifest$ = undefined;
 var $hmrDownloadUpdateHandlers$ = undefined;
 var $hmrInvalidateModuleHandlers$ = undefined;
@@ -209,8 +210,12 @@ module.exports = function () {
 
 	function setStatus(newStatus) {
 		currentStatus = newStatus;
+		var results = [];
+
 		for (var i = 0; i < registeredStatusHandlers.length; i++)
-			registeredStatusHandlers[i].call(null, newStatus);
+			results[i] = registeredStatusHandlers[i].call(null, newStatus);
+
+		return Promise.all(results);
 	}
 
 	function trackBlockingPromise(promise) {
@@ -219,7 +224,7 @@ module.exports = function () {
 				setStatus("prepare");
 				blockingPromises.push(promise);
 				waitForBlockingPromises(function () {
-					setStatus("ready");
+					return setStatus("ready");
 				});
 				return promise;
 			case "prepare":
@@ -243,47 +248,47 @@ module.exports = function () {
 		if (currentStatus !== "idle") {
 			throw new Error("check() is only allowed in idle status");
 		}
-		setStatus("check");
-		return $hmrDownloadManifest$().then(function (update) {
-			if (!update) {
-				setStatus(applyInvalidatedModules() ? "ready" : "idle");
-				return null;
-			}
-
-			setStatus("prepare");
-
-			var updatedModules = [];
-			blockingPromises = [];
-			currentUpdateApplyHandlers = [];
-
-			return Promise.all(
-				Object.keys($hmrDownloadUpdateHandlers$).reduce(function (
-					promises,
-					key
-				) {
-					$hmrDownloadUpdateHandlers$[key](
-						update.c,
-						update.r,
-						update.m,
-						promises,
-						currentUpdateApplyHandlers,
-						updatedModules
-					);
-					return promises;
-				},
-				[])
-			).then(function () {
-				return waitForBlockingPromises(function () {
-					if (applyOnUpdate) {
-						return internalApply(applyOnUpdate);
-					} else {
-						setStatus("ready");
+		return setStatus("check")
+			.then($hmrDownloadManifest$)
+			.then(function (update) {
+				if (!update) {
+					return setStatus(applyInvalidatedModules() ? "ready" : "idle");
+				}
 
-						return updatedModules;
-					}
+				return setStatus("prepare").then(function () {
+					var updatedModules = [];
+					blockingPromises = [];
+					currentUpdateApplyHandlers = [];
+
+					return Promise.all(
+						Object.keys($hmrDownloadUpdateHandlers$).reduce(function (
+							promises,
+							key
+						) {
+							$hmrDownloadUpdateHandlers$[key](
+								update.c,
+								update.r,
+								update.m,
+								promises,
+								currentUpdateApplyHandlers,
+								updatedModules
+							);
+							return promises;
+						},
+						[])
+					).then(function () {
+						return waitForBlockingPromises(function () {
+							if (applyOnUpdate) {
+								return internalApply(applyOnUpdate);
+							} else {
+								return setStatus("ready").then(function () {
+									return updatedModules;
+								});
+							}
+						});
+					});
 				});
 			});
-		});
 	}
 
 	function hotApply(options) {
@@ -312,21 +317,20 @@ module.exports = function () {
 			.filter(Boolean);
 
 		if (errors.length > 0) {
-			setStatus("abort");
-			return Promise.resolve().then(function () {
+			return setStatus("abort").then(function () {
 				throw errors[0];
 			});
 		}
 
 		// Now in "dispose" phase
-		setStatus("dispose");
+		var disposePromise = setStatus("dispose");
 
 		results.forEach(function (result) {
 			if (result.dispose) result.dispose();
 		});
 
 		// Now in "apply" phase
-		setStatus("apply");
+		var applyPromise = setStatus("apply");
 
 		var error;
 		var reportError = function (err) {
@@ -345,25 +349,27 @@ module.exports = function () {
 			}
 		});
 
-		// handle errors in accept handlers and self accepted module load
-		if (error) {
-			setStatus("fail");
-			return Promise.resolve().then(function () {
-				throw error;
-			});
-		}
+		return Promise.all([disposePromise, applyPromise]).then(function () {
+			// handle errors in accept handlers and self accepted module load
+			if (error) {
+				return setStatus("fail").then(function () {
+					throw error;
+				});
+			}
 
-		if (queuedInvalidatedModules) {
-			return internalApply(options).then(function (list) {
-				outdatedModules.forEach(function (moduleId) {
-					if (list.indexOf(moduleId) < 0) list.push(moduleId);
+			if (queuedInvalidatedModules) {
+				return internalApply(options).then(function (list) {
+					outdatedModules.forEach(function (moduleId) {
+						if (list.indexOf(moduleId) < 0) list.push(moduleId);
+					});
+					return list;
 				});
-				return list;
-			});
-		}
+			}
 
-		setStatus("idle");
-		return Promise.resolve(outdatedModules);
+			return setStatus("idle").then(function () {
+				return outdatedModules;
+			});
+		});
 	}
 
 	function applyInvalidatedModules() {

diff --git a/test/HotTestCases.template.js b/test/HotTestCases.template.js
@@ -252,7 +252,7 @@ const describeCases = config => {
 												return JSON.parse(fs.readFileSync(p, "utf-8"));
 											} else {
 												const fn = vm.runInThisContext(
-													"(function(require, module, exports, __dirname, __filename, it, beforeEach, afterEach, expect, self, window, fetch, document, importScripts, Worker, EventSource, NEXT, STATS) {" +
+													"(function(require, module, exports, __dirname, __filename, it, beforeEach, afterEach, expect, jest, self, window, fetch, document, importScripts, Worker, EventSource, NEXT, STATS) {" +
 														"global.expect = expect;" +
 														'function nsObj(m) { Object.defineProperty(m, Symbol.toStringTag, { value: "Module" }); return m; }' +
 														fs.readFileSync(p, "utf-8") +
@@ -273,6 +273,7 @@ const describeCases = config => {
 													_beforeEach,
 													_afterEach,
 													expect,
+													jest,
 													window,
 													window,
 													window.fetch,

diff --git a/test/hotCases/invalidate/during-idle/index.js b/test/hotCases/invalidate/during-idle/index.js
@@ -11,9 +11,10 @@ it("should allow to invalidate and reload a file", () => {
 	expect(module.hot.status()).toBe("ready");
 	c.invalidate();
 	expect(module.hot.status()).toBe("ready");
-	module.hot.apply();
-	expect(module.hot.status()).toBe("idle");
-	expect(a.value).not.toBe(oldA);
-	expect(b.value).not.toBe(oldB);
-	expect(c.value).toBe(oldC);
+	module.hot.apply().then(function () {
+		expect(module.hot.status()).toBe("idle");
+		expect(a.value).not.toBe(oldA);
+		expect(b.value).not.toBe(oldB);
+		expect(c.value).toBe(oldC);
+	});
 });
diff --git a/test/hotCases/status/accept/file.js b/test/hotCases/status/accept/file.js
@@ -0,0 +1,3 @@
+module.exports = 1;
+---
+module.exports = 2;
diff --git a/test/hotCases/status/accept/index.js b/test/hotCases/status/accept/index.js
@@ -0,0 +1,27 @@
+var value = require("./file");
+
+it("should wait until promises returned by status handlers are fulfilled", (done) => {
+	var handler = jest.fn(status => {
+		var test = jest.fn(() => {
+			expect(module.hot.status()).toBe(status == "dispose" ? "apply" : status);
+		});
+
+		var promise = Promise.resolve().then(test);
+		promise.test = test;
+
+		return promise;
+	});
+	module.hot.addStatusHandler(handler);
+	module.hot.accept("./file", () => {
+		value = require("./file");
+	});
+	NEXT(require("../../update")(done, undefined, () => {
+		expect(handler.mock.calls).toStrictEqual([['check'], ['prepare'], ['dispose'], ['apply'], ['idle']]);
+		for (let result of handler.mock.results)
+			expect(result.value.test).toHaveBeenCalledTimes(1);
+
+		expect(module.hot.status()).toBe("idle");
+
+		done();
+  }));
+});