From d962f35cac4e1b9e4c6d9320e60ca51037680296 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Tue, 18 Apr 2023 12:02:42 -0400 Subject: [PATCH] [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 --- .../chrome/manifest.json | 5 +- .../edge/manifest.json | 5 +- .../firefox/manifest.json | 5 +- .../react-devtools-extensions/src/backend.js | 120 +++---------- .../src/backendManager.js | 164 ++++++++++++++++++ .../src/background.js | 38 +++- .../src/contentScripts/prepareInjection.js | 21 ++- .../src/contentScripts/proxy.js | 29 ++-- .../react-devtools-extensions/src/main.js | 4 +- .../react-devtools-extensions/src/utils.js | 3 + .../webpack.backend.js | 2 +- .../webpack.config.js | 1 + .../setupNativeStyleEditor.js | 1 + .../src/backend/index.js | 17 ++ .../src/backend/types.js | 18 +- .../src/backend/utils.js | 9 + packages/react-devtools-shared/src/hook.js | 4 + 17 files changed, 308 insertions(+), 138 deletions(-) create mode 100644 packages/react-devtools-extensions/src/backendManager.js diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 5af3c18465..8d16734396 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -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": [ "" diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index 8162b04b39..5a3a1b2e1e 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -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": [ "" diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index c2c9a1952b..f7ab4467a5 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -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": [ diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js index 4a0dc99a97..b79e191651 100644 --- a/packages/react-devtools-extensions/src/backend.js +++ b/packages/react-devtools-extensions/src/backend.js @@ -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) { - 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); } diff --git a/packages/react-devtools-extensions/src/backendManager.js b/packages/react-devtools-extensions/src/backendManager.js new file mode 100644 index 0000000000..23c6be57bc --- /dev/null +++ b/packages/react-devtools-extensions/src/backendManager.js @@ -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(); + +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) { + 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), + }, + }, + '*', + ); +} diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js index fea54f292c..89d87724dd 100644 --- a/packages/react-devtools-extensions/src/background.js +++ b/packages/react-devtools-extensions/src/background.js @@ -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, }); } diff --git a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js index 2e979e33da..a62cce3903 100644 --- a/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js +++ b/packages/react-devtools-extensions/src/contentScripts/prepareInjection.js @@ -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; } diff --git a/packages/react-devtools-extensions/src/contentScripts/proxy.js b/packages/react-devtools-extensions/src/contentScripts/proxy.js index 8021fea780..3bf4bf5cab 100644 --- a/packages/react-devtools-extensions/src/contentScripts/proxy.js +++ b/packages/react-devtools-extensions/src/contentScripts/proxy.js @@ -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); } diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index dd947be355..56907fd6ff 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -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); diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js index c34c01d21d..9fc9f2502e 100644 --- a/packages/react-devtools-extensions/src/utils.js +++ b/packages/react-devtools-extensions/src/utils.js @@ -41,3 +41,6 @@ export function getBrowserTheme(): BrowserTheme { } } } + +export const COMPACT_VERSION_NAME = 'compact'; +export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME]; diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index 29d183923c..a1cbb7b6f9 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/packages/react-devtools-extensions/webpack.backend.js @@ -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 diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index fe5543c04b..ad2c23caf9 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -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', diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js index 665a65f292..728f0e691c 100644 --- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js +++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js @@ -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, diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js index 6aa8a2f58a..d3c194602e 100644 --- a/packages/react-devtools-shared/src/backend/index.js +++ b/packages/react-devtools-shared/src/backend/index.js @@ -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. diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 61eb1876ec..ab859e71fc 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -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 | null, + // set by backend after successful attaching + attached?: boolean, ... }; @@ -464,10 +472,18 @@ export type DevToolsProfilingHooks = { markComponentPassiveEffectUnmountStopped: () => void, }; +export type DevToolsBackend = { + Agent: Class, + Bridge: Class, + initBackend: InitBackend, + setupNativeStyleEditor?: SetupNativeStyleEditor, +}; + export type DevToolsHook = { listeners: {[key: string]: Array, ...}, rendererInterfaces: Map, renderers: Map, + backends: Map, emit: (event: string, data: any) => void, getFiberRoots: (rendererID: RendererID) => Set, diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js index da70575295..bcadf4a7c0 100644 --- a/packages/react-devtools-shared/src/backend/utils.js +++ b/packages/react-devtools-shared/src/backend/utils.js @@ -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) => boolean, diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 0d0d2785ba..39af7daa37 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -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(); const listeners: {[string]: Array} = {}; const renderers = new Map(); + const backends = new Map(); const hook: DevToolsHook = { rendererInterfaces, listeners, + backends, + // Fast Refresh for web relies on this. renderers,