-
Notifications
You must be signed in to change notification settings - Fork 47k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DevTools] use backend manager to support multiple backends in extension #26615
Merged
mondaychen
merged 6 commits into
facebook:main
from
mondaychen:devtools_backend_manager
Apr 18, 2023
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
a515c6e
[DevTools] use backend manager to support multiple backends in extension
mondaychen 54594d2
[DevTools] should update backend versions after it's activated
mondaychen 6929f45
unused vars
mondaychen 6debd13
avoid checking for empty version
mondaychen 8ee161f
handle backend loading in Firefox
mondaychen 90434b5
use wildcard for web resources in manifest.json
mondaychen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
||
| // 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); | ||
| setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__); | ||
|
|
||
| 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, | ||
| ); | ||
| }, | ||
| }); | ||
|
|
||
| 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'); | ||
| hook.backends.set(COMPACT_VERSION_NAME, { | ||
| Agent, | ||
| Bridge, | ||
| initBackend, | ||
| setupNativeStyleEditor, | ||
| }); | ||
|
|
||
| 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 changes: 164 additions & 0 deletions
164
packages/react-devtools-extensions/src/backendManager.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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), | ||
| }, | ||
| }, | ||
| '*', | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How will we keep this format of the file names?
I am not sure if this is possible, but maybe we should add an extra check here that file
/build/react_devtools_backend_${version}.jsis present, log error otherwiseThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. We can try-catch and log. Our error logging only works on the internal build though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For now there is only one file. In the future I will create an automated script to take care of it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, it is currently not possible to establish the connection to the logger in this file :(