Support webpack-hot-middleware

src/runtime/createSocket.js

@@ -2,6 +2,7 @@
 /* global __resourceQuery, __webpack_dev_server_client__ */
 
 const url = require('url');
+const tryLoadingWHMEventSource = require('./loadWHMEventSource');
 
 // This adds support for custom WDS socket transportModes
 // In the future, we should add support for custom clients to better support WDM
@@ -17,6 +18,8 @@ if (typeof __webpack_dev_server_client__ !== 'undefined') {
  * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
  */
 function createSocket(messageHandler) {
+  tryLoadingWHMEventSource();
+
   const connection = new SocketClient(
     // TODO: Dynamically generate this to handle resourceQuery
     // TODO: Use resourceQuery to fix servers under proxies
@@ -29,11 +32,9 @@ function createSocket(messageHandler) {
       pathname: '/sockjs-node',
     })
   );
-
   connection.onClose(function onSocketClose() {
     // TODO: Should we reconnect?
   });
-
   connection.onMessage(function onSocketMessage(data) {
     const message = JSON.parse(data);
     messageHandler(message);

src/runtime/loadWHMEventSource.js

@@ -0,0 +1,37 @@
+/*
+ * If the consumers setup is to use webpack-hot-middleware with a custom express server
+ * we want to bind onto the EventSource for our updates.
+ *
+ * The EventSource is not attached immediately, so we have a timeout + retry mechanism.
+ * This is also a safe approach for consumers who are not using webpack-hot-middleware. It'll be a noop after 3s.
+ */
+const MAX_RETRIES = 3;
+let retries = 0;
+
+function tryLoadingWHMEventSource() {
+  setTimeout(() => {
+    if (!window.__whmEventSourceWrapper) {
+      if (retries >= MAX_RETRIES) return;
+      retries++;
+      tryLoadingWHMEventSource();
+      return;
+    }
+
+    const eventSource = Object.values(window.__whmEventSourceWrapper)[0];
+    eventSource.addMessageListener(event => {
+      try {
+        const message = JSON.parse(event.data);
+        messageHandler(message);
+      } catch (e) {
+        // heartbeat
+        if (event.data === '💓') {
+          return;
+        }
+
+        console.error(e);
+      }
+    });
+  }, 1000);
+}
+
+module.exports = tryLoadingWHMEventSource;