From 618670d00aeae244b2f1cf706ac879e8f48798ec Mon Sep 17 00:00:00 2001
From: Juan Tejada <jstejada@fb.com>
Date: Mon, 6 Dec 2021 12:40:16 -0800
Subject: [PATCH] Update Flipper DevTools plugin to use internal build

Summary:
This commit update the React DevTools Flipper plugin to use the internal build of `react-devtools-core/standalone`.

The internal build of `react-devtools-core/standalone` is generated by the new sync script: `js1 upgrade react-devtools-core`, which places the build under  `xplat/sonar/desktop/plugins/public/reactdevtools/fb`.

As a follow up, we can add a dropdown to allow users to select which version of React DevTools they'd like to use.

Reviewed By: mweststrate

Differential Revision: D31904288

fbshipit-source-id: ce0880284bd7f9ccaa6258a7c2956f20771e81a9
---
 .../plugins/public/reactdevtools/index.tsx    | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/desktop/plugins/public/reactdevtools/index.tsx b/desktop/plugins/public/reactdevtools/index.tsx
index bd11bdc31..5329c041e 100644
--- a/desktop/plugins/public/reactdevtools/index.tsx
+++ b/desktop/plugins/public/reactdevtools/index.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import ReactDevToolsStandaloneEmbedded from 'react-devtools-core/standalone';
+import type ReactDevToolsStandaloneType from 'react-devtools-core/standalone';
 import {
   Layout,
   usePlugin,
@@ -71,8 +71,8 @@ export function devicePlugin(client: DevicePluginClient) {
     persist: 'useGlobalDevTools',
     persistToLocalStorage: true,
   });
-  let devToolsInstance: typeof ReactDevToolsStandaloneEmbedded =
-    ReactDevToolsStandaloneEmbedded;
+
+  let devToolsInstance = getDefaultDevToolsModule();
 
   let startResult: {close(): void} | undefined = undefined;
 
@@ -81,13 +81,21 @@ export function devicePlugin(client: DevicePluginClient) {
   function getDevToolsModule() {
     // Load right library
     if (useGlobalDevTools.get()) {
-      console.log('Loading ' + globalDevToolsPath.get());
-      return global.electronRequire(globalDevToolsPath.get()!).default;
+      const module = global.electronRequire(globalDevToolsPath.get()!);
+      return module.default ?? module;
     } else {
-      return ReactDevToolsStandaloneEmbedded;
+      return getDefaultDevToolsModule();
     }
   }
 
+  function getDefaultDevToolsModule(): ReactDevToolsStandaloneType {
+    return client.isFB
+      ? require('./fb/react-devtools-core/standalone').default ??
+          require('./fb/react-devtools-core/standalone')
+      : require('react-devtools-core/standalone').default ??
+          require('react-devtools-core/standalone');
+  }
+
   async function toggleUseGlobalDevTools() {
     if (!globalDevToolsPath.get()) {
       message.warn(
@@ -148,7 +156,7 @@ export function devicePlugin(client: DevicePluginClient) {
       );
       startResult = devToolsInstance
         .setContentDOMNode(devToolsNode)
-        .setStatusListener((status) => {
+        .setStatusListener((status: string) => {
           // TODO: since devToolsInstance is an instance, we are probably leaking memory here
           setStatus(ConnectionStatus.Initializing, status);
         })
@@ -230,7 +238,6 @@ export function devicePlugin(client: DevicePluginClient) {
       // load it, if the flag is set
       devToolsInstance = getDevToolsModule();
     } else {
-      console.log('Found global React DevTools: ', path);
       useGlobalDevTools.set(false); // disable in case it was enabled
     }
   });