feat: Switch to FBs react native flipper plugin

Author: rmevans9

package.json

@@ -43,6 +43,9 @@
     "reactotron-core-client": "2.8.9",
     "rn-host-detect": "1.1.5"
   },
+  "optionalDependencies": {
+    "react-native-flipper": "^0.0.1"
+  },
   "devDependencies": {
     "@babel/core": "7.6.2",
     "@babel/plugin-proposal-class-properties": "7.5.5",
@@ -69,6 +72,7 @@
     "prettier": "1.18.2",
     "react": "16.9.0",
     "react-native": "0.61.1",
+    "react-native-flipper": "^0.0.1",
     "rollup": "1.21.4",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.0",

rollup.config.js

@@ -18,6 +18,7 @@ function getPlugins() {
 
 const EXTERNALS = [
   "reactotron-core-client",
+  "react-native-flipper",
   "react",
   "react-native",
   "react-native/Libraries/Network/XHRInterceptor",
@@ -35,4 +36,13 @@ export default [
     plugins: getPlugins(),
     external: EXTERNALS,
   },
+  {
+    input: "src/flipper-connection-manager.ts",
+    output: {
+      file: "dist/flipper.js",
+      format: "cjs",
+    },
+    plugins: getPlugins(),
+    external: EXTERNALS,
+  },
 ]

src/connection-manager.ts

@@ -1,47 +1,21 @@
-import { NativeEventEmitter, NativeModules } from "react-native"
-
 export default class ConnectionManager {
   private webSocket: any
-  private flipperConnection: any
 
   constructor(path?: string) {
     this.webSocket = new WebSocket(path)
-    this.flipperConnection = NativeModules.Reactotron
   }
 
   send(payload: any) {
     if (this.webSocket.readyState === 1) {
       this.webSocket.send(payload)
     }
-
-    if (this.flipperConnection) {
-      this.flipperConnection.sendCommand("command", JSON.parse(payload))
-    }
   }
 
   on(event: "open" | "close" | "message", callback: any) {
     if (event === "open") {
-      if (this.flipperConnection) {
-        callback()
-      }
-
       this.webSocket.onopen = callback
-    } else if (event === "close") {
-      this.webSocket.onclose = () => {
-        if (!this.flipperConnection) {
-          callback()
-        }
-      }
     } else if (event === "message") {
       this.webSocket.onmessage = evt => callback(evt.data)
-
-      if (this.flipperConnection) {
-        const flipperConnectionEmitter = new NativeEventEmitter(NativeModules.Reactotron)
-
-        flipperConnectionEmitter.addListener("CommandReceived", command => {
-          callback(command)
-        })
-      }
     }
   }
 

src/flipper-connection-manager.ts

@@ -0,0 +1,78 @@
+import { addPlugin } from "react-native-flipper"
+
+import ConnectionManager from "./connection-manager"
+
+export default class FlipperConnectionManager {
+  private baseConnectionManager: ConnectionManager
+  // private flipperConnection: Flipper.FlipperConnection
+  private flipperConnection: any
+
+  private openCallbacks: (() => void)[] = []
+  private closeCallbacks: (() => void)[] = []
+  private messageCallbacks: ((message: string) => void)[] = []
+
+  constructor(path?: string) {
+    this.baseConnectionManager = new ConnectionManager(path)
+
+    addPlugin({
+      getId() {
+        return "flipper-plugin-reactotron"
+      },
+      onConnect: this.handleConnect,
+      onDisconnect: this.handleDisconnect,
+      runInBackground: () => true,
+    })
+  }
+
+  // handleConnect = (connection: Flipper.FlipperConnection) => {
+  handleConnect = (connection: any) => {
+    this.flipperConnection = connection
+
+    connection.receive("sendReactotronCommand", (data, responder) => {
+      this.handleMessage(data)
+      responder.success()
+    })
+
+    this.openCallbacks.forEach(callback => callback())
+  }
+
+  handleMessage = data => {
+    this.messageCallbacks.forEach(callback => callback(data))
+  }
+
+  handleDisconnect = () => {
+    this.flipperConnection = null
+    this.closeCallbacks.forEach(callback => callback())
+  }
+
+  send(payload: any) {
+    const parsedPayload = JSON.parse(payload)
+    this.baseConnectionManager.send(parsedPayload)
+    this.flipperConnection.send("Command", parsedPayload)
+  }
+
+  on(event: "open" | "close" | "message", callback: any) {
+    this.baseConnectionManager.on(event, callback)
+
+    switch (event) {
+      case "open":
+        if (this.flipperConnection) {
+          // If we are already connected, let them know right now.
+          callback()
+        }
+
+        this.openCallbacks.push(callback)
+        break
+      case "close":
+        this.closeCallbacks.push(callback)
+        break
+      case "message":
+        this.messageCallbacks.push(callback)
+        break
+    }
+  }
+
+  close() {
+    this.baseConnectionManager.close()
+  }
+}

yarn.lock

@@ -9204,6 +9204,11 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-native-flipper@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-flipper/-/react-native-flipper-0.0.1.tgz#0ab983343f2243ed266b0928665a284e55d125bd"
+  integrity sha512-CXlv55ZlO64XB9+ziGyizWge+xJl+RYnqt3fl4i6Fivw2oZwzrDhTxB7tZT1LyRaQUaZhcbOFbDLTHVS2PiLNg==
+
 react-native@0.61.1:
   version "0.61.1"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.61.1.tgz#ac2559f78f9e689356fedfa93159026a25313d7d"