Properly make use of status events provided by DevTools server

Summary: Uses the new statuses emitted by DevTools in facebook/react#22848 to better handle the connection state when connecting to DevTools from Flipper. Reviewed By: bvaughn Differential Revision: D32891240 fbshipit-source-id: 142d9996e05b5113e6dca28074c461d5a5acd38f
facebook · Dec 7, 2021 · e75238c · e75238c
1 parent 297697c
commit e75238c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/desktop/plugins/public/reactdevtools/index.tsx b/desktop/plugins/public/reactdevtools/index.tsx
@@ -233,9 +233,35 @@ export function devicePlugin(client: DevicePluginClient) {
       );
       startResult = devToolsInstance.module
         .setContentDOMNode(devToolsNode)
-        .setStatusListener((status: string) => {
+        .setStatusListener((message: string, status: string) => {
           // TODO: since devToolsInstance is an instance, we are probably leaking memory here
-          setStatus(ConnectionStatus.Initializing, status);
+          if (typeof status === 'undefined') {
+            // Preserves old behavior in case DevTools doesn't provide status,
+            // which may happen if loading an older version of DevTools.
+            setStatus(ConnectionStatus.Initializing, message);
+            return;
+          }
+
+          switch (status) {
+            case 'server-connected': {
+              setStatus(ConnectionStatus.Initializing, message);
+              break;
+            }
+            case 'devtools-connected': {
+              if (pollHandle) {
+                clearTimeout(pollHandle);
+              }
+              setStatus(ConnectionStatus.Connected, message);
+              break;
+            }
+            case 'error': {
+              if (pollHandle) {
+                clearTimeout(pollHandle);
+              }
+              setStatus(ConnectionStatus.Error, message);
+              break;
+            }
+          }
         })
         .startServer(DEV_TOOLS_PORT, 'localhost', undefined, {
           surface: 'flipper',

diff --git a/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx b/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx
@@ -16,6 +16,9 @@ type LoggerOptions = {
   surface?: string;
 };
 
+type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
+type StatusListener = (message: string, status: StatusTypes) => void;
+
 declare module 'react-devtools-core/standalone' {
   interface DevTools {
     setContentDOMNode(node: HTMLElement): this;
@@ -25,7 +28,7 @@ declare module 'react-devtools-core/standalone' {
       httpsOptions?: ServerOptions,
       loggerOptions?: LoggerOptions,
     ): {close: () => void};
-    setStatusListener(listener: (message: string) => void): this;
+    setStatusListener(listener: StatusListener): this;
   }
   const DevTools: DevTools;
   export default DevTools;