Introduce Packager and App HMR WebSocket connection

Summary:
public

This diff adds infra to both the Packager and the running app to have a WebSocket based connection between them. This connection is toggled by a new dev menu item, namely `Enable/Disable Hot Loading`.

Reviewed By: vjeux

Differential Revision: D2787621

fb-gh-sync-id: d1dee769348e4830c28782e7b650d025f2b3a786

Libraries/BatchedBridge/BatchedBridge.js

@@ -25,6 +25,11 @@ const JSTimersExecution = require('JSTimersExecution');
 BatchedBridge.registerCallableModule('Systrace', Systrace);
 BatchedBridge.registerCallableModule('JSTimersExecution', JSTimersExecution);
 
+if (__DEV__) {
+  const HMRClient = require('HMRClient');
+  BatchedBridge.registerCallableModule('HMRClient', HMRClient);
+}
+
 // Wire up the batched bridge on the global object so that we can call into it.
 // Ideally, this would be the inverse relationship. I.e. the native environment
 // provides this global directly with its script embedded. Then this module

Libraries/Utilities/HMRClient.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule HMRClient
+ */
+'use strict';
+
+let _activeWS;
+
+/**
+ * HMR Client that receives from the server HMR updates and propagates them
+ * runtime to reflects those changes.
+ */
+const HMRClient = {
+  setEnabled(enabled) {
+    if (_activeWS && _activeWS) {
+      _activeWS.close();
+      _activeWS = null;
+    }
+
+    if (enabled) {
+      // TODO(martinb): parametrize the url and receive entryFile to minimize 
+      // the number of updates we want to receive from the server.
+      _activeWS = new WebSocket('ws://localhost:8081/hot');
+      _activeWS.onerror = (e) => {
+        console.error('[Hot Module Replacement] Unexpected error', e);
+      };
+      _activeWS.onmessage = (m) => {
+        // TODO(martinb): inject HMR update
+      };
+    }
+  },
+};
+
+module.exports = HMRClient;

React/Executors/RCTJSCExecutor.m

@@ -25,6 +25,7 @@
 #import "RCTJSCProfiler.h"
 
 static NSString *const RCTJSCProfilerEnabledDefaultsKey = @"RCTJSCProfilerEnabled";
+static NSString *const RCTHotLoadingEnabledDefaultsKey = @"RCTHotLoadingEnabled";
 
 @interface RCTJavaScriptContext : NSObject <RCTInvalidating>
 
@@ -143,6 +144,15 @@ static void RCTInstallJSCProfiler(RCTBridge *bridge, JSContextRef context)
   }
 }
 
+static void RCTInstallHotLoading(RCTBridge *bridge, RCTJSCExecutor *executor)
+{
+  [bridge.devMenu addItem:[RCTDevMenuItem toggleItemWithKey:RCTHotLoadingEnabledDefaultsKey title:@"Enable Hot Loading" selectedTitle:@"Disable Hot Loading" handler:^(BOOL enabled) {
+    [executor executeBlockOnJavaScriptQueue:^{
+      [bridge enqueueJSCall:@"HMRClient.setEnabled" args:@[enabled ? @YES : @NO]];
+    }];
+  }]];
+}
+
 #endif
 
 + (void)runRunLoopThread
@@ -296,6 +306,7 @@ static void RCTInstallJSCProfiler(RCTBridge *bridge, JSContextRef context)
     };
 
     RCTInstallJSCProfiler(_bridge, strongSelf->_context.ctx);
+    RCTInstallHotLoading(_bridge, strongSelf);
 
     for (NSString *event in @[RCTProfileDidStartProfiling, RCTProfileDidEndProfiling]) {
       [[NSNotificationCenter defaultCenter] addObserver:strongSelf

local-cli/server/util/attachHMRServer.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+/**
+ * Attaches a WebSocket based connection to the Packager to expose
+ * Hot Module Replacement updates to the simulator.
+ */
+function attachHMRServer({httpServer, path, packagerServer}) {
+  let activeWS;
+  packagerServer.addFileChangeListener(filename => {
+    if (!activeWS) {
+      return;
+    }
+
+    // TODO(martinb): send HMR update
+  });
+
+  const WebSocketServer = require('ws').Server;
+  const wss = new WebSocketServer({
+    server: httpServer,
+    path: path,
+  });
+
+  console.log('[Hot Module Replacement] Server listening on', path);
+  wss.on('connection', ws => {
+    console.log('[Hot Module Replacement] Client connected');
+    activeWS = ws;
+
+    ws.on('error', e => {
+      console.error('[Hot Module Replacement] Unexpected error', e);
+    });
+
+    ws.on('close', () => {
+      console.log('[Hot Module Replacement] Client disconnected');
+      activeWS = null;
+    });
+  });
+}
+
+module.exports = attachHMRServer;

packager/react-packager/src/Server/index.js

@@ -134,6 +134,7 @@ class Server {
     this._projectRoots = opts.projectRoots;
     this._bundles = Object.create(null);
     this._changeWatchers = [];
+    this._fileChangeListeners = [];
 
     const assetGlobs = opts.assetExts.map(ext => '**/*.' + ext);
 
@@ -175,6 +176,7 @@ class Server {
     this._fileWatcher.on('all', this._onFileChange.bind(this));
 
     this._debouncedFileChangeHandler = _.debounce(filePath => {
+      this._fileChangeListeners.forEach(listener => listener(filePath));
       this._rebuildBundles(filePath);
       this._informChangeWatchers();
     }, 50);
@@ -187,6 +189,10 @@ class Server {
     ]);
   }
 
+  addFileChangeListener(listener) {
+    this._fileChangeListeners.push(listener);
+  }
+
   buildBundle(options) {
     return Promise.resolve().then(() => {
       if (!options.platform) {