3133dfa6ee
This PR adds an e2e regression app to the react-devtools-shell package. This app: * Has an app.js and an appLegacy.js entrypoint because apps prior to React 18 need to use ReactDOM.render. These files will create and render multiple test apps (though they currently only render the List) * Moved the ListApp out of the e2e folder and into an e2e-apps folder so that both e2e and e2e-regression can use the same test apps * Creates a ListAppLegacy app because prior to React 16.8 hooks didn't exist. * Added a devtools file for the e2e-regression * Modifies the webpack config so that the e2e-regression React app can use different a different React version than DevTools
55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom';
|
|
import {createRoot} from 'react-dom/client';
|
|
import {
|
|
activate as activateBackend,
|
|
initialize as initializeBackend,
|
|
} from 'react-devtools-inline/backend';
|
|
import {initialize as createDevTools} from 'react-devtools-inline/frontend';
|
|
|
|
// 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.
|
|
// $FlowFixMer
|
|
__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
|
|
|
|
// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
|
|
function hookNamesModuleLoaderFunction() {
|
|
return import('react-devtools-inline/hookNames');
|
|
}
|
|
|
|
function inject(contentDocument, sourcePath, callback) {
|
|
const script = contentDocument.createElement('script');
|
|
script.onload = callback;
|
|
script.src = sourcePath;
|
|
|
|
((contentDocument.body: any): HTMLBodyElement).appendChild(script);
|
|
}
|
|
|
|
function init(appIframe, devtoolsContainer, appSource) {
|
|
const {contentDocument, contentWindow} = appIframe;
|
|
|
|
initializeBackend(contentWindow);
|
|
|
|
const DevTools = createDevTools(contentWindow);
|
|
|
|
inject(contentDocument, appSource, () => {
|
|
// $FlowFixMe Flow doesn't know about createRoot() yet.
|
|
createRoot(devtoolsContainer).render(
|
|
<DevTools
|
|
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
|
|
showTabBar={true}
|
|
/>,
|
|
);
|
|
});
|
|
|
|
activateBackend(contentWindow);
|
|
}
|
|
|
|
const iframe = document.getElementById('iframe');
|
|
const devtoolsContainer = document.getElementById('devtools');
|
|
|
|
init(iframe, devtoolsContainer, 'dist/e2e-app-regression.js');
|
|
|
|
// ReactDOM Test Selector APIs used by Playwright e2e tests
|
|
window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
|