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