[DevTools] use backend manager to support multiple backends in extension (#26615)
In the extension, currently we do the following: 1. check whether there's at least one React renderer on the page 2. if yes, load the backend to the page 3. initialize the backend To support multiple versions of backends, we are changing it to: 1. check the versions of React renders on the page 2. load corresponding React DevTools backends that are shipped with the extension; if they are not contained (usually prod builds of prereleases), show a UI to allow users to load them from UI 3. initialize each of the backends To enable this workflow, a backend will ignore React renderers that does not match its version This PR adds a new file "backendManager" in the extension for this purpose. ------ I've tested it on Chrome, Edge and Firefox extensions
Mengdi Chen committed
Apr 18, 2023 at 12:02 UTC
d962f35cac4e1b9e4c6d9320e60ca51037680296
17 files changed
+308
-138
packages/react-devtools-extensions/chrome/manifest.json
+1
-4
@@ -29,10 +29,7 @@
29
"resources": [
30
"main.html",
31
"panel.html",
32
- "build/react_devtools_backend.js",
33
- "build/proxy.js",
34
- "build/renderer.js",
35
- "build/installHook.js"
32
+ "build/*.js"
33
],
34
"matches": [
35
"<all_urls>"
packages/react-devtools-extensions/edge/manifest.json
+1
-4
@@ -29,10 +29,7 @@
29
"resources": [
30
"main.html",
31
"panel.html",
32
- "build/react_devtools_backend.js",
33
- "build/proxy.js",
34
- "build/renderer.js",
35
- "build/installHook.js"
32
+ "build/*.js"
33
],
34
"matches": [
35
"<all_urls>"
packages/react-devtools-extensions/firefox/manifest.json
+1
-4
@@ -30,10 +30,7 @@
30
"web_accessible_resources": [
31
"main.html",
32
"panel.html",
33
- "build/react_devtools_backend.js",
34
- "build/proxy.js",
35
- "build/renderer.js",
36
- "build/installHook.js"
33
+ "build/*.js"
34
],
35
"background": {
36
"scripts": [
packages/react-devtools-extensions/src/backend.js
+22
-98
@@ -1,109 +1,33 @@
1
-// Do not use imports or top-level requires here!
2
-// Running module factories is intentionally delayed until we know the hook exists.
3
-// This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
5
-// @flow strict-local
10
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
11
7
-'use strict';
12
+import Agent from 'react-devtools-shared/src/backend/agent';
13
+import Bridge from 'react-devtools-shared/src/bridge';
14
+import {initBackend} from 'react-devtools-shared/src/backend';
15
+import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
16
9
-let welcomeHasInitialized = false;
17
+import {COMPACT_VERSION_NAME} from './utils';
18
11
-// $FlowFixMe[missing-local-annot]
12
-function welcome(event: $FlowFixMe) {
13
- if (
14
- event.source !== window ||
15
- event.data.source !== 'react-devtools-content-script'
16
- ) {
17
- return;
18
- }
19
-
20
- // In some circumstances, this method is called more than once for a single welcome message.
21
- // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
22
- //
23
- // Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
24
- // (and throw an error) or worse yet, choke up entirely and freeze the browser.
25
- //
26
- // The simplest solution is to ignore the duplicate events.
27
- // To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
28
- //
29
- // See https://github.com/facebook/react/issues/24162
30
- if (welcomeHasInitialized) {
31
- console.warn(
32
- 'React DevTools detected duplicate welcome "message" events from the content script.',
33
- );
34
- return;
35
- }
36
-
37
- welcomeHasInitialized = true;
38
-
39
- window.removeEventListener('message', welcome);
40
-
41
- setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
42
-}
43
-
44
-window.addEventListener('message', welcome);
19
+setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
20
46
-function setup(hook: any) {
21
+function setup(hook: ?DevToolsHook) {
22
if (hook == null) {
48
- // DevTools didn't get injected into this page (maybe b'c of the contentType).
23
return;
24
}
51
- const Agent = require('react-devtools-shared/src/backend/agent').default;
52
- const Bridge = require('react-devtools-shared/src/bridge').default;
53
- const {initBackend} = require('react-devtools-shared/src/backend');
54
- const setupNativeStyleEditor =
55
- require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor').default;
56
-
57
- const bridge = new Bridge<$FlowFixMe, $FlowFixMe>({
58
- listen(fn) {
59
- const listener = (event: $FlowFixMe) => {
60
- if (
61
- event.source !== window ||
62
- !event.data ||
63
- event.data.source !== 'react-devtools-content-script' ||
64
- !event.data.payload
65
- ) {
66
- return;
67
- }
68
- fn(event.data.payload);
69
- };
70
- window.addEventListener('message', listener);
71
- return () => {
72
- window.removeEventListener('message', listener);
73
- };
74
- },
75
- send(event: string, payload: any, transferable?: Array<any>) {
76
- window.postMessage(
77
- {
78
- source: 'react-devtools-bridge',
79
- payload: {event, payload},
80
- },
81
- '*',
82
- transferable,
83
- );
84
- },
85
- });
25
87
- const agent = new Agent(bridge);
88
- agent.addListener('shutdown', () => {
89
- // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
90
- // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
91
- hook.emit('shutdown');
26
+ hook.backends.set(COMPACT_VERSION_NAME, {
27
+ Agent,
28
+ Bridge,
29
+ initBackend,
30
+ setupNativeStyleEditor,
31
});
93
-
94
- initBackend(hook, agent, window);
95
-
96
- // Let the frontend know that the backend has attached listeners and is ready for messages.
97
- // This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
98
- bridge.send('extensionBackendInitialized');
99
-
100
- // Setup React Native style editor if a renderer like react-native-web has injected it.
101
- if (hook.resolveRNStyle) {
102
- setupNativeStyleEditor(
103
- bridge,
104
- agent,
105
- hook.resolveRNStyle,
106
- hook.nativeStyleEditorValidAttributes,
107
- );
108
- }
32
+ hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);
33
}
packages/react-devtools-extensions/src/backendManager.js
new
+164
@@ -0,0 +1,164 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import type {
11
+ DevToolsHook,
12
+ ReactRenderer,
13
+} from 'react-devtools-shared/src/backend/types';
14
+import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
15
+import {COMPACT_VERSION_NAME} from './utils';
16
+
17
+let welcomeHasInitialized = false;
18
+
19
+// $FlowFixMe[missing-local-annot]
20
+function welcome(event: $FlowFixMe) {
21
+ if (
22
+ event.source !== window ||
23
+ event.data.source !== 'react-devtools-content-script'
24
+ ) {
25
+ return;
26
+ }
27
+
28
+ // In some circumstances, this method is called more than once for a single welcome message.
29
+ // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
30
+ //
31
+ // Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
32
+ // (and throw an error) or worse yet, choke up entirely and freeze the browser.
33
+ //
34
+ // The simplest solution is to ignore the duplicate events.
35
+ // To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
36
+ //
37
+ // See https://github.com/facebook/react/issues/24162
38
+ if (welcomeHasInitialized) {
39
+ console.warn(
40
+ 'React DevTools detected duplicate welcome "message" events from the content script.',
41
+ );
42
+ return;
43
+ }
44
+
45
+ welcomeHasInitialized = true;
46
+
47
+ window.removeEventListener('message', welcome);
48
+
49
+ setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
50
+}
51
+
52
+window.addEventListener('message', welcome);
53
+
54
+function setup(hook: ?DevToolsHook) {
55
+ // this should not happen, but Chrome can be weird sometimes
56
+ if (hook == null) {
57
+ return;
58
+ }
59
+
60
+ // register renderers that have already injected themselves.
61
+ hook.renderers.forEach(renderer => {
62
+ registerRenderer(renderer);
63
+ });
64
+ updateRequiredBackends();
65
+
66
+ // register renderers that inject themselves later.
67
+ hook.sub('renderer', ({renderer}) => {
68
+ registerRenderer(renderer);
69
+ updateRequiredBackends();
70
+ });
71
+
72
+ // listen for backend installations.
73
+ hook.sub('devtools-backend-installed', version => {
74
+ activateBackend(version, hook);
75
+ updateRequiredBackends();
76
+ });
77
+}
78
+
79
+const requiredBackends = new Set<string>();
80
+
81
+function registerRenderer(renderer: ReactRenderer) {
82
+ let version = renderer.reconcilerVersion || renderer.version;
83
+ if (!hasAssignedBackend(version)) {
84
+ version = COMPACT_VERSION_NAME;
85
+ }
86
+ requiredBackends.add(version);
87
+}
88
+
89
+function activateBackend(version: string, hook: DevToolsHook) {
90
+ const backend = hook.backends.get(version);
91
+ if (!backend) {
92
+ throw new Error(`Could not find backend for version "${version}"`);
93
+ }
94
+ const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend;
95
+ const bridge = new Bridge({
96
+ listen(fn) {
97
+ const listener = (event: $FlowFixMe) => {
98
+ if (
99
+ event.source !== window ||
100
+ !event.data ||
101
+ event.data.source !== 'react-devtools-content-script' ||
102
+ !event.data.payload
103
+ ) {
104
+ return;
105
+ }
106
+ fn(event.data.payload);
107
+ };
108
+ window.addEventListener('message', listener);
109
+ return () => {
110
+ window.removeEventListener('message', listener);
111
+ };
112
+ },
113
+ send(event: string, payload: any, transferable?: Array<any>) {
114
+ window.postMessage(
115
+ {
116
+ source: 'react-devtools-bridge',
117
+ payload: {event, payload},
118
+ },
119
+ '*',
120
+ transferable,
121
+ );
122
+ },
123
+ });
124
+
125
+ const agent = new Agent(bridge);
126
+ agent.addListener('shutdown', () => {
127
+ // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
128
+ // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
129
+ hook.emit('shutdown');
130
+ });
131
+
132
+ initBackend(hook, agent, window);
133
+
134
+ // Setup React Native style editor if a renderer like react-native-web has injected it.
135
+ if (typeof setupNativeStyleEditor === 'function' && hook.resolveRNStyle) {
136
+ setupNativeStyleEditor(
137
+ bridge,
138
+ agent,
139
+ hook.resolveRNStyle,
140
+ hook.nativeStyleEditorValidAttributes,
141
+ );
142
+ }
143
+
144
+ // Let the frontend know that the backend has attached listeners and is ready for messages.
145
+ // This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
146
+ bridge.send('extensionBackendInitialized');
147
+
148
+ // this backend is activated
149
+ requiredBackends.delete(version);
150
+}
151
+
152
+// tell the service worker which versions of backends are needed for the current page
153
+function updateRequiredBackends() {
154
+ window.postMessage(
155
+ {
156
+ source: 'react-devtools-backend-manager',
157
+ payload: {
158
+ type: 'react-devtools-required-backends',
159
+ versions: Array.from(requiredBackends),
160
+ },
161
+ },
162
+ '*',
163
+ );
164
+}
packages/react-devtools-extensions/src/background.js
+31
-7
@@ -2,7 +2,7 @@
2
3
'use strict';
4
5
-import {IS_FIREFOX} from './utils';
5
+import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from './utils';
6
7
const ports = {};
8
@@ -179,26 +179,50 @@ chrome.runtime.onMessage.addListener((request, sender) => {
179
if (request.hasDetectedReact) {
180
setIconAndPopup(request.reactBuildType, id);
181
} else {
182
+ const devtools = ports[id]?.devtools;
183
switch (request.payload?.type) {
184
case 'fetch-file-with-cache-complete':
185
case 'fetch-file-with-cache-error':
186
// Forward the result of fetch-in-page requests back to the extension.
186
- const devtools = ports[id]?.devtools;
187
- if (devtools) {
188
- devtools.postMessage(request);
189
- }
187
+ devtools?.postMessage(request);
188
+ break;
189
+ // This is sent from the backend manager running on a page
190
+ case 'react-devtools-required-backends':
191
+ const backendsToDownload = [];
192
+ request.payload.versions.forEach(version => {
193
+ if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
194
+ if (!IS_FIREFOX) {
195
+ // equivalent logic for Firefox is in prepareInjection.js
196
+ chrome.scripting.executeScript({
197
+ target: {tabId: id},
198
+ files: [`/build/react_devtools_backend_${version}.js`],
199
+ world: chrome.scripting.ExecutionWorld.MAIN,
200
+ });
201
+ }
202
+ } else {
203
+ backendsToDownload.push(version);
204
+ }
205
+ });
206
+ // Request the necessary backends in the extension DevTools UI
207
+ // TODO: handle this message in main.js to build the UI
208
+ devtools?.postMessage({
209
+ payload: {
210
+ type: 'react-devtools-additional-backends',
211
+ versions: backendsToDownload,
212
+ },
213
+ });
214
break;
215
}
216
}
217
} else if (request.payload?.tabId) {
218
const tabId = request.payload?.tabId;
219
// This is sent from the devtools page when it is ready for injecting the backend
196
- if (request.payload.type === 'react-devtools-inject-backend') {
220
+ if (request.payload.type === 'react-devtools-inject-backend-manager') {
221
if (!IS_FIREFOX) {
222
// equivalent logic for Firefox is in prepareInjection.js
223
chrome.scripting.executeScript({
224
target: {tabId},
201
- files: ['/build/react_devtools_backend.js'],
225
+ files: ['/build/backendManager.js'],
226
world: chrome.scripting.ExecutionWorld.MAIN,
227
});
228
}
packages/react-devtools-extensions/src/contentScripts/prepareInjection.js
+16
-5
@@ -3,7 +3,7 @@
3
import nullthrows from 'nullthrows';
4
import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
5
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
6
-import {IS_FIREFOX} from '../utils';
6
+import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from '../utils';
7
8
// We run scripts on the page via the service worker (backgroud.js) for
9
// Manifest V3 extensions (Chrome & Edge).
@@ -90,11 +90,22 @@ window.addEventListener('message', function onMessage({data, source}) {
90
);
91
}
92
break;
93
- case 'react-devtools-inject-backend':
93
+ case 'react-devtools-inject-backend-manager':
94
if (IS_FIREFOX) {
95
- injectScriptSync(
96
- chrome.runtime.getURL('build/react_devtools_backend.js'),
97
- );
95
+ injectScriptSync(chrome.runtime.getURL('build/backendManager.js'));
96
+ }
97
+ break;
98
+ case 'react-devtools-backend-manager':
99
+ if (IS_FIREFOX) {
100
+ data.payload?.versions?.forEach(version => {
101
+ if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
102
+ injectScriptSync(
103
+ chrome.runtime.getURL(
104
+ `/build/react_devtools_backend_${version}.js`,
105
+ ),
106
+ );
107
+ }
108
+ });
109
}
110
break;
111
}
packages/react-devtools-extensions/src/contentScripts/proxy.js
+17
-12
@@ -5,7 +5,7 @@
5
let backendDisconnected: boolean = false;
6
let backendInitialized: boolean = false;
7
8
-function sayHelloToBackend() {
8
+function sayHelloToBackendManager() {
9
window.postMessage(
10
{
11
source: 'react-devtools-content-script',
@@ -26,14 +26,19 @@ function handleMessageFromDevtools(message) {
26
}
27
28
function handleMessageFromPage(event) {
29
- if (
30
- event.source === window &&
31
- event.data &&
32
- event.data.source === 'react-devtools-bridge'
33
- ) {
34
- backendInitialized = true;
29
+ if (event.source === window && event.data) {
30
+ // This is a message from a bridge (initialized by a devtools backend)
31
+ if (event.data.source === 'react-devtools-bridge') {
32
+ backendInitialized = true;
33
36
- port.postMessage(event.data.payload);
34
+ port.postMessage(event.data.payload);
35
+ }
36
+ // This is a message from the backend manager
37
+ if (event.data.source === 'react-devtools-backend-manager') {
38
+ chrome.runtime.sendMessage({
39
+ payload: event.data.payload,
40
+ });
41
+ }
42
}
43
}
44
@@ -63,17 +68,17 @@ port.onDisconnect.addListener(handleDisconnect);
68
69
window.addEventListener('message', handleMessageFromPage);
70
66
-sayHelloToBackend();
71
+sayHelloToBackendManager();
72
73
// The backend waits to install the global hook until notified by the content script.
69
-// In the event of a page reload, the content script might be loaded before the backend is injected.
70
-// Because of this we need to poll the backend until it has been initialized.
74
+// In the event of a page reload, the content script might be loaded before the backend manager is injected.
75
+// Because of this we need to poll the backend manager until it has been initialized.
76
if (!backendInitialized) {
77
const intervalID = setInterval(() => {
78
if (backendInitialized || backendDisconnected) {
79
clearInterval(intervalID);
80
} else {
76
- sayHelloToBackend();
81
+ sayHelloToBackendManager();
82
}
83
}, 500);
84
}
packages/react-devtools-extensions/src/main.js
+2
-2
@@ -191,7 +191,7 @@ function createPanelIfReactLoaded() {
191
chrome.runtime.sendMessage({
192
source: 'react-devtools-main',
193
payload: {
194
- type: 'react-devtools-inject-backend',
194
+ type: 'react-devtools-inject-backend-manager',
195
tabId,
196
},
197
});
@@ -199,7 +199,7 @@ function createPanelIfReactLoaded() {
199
// Firefox does not support executing script in ExecutionWorld.MAIN from content script.
200
// see prepareInjection.js
201
chrome.devtools.inspectedWindow.eval(
202
- `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
202
+ `window.postMessage({ source: 'react-devtools-inject-backend-manager' }, '*');`,
203
function (response, evalError) {
204
if (evalError) {
205
console.error(evalError);
packages/react-devtools-extensions/src/utils.js
+3
@@ -41,3 +41,6 @@ export function getBrowserTheme(): BrowserTheme {
41
}
42
}
43
}
44
+
45
+export const COMPACT_VERSION_NAME = 'compact';
46
+export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];
packages/react-devtools-extensions/webpack.backend.js
+1
-1
@@ -42,7 +42,7 @@ module.exports = {
42
},
43
output: {
44
path: __dirname + '/build',
45
- filename: 'react_devtools_backend.js',
45
+ filename: 'react_devtools_backend_compact.js',
46
},
47
node: {
48
// Don't define a polyfill on window.setImmediate
packages/react-devtools-extensions/webpack.config.js
+1
@@ -51,6 +51,7 @@ module.exports = {
51
devtool: __DEV__ ? 'cheap-module-source-map' : false,
52
entry: {
53
background: './src/background.js',
54
+ backendManager: './src/backendManager.js',
55
main: './src/main.js',
56
panel: './src/panel.js',
57
proxy: './src/contentScripts/proxy.js',
packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+1
@@ -16,6 +16,7 @@ import type {RendererID} from '../types';
16
import type {StyleAndLayout} from './types';
17
18
export type ResolveNativeStyle = (stylesheetID: any) => ?Object;
19
+export type SetupNativeStyleEditor = typeof setupNativeStyleEditor;
20
21
export default function setupNativeStyleEditor(
22
bridge: BackendBridge,
packages/react-devtools-shared/src/backend/index.js
+17
@@ -11,9 +11,17 @@ import Agent from './agent';
11
12
import {attach} from './renderer';
13
import {attach as attachLegacy} from './legacy/renderer';
14
+import {hasAssignedBackend} from './utils';
15
16
import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
17
18
+// this is the backend that is compactible with all older React versions
19
+function isMatchingRender(version: string): boolean {
20
+ return !hasAssignedBackend(version);
21
+}
22
+
23
+export type InitBackend = typeof initBackend;
24
+
25
export function initBackend(
26
hook: DevToolsHook,
27
agent: Agent,
@@ -56,6 +64,14 @@ export function initBackend(
64
];
65
66
const attachRenderer = (id: number, renderer: ReactRenderer) => {
67
+ // skip if already attached
68
+ if (renderer.attached) {
69
+ return;
70
+ }
71
+ // only attach if the renderer is compatible with the current version of the backend
72
+ if (!isMatchingRender(renderer.reconcilerVersion || renderer.version)) {
73
+ return;
74
+ }
75
let rendererInterface = hook.rendererInterfaces.get(id);
76
77
// Inject any not-yet-injected renderers (if we didn't reload-and-profile)
@@ -86,6 +102,7 @@ export function initBackend(
102
} else {
103
hook.emit('unsupported-renderer-version', id);
104
}
105
+ renderer.attached = true;
106
};
107
108
// Connect renderers that have already injected themselves.
packages/react-devtools-shared/src/backend/types.js
+17
-1
@@ -22,9 +22,15 @@ import type {
22
ElementType,
23
Plugins,
24
} from 'react-devtools-shared/src/types';
25
-import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
25
+import type {
26
+ ResolveNativeStyle,
27
+ SetupNativeStyleEditor,
28
+} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
29
+import type {InitBackend} from 'react-devtools-shared/src/backend';
30
import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
31
import type {BrowserTheme} from 'react-devtools-shared/src/types';
32
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
33
+import type Agent from './agent';
34
35
type BundleType =
36
| 0 // PROD
@@ -165,6 +171,8 @@ export type ReactRenderer = {
171
// 18.0+
172
injectProfilingHooks?: (profilingHooks: DevToolsProfilingHooks) => void,
173
getLaneLabelMap?: () => Map<Lane, string> | null,
174
+ // set by backend after successful attaching
175
+ attached?: boolean,
176
...
177
};
178
@@ -464,10 +472,18 @@ export type DevToolsProfilingHooks = {
472
markComponentPassiveEffectUnmountStopped: () => void,
473
};
474
475
+export type DevToolsBackend = {
476
+ Agent: Class<Agent>,
477
+ Bridge: Class<BackendBridge>,
478
+ initBackend: InitBackend,
479
+ setupNativeStyleEditor?: SetupNativeStyleEditor,
480
+};
481
+
482
export type DevToolsHook = {
483
listeners: {[key: string]: Array<Handler>, ...},
484
rendererInterfaces: Map<RendererID, RendererInterface>,
485
renderers: Map<RendererID, ReactRenderer>,
486
+ backends: Map<string, DevToolsBackend>,
487
488
emit: (event: string, data: any) => void,
489
getFiberRoots: (rendererID: RendererID) => Set<Object>,
packages/react-devtools-shared/src/backend/utils.js
+9
@@ -14,6 +14,15 @@ import isArray from 'shared/isArray';
14
15
import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
16
17
+// TODO: update this to the first React version that has a corresponding DevTools backend
18
+const FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER = '999.9.9';
19
+export function hasAssignedBackend(version?: string): boolean {
20
+ if (version == null || version === '') {
21
+ return false;
22
+ }
23
+ return gte(version, FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER);
24
+}
25
+
26
export function cleanForBridge(
27
data: Object | null,
28
isPathAllowed: (path: Array<string | number>) => boolean,
packages/react-devtools-shared/src/hook.js
+4
@@ -15,6 +15,7 @@ import type {
15
ReactRenderer,
16
RendererID,
17
RendererInterface,
18
+ DevToolsBackend,
19
} from './backend/types';
20
21
declare var window: any;
@@ -506,11 +507,14 @@ export function installHook(target: any): DevToolsHook | null {
507
const rendererInterfaces = new Map<RendererID, RendererInterface>();
508
const listeners: {[string]: Array<Handler>} = {};
509
const renderers = new Map<RendererID, ReactRenderer>();
510
+ const backends = new Map<string, DevToolsBackend>();
511
512
const hook: DevToolsHook = {
513
rendererInterfaces,
514
listeners,
515
516
+ backends,
517
+
518
// Fast Refresh for web relies on this.
519
renderers,
520