Add connectToDevTools(options) for React Native

backend/websocketConnect.js

@@ -10,13 +10,14 @@
  */
 'use strict';
 
-function websocketConnect(uri: string, WebSocket?: (val: string) => Object) {
-  WebSocket = WebSocket || window.WebSocket;
+function websocketConnect(host: string, port: number, resolveRNStyle: Function | null) {
   var messageListeners = [];
   var closeListeners = [];
-  var ws = new WebSocket(uri);
+  var uri = 'ws://' + host + ':' + port;
+  var ws = new window.WebSocket(uri);
   // this is accessed by the eval'd backend code
   var FOR_BACKEND = { // eslint-disable-line no-unused-vars
+    resolveRNStyle,
     wall: {
       listen(fn) {
         messageListeners.push(fn);

packages/react-devtools-core/README.md

@@ -2,15 +2,26 @@
 
 A standalone React DevTools implementation.  
 
-This is a low-level package.
+This is a low-level package.  
 **If you're looking for the Electron app you can run, use `react-devtools` package instead.**
 
 ## Exports
 
-## `require('react-devtools-core')`
+## `require('react-devtools-core').connectToDevTools(options)`
 
-The code that needs to run in the same context as React, and initialized before React.
-It will connect to the DevTools.
+This is similar to `require('react-devtools')` in another package but providing more control.  
+Unlike `require('react-devtools')`, it doesn't connect immediately, but exports a function.
+
+Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.  
+Make sure this runs *before* any `react`, `react-dom`, or `react-native` imports.
+
+The `options` object may contain:
+
+* `host` (string), defaults to `'localhost'`.
+* `port` (number), defaults to `8097`.
+* `resolveRNStyle` (function), used by RN and `null` by default.
+
+None of the options are required.
 
 ## `require('react-devtools-core/standalone')`
 
@@ -24,4 +35,4 @@ require('react-devtools-core/standalone')
   .startServer(port);
 ```
 
-You check the Electron shell in `packages/react-devtools` for a complete integration example.
+You can check the Electron shell in `react-devtools` package for a complete integration example.

packages/react-devtools-core/package.json

@@ -14,9 +14,10 @@
   ],
   "scripts": {
     "backend": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.backend.js",
-    "standalone": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.config.js",
-    "standalone:watch": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.config.js --watch",
-    "build": "npm run backend && npm run standalone"
+    "embed": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.embed.js",
+    "standalone": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.standalone.js",
+    "standalone:watch": "NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.standalone.js --watch",
+    "build": "npm run backend && npm run embed && npm run standalone"
   },
   "author": "Jared Forsyth",
   "license": "BSD-3-Clause",

packages/react-devtools-core/src/backend.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-// See https://github.com/facebook/react-native/blob/b00c77af8066cf74f05ccaca2b08c8952e1ae8a6/Libraries/Devtools/setupDevtools.js#L19
+// This object is set up by websocketConnect() that is called from ./embed.js.
 declare var FOR_BACKEND: {
   wall: Object;
   resolveRNStyle: () => void;

packages/react-devtools-core/src/embed.js

@@ -10,15 +10,32 @@
  */
 'use strict';
 
+type ConnectOptions = {
+  host?: string,
+  port?: number,
+  resolveRNStyle?: (style: number) => ?Object,
+};
+
 var globalHook = require('../../../backend/installGlobalHook');
-globalHook(window);
 var websocketConnect = require('../../../backend/websocketConnect');
 
-websocketConnect('ws://localhost:8097/');
-
+globalHook(window);
 if (window.document) {
   window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', agent => {
     var setupHighlighter = require('../../../frontend/Highlighter/setup');
     setupHighlighter(agent);
   });
 }
+
+function connectToDevTools(options: ?ConnectOptions) {
+  var {
+    host = 'localhost',
+    port = 8097,
+    resolveRNStyle = null,
+  } = options || {};
+  websocketConnect(host, port, resolveRNStyle);
+}
+
+module.exports = {
+  connectToDevTools
+};

packages/react-devtools-core/src/standalone.js

@@ -131,7 +131,8 @@ function startServer(port = 8097) {
     path.join(__dirname, '../build/embed.js')
   );
   httpServer.on('request', (req, res) => {
-    res.end(embedFile);
+    // Serve a file that immediately sets up the connection.
+    res.end(embedFile + '\n' + ';ReactDevToolsEmbed.connectToDevTools();');
   });
 
   httpServer.on('error', (e) => {

packages/react-devtools-core/webpack.backend.js

@@ -17,7 +17,6 @@ module.exports = {
   devtool: 'source-map',
   entry: {
     backend: './src/backend.js',
-    embed: './src/embed.js',
   },
   output: {
     path: __dirname + '/build', // eslint-disable-line no-path-concat

packages/react-devtools-core/webpack.embed.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+var webpack = require('webpack');
+var __DEV__ = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  debug: true,
+  devtool: 'source-map',
+  entry: {
+    embed: './src/embed.js',
+  },
+  output: {
+    path: __dirname + '/build', // eslint-disable-line no-path-concat
+    filename: '[name].js',
+    library: 'ReactDevToolsEmbed',
+    libraryTarget: 'umd'
+  },
+  plugins: __DEV__ ? [] : [
+    // Ensure we get production React
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"',
+    }),
+    // Remove dead code but keep it readable:
+    new webpack.optimize.UglifyJsPlugin({
+      mangle: false,
+      beautify: true,
+    }),
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader: 'babel',
+      exclude: /node_modules/,
+    }],
+  },
+};
+

packages/react-devtools/README.md

@@ -18,11 +18,11 @@ import React, {Component} from 'react'
 ```
 
 3) Profit!
-Make sure that your `react-devtools` import comes *before* your `react`
-import.
+Make sure that your `react-devtools` import comes *before* your `react`, `react-dom`, or `react-native`
+imports.
 
-## Usage with non-localhost
-This is not supported yet - stay tuned!
+## Advanced
+If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
 
 ## Developing
 

packages/react-devtools/index.js

@@ -1 +1,4 @@
-module.exports = require('react-devtools-core');
+var {connectToDevTools} = require('react-devtools-core');
+// Connect immediately with default options.
+// If you need more control, use `react-devtools-core` directly instead of `react-devtools`.
+connectToDevTools();