diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index e1234341353c5..8f9de80bb6846 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -1,6 +1,6 @@ { "name": "react-devtools-inline", - "version": "4.10.1", + "version": "replay-integration", "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js", diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js index 3972f1789ab74..ebd57022e6922 100644 --- a/packages/react-devtools-inline/src/frontend.js +++ b/packages/react-devtools-inline/src/frontend.js @@ -16,11 +16,47 @@ import { MESSAGE_TYPE_SAVED_PREFERENCES, } from './constants'; +import type {Wall} from 'react-devtools-shared/src/types'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools'; +export function createStore(bridge: FrontendBridge): Store { + return new Store(bridge, {supportsTraceUpdates: true}); +} + +export function createBridge( + contentWindow: window, + wall?: Wall, +): FrontendBridge { + if (wall == null) { + wall = { + listen(fn) { + const onMessage = ({data}) => { + fn(data); + }; + window.addEventListener('message', onMessage); + return () => { + window.removeEventListener('message', onMessage); + }; + }, + send(event: string, payload: any, transferable?: Array) { + contentWindow.postMessage({event, payload}, '*', transferable); + }, + }; + } + + return (new Bridge(wall): FrontendBridge); +} + export function initialize( contentWindow: window, + { + bridge, + store, + }: {| + bridge?: FrontendBridge, + store?: Store, + |} = {}, ): React.AbstractComponent { const onGetSavedPreferencesMessage = ({data, source}) => { if (source === 'react-devtools-content-script') { @@ -54,22 +90,13 @@ export function initialize( window.addEventListener('message', onGetSavedPreferencesMessage); - const bridge: FrontendBridge = new Bridge({ - listen(fn) { - const onMessage = ({data}) => { - fn(data); - }; - window.addEventListener('message', onMessage); - return () => { - window.removeEventListener('message', onMessage); - }; - }, - send(event: string, payload: any, transferable?: Array) { - contentWindow.postMessage({event, payload}, '*', transferable); - }, - }); + if (bridge == null) { + bridge = createBridge(); + } - const store: Store = new Store(bridge, {supportsTraceUpdates: true}); + if (store == null) { + store = createStore(bridge); + } const ForwardRef = forwardRef((props, ref) => (