From bc8b15332b5f10a96135a5e3527833fb7cc8efeb Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 27 Aug 2019 15:20:34 -0700 Subject: [PATCH] Updated README docs, example screenshots, etc --- packages/react-devtools-core/README.md | 21 +++++++++++----- packages/react-devtools-extensions/README.md | 13 ++++++---- packages/react-devtools-inline/README.md | 25 ++++++++++++++++---- packages/react-devtools-shell/README.md | 18 +++++++++++++- packages/react-devtools/README.md | 9 +++---- 5 files changed, 66 insertions(+), 20 deletions(-) diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md index 35615b3074e4..73d05c351f15 100644 --- a/packages/react-devtools-core/README.md +++ b/packages/react-devtools-core/README.md @@ -12,20 +12,17 @@ This is similar requiring the `react-devtools` package, but provides several con ```js const { connectToDevTools } = require("react-devtools-core"); -connectToDevTools({ - // Config options -}); - +connectToDevTools(config); ``` Run `connectToDevTools()` in the same context as React to set up a connection to DevTools. Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`. -The `options` object may contain: +The `config` object may contain: * `host: string` (defaults to "localhost") - Websocket will connect to this host. * `port: number` (defaults to `8097`) - Websocket will connect to this port. * `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided. -* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in. +* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in. * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React. ## `react-devtools-core/standalone` @@ -42,3 +39,15 @@ require("react-devtools-core/standalone") ``` Reference the `react-devtools` package for a complete integration example. + +## Development + +Watch for changes made to the backend entry point and rebuild: +```sh +yarn start:backend +``` + +Watch for changes made to the standalone UI entry point and rebuild: +```sh +yarn start:standalone +``` \ No newline at end of file diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md index ead8f12ccdc2..263fe95d5578 100644 --- a/packages/react-devtools-extensions/README.md +++ b/packages/react-devtools-extensions/README.md @@ -1,17 +1,22 @@ This is the source code for the React DevTools browser extension. -# Installation +## Installation The easiest way to install this extension is as a browser add-on: * [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -# Build +## Development You can also build and install from source: ```sh yarn install -yarn build:chrome # builds at "packages/react-devtools-extensions/chrome/build" -yarn build:firefox # builds at "packages/react-devtools-extensions/firefox/build" +cd packages/react-devtools-extensions/ + +yarn build:chrome # => packages/react-devtools-extensions/chrome/build +yarn run test:chrome # Test Chrome extension + +yarn build:firefox # => packages/react-devtools-extensions/firefox/build +yarn run test:firefox # Test Firefox extension ``` diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md index 33cc4afa8b3d..2847bac8a939 100644 --- a/packages/react-devtools-inline/README.md +++ b/packages/react-devtools-inline/README.md @@ -21,24 +21,32 @@ The frontend and backend can be initialized in any order, but **the backend must ### `react-devtools-inline/backend` * **`initialize(contentWindow)`** - -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!) +Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**2 * **`activate(contentWindow)`** - 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. ```js import { activate, initialize } from 'react-devtools-inline/backend'; +// This should be the iframe the React application is running in. +const iframe = document.getElementById(frameID); +const contentWindow = iframe.contentWindow; + // Call this before importing React (or any other packages that might import React). -initialize(); +initialize(contentWindow); + +// Initialize the frontend... // Call this only once the frontend has been initialized. -activate(); +activate(contentWindow); ``` +2 The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `