Skip to content

Commit

Permalink
Iterating on Replay integration
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Mar 18, 2021
1 parent 9a21507 commit 7d9774a
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 16 deletions.
2 changes: 1 addition & 1 deletion packages/react-devtools-inline/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
57 changes: 42 additions & 15 deletions packages/react-devtools-inline/src/frontend.js
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>) {
contentWindow.postMessage({event, payload}, '*', transferable);
},
};
}

return (new Bridge(wall): FrontendBridge);
}

export function initialize(
contentWindow: window,
{
bridge,
store,
}: {|
bridge?: FrontendBridge,
store?: Store,
|} = {},
): React.AbstractComponent<Props, mixed> {
const onGetSavedPreferencesMessage = ({data, source}) => {
if (source === 'react-devtools-content-script') {
Expand Down Expand Up @@ -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<any>) {
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, mixed>((props, ref) => (
<DevTools ref={ref} bridge={bridge} store={store} {...props} />
Expand Down

0 comments on commit 7d9774a

Please sign in to comment.