Apply HMR updates via node worker thread

Author: devongovett

packages/reporters/dev-server/src/HMRServer.js

@@ -160,16 +160,16 @@ export default class HMRServer {
     this.broadcast(this.unresolvedError);
   }
 
-  async emitUpdate(event: {
+  async getUpdate(event: {
     +bundleGraph: BundleGraph<PackagedBundle> | BundleGraph<NamedBundle>,
     +changedAssets: Map<string, Asset>,
     ...
-  }) {
+  }): Promise<?HMRMessage> {
     this.unresolvedError = null;
     this.bundleGraph = event.bundleGraph;
 
     let changedAssets = new Set(event.changedAssets.values());
-    if (changedAssets.size === 0) return;
+    if (changedAssets.size === 0) return Promise.resolve(null);
 
     let queue = new PromiseQueue({maxConcurrent: FS_CONCURRENCY});
     for (let asset of changedAssets) {
@@ -227,15 +227,14 @@ export default class HMRServer {
     }
 
     let assets = await queue.run();
-
     if (assets.length >= BROADCAST_MAX_ASSETS) {
       // Too many assets to send via an update without errors, just reload instead
-      this.broadcast({type: 'reload'});
-    } else {
-      this.broadcast({
+      return {type: 'reload'};
+    } else if (assets.length > 0) {
+      return {
         type: 'update',
         assets,
-      });
+      };
     }
   }
 

packages/reporters/dev-server/src/NodeRunner.js

@@ -5,6 +5,7 @@ import {md, errorToDiagnostic} from '@parcel/diagnostic';
 import nullthrows from 'nullthrows';
 import {Worker} from 'worker_threads';
 import path from 'path';
+import type {HMRMessage} from './HMRServer';
 
 export type NodeRunnerOptions = {|
   hmr: boolean,
@@ -37,7 +38,7 @@ export class NodeRunner {
     }
   }
 
-  startWorker() {
+  startWorker(): Promise<void> {
     let entry = nullthrows(this.bundleGraph)
       .getEntryBundles()
       .find(b => b.env.isNode() && b.type === 'js');
@@ -54,12 +55,6 @@ export class NodeRunner {
         stderr: true,
       });
 
-      worker.on('message', msg => {
-        if (msg === 'restart') {
-          this.restartWorker();
-        }
-      });
-
       worker.on('error', (err: Error) => {
         this.logger.error(errorToDiagnostic(err));
       });
@@ -91,6 +86,12 @@ export class NodeRunner {
       });
 
       this.worker = worker;
+
+      return new Promise(resolve => {
+        worker.once('online', () => resolve());
+      });
+    } else {
+      return Promise.resolve();
     }
   }
 
@@ -105,7 +106,30 @@ export class NodeRunner {
     // HMR updates are sent before packaging is complete.
     // If the build is still pending, wait until it completes to restart.
     if (!this.pending) {
-      this.startWorker();
+      await this.startWorker();
     }
   }
+
+  emitUpdate(update: HMRMessage): Promise<void> {
+    if (update.type === 'reload') {
+      return this.restartWorker();
+    }
+
+    return new Promise((resolve, reject) => {
+      let worker = this.worker;
+      if (worker) {
+        worker.once('message', msg => {
+          if (msg === 'restart') {
+            this.restartWorker().then(resolve, reject);
+          } else {
+            resolve();
+          }
+        });
+
+        worker.postMessage(update);
+      } else {
+        resolve();
+      }
+    });
+  }
 }

packages/reporters/dev-server/src/ServerReporter.js

@@ -116,7 +116,15 @@ export default (new Reporter({
           // no stale bundles are served. Otherwise emit it for 'buildSuccess'.
           options.serveOptions !== false
         ) {
-          await hmrServer.emitUpdate(event);
+          let update = await hmrServer.getUpdate(event);
+          if (update) {
+            // If running in node, wait for the server to update before emitting the update
+            // on the client. This ensures that when the client reloads the server is ready.
+            if (nodeRunner) {
+              await nodeRunner.emitUpdate(update);
+            }
+            hmrServer.broadcast(update);
+          }
         }
         break;
       case 'buildSuccess': {
@@ -131,7 +139,10 @@ export default (new Reporter({
           server.buildSuccess(event.bundleGraph, event.requestBundle);
         }
         if (hmrServer && options.serveOptions === false) {
-          await hmrServer.emitUpdate(event);
+          let update = await hmrServer.getUpdate(event);
+          if (update) {
+            hmrServer.broadcast(update);
+          }
         }
 
         if (!nodeRunner && options.serveOptions) {