Decapitate React DevTools

Summary:
Changelog: Migrate from react-devtools-core to -react-devtools-inline

Technical design doc: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4

At this point, React DevTools doe snot support globally installed DevTools. Only the bundled version. The support for the globally installed DevTools comes in the subsequent diffs along with on-the-fly transpilation.

Reviewed By: mweststrate

Differential Revision: D34926472

fbshipit-source-id: fde1d4cf386adfbf8a8581ee5a54e950d2cb34ef

desktop/plugins/public/reactdevtools/serverAddOn.tsx

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {
+  createControlledPromise,
+  FlipperServerForServerAddOn,
+  ServerAddOn,
+} from 'flipper-plugin';
+import path from 'path';
+import {WebSocketServer, WebSocket} from 'ws';
+import {Events, Methods} from './contract';
+
+const DEV_TOOLS_PORT = 8097; // hardcoded in RN
+
+async function findGlobalDevTools(
+  flipperServer: FlipperServerForServerAddOn,
+): Promise<string | undefined> {
+  try {
+    const {stdout: basePath} = await flipperServer.exec(
+      'node-api-exec',
+      'npm root -g',
+    );
+    console.debug(
+      'flipper-plugin-react-devtools.findGlobalDevTools -> npm root',
+      basePath,
+    );
+    const devToolsPath = path.join(
+      basePath.trim(),
+      'react-devtools-inline',
+      'dist',
+      'frontend.js',
+    );
+    await flipperServer.exec('node-api-fs-stat', devToolsPath);
+    return devToolsPath;
+  } catch (error) {
+    console.warn('Failed to find globally installed React DevTools: ' + error);
+    return undefined;
+  }
+}
+
+const serverAddOn: ServerAddOn<Events, Methods> = async (
+  connection,
+  {flipperServer},
+) => {
+  console.debug('flipper-plugin-react-devtools.serverAddOn -> starting');
+
+  const startServer = async () => {
+    console.debug('flipper-plugin-react-devtools.serverAddOn -> startServer');
+
+    const wss = new WebSocketServer({port: DEV_TOOLS_PORT});
+
+    const startedPromise = createControlledPromise<void>();
+    wss.on('listening', () => startedPromise.resolve());
+    wss.on('error', (err) => {
+      if (startedPromise.state === 'pending') {
+        startedPromise.reject(err);
+        return;
+      }
+
+      console.error('flipper-plugin-react-devtools.serverAddOn -> error', err);
+    });
+
+    await startedPromise.promise;
+
+    console.debug(
+      'flipper-plugin-react-devtools.serverAddOn -> started server',
+    );
+
+    wss.on('connection', (ws) => {
+      connection.send('connected');
+      console.debug(
+        'flipper-plugin-react-devtools.serverAddOn -> connected a client',
+      );
+
+      ws.on('message', (data) => {
+        connection.send('message', JSON.parse(data.toString()));
+        console.debug(
+          'flipper-plugin-react-devtools.serverAddOn -> client sent a message',
+          data.toString(),
+        );
+      });
+
+      ws.on('error', (err) => {
+        console.error(
+          'flipper-plugin-react-devtools.serverAddOn -> client error',
+          err,
+        );
+      });
+
+      ws.on('close', () => {
+        connection.send('disconnected');
+        console.debug(
+          'flipper-plugin-react-devtools.serverAddOn -> client left',
+        );
+      });
+    });
+
+    connection.receive('message', (data) => {
+      console.debug(
+        'flipper-plugin-react-devtools.serverAddOn -> desktop sent a message',
+        data,
+      );
+      wss!.clients.forEach((ws) => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify(data));
+        }
+      });
+    });
+
+    return wss;
+  };
+
+  const wss = await startServer();
+
+  connection.receive('globalDevTools', async () => {
+    const globalDevToolsPath = await findGlobalDevTools(flipperServer);
+    if (!globalDevToolsPath) {
+      console.info(
+        'flipper-plugin-react-devtools.serverAddOn -> not found global React DevTools',
+      );
+      return;
+    }
+    console.info(
+      'flipper-plugin-react-devtools.serverAddOn -> found global React DevTools: ',
+      globalDevToolsPath,
+    );
+
+    // TODO: Transform ReactDevTools for browsers
+    /*
+    const globalDevToolsSource = globalDevToolsPath;
+    return globalDevToolsSource;
+    */
+    return;
+  });
+
+  return async () => {
+    console.debug('flipper-plugin-react-devtools.serverAddOn -> stopping');
+    if (wss) {
+      console.debug(
+        'flipper-plugin-react-devtools.serverAddOn -> stopping wss',
+      );
+      await new Promise<void>((resolve, reject) =>
+        wss!.close((err) => (err ? reject(err) : resolve())),
+      );
+      console.debug('flipper-plugin-react-devtools.serverAddOn -> stopped wss');
+    }
+  };
+};
+
+export default serverAddOn;