Updated README docs, example screenshots, etc
Brian Vaughn committed
Aug 27, 2019 at 15:20 UTC
bc8b15332b5f10a96135a5e3527833fb7cc8efeb
5 files changed
+66
-20
packages/react-devtools-core/README.md
+15
-6
@@ -12,20 +12,17 @@ This is similar requiring the `react-devtools` package, but provides several con
12
13
```js
14
const { connectToDevTools } = require("react-devtools-core");
15
-connectToDevTools({
16
- // Config options
17
-});
18
-
15
+connectToDevTools(config);
16
```
17
18
Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.
19
Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
20
24
-The `options` object may contain:
21
+The `config` object may contain:
22
* `host: string` (defaults to "localhost") - Websocket will connect to this host.
23
* `port: number` (defaults to `8097`) - Websocket will connect to this port.
24
* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
28
-* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
25
+* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
26
* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
27
28
## `react-devtools-core/standalone`
@@ -42,3 +39,15 @@ require("react-devtools-core/standalone")
39
```
40
41
Reference the `react-devtools` package for a complete integration example.
42
+
43
+## Development
44
+
45
+Watch for changes made to the backend entry point and rebuild:
46
+```sh
47
+yarn start:backend
48
+```
49
+
50
+Watch for changes made to the standalone UI entry point and rebuild:
51
+```sh
52
+yarn start:standalone
53
+```
\ No newline at end of file
packages/react-devtools-extensions/README.md
+9
-4
@@ -1,17 +1,22 @@
1
This is the source code for the React DevTools browser extension.
2
3
-# Installation
3
+## Installation
4
5
The easiest way to install this extension is as a browser add-on:
6
* [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
7
* [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
8
9
-# Build
9
+## Development
10
11
You can also build and install from source:
12
```sh
13
yarn install
14
15
-yarn build:chrome # builds at "packages/react-devtools-extensions/chrome/build"
16
-yarn build:firefox # builds at "packages/react-devtools-extensions/firefox/build"
15
+cd packages/react-devtools-extensions/
16
+
17
+yarn build:chrome # => packages/react-devtools-extensions/chrome/build
18
+yarn run test:chrome # Test Chrome extension
19
+
20
+yarn build:firefox # => packages/react-devtools-extensions/firefox/build
21
+yarn run test:firefox # Test Firefox extension
22
```
packages/react-devtools-inline/README.md
+20
-5
@@ -21,24 +21,32 @@ The frontend and backend can be initialized in any order, but **the backend must
21
### `react-devtools-inline/backend`
22
23
* **`initialize(contentWindow)`** -
24
-Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.** (This means before any `import` or `require` statements!)
24
+Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
25
* **`activate(contentWindow)`** -
26
Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
27
28
```js
29
import { activate, initialize } from 'react-devtools-inline/backend';
30
31
+// This should be the iframe the React application is running in.
32
+const iframe = document.getElementById(frameID);
33
+const contentWindow = iframe.contentWindow;
34
+
35
// Call this before importing React (or any other packages that might import React).
32
-initialize();
36
+initialize(contentWindow);
37
+
38
+// Initialize the frontend...
39
40
// Call this only once the frontend has been initialized.
35
-activate();
41
+activate(contentWindow);
42
```
43
44
+<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
45
+
46
### `react-devtools-inline/frontend`
47
48
* **`initialize(contentWindow)`** -
41
-Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
49
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
50
51
```js
52
import { initialize } from 'react-devtools-inline/frontend';
@@ -52,7 +60,7 @@ const contentWindow = iframe.contentWindow;
60
const DevTools = initialize(contentWindow);
61
```
62
55
-<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
63
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
64
65
## Examples
66
@@ -143,4 +151,11 @@ iframe.onload = () => {
151
"*"
152
);
153
};
154
+```
155
+
156
+## Development
157
+
158
+Watch for changes made to the source code and rebuild:
159
+```sh
160
+yarn start
161
```
\ No newline at end of file
packages/react-devtools-shell/README.md
+17
-1
@@ -1 +1,17 @@
1
-Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
\ No newline at end of file
1
+Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
2
+
3
+## Development
4
+
5
+This target should be run in parallel with the `react-devtools-inline` package. The first step then is to watch for changes to that target:
6
+```sh
7
+cd packages/react-devtools-inline
8
+
9
+yarn start
10
+```
11
+
12
+Next, watch for changes to the test harness:
13
+```sh
14
+cd packages/react-devtools-shell
15
+
16
+yarn start
17
+```
packages/react-devtools/README.md
+5
-4
@@ -4,7 +4,7 @@ React DevTools is available as a built-in extension for Chrome and Firefox brows
4
5
It works both with React DOM and React Native.
6
7
-<img src="http://i.imgur.com/IXeHiZD.png" width="600" alt="Screenshot of React DevTools running with React Native">
7
+
8
9
## Installation
10
Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
@@ -47,7 +47,8 @@ You can open the [in-app developer menu](https://facebook.github.io/react-native
47
48
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:
49
50
-
50
+
51
+
52
53
You can choose "Hide Inspector" in the same menu to exit this mode.
54
@@ -61,7 +62,7 @@ Make sure that the dropdown in the top left corner of the Chrome console says `d
62
63
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.
64
64
-
65
+
66
67
68
## Usage with React DOM
@@ -90,7 +91,7 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
91
92
By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
93
93
-## Developing
94
+## Development
95
96
* Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core`
97
* Run `yarn start` in this folder