OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

[DevTools] use backend manager to support multiple backends in extension (#26615)

Browse Source 
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
This commit is contained in:
Mengdi Chen
2023-04-18 12:02:42 -04:00
committed by GitHub
parent 77d3b02e5c
commit d962f35cac
17 changed files with 308 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/react-devtools-extensions/chrome/manifest.json
View File

@@ -29,10 +29,7 @@
"resources": [
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
"build/*.js"
],
"matches": [
"<all_urls>"

5
packages/react-devtools-extensions/edge/manifest.json
View File

@@ -29,10 +29,7 @@
"resources": [
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
"build/*.js"
],
"matches": [
"<all_urls>"

5
packages/react-devtools-extensions/firefox/manifest.json
View File

@@ -30,10 +30,7 @@
"web_accessible_resources": [
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
"build/*.js"
],
"background": {
"scripts": [

120
packages/react-devtools-extensions/src/backend.js vendored
View File

@@ -1,109 +1,33 @@
// Do not use imports or top-level requires here!
// Running module factories is intentionally delayed until we know the hook exists.
// This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
// @flow strict-local
import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
'use strict';
import Agent from 'react-devtools-shared/src/backend/agent';
import Bridge from 'react-devtools-shared/src/bridge';
import {initBackend} from 'react-devtools-shared/src/backend';
import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
let welcomeHasInitialized = false;
import {COMPACT_VERSION_NAME} from './utils';
// $FlowFixMe[missing-local-annot]
function welcome(event: $FlowFixMe) {
if (
event.source !== window ||
event.data.source !== 'react-devtools-content-script'
) {
return;
}
setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
// In some circumstances, this method is called more than once for a single welcome message.
// The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
//
// Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
// (and throw an error) or worse yet, choke up entirely and freeze the browser.
//
// The simplest solution is to ignore the duplicate events.
// To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
//
// See https://github.com/facebook/react/issues/24162
if (welcomeHasInitialized) {
console.warn(
'React DevTools detected duplicate welcome "message" events from the content script.',
);
return;
}
welcomeHasInitialized = true;
window.removeEventListener('message', welcome);
setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
}
window.addEventListener('message', welcome);
function setup(hook: any) {
function setup(hook: ?DevToolsHook) {
if (hook == null) {
// DevTools didn't get injected into this page (maybe b'c of the contentType).
return;
}
const Agent = require('react-devtools-shared/src/backend/agent').default;
const Bridge = require('react-devtools-shared/src/bridge').default;
const {initBackend} = require('react-devtools-shared/src/backend');
const setupNativeStyleEditor =
require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor').default;
const bridge = new Bridge<$FlowFixMe, $FlowFixMe>({
listen(fn) {
const listener = (event: $FlowFixMe) => {
if (
event.source !== window ||
!event.data ||
event.data.source !== 'react-devtools-content-script' ||
!event.data.payload
) {
return;
}
fn(event.data.payload);
};
window.addEventListener('message', listener);
return () => {
window.removeEventListener('message', listener);
};
},
send(event: string, payload: any, transferable?: Array<any>) {
window.postMessage(
{
source: 'react-devtools-bridge',
payload: {event, payload},
},
'*',
transferable,
);
},
hook.backends.set(COMPACT_VERSION_NAME, {
Agent,
Bridge,
initBackend,
setupNativeStyleEditor,
});
const agent = new Agent(bridge);
agent.addListener('shutdown', () => {
// If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
// and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
hook.emit('shutdown');
});
initBackend(hook, agent, window);
// Let the frontend know that the backend has attached listeners and is ready for messages.
// This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
bridge.send('extensionBackendInitialized');
// Setup React Native style editor if a renderer like react-native-web has injected it.
if (hook.resolveRNStyle) {
setupNativeStyleEditor(
bridge,
agent,
hook.resolveRNStyle,
hook.nativeStyleEditorValidAttributes,
);
}
hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);
}

164
packages/react-devtools-extensions/src/backendManager.js vendored Normal file
View File

@@ -0,0 +1,164 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {
DevToolsHook,
ReactRenderer,
} from 'react-devtools-shared/src/backend/types';
import {hasAssignedBackend} from 'react-devtools-shared/src/backend/utils';
import {COMPACT_VERSION_NAME} from './utils';
let welcomeHasInitialized = false;
// $FlowFixMe[missing-local-annot]
function welcome(event: $FlowFixMe) {
if (
event.source !== window ||
event.data.source !== 'react-devtools-content-script'
) {
return;
}
// In some circumstances, this method is called more than once for a single welcome message.
// The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
//
// Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
// (and throw an error) or worse yet, choke up entirely and freeze the browser.
//
// The simplest solution is to ignore the duplicate events.
// To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
//
// See https://github.com/facebook/react/issues/24162
if (welcomeHasInitialized) {
console.warn(
'React DevTools detected duplicate welcome "message" events from the content script.',
);
return;
}
welcomeHasInitialized = true;
window.removeEventListener('message', welcome);
setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
}
window.addEventListener('message', welcome);
function setup(hook: ?DevToolsHook) {
// this should not happen, but Chrome can be weird sometimes
if (hook == null) {
return;
}
// register renderers that have already injected themselves.
hook.renderers.forEach(renderer => {
registerRenderer(renderer);
});
updateRequiredBackends();
// register renderers that inject themselves later.
hook.sub('renderer', ({renderer}) => {
registerRenderer(renderer);
updateRequiredBackends();
});
// listen for backend installations.
hook.sub('devtools-backend-installed', version => {
activateBackend(version, hook);
updateRequiredBackends();
});
}
const requiredBackends = new Set<string>();
function registerRenderer(renderer: ReactRenderer) {
let version = renderer.reconcilerVersion || renderer.version;
if (!hasAssignedBackend(version)) {
version = COMPACT_VERSION_NAME;
}
requiredBackends.add(version);
}
function activateBackend(version: string, hook: DevToolsHook) {
const backend = hook.backends.get(version);
if (!backend) {
throw new Error(`Could not find backend for version "${version}"`);
}
const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend;
const bridge = new Bridge({
listen(fn) {
const listener = (event: $FlowFixMe) => {
if (
event.source !== window ||
!event.data ||
event.data.source !== 'react-devtools-content-script' ||
!event.data.payload
) {
return;
}
fn(event.data.payload);
};
window.addEventListener('message', listener);
return () => {
window.removeEventListener('message', listener);
};
},
send(event: string, payload: any, transferable?: Array<any>) {
window.postMessage(
{
source: 'react-devtools-bridge',
payload: {event, payload},
},
'*',
transferable,
);
},
});
const agent = new Agent(bridge);
agent.addListener('shutdown', () => {
// If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
// and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
hook.emit('shutdown');
});
initBackend(hook, agent, window);
// Setup React Native style editor if a renderer like react-native-web has injected it.
if (typeof setupNativeStyleEditor === 'function' && hook.resolveRNStyle) {
setupNativeStyleEditor(
bridge,
agent,
hook.resolveRNStyle,
hook.nativeStyleEditorValidAttributes,
);
}
// Let the frontend know that the backend has attached listeners and is ready for messages.
// This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
bridge.send('extensionBackendInitialized');
// this backend is activated
requiredBackends.delete(version);
}
// tell the service worker which versions of backends are needed for the current page
function updateRequiredBackends() {
window.postMessage(
{
source: 'react-devtools-backend-manager',
payload: {
type: 'react-devtools-required-backends',
versions: Array.from(requiredBackends),
},
},
'*',
);
}

38
packages/react-devtools-extensions/src/background.js vendored
View File

@@ -2,7 +2,7 @@
'use strict';
import {IS_FIREFOX} from './utils';
import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from './utils';
const ports = {};
@@ -179,26 +179,50 @@ chrome.runtime.onMessage.addListener((request, sender) => {
if (request.hasDetectedReact) {
setIconAndPopup(request.reactBuildType, id);
} else {
const devtools = ports[id]?.devtools;
switch (request.payload?.type) {
case 'fetch-file-with-cache-complete':
case 'fetch-file-with-cache-error':
// Forward the result of fetch-in-page requests back to the extension.
const devtools = ports[id]?.devtools;
if (devtools) {
devtools.postMessage(request);
}
devtools?.postMessage(request);
break;
// This is sent from the backend manager running on a page
case 'react-devtools-required-backends':
const backendsToDownload = [];
request.payload.versions.forEach(version => {
if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
if (!IS_FIREFOX) {
// equivalent logic for Firefox is in prepareInjection.js
chrome.scripting.executeScript({
target: {tabId: id},
files: [`/build/react_devtools_backend_${version}.js`],
world: chrome.scripting.ExecutionWorld.MAIN,
});
}
} else {
backendsToDownload.push(version);
}
});
// Request the necessary backends in the extension DevTools UI
// TODO: handle this message in main.js to build the UI
devtools?.postMessage({
payload: {
type: 'react-devtools-additional-backends',
versions: backendsToDownload,
},
});
break;
}
}
} else if (request.payload?.tabId) {
const tabId = request.payload?.tabId;
// This is sent from the devtools page when it is ready for injecting the backend
if (request.payload.type === 'react-devtools-inject-backend') {
if (request.payload.type === 'react-devtools-inject-backend-manager') {
if (!IS_FIREFOX) {
// equivalent logic for Firefox is in prepareInjection.js
chrome.scripting.executeScript({
target: {tabId},
files: ['/build/react_devtools_backend.js'],
files: ['/build/backendManager.js'],
world: chrome.scripting.ExecutionWorld.MAIN,
});
}

21
packages/react-devtools-extensions/src/contentScripts/prepareInjection.js vendored
View File

@@ -3,7 +3,7 @@
import nullthrows from 'nullthrows';
import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
import {IS_FIREFOX} from '../utils';
import {IS_FIREFOX, EXTENSION_CONTAINED_VERSIONS} from '../utils';
// We run scripts on the page via the service worker (backgroud.js) for
// Manifest V3 extensions (Chrome & Edge).
@@ -90,11 +90,22 @@ window.addEventListener('message', function onMessage({data, source}) {
);
}
break;
case 'react-devtools-inject-backend':
case 'react-devtools-inject-backend-manager':
if (IS_FIREFOX) {
injectScriptSync(
chrome.runtime.getURL('build/react_devtools_backend.js'),
);
injectScriptSync(chrome.runtime.getURL('build/backendManager.js'));
}
break;
case 'react-devtools-backend-manager':
if (IS_FIREFOX) {
data.payload?.versions?.forEach(version => {
if (EXTENSION_CONTAINED_VERSIONS.includes(version)) {
injectScriptSync(
chrome.runtime.getURL(
`/build/react_devtools_backend_${version}.js`,
),
);
}
});
}
break;
}

29
packages/react-devtools-extensions/src/contentScripts/proxy.js vendored
View File

@@ -5,7 +5,7 @@
let backendDisconnected: boolean = false;
let backendInitialized: boolean = false;
function sayHelloToBackend() {
function sayHelloToBackendManager() {
window.postMessage(
{
source: 'react-devtools-content-script',
@@ -26,14 +26,19 @@ function handleMessageFromDevtools(message) {
}
function handleMessageFromPage(event) {
if (
event.source === window &&
event.data &&
event.data.source === 'react-devtools-bridge'
) {
backendInitialized = true;
if (event.source === window && event.data) {
// This is a message from a bridge (initialized by a devtools backend)
if (event.data.source === 'react-devtools-bridge') {
backendInitialized = true;
port.postMessage(event.data.payload);
port.postMessage(event.data.payload);
}
// This is a message from the backend manager
if (event.data.source === 'react-devtools-backend-manager') {
chrome.runtime.sendMessage({
payload: event.data.payload,
});
}
}
}
@@ -63,17 +68,17 @@ port.onDisconnect.addListener(handleDisconnect);
window.addEventListener('message', handleMessageFromPage);
sayHelloToBackend();
sayHelloToBackendManager();
// The backend waits to install the global hook until notified by the content script.
// In the event of a page reload, the content script might be loaded before the backend is injected.
// Because of this we need to poll the backend until it has been initialized.
// In the event of a page reload, the content script might be loaded before the backend manager is injected.
// Because of this we need to poll the backend manager until it has been initialized.
if (!backendInitialized) {
const intervalID = setInterval(() => {
if (backendInitialized || backendDisconnected) {
clearInterval(intervalID);
} else {
sayHelloToBackend();
sayHelloToBackendManager();
}
}, 500);
}

4
packages/react-devtools-extensions/src/main.js vendored
View File

@@ -191,7 +191,7 @@ function createPanelIfReactLoaded() {
chrome.runtime.sendMessage({
source: 'react-devtools-main',
payload: {
type: 'react-devtools-inject-backend',
type: 'react-devtools-inject-backend-manager',
tabId,
},
});
@@ -199,7 +199,7 @@ function createPanelIfReactLoaded() {
// Firefox does not support executing script in ExecutionWorld.MAIN from content script.
// see prepareInjection.js
chrome.devtools.inspectedWindow.eval(
`window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
`window.postMessage({ source: 'react-devtools-inject-backend-manager' }, '*');`,
function (response, evalError) {
if (evalError) {
console.error(evalError);

3
packages/react-devtools-extensions/src/utils.js vendored
View File

@@ -41,3 +41,6 @@ export function getBrowserTheme(): BrowserTheme {
}
}
}
export const COMPACT_VERSION_NAME = 'compact';
export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];

2
packages/react-devtools-extensions/webpack.backend.js
View File

@@ -42,7 +42,7 @@ module.exports = {
},
output: {
path: __dirname + '/build',
filename: 'react_devtools_backend.js',
filename: 'react_devtools_backend_compact.js',
},
node: {
// Don't define a polyfill on window.setImmediate

1
packages/react-devtools-extensions/webpack.config.js
View File

@@ -51,6 +51,7 @@ module.exports = {
devtool: __DEV__ ? 'cheap-module-source-map' : false,
entry: {
background: './src/background.js',
backendManager: './src/backendManager.js',
main: './src/main.js',
panel: './src/panel.js',
proxy: './src/contentScripts/proxy.js',

1
packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js vendored
View File

@@ -16,6 +16,7 @@ import type {RendererID} from '../types';
import type {StyleAndLayout} from './types';
export type ResolveNativeStyle = (stylesheetID: any) => ?Object;
export type SetupNativeStyleEditor = typeof setupNativeStyleEditor;
export default function setupNativeStyleEditor(
bridge: BackendBridge,

17
packages/react-devtools-shared/src/backend/index.js vendored
View File

@@ -11,9 +11,17 @@ import Agent from './agent';
import {attach} from './renderer';
import {attach as attachLegacy} from './legacy/renderer';
import {hasAssignedBackend} from './utils';
import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
// this is the backend that is compactible with all older React versions
function isMatchingRender(version: string): boolean {
return !hasAssignedBackend(version);
}
export type InitBackend = typeof initBackend;
export function initBackend(
hook: DevToolsHook,
agent: Agent,
@@ -56,6 +64,14 @@ export function initBackend(
];
const attachRenderer = (id: number, renderer: ReactRenderer) => {
// skip if already attached
if (renderer.attached) {
return;
}
// only attach if the renderer is compatible with the current version of the backend
if (!isMatchingRender(renderer.reconcilerVersion || renderer.version)) {
return;
}
let rendererInterface = hook.rendererInterfaces.get(id);
// Inject any not-yet-injected renderers (if we didn't reload-and-profile)
@@ -86,6 +102,7 @@ export function initBackend(
} else {
hook.emit('unsupported-renderer-version', id);
}
renderer.attached = true;
};
// Connect renderers that have already injected themselves.

18
packages/react-devtools-shared/src/backend/types.js vendored
View File

@@ -22,9 +22,15 @@ import type {
ElementType,
Plugins,
} from 'react-devtools-shared/src/types';
import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
import type {
ResolveNativeStyle,
SetupNativeStyleEditor,
} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
import type {InitBackend} from 'react-devtools-shared/src/backend';
import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
import type {BrowserTheme} from 'react-devtools-shared/src/types';
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
import type Agent from './agent';
type BundleType =
| 0 // PROD
@@ -165,6 +171,8 @@ export type ReactRenderer = {
// 18.0+
injectProfilingHooks?: (profilingHooks: DevToolsProfilingHooks) => void,
getLaneLabelMap?: () => Map<Lane, string> | null,
// set by backend after successful attaching
attached?: boolean,
...
};
@@ -464,10 +472,18 @@ export type DevToolsProfilingHooks = {
markComponentPassiveEffectUnmountStopped: () => void,
};
export type DevToolsBackend = {
Agent: Class<Agent>,
Bridge: Class<BackendBridge>,
initBackend: InitBackend,
setupNativeStyleEditor?: SetupNativeStyleEditor,
};
export type DevToolsHook = {
listeners: {[key: string]: Array<Handler>, ...},
rendererInterfaces: Map<RendererID, RendererInterface>,
renderers: Map<RendererID, ReactRenderer>,
backends: Map<string, DevToolsBackend>,
emit: (event: string, data: any) => void,
getFiberRoots: (rendererID: RendererID) => Set<Object>,

9
packages/react-devtools-shared/src/backend/utils.js vendored
View File

@@ -14,6 +14,15 @@ import isArray from 'shared/isArray';
import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
// TODO: update this to the first React version that has a corresponding DevTools backend
const FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER = '999.9.9';
export function hasAssignedBackend(version?: string): boolean {
if (version == null || version === '') {
return false;
}
return gte(version, FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER);
}
export function cleanForBridge(
data: Object | null,
isPathAllowed: (path: Array<string | number>) => boolean,

4
packages/react-devtools-shared/src/hook.js vendored
View File

@@ -15,6 +15,7 @@ import type {
ReactRenderer,
RendererID,
RendererInterface,
DevToolsBackend,
} from './backend/types';
declare var window: any;
@@ -506,11 +507,14 @@ export function installHook(target: any): DevToolsHook | null {
const rendererInterfaces = new Map<RendererID, RendererInterface>();
const listeners: {[string]: Array<Handler>} = {};
const renderers = new Map<RendererID, ReactRenderer>();
const backends = new Map<string, DevToolsBackend>();
const hook: DevToolsHook = {
rendererInterfaces,
listeners,
backends,
// Fast Refresh for web relies on this.
renderers,