mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Robert Balicki
a9bed8e75d
Summary: # What * Pass the DevTools Settings Manager to connectToDevTools. * This is an object that provides write and synchronized read access to on-device storage, that React DevTools will use during startup. * This allows us to persist settings like whether to show component stacks on error, and on restart, behave correctly. In the future, this will be used to power the "restart and profile" flow. Changelog [General][Added] Pass DevTools Settings Manager to connectToDevTools Reviewed By: lunaruan Differential Revision: D40880260 fbshipit-source-id: 379a2c93b4cde0360e6fd380d837f426943bfa9e
83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
if (__DEV__) {
|
|
let isWebSocketOpen = false;
|
|
let ws = null;
|
|
|
|
const reactDevTools = require('react-devtools-core');
|
|
const connectToDevTools = () => {
|
|
if (ws !== null && isWebSocketOpen) {
|
|
// If the DevTools backend is already connected, don't recreate the WebSocket.
|
|
// This would break the connection.
|
|
// If there isn't an active connection, a backend may be waiting to connect,
|
|
// in which case it's okay to make a new one.
|
|
return;
|
|
}
|
|
|
|
// not when debugging in chrome
|
|
// TODO(t12832058) This check is broken
|
|
if (!window.document) {
|
|
const AppState = require('../AppState/AppState');
|
|
const getDevServer = require('./Devtools/getDevServer');
|
|
|
|
// Don't steal the DevTools from currently active app.
|
|
// Note: if you add any AppState subscriptions to this file,
|
|
// you will also need to guard against `AppState.isAvailable`,
|
|
// or the code will throw for bundles that don't have it.
|
|
const isAppActive = () => AppState.currentState !== 'background';
|
|
|
|
// Get hostname from development server (packager)
|
|
const devServer = getDevServer();
|
|
const host = devServer.bundleLoadedFromServer
|
|
? devServer.url
|
|
.replace(/https?:\/\//, '')
|
|
.replace(/\/$/, '')
|
|
.split(':')[0]
|
|
: 'localhost';
|
|
|
|
// Read the optional global variable for backward compatibility.
|
|
// It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
|
|
const port =
|
|
window.__REACT_DEVTOOLS_PORT__ != null
|
|
? window.__REACT_DEVTOOLS_PORT__
|
|
: 8097;
|
|
|
|
const WebSocket = require('../WebSocket/WebSocket');
|
|
ws = new WebSocket('ws://' + host + ':' + port);
|
|
ws.addEventListener('close', event => {
|
|
isWebSocketOpen = false;
|
|
});
|
|
ws.addEventListener('open', event => {
|
|
isWebSocketOpen = true;
|
|
});
|
|
|
|
const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
|
|
const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
|
|
|
|
reactDevTools.connectToDevTools({
|
|
isAppActive,
|
|
resolveRNStyle: require('../StyleSheet/flattenStyle'),
|
|
nativeStyleEditorValidAttributes: Object.keys(
|
|
ReactNativeStyleAttributes,
|
|
),
|
|
websocket: ws,
|
|
devToolsSettingsManager,
|
|
});
|
|
}
|
|
};
|
|
|
|
const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
|
|
RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
|
|
connectToDevTools(); // Try connecting once on load
|
|
}
|