forked from facebook/react
-
-
Notifications
You must be signed in to change notification settings - Fork 6
/
devtools.js
78 lines (64 loc) · 2.23 KB
/
devtools.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/** @flow */
import {createElement} from 'react';
// $FlowFixMe Flow does not yet know about createRoot()
import {unstable_createRoot as createRoot} from 'react-dom';
import {
activate as activateBackend,
initialize as initializeBackend,
} from 'react-devtools-inline/backend';
import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
import {initDevTools} from 'react-devtools-shared/src/devtools';
const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
const {contentDocument, contentWindow} = iframe;
// Helps with positioning Overlay UI.
contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
initializeBackend(contentWindow);
const container = ((document.getElementById('devtools'): any): HTMLElement);
let isTestAppMounted = true;
const mountButton = ((document.getElementById(
'mountButton',
): any): HTMLButtonElement);
mountButton.addEventListener('click', function() {
if (isTestAppMounted) {
if (typeof window.unmountTestApp === 'function') {
window.unmountTestApp();
mountButton.innerText = 'Mount test app';
isTestAppMounted = false;
}
} else {
if (typeof window.mountTestApp === 'function') {
window.mountTestApp();
mountButton.innerText = 'Unmount test app';
isTestAppMounted = true;
}
}
});
inject('dist/app.js', () => {
initDevTools({
connect(cb) {
const DevTools = initializeFrontend(contentWindow);
// Activate the backend only once the DevTools frontend Store has been initialized.
// Otherwise the Store may miss important initial tree op codes.
activateBackend(contentWindow);
const root = createRoot(container);
root.render(
createElement(DevTools, {
browserTheme: 'light',
enabledInspectedElementContextMenu: true,
showTabBar: true,
warnIfLegacyBackendDetected: true,
warnIfUnsupportedVersionDetected: true,
}),
);
},
onReload(reloadFn) {
iframe.onload = reloadFn;
},
});
});
function inject(sourcePath, callback) {
const script = contentDocument.createElement('script');
script.onload = callback;
script.src = sourcePath;
((contentDocument.body: any): HTMLBodyElement).appendChild(script);
}