upgrading react-dev-tools

Summary:
Updating react-devtools plugin to the latest version.

As Flipper doesn't use a websocket anymore, this plugin was not working. In this diff, we are creating a websocket connection parallel to the rSocket connection which is used by the devtools. First we thought about tunneling the websocket through our rSocket, but this would be a lot more work.

By default they create a web-socket running on port 8097. But if this port is in use another port is used. The hostname and port to connect to is sent to the client-plugin.

Reviewed By: jknoxville

Differential Revision: D12897150

fbshipit-source-id: 6652b3c91fd5bd87fe86b29c730c8b2076bbc6ba

flow-typed/npm/address_vx.x.x.js

@@ -0,0 +1,36 @@
+// flow-typed signature: 875c28c0c6b9d87bf9f38c8d13ddc599
+// flow-typed version: <<STUB>>/address_v1.0.3/flow_v0.86.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'address'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'address' {
+  declare module.exports: {
+    ip: () => string,
+    ipv6: () => string,
+    mac: (callback: (err: ?Error, address: ?string) => mixed) => void,
+  };
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'address/lib/address' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'address/lib/address.js' {
+  declare module.exports: $Exports<'address/lib/address'>;
+}

flow-typed/npm/get-port_vx.x.x.js

@@ -0,0 +1,36 @@
+// flow-typed signature: 0954b240f4c7be486dc5ea91abab7529
+// flow-typed version: <<STUB>>/get-port_v4.0.0/flow_v0.86.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'get-port'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'get-port' {
+  declare module.exports: (config: ?{
+    port?: number | Array<number>,
+    host?: string,
+  }) => Promise<number>;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+
+
+// Filename aliases
+declare module 'get-port/index' {
+  declare module.exports: $Exports<'get-port'>;
+}
+declare module 'get-port/index.js' {
+  declare module.exports: $Exports<'get-port'>;
+}

src/Client.js

@@ -6,13 +6,12 @@
  */
 
 import type {FlipperPlugin, FlipperBasePlugin} from './plugin.js';
-import {FlipperDevicePlugin} from './plugin.js';
 import type BaseDevice from './devices/BaseDevice.js';
-
 import type {App} from './App.js';
 import type Logger from './fb-stubs/Logger.js';
 import type {Store} from './reducers/index.js';
 
+import {FlipperDevicePlugin} from './plugin.js';
 import {setPluginState} from './reducers/pluginStates.js';
 import {ReactiveSocket, PartialResponder} from 'rsocket-core';
 
@@ -122,6 +121,13 @@ export default class Client extends EventEmitter {
     this.emit('plugins-change');
   }
 
+  getDevice = (): ?BaseDevice =>
+    this.store
+      .getState()
+      .connections.devices.find(
+        (device: BaseDevice) => device.serial === this.query.device_id,
+      );
+
   onMessage(msg: string) {
     if (typeof msg !== 'string') {
       return;