Support globally installed React DevTools

Summary:
- Support loading globally installed DevTools

Background:
1. Initially, I wanted to use react-devtools-core as before. react-devtools-core standalone contains quite a few imports of node.js APIs. After [a conversation with Brian](https://fb.workplace.com/groups/react.devtools/permalink/3131548550392044), I pivoted to react-devtools-inline
2. Technical design doc of react-devtools-inline integration: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4
3. We support usage of globally installed devtools. Code of react-devtools-inline is not ready to be used by the browser as is. We need to bundle it and substitute React and ReactDOM imports with the globals.
4. As we can't pre-compile what users install globally, we need to bundle global devtools on demand,
5. I tried re-using our Metro bundling pipeline initially, but gave up after fighting it for 2 days. Included, `rollup` instead.
6. Size of a `tgz` archive with a plugin is 2.1MB

allow-large-files

Reviewed By: mweststrate

Differential Revision: D34968770

fbshipit-source-id: 352299964ccc195b8677dbda47db84ffaf38737b

desktop/plugins/public/reactdevtools/serverAddOn.tsx

@@ -14,6 +14,9 @@ import {
 } from 'flipper-plugin';
 import path from 'path';
 import {WebSocketServer, WebSocket} from 'ws';
+import {rollup} from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import {Events, Methods} from './contract';
 
 const DEV_TOOLS_PORT = 8097; // hardcoded in RN
@@ -33,7 +36,6 @@ async function findGlobalDevTools(
     const devToolsPath = path.join(
       basePath.trim(),
       'react-devtools-inline',
-      'dist',
       'frontend.js',
     );
     await flipperServer.exec('node-api-fs-stat', devToolsPath);
@@ -131,12 +133,26 @@ const serverAddOn: ServerAddOn<Events, Methods> = async (
       globalDevToolsPath,
     );
 
-    // TODO: Transform ReactDevTools for browsers
-    /*
-    const globalDevToolsSource = globalDevToolsPath;
-    return globalDevToolsSource;
-    */
-    return;
+    const bundle = await rollup({
+      input: globalDevToolsPath,
+      plugins: [resolve(), commonjs()],
+      external: ['react', 'react-is', 'react-dom/client', 'react-dom'],
+    });
+
+    try {
+      const {output} = await bundle.generate({
+        format: 'iife',
+        globals: {
+          react: 'global.React',
+          'react-is': 'global.ReactIs',
+          'react-dom/client': 'global.ReactDOMClient',
+          'react-dom': 'global.ReactDOM',
+        },
+      });
+      return output[0].code;
+    } finally {
+      await bundle.close();
+    }
   });
 
   return async () => {