jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Flipper DevTools plugin to use internal build

Browse Source 
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
This commit is contained in:
Juan Tejada
2021-12-06 12:40:16 -08:00
committed by Facebook GitHub Bot
parent 5a0627fdc3
commit 618670d00a
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
desktop/plugins/public/reactdevtools/index.tsx
View File

@@ -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
}
});