Add createBridge and createStore exports to react-devtools-inline (for Replay integration) (#21032)
Brian Vaughn committed
Apr 12, 2021 at 17:07 UTC
84c06fef8168e779d15cc9450f67888445f7b4f4
9 files changed
+91
-25
packages/react-devtools-core/package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "react-devtools-core",
3
- "version": "4.11.0",
3
+ "version": "4.12.0",
4
"description": "Use react-devtools outside of the browser",
5
"license": "MIT",
6
"main": "./dist/backend.js",
packages/react-devtools-extensions/chrome/manifest.json
+2
-2
@@ -2,8 +2,8 @@
2
"manifest_version": 2,
3
"name": "React Developer Tools",
4
"description": "Adds React debugging tools to the Chrome Developer Tools.",
5
- "version": "4.11.0",
6
- "version_name": "4.11.0",
5
+ "version": "4.12.0",
6
+ "version_name": "4.12.0",
7
8
"minimum_chrome_version": "60",
9
packages/react-devtools-extensions/edge/manifest.json
+2
-2
@@ -2,8 +2,8 @@
2
"manifest_version": 2,
3
"name": "React Developer Tools",
4
"description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
5
- "version": "4.11.0",
6
- "version_name": "4.11.0",
5
+ "version": "4.12.0",
6
+ "version_name": "4.12.0",
7
8
"minimum_chrome_version": "60",
9
packages/react-devtools-extensions/firefox/manifest.json
+1
-1
@@ -2,7 +2,7 @@
2
"manifest_version": 2,
3
"name": "React Developer Tools",
4
"description": "Adds React debugging tools to the Firefox Developer Tools.",
5
- "version": "4.11.0",
5
+ "version": "4.12.0",
6
7
"applications": {
8
"gecko": {
packages/react-devtools-inline/README.md
+34
@@ -153,6 +153,40 @@ iframe.onload = () => {
153
};
154
```
155
156
+### Advanced integration with custom "wall"
157
+
158
+Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
159
+
160
+```js
161
+import {
162
+ createBridge,
163
+ createStore,
164
+ initialize as createDevTools,
165
+} from "react-devtools-inline/frontend";
166
+
167
+// Custom Wall implementation enables serializing data
168
+// using an API other than window.postMessage()
169
+// For example...
170
+const wall = {
171
+ emit() {},
172
+ listen(listener) {
173
+ wall._listener = listener;
174
+ },
175
+ async send(event, payload) {
176
+ const response = await fetch(...).json();
177
+ wall._listener(response);
178
+ },
179
+};
180
+
181
+// Create a Bridge and Store that use the custom Wall.
182
+const bridge = createBridge(target, wall);
183
+const store = createStore(bridge);
184
+const DevTools = createDevTools(target, { bridge, store });
185
+
186
+// Render DevTools with it.
187
+<DevTools {...otherProps} />;
188
+```
189
+
190
## Local development
191
You can also build and test this package from source.
192
packages/react-devtools-inline/package.json
+1
-1
@@ -1,6 +1,6 @@
1
{
2
"name": "react-devtools-inline",
3
- "version": "4.11.1",
3
+ "version": "4.12.0",
4
"description": "Embed react-devtools within a website",
5
"license": "MIT",
6
"main": "./dist/backend.js",
packages/react-devtools-inline/src/frontend.js
+42
-15
@@ -16,11 +16,47 @@ import {
16
MESSAGE_TYPE_SAVED_PREFERENCES,
17
} from './constants';
18
19
+import type {Wall} from 'react-devtools-shared/src/types';
20
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
21
import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
22
23
+export function createStore(bridge: FrontendBridge): Store {
24
+ return new Store(bridge, {supportsTraceUpdates: true});
25
+}
26
+
27
+export function createBridge(
28
+ contentWindow: window,
29
+ wall?: Wall,
30
+): FrontendBridge {
31
+ if (wall == null) {
32
+ wall = {
33
+ listen(fn) {
34
+ const onMessage = ({data}) => {
35
+ fn(data);
36
+ };
37
+ window.addEventListener('message', onMessage);
38
+ return () => {
39
+ window.removeEventListener('message', onMessage);
40
+ };
41
+ },
42
+ send(event: string, payload: any, transferable?: Array<any>) {
43
+ contentWindow.postMessage({event, payload}, '*', transferable);
44
+ },
45
+ };
46
+ }
47
+
48
+ return (new Bridge(wall): FrontendBridge);
49
+}
50
+
51
export function initialize(
52
contentWindow: window,
53
+ {
54
+ bridge,
55
+ store,
56
+ }: {|
57
+ bridge?: FrontendBridge,
58
+ store?: Store,
59
+ |} = {},
60
): React.AbstractComponent<Props, mixed> {
61
const onGetSavedPreferencesMessage = ({data, source}) => {
62
if (source === 'react-devtools-content-script') {
@@ -54,22 +90,13 @@ export function initialize(
90
91
window.addEventListener('message', onGetSavedPreferencesMessage);
92
57
- const bridge: FrontendBridge = new Bridge({
58
- listen(fn) {
59
- const onMessage = ({data}) => {
60
- fn(data);
61
- };
62
- window.addEventListener('message', onMessage);
63
- return () => {
64
- window.removeEventListener('message', onMessage);
65
- };
66
- },
67
- send(event: string, payload: any, transferable?: Array<any>) {
68
- contentWindow.postMessage({event, payload}, '*', transferable);
69
- },
70
- });
93
+ if (bridge == null) {
94
+ bridge = createBridge();
95
+ }
96
72
- const store: Store = new Store(bridge, {supportsTraceUpdates: true});
97
+ if (store == null) {
98
+ store = createStore(bridge);
99
+ }
100
101
const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
102
<DevTools ref={ref} bridge={bridge} store={store} {...props} />
packages/react-devtools/CHANGELOG.md
+6
-1
@@ -9,9 +9,14 @@
9
<!-- Upcoming changes go here -->
10
</details>
11
12
+## 4.12.0 (April 12, 2021)
13
+Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
14
+#### Feature
15
+* 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))
16
+
17
## 4.11.1 (April 11, 2021)
18
#### Bugfix
14
-* 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))
19
+* 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))
20
21
## 4.11.0 (April 9, 2021)
22
#### Bugfix
packages/react-devtools/package.json
+2
-2
@@ -1,6 +1,6 @@
1
{
2
"name": "react-devtools",
3
- "version": "4.11.0",
3
+ "version": "4.12.0",
4
"description": "Use react-devtools outside of the browser",
5
"license": "MIT",
6
"repository": {
@@ -27,7 +27,7 @@
27
"electron": "^11.1.0",
28
"ip": "^1.1.4",
29
"minimist": "^1.2.3",
30
- "react-devtools-core": "4.11.0",
30
+ "react-devtools-core": "4.12.0",
31
"update-notifier": "^2.1.0"
32
}
33
}