Skip to content

Commit 976cc42

Browse files
mondaychenAndyPengc12
mondaychen
authored and
AndyPengc12
committed
[DevTools] use backend manager to support multiple backends in extension (facebook#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
1 parent 62637a7 commit 976cc42

File tree

17 files changed

+308
-138
lines changed

17 files changed

+308
-138
lines changed

‎packages/react-devtools-extensions/chrome/manifest.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,7 @@
2929
"resources": [
3030
"main.html",
3131
"panel.html",
32-
"build/react_devtools_backend.js",
33-
"build/proxy.js",
34-
"build/renderer.js",
35-
"build/installHook.js"
32+
"build/*.js"
3633
],
3734
"matches": [
3835
"<all_urls>"

‎packages/react-devtools-extensions/edge/manifest.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,7 @@
2929
"resources": [
3030
"main.html",
3131
"panel.html",
32-
"build/react_devtools_backend.js",
33-
"build/proxy.js",
34-
"build/renderer.js",
35-
"build/installHook.js"
32+
"build/*.js"
3633
],
3734
"matches": [
3835
"<all_urls>"

‎packages/react-devtools-extensions/firefox/manifest.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@
3030
"web_accessible_resources": [
3131
"main.html",
3232
"panel.html",
33-
"build/react_devtools_backend.js",
34-
"build/proxy.js",
35-
"build/renderer.js",
36-
"build/installHook.js"
33+
"build/*.js"
3734
],
3835
"background": {
3936
"scripts": [

‎packages/react-devtools-extensions/src/backend.js

Lines changed: 22 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
*/
49

5-
// @flow strict-local
10+
import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
611

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';
816

9-
let welcomeHasInitialized = false;
17+
import {COMPACT_VERSION_NAME} from './utils';
1018

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__);
4520

46-
function setup(hook: any) {
21+
function setup(hook: ?DevToolsHook) {
4722
if (hook == null) {
48-
// DevTools didn't get injected into this page (maybe b'c of the contentType).
4923
return;
5024
}
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-
});
8625

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,
9231
});
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);
10933
}

‎packages/react-devtools-extensions/src/backendManager.js

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
'use strict';
44

5-
import {IS_FIREFOX} from './utils';
5+
import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from './utils';
66

77
const ports = {};
88

@@ -179,26 +179,50 @@ chrome.runtime.onMessage.addListener((request, sender) => {
179179
if (request.hasDetectedReact) {
180180
setIconAndPopup(request.reactBuildType, id);
181181
} else {
182+
const devtools = ports[id]?.devtools;
182183
switch (request.payload?.type) {
183184
case 'fetch-file-with-cache-complete':
184185
case 'fetch-file-with-cache-error':
185186
// 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+
});
190214
break;
191215
}
192216
}
193217
} else if (request.payload?.tabId) {
194218
const tabId = request.payload?.tabId;
195219
// 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') {
197221
if (!IS_FIREFOX) {
198222
// equivalent logic for Firefox is in prepareInjection.js
199223
chrome.scripting.executeScript({
200224
target: {tabId},
201-
files: ['/build/react_devtools_backend.js'],
225+
files: ['/build/backendManager.js'],
202226
world: chrome.scripting.ExecutionWorld.MAIN,
203227
});
204228
}

0 commit comments

Comments
 (0)