) {
+ projectRoots = value;
+}
+
+function setStatusListener(value: StatusListener) {
+ statusListener = value;
+ return DevtoolsUI;
+}
+
+let bridge: Bridge | null = null;
+let store: Store | null = null;
+let root = null;
+
+const log = (...args) => console.log('[React DevTools]', ...args);
+log.warn = (...args) => console.warn('[React DevTools]', ...args);
+log.error = (...args) => console.error('[React DevTools]', ...args);
+
+function debug(methodName: string, ...args) {
+ if (__DEBUG__) {
+ console.log(
+ `%c[core/standalone] %c${methodName}`,
+ 'color: teal; font-weight: bold;',
+ 'font-weight: bold;',
+ ...args
+ );
+ }
+}
+
+function safeUnmount() {
+ flushSync(() => {
+ if (root !== null) {
+ root.unmount();
+ }
+ });
+ root = null;
+}
+
+function reload() {
+ safeUnmount();
+
+ node.innerHTML = '';
+
+ setTimeout(() => {
+ root = createRoot(node);
+ root.render(
+ createElement(DevTools, {
+ bridge: ((bridge: any): Bridge),
+ showTabBar: true,
+ store: ((store: any): Store),
+ viewElementSourceFunction,
+ viewElementSourceRequiresFileLocation: true,
+ })
+ );
+ }, 100);
+}
+
+function viewElementSourceFunction(
+ id: number,
+ inspectedElement: InspectedElement
+): void {
+ const { source } = inspectedElement;
+ if (source !== null) {
+ launchEditor(source.fileName, source.lineNumber, projectRoots);
+ } else {
+ log.error('Cannot inspect element', id);
+ }
+}
+
+function onDisconnected() {
+ safeUnmount();
+
+ node.innerHTML = nodeWaitingToConnectHTML;
+}
+
+function onError({ code, message }) {
+ safeUnmount();
+
+ if (code === 'EADDRINUSE') {
+ node.innerHTML = `Another instance of DevTools is running
`;
+ } else {
+ node.innerHTML = `Unknown error (${message})
`;
+ }
+}
+
+function initialize(socket: WebSocket) {
+ const listeners = [];
+ socket.onmessage = event => {
+ let data;
+ try {
+ if (typeof event.data === 'string') {
+ data = JSON.parse(event.data);
+
+ if (__DEBUG__) {
+ debug('WebSocket.onmessage', data);
+ }
+ } else {
+ throw Error();
+ }
+ } catch (e) {
+ log.error('Failed to parse JSON', event.data);
+ return;
+ }
+ listeners.forEach(fn => {
+ try {
+ fn(data);
+ } catch (error) {
+ log.error('Error calling listener', data);
+ throw error;
+ }
+ });
+ };
+
+ bridge = new Bridge({
+ listen(fn) {
+ listeners.push(fn);
+ return () => {
+ const index = listeners.indexOf(fn);
+ if (index >= 0) {
+ listeners.splice(index, 1);
+ }
+ };
+ },
+ send(event: string, payload: any, transferable?: Array) {
+ if (socket.readyState === socket.OPEN) {
+ socket.send(JSON.stringify({ event, payload }));
+ }
+ },
+ });
+ ((bridge: any): Bridge).addListener('shutdown', () => {
+ socket.close();
+ });
+
+ store = new Store(bridge, { supportsNativeInspection: false });
+
+ log('Connected');
+ reload();
+}
+
+let startServerTimeoutID: TimeoutID | null = null;
+
+function connectToSocket(socket: WebSocket) {
+ socket.onerror = err => {
+ onDisconnected();
+ log.error('Error with websocket connection', err);
+ };
+ socket.onclose = () => {
+ onDisconnected();
+ log('Connection to RN closed');
+ };
+ initialize(socket);
+
+ return {
+ close: function() {
+ onDisconnected();
+ },
+ };
+}
+
+function startServer(port?: number = 8097) {
+ const httpServer = require('http').createServer();
+ const server = new Server({ server: httpServer });
+ let connected: WebSocket | null = null;
+ server.on('connection', (socket: WebSocket) => {
+ if (connected !== null) {
+ connected.close();
+ log.warn(
+ 'Only one connection allowed at a time.',
+ 'Closing the previous connection'
+ );
+ }
+ connected = socket;
+ socket.onerror = error => {
+ connected = null;
+ onDisconnected();
+ log.error('Error with websocket connection', error);
+ };
+ socket.onclose = () => {
+ connected = null;
+ onDisconnected();
+ log('Connection to RN closed');
+ };
+ initialize(socket);
+ });
+
+ server.on('error', event => {
+ onError(event);
+ log.error('Failed to start the DevTools server', event);
+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+ });
+
+ httpServer.on('request', (request, response) => {
+ // NPM installs should read from node_modules,
+ // But local dev mode needs to use a relative path.
+ const basePath = existsSync('./node_modules/react-devtools-core')
+ ? 'node_modules/react-devtools-core'
+ : '../react-devtools-core';
+
+ // Serve a file that immediately sets up the connection.
+ const backendFile = readFileSync(`${basePath}/dist/backend.js`);
+
+ // The renderer interface doesn't read saved component filters directly,
+ // because they are generally stored in localStorage within the context of the extension.
+ // Because of this it relies on the extension to pass filters, so include them wth the response here.
+ // This will ensure that saved filters are shared across different web pages.
+ const savedFiltersString = `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+ getSavedComponentFilters()
+ )};`;
+
+ response.end(
+ savedFiltersString +
+ '\n;' +
+ backendFile.toString() +
+ '\n;' +
+ 'ReactDevToolsBackend.connectToDevTools();'
+ );
+ });
+
+ httpServer.on('error', event => {
+ onError(event);
+ statusListener('Failed to start the server.');
+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);
+ });
+
+ httpServer.listen(port, () => {
+ statusListener('The server is listening on the port ' + port + '.');
+ });
+
+ return {
+ close: function() {
+ connected = null;
+ onDisconnected();
+ clearTimeout(startServerTimeoutID);
+ server.close();
+ httpServer.close();
+ },
+ };
+}
+
+const DevtoolsUI = {
+ connectToSocket,
+ setContentDOMNode,
+ setProjectRoots,
+ setStatusListener,
+ startServer,
+};
+
+export default DevtoolsUI;
diff --git a/packages/react-devtools-core/standalone.js b/packages/react-devtools-core/standalone.js
new file mode 100644
index 000000000000..fe55aa11d5d4
--- /dev/null
+++ b/packages/react-devtools-core/standalone.js
@@ -0,0 +1 @@
+module.exports = require('./dist/standalone');
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
new file mode 100644
index 000000000000..3103abdd6bcf
--- /dev/null
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -0,0 +1,53 @@
+const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../shells/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+ console.error('NODE_ENV not set');
+ process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
+
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+ mode: 'development', // TODO TESTING __DEV__ ? 'development' : 'production',
+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+ entry: {
+ backend: './src/backend.js',
+ },
+ output: {
+ path: __dirname + '/dist',
+ filename: '[name].js',
+
+ // This name is important; standalone references it in order to connect.
+ library: 'ReactDevToolsBackend',
+ libraryTarget: 'umd',
+ },
+ resolve: {
+ alias: {
+ src: resolve(__dirname, '../../src'),
+ },
+ },
+ plugins: [
+ new DefinePlugin({
+ __DEV__: true,
+ 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+ 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+ }),
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ options: {
+ configFile: resolve(__dirname, '../../babel.config.js'),
+ },
+ },
+ ],
+ },
+};
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
new file mode 100644
index 000000000000..b21dfe5180b2
--- /dev/null
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -0,0 +1,69 @@
+const { resolve } = require('path');
+const { DefinePlugin } = require('webpack');
+const { getGitHubURL, getVersionString } = require('../../shells/utils');
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+ console.error('NODE_ENV not set');
+ process.exit(1);
+}
+
+const __DEV__ = NODE_ENV === 'development';
+
+const GITHUB_URL = getGitHubURL();
+const DEVTOOLS_VERSION = getVersionString();
+
+module.exports = {
+ mode: __DEV__ ? 'development' : 'production',
+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+ target: 'electron-main',
+ entry: {
+ standalone: './src/standalone.js',
+ },
+ output: {
+ path: __dirname + '/dist',
+ filename: '[name].js',
+ library: '[name]',
+ libraryTarget: 'commonjs2',
+ },
+ resolve: {
+ alias: {
+ src: resolve(__dirname, '../../src'),
+ },
+ },
+ plugins: [
+ new DefinePlugin({
+ __DEV__: false,
+ 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+ 'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+ 'process.env.NODE_ENV': `"${NODE_ENV}"`,
+ }),
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ options: {
+ configFile: resolve(__dirname, '../../babel.config.js'),
+ },
+ },
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: 'style-loader',
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ sourceMap: true,
+ modules: true,
+ localIdentName: '[local]___[hash:base64:5]',
+ },
+ },
+ ],
+ },
+ ],
+ },
+};
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
new file mode 100644
index 000000000000..2220a6661d5b
--- /dev/null
+++ b/packages/react-devtools/README.md
@@ -0,0 +1,98 @@
+# `react-devtools`
+
+React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).
+
+It works both with React DOM and React Native.
+
+
+
+## Installation
+Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
+```sh
+# Yarn
+yarn global add react-devtools
+
+# NPM
+npm install -g react-devtools
+```
+
+If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:
+```sh
+yarn add --dev react-devtools
+```
+
+With NPM you can just use [NPX](https://www.npmjs.com/package/npx):
+```sh
+npx react-devtools
+```
+
+## Usage with React Native
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+If you're not in a simulator then you also need to run the following in a command prompt:
+```sh
+adb reverse tcp:8097 tcp:8097
+```
+
+If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.
+
+### Integration with React Native Inspector
+
+You can open the [in-app developer menu](https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+
+
+
+However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
+
+
+
+You can choose "Hide Inspector" in the same menu to exit this mode.
+
+### Inspecting Component Instances
+
+When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
+
+First, follow the [instructions for debugging in Chrome](https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools) to open the Chrome console.
+
+Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**
+
+Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
+
+
+
+
+## Usage with React DOM
+
+The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).
+
+Run `react-devtools` from the terminal to launch the standalone DevTools app:
+```sh
+react-devtools
+```
+
+Add `` as the very first `
+```
+
+This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**
+
+>If you install `react-devtools` as a project dependency, you may also replace the `
+