diff --git a/android/src/main/java/com/facebook/flipper/plugins/react/ReactFlipperPlugin.java b/android/src/main/java/com/facebook/flipper/plugins/react/ReactFlipperPlugin.java index 6b5305921..16cc0cd8f 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/react/ReactFlipperPlugin.java +++ b/android/src/main/java/com/facebook/flipper/plugins/react/ReactFlipperPlugin.java @@ -7,17 +7,14 @@ package com.facebook.flipper.plugins.react; -import androidx.annotation.Nullable; import com.facebook.flipper.core.FlipperConnection; -import com.facebook.flipper.core.FlipperObject; import com.facebook.flipper.core.FlipperPlugin; -import com.facebook.flipper.core.FlipperReceiver; -import com.facebook.flipper.core.FlipperResponder; +// This plugin is not needed, but kept here for backward compatilibty +@Deprecated public class ReactFlipperPlugin implements FlipperPlugin { public static final String ID = "React"; - @Nullable private FlipperConnection mConnection; @Override public String getId() { @@ -25,22 +22,10 @@ public class ReactFlipperPlugin implements FlipperPlugin { } @Override - public void onConnect(FlipperConnection connection) { - mConnection = connection; - connection.receive( - "config", - new FlipperReceiver() { - @Override - public void onReceive(final FlipperObject params, FlipperResponder responder) { - // set received host and port in react-native - } - }); - } + public void onConnect(FlipperConnection connection) {} @Override - public void onDisconnect() { - mConnection = null; - } + public void onDisconnect() {} @Override public boolean runInBackground() { diff --git a/iOS/Plugins/FlipperKitReactPlugin/FlipperKitReactPlugin/FlipperKitReactPlugin.m b/iOS/Plugins/FlipperKitReactPlugin/FlipperKitReactPlugin/FlipperKitReactPlugin.m index 8f9d7597a..f30446330 100644 --- a/iOS/Plugins/FlipperKitReactPlugin/FlipperKitReactPlugin/FlipperKitReactPlugin.m +++ b/iOS/Plugins/FlipperKitReactPlugin/FlipperKitReactPlugin/FlipperKitReactPlugin.m @@ -13,6 +13,7 @@ #import #import +// This class is no longer needed, but kept here for backward compatibility @implementation FlipperKitReactPlugin - (NSString*)identifier { @@ -20,10 +21,6 @@ } - (void)didConnect:(id)connection { - [connection receive:@"config" - withBlock:^(NSDictionary* params, id responder){ - // set received port and host to dev tools - }]; } - (void)didDisconnect { diff --git a/src/devices/MetroDevice.tsx b/src/devices/MetroDevice.tsx index a6e7cfb43..d038fc1c2 100644 --- a/src/devices/MetroDevice.tsx +++ b/src/devices/MetroDevice.tsx @@ -140,14 +140,16 @@ function getLoglevelFromMessageType( } export default class MetroDevice extends BaseDevice { - ws: WebSocket; + ws?: WebSocket; metroEventEmitter = new EventEmitter(); - constructor(serial: string, ws: WebSocket) { + constructor(serial: string, ws: WebSocket | undefined) { super(serial, 'emulator', 'React Native', 'Metro'); - this.ws = ws; this.devicePlugins = []; - ws.onmessage = this._handleWSMessage; + if (ws) { + this.ws = ws; + ws.onmessage = this._handleWSMessage; + } } private _handleWSMessage = ({data}: any) => { diff --git a/src/dispatcher/metroDevice.tsx b/src/dispatcher/metroDevice.tsx index 11733b5b8..d0a5bf68a 100644 --- a/src/dispatcher/metroDevice.tsx +++ b/src/dispatcher/metroDevice.tsx @@ -31,7 +31,11 @@ async function isMetroRunning(): Promise { } } -async function registerDevice(ws: WebSocket, store: Store, logger: Logger) { +async function registerDevice( + ws: WebSocket | undefined, + store: Store, + logger: Logger, +) { const metroDevice = new MetroDevice(METRO_DEVICE_ID, ws); logger.track('usage', 'register-device', { os: 'Metro', @@ -117,6 +121,7 @@ export default (store: Store, logger: Logger) => { urgent: true, }, }); + registerDevice(undefined, store, logger); // Note: no scheduleNext, we won't retry until restart }, 5000); } else { diff --git a/src/plugins/reactdevtools/index.tsx b/src/plugins/reactdevtools/index.tsx index 8975b8475..5c8504701 100644 --- a/src/plugins/reactdevtools/index.tsx +++ b/src/plugins/reactdevtools/index.tsx @@ -7,10 +7,9 @@ * @format */ -// import {ReactReduxContext} from 'react-redux'; import ReactDevToolsStandalone from 'react-devtools-core/standalone'; import { - FlipperPlugin, + FlipperDevicePlugin, AndroidDevice, styled, View, @@ -18,10 +17,10 @@ import { MetroDevice, ReduxState, connect, + Device, } from 'flipper'; import React, {useEffect} from 'react'; import getPort from 'get-port'; -import address from 'address'; const Container = styled.div({ display: 'flex', @@ -87,17 +86,24 @@ const GrabMetroDevice = connect< return null; }); -export default class ReactDevTools extends FlipperPlugin< +const SUPPORTED_OCULUS_DEVICE_TYPES = ['quest', 'go', 'pacific']; + +export default class ReactDevTools extends FlipperDevicePlugin< { status: string; }, any, {} > { + static supportsDevice(device: Device) { + return !device.isArchived && device.os === 'Metro'; + } + pollHandle?: NodeJS.Timeout; containerRef: React.RefObject = React.createRef(); triedToAutoConnect = false; metroDevice?: MetroDevice; + isMounted = true; state = { status: 'initializing', @@ -124,6 +130,7 @@ export default class ReactDevTools extends FlipperPlugin< } componentWillUnmount() { + this.isMounted = false; if (this.pollHandle) { clearTimeout(this.pollHandle); } @@ -132,7 +139,9 @@ export default class ReactDevTools extends FlipperPlugin< } setStatus(status: string) { - // console.log(`[ReactDevtoolsPlugin] ${status}`); + if (!this.isMounted) { + return; + } if (status.startsWith('The server is listening on')) { this.setState({status: status + ' Waiting for connection...'}); } else { @@ -142,6 +151,9 @@ export default class ReactDevTools extends FlipperPlugin< startPollForConnection() { this.pollHandle = setTimeout(() => { + if (!this.isMounted) { + return false; + } if (findDevToolsNode()?.innerHTML) { this.setStatus(CONNECTED); } else { @@ -150,7 +162,7 @@ export default class ReactDevTools extends FlipperPlugin< this.setStatus( "The DevTools didn't connect yet. Please open the DevMenu in the React Native app, or Reload it to connect", ); - if (this.metroDevice) { + if (this.metroDevice && this.metroDevice.ws) { this.setStatus( "Sending 'reload' to the Metro to force the DevTools to connect...", ); @@ -173,20 +185,13 @@ export default class ReactDevTools extends FlipperPlugin< }) .startServer(port); this.setStatus('Waiting for device'); - const device = await this.getDevice(); + const device = this.device; if (device) { - const host = - device.deviceType === 'physical' - ? address.ip() - : device instanceof AndroidDevice - ? '10.0.2.2' // Host IP for Android emulator host system - : 'localhost'; - this.setStatus(`Updating config to ${host}:${port}`); - this.client.call('config', {port, host}); - - if (['quest', 'go', 'pacific'].includes(device.title.toLowerCase())) { - const device = await this.getDevice(); + if ( + device.deviceType === 'physical' || + SUPPORTED_OCULUS_DEVICE_TYPES.includes(device.title.toLowerCase()) + ) { this.setStatus(`Setting up reverse port mapping: ${port}:${port}`); (device as AndroidDevice).reverse([port, port]); }