mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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
71 lines
2.0 KiB
HTML
71 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>React DevTools</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
#target {
|
|
flex: 1;
|
|
border: none;
|
|
}
|
|
#devtools {
|
|
height: 400px;
|
|
max-height: 50%;
|
|
overflow: hidden;
|
|
z-index: 10000001;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
|
|
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.optionsRow {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0.25rem;
|
|
background: aliceblue;
|
|
border-bottom: 1px solid lightblue;
|
|
box-sizing: border-box;
|
|
}
|
|
.optionsRowSpacer {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="optionsRow">
|
|
<button id="mountButton">Unmount test app</button>
|
|
<div class="optionsRowSpacer"> </div>
|
|
<span>
|
|
<a href="/multi.html">multi DevTools</a>
|
|
|
|
|
<a href="/e2e.html">e2e tests</a>
|
|
<a href="/e2e-regression.html">e2e regression tests</a>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- React test app (shells/dev/app) is injected here -->
|
|
<!-- DevTools backend (shells/dev/src) is injected here -->
|
|
<!-- global "hook" is defined on the iframe's contentWindow -->
|
|
<iframe id="target"></iframe>
|
|
|
|
<!-- DevTools frontend UI (shells/dev/src) renders here -->
|
|
<div id="devtools"></div>
|
|
|
|
<!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
|
|
<!-- In DEV mode, this file is served by the Webpack dev server -->
|
|
<!-- For production builds, it's built by Webpack and uploaded from the local file system -->
|
|
<script src="dist/app-devtools.js"></script>
|
|
</body>
|
|
</html> |