diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md new file mode 100644 index 0000000000000..6f45a6f2ea44b --- /dev/null +++ b/packages/react-devtools-core/README.md @@ -0,0 +1,44 @@ +# `react-devtools-core` + +A standalone React DevTools implementation. + +This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.** + +## API + +### `react-devtools-core` + +This is similar requiring the `react-devtools` package, but provides several configurable options. Unlike `react-devtools`, requiring `react-devtools-core` doesn't connect immediately but instead exports a function: + +```js +const { connectToDevTools } = require("react-devtools-core"); +connectToDevTools({ + // Config options +}); + +``` + +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: +* `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. +* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React. + +## `react-devtools-core/standalone` + +Renders the DevTools interface into a DOM node. + +```js +require("react-devtools-core/standalone") + .setContentDOMNode(document.getElementById("container")) + .setStatusListener(status => { + // This callback is optional... + }) + .startServer(port); +``` + +Reference the `react-devtools` package for a complete integration example. \ No newline at end of file diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md new file mode 100644 index 0000000000000..33cc4afa8b3d8 --- /dev/null +++ b/packages/react-devtools-inline/README.md @@ -0,0 +1,146 @@ +# `react-devtools-inline` + +React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https://codesandbox.io/), [StackBlitz](https://stackblitz.com/)). + +This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.** + +## Usage + +This package exports two entry points: a frontend (to be run in the main `window`) and a backend (to be installed and run within an `iframe`1). + +The frontend and backend can be initialized in any order, but **the backend must not be activated until after the frontend has been initialized**. Because of this, the simplest sequence is: + +1. Frontend (DevTools interface) initialized in the main `window`. +1. Backend initialized in an `iframe`. +1. Backend activated. + +1 Sandboxed iframes are supported. + +## API + +### `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!) +* **`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'; + +// Call this before importing React (or any other packages that might import React). +initialize(); + +// Call this only once the frontend has been initialized. +activate(); +``` + +### `react-devtools-inline/frontend` + +* **`initialize(contentWindow)`** - +Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly2. + +```js +import { initialize } from 'react-devtools-inline/frontend'; + +// This should be the iframe the backend hook has been installed in. +const iframe = document.getElementById(frameID); +const contentWindow = iframe.contentWindow; + +// This returns a React component that can be rendered into your app. +// +const DevTools = initialize(contentWindow); +``` + +2 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`. + +## Examples + +### Configuring a same-origin `iframe` + +The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions. + +```js +import { + activate as activateBackend, + initialize as initializeBackend +} from 'react-devtools-inline/backend'; +import { initialize as initializeFrontend } from 'react-devtools-inline/frontend'; + +// The React app you want to inspect with DevTools is running within this iframe: +const iframe = document.getElementById('target'); +const { contentWindow } = iframe; + +// Installs the global hook into the iframe. +// This must be called before React is loaded into that frame. +initializeBackend(contentWindow); + +// React application can be injected into