Make the React Native HMR client extend from the generic metro HMR client

Reviewed By: BYK

Differential Revision: D6752278

fbshipit-source-id: 5c93cba3e9f3cee2119cb90a711909e0b4a5b835

Libraries/Utilities/HMRClient.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule HMRClient
+ * @format
  * @flow
  */
 'use strict';
@@ -14,6 +15,8 @@
 const Platform = require('Platform');
 const invariant = require('fbjs/lib/invariant');
 
+const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');
+
 /**
  * HMR Client that receives from the server HMR updates and propagates them
  * runtime to reflects those changes.
@@ -24,110 +27,72 @@ const HMRClient = {
     invariant(bundleEntry, 'Missing required paramenter `bundleEntry`');
     invariant(host, 'Missing required paramenter `host`');
 
-    // need to require WebSocket inside of `enable` function because
+    // Moving to top gives errors due to NativeModules not being initialized
-    // this module is defined as a `polyfillGlobal`.
+    const HMRLoadingView = require('HMRLoadingView');
-    // See `InitializeJavascriptAppEngine.js`
-    const WebSocket = require('WebSocket');
 
-    const wsHostPort = port !== null && port !== ''
+    const wsHostPort = port !== null && port !== '' ? `${host}:${port}` : host;
-      ? `${host}:${port}`
-      : host;
 
     bundleEntry = bundleEntry.replace(/\.(bundle|delta)/, '.js');
 
     // Build the websocket url
-    const wsUrl = `ws://${wsHostPort}/hot?` +
+    const wsUrl =
+      `ws://${wsHostPort}/hot?` +
       `platform=${platform}&` +
       `bundleEntry=${bundleEntry}`;
 
-    const activeWS = new WebSocket(wsUrl);
+    const hmrClient = new MetroHMRClient(wsUrl);
-    activeWS.onerror = (e) => {
+
-      let error = (
+    hmrClient.on('connection-error', e => {
-`Hot loading isn't working because it cannot connect to the development server.
+      let error = `Hot loading isn't working because it cannot connect to the development server.
 
 Try the following to fix the issue:
-- Ensure that the packager server is running and available on the same network`
+- Ensure that the packager server is running and available on the same network`;
-      );
 
       if (Platform.OS === 'ios') {
-        error += (
+        error += `
-`
+- Ensure that the Packager server URL is correctly set in AppDelegate`;
-- Ensure that the Packager server URL is correctly set in AppDelegate`
-        );
       } else {
-        error += (
+        error += `
-`
 - Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
 - If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
-- If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081`
+- If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081`;
-        );
       }
 
-      error += (
+      error += `
-`
 
 URL: ${host}:${port}
 
-Error: ${e.message}`
+Error: ${e.message}`;
-      );
 
       throw new Error(error);
-    };
+    });
-    activeWS.onmessage = ({data}) => {
-      // Moving to top gives errors due to NativeModules not being initialized
-      const HMRLoadingView = require('HMRLoadingView');
 
-      data = JSON.parse(data);
+    hmrClient.on('update-start', () => {
+      HMRLoadingView.showMessage('Hot Loading...');
+    });
 
-      switch (data.type) {
+    hmrClient.on('update', () => {
-        case 'update-start': {
+      if (Platform.OS === 'ios') {
-          HMRLoadingView.showMessage('Hot Loading...');
+        const RCTRedBox = require('NativeModules').RedBox;
-          break;
+        RCTRedBox && RCTRedBox.dismiss && RCTRedBox.dismiss();
-        }
+      } else {
-        case 'update': {
+        const RCTExceptionsManager = require('NativeModules').ExceptionsManager;
-          const {
+        RCTExceptionsManager &&
-            modules,
+          RCTExceptionsManager.dismissRedbox &&
-            sourceMappingURLs,
+          RCTExceptionsManager.dismissRedbox();
-            sourceURLs,
-          } = data.body;
-
-          if (Platform.OS === 'ios') {
-            const RCTRedBox = require('NativeModules').RedBox;
-            RCTRedBox && RCTRedBox.dismiss && RCTRedBox.dismiss();
-          } else {
-            const RCTExceptionsManager = require('NativeModules').ExceptionsManager;
-            RCTExceptionsManager && RCTExceptionsManager.dismissRedbox && RCTExceptionsManager.dismissRedbox();
-          }
-
-          modules.forEach(({id, code}, i) => {
-            code = code + '\n\n' + sourceMappingURLs[i];
-
-            // on JSC we need to inject from native for sourcemaps to work
-            // (Safari doesn't support `sourceMappingURL` nor any variant when
-            // evaluating code) but on Chrome we can simply use eval
-            const injectFunction = typeof global.nativeInjectHMRUpdate === 'function'
-              ? global.nativeInjectHMRUpdate
-              : eval; // eslint-disable-line no-eval
-
-            injectFunction(code, sourceURLs[i]);
-          });
-
-          HMRLoadingView.hide();
-          break;
-        }
-        case 'update-done': {
-          HMRLoadingView.hide();
-          break;
-        }
-        case 'error': {
-          HMRLoadingView.hide();
-          throw new Error(`${data.body.type}: ${data.body.message}`);
-        }
-        default: {
-          throw new Error(`Unexpected message: ${data}`);
-        }
       }
-    };
+    });
+
+    hmrClient.on('update-done', () => {
+      HMRLoadingView.hide();
+    });
+
+    hmrClient.on('error', data => {
+      HMRLoadingView.hide();
+      throw new Error(`${data.type} ${data.message}`);
+    });
+
+    hmrClient.enable();
   },
 };