From 1adee6f62e8e36320bc7c5f4a312bf422078cebf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Mar 2021 12:00:26 -0400
Subject: [PATCH 1/2] Iterating on Replay integration

---
 .../react-devtools-inline/src/frontend.js     | 57 ++++++++++++++-----
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 3972f1789ab..ebd57022e69 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -16,11 +16,47 @@ import {
   MESSAGE_TYPE_SAVED_PREFERENCES,
 } from './constants';
 
+import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
+export function createStore(bridge: FrontendBridge): Store {
+  return new Store(bridge, {supportsTraceUpdates: true});
+}
+
+export function createBridge(
+  contentWindow: window,
+  wall?: Wall,
+): FrontendBridge {
+  if (wall == null) {
+    wall = {
+      listen(fn) {
+        const onMessage = ({data}) => {
+          fn(data);
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+          window.removeEventListener('message', onMessage);
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        contentWindow.postMessage({event, payload}, '*', transferable);
+      },
+    };
+  }
+
+  return (new Bridge(wall): FrontendBridge);
+}
+
 export function initialize(
   contentWindow: window,
+  {
+    bridge,
+    store,
+  }: {|
+    bridge?: FrontendBridge,
+    store?: Store,
+  |} = {},
 ): React.AbstractComponent<Props, mixed> {
   const onGetSavedPreferencesMessage = ({data, source}) => {
     if (source === 'react-devtools-content-script') {
@@ -54,22 +90,13 @@ export function initialize(
 
   window.addEventListener('message', onGetSavedPreferencesMessage);
 
-  const bridge: FrontendBridge = new Bridge({
-    listen(fn) {
-      const onMessage = ({data}) => {
-        fn(data);
-      };
-      window.addEventListener('message', onMessage);
-      return () => {
-        window.removeEventListener('message', onMessage);
-      };
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      contentWindow.postMessage({event, payload}, '*', transferable);
-    },
-  });
+  if (bridge == null) {
+    bridge = createBridge();
+  }
 
-  const store: Store = new Store(bridge, {supportsTraceUpdates: true});
+  if (store == null) {
+    store = createStore(bridge);
+  }
 
   const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
     <DevTools ref={ref} bridge={bridge} store={store} {...props} />

From 237f3c94b38645007a6ce3161b0618fca9e760c4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Apr 2021 16:49:40 -0400
Subject: [PATCH 2/2] Updated package versins and README

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +--
 .../edge/manifest.json                        |  4 +--
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/README.md      | 34 +++++++++++++++++++
 packages/react-devtools-inline/package.json   |  2 +-
 packages/react-devtools/CHANGELOG.md          |  7 +++-
 packages/react-devtools/package.json          |  4 +--
 8 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 9a8fff2e8e2..39947c4177b 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 0ce9f5470de..64f3c0afe23 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.11.0",
-  "version_name": "4.11.0",
+  "version": "4.12.0",
+  "version_name": "4.12.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index be01541b815..d78048924e4 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.11.0",
-  "version_name": "4.11.0",
+  "version": "4.12.0",
+  "version_name": "4.12.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 9cb050fa855..fa8dc48ca41 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.11.0",
+  "version": "4.12.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index eecd3f99eba..c523ed3107e 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -153,6 +153,40 @@ iframe.onload = () => {
 };
 ```
 
+### Advanced integration with custom "wall"
+
+Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
+
+```js
+import {
+  createBridge,
+  createStore,
+  initialize as createDevTools,
+} from "react-devtools-inline/frontend";
+
+// Custom Wall implementation enables serializing data
+// using an API other than window.postMessage()
+// For example...
+const wall = {
+  emit() {},
+  listen(listener) {
+    wall._listener = listener;
+  },
+  async send(event, payload) {
+    const response = await fetch(...).json();
+    wall._listener(response);
+  },
+};
+
+// Create a Bridge and Store that use the custom Wall.
+const bridge = createBridge(target, wall);
+const store = createStore(bridge);
+const DevTools = createDevTools(target, { bridge, store });
+
+// Render DevTools with it.
+<DevTools {...otherProps} />;
+```
+
 ## Local development
 You can also build and test this package from source.
 
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a7a4525ccbc..334c65e51ea 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.11.1",
+  "version": "4.12.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 1e9df0db7c0..3d83a269dce 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,9 +9,14 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.12.0 (April 12, 2021)
+Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
+#### Feature
+* Added `createBridge` and `createStore` exports to the `react-devtools-inline/frontend` entrypoint to support advanced use cases ([bvaughn](https://github.com/bvaughn) in [#21032](https://github.com/facebook/react/pull/21032))
+
 ## 4.11.1 (April 11, 2021)
 #### Bugfix
-* Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21235](https://github.com/facebook/react/issues/21235))
+* Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21237](https://github.com/facebook/react/pull/21237))
 
 ## 4.11.0 (April 9, 2021)
 #### Bugfix
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 15e71cf7c38..593850e753d 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.11.0",
+    "react-devtools-core": "4.12.0",
     "update-notifier": "^2.1.0"
   }
 }
