mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
Brian VaughnandGitHub
2da79c6f8d
This is being done so that we can embed DevTools within the new React (beta) docs. The primary changes here are to `react-devtools-inline/backend`: * Add a new `createBridge` API * Add an option to the `activate` method to support passing in the custom bridge object. The `react-devtools-inline` README has been updated to include these new methods. To verify these changes, this commit also updates the test shell to add a new entry-point for multiple DevTools. This commit also replaces two direct calls to `window.postMessage()` with `bridge.send()` (and adds the related Flow types).
92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
/** @flow */
|
|
|
|
import {createElement} from 'react';
|
|
// $FlowFixMe Flow does not yet know about createRoot()
|
|
import {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';
|
|
|
|
// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
|
|
// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
|
|
// $FlowFixMe
|
|
__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
|
|
|
|
const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
|
|
|
|
const {contentDocument, contentWindow} = iframe;
|
|
|
|
// Helps with positioning Overlay UI.
|
|
contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
|
|
|
|
initializeBackend(contentWindow);
|
|
|
|
// Initialize the front end and activate the backend early so that we are able
|
|
// to pass console settings in local storage to the backend before initial render
|
|
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 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;
|
|
}
|
|
}
|
|
});
|
|
|
|
// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
|
|
function hookNamesModuleLoaderFunction() {
|
|
return import('react-devtools-inline/hookNames');
|
|
}
|
|
|
|
inject('dist/app-index.js', () => {
|
|
initDevTools({
|
|
connect(cb) {
|
|
const root = createRoot(container);
|
|
root.render(
|
|
createElement(DevTools, {
|
|
browserTheme: 'light',
|
|
enabledInspectedElementContextMenu: true,
|
|
hookNamesModuleLoaderFunction,
|
|
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);
|
|
}
|