Remove flight-browser fixture (#28828)

The flight-browser fixtures doesn't make sense. It also uses UMD builds
which are being removed so we'd have to make it use esm.sh or something
and really it just won't work because it needs to be built by webpack to
not error. We could potentially shim the webpack globals but really the
right thing is to publish the esm version of react-server and use esm.sh
to load a browser only esm demo of react-server. This change removes the
flight-browser fixture
This commit is contained in:
Josh Story
2024-04-12 09:48:40 -07:00
committed by GitHub
parent 7625f0d501
commit ba1a9797ee

View File

@@ -1,101 +0,0 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8">
<title>Flight Example</title>
</head>
<body>
<h1>Flight Example</h1>
<div id="container">
<p>
To install React, follow the instructions on
<a href="https://github.com/facebook/react/">GitHub</a>.
</p>
<p>
If you can see this, React is <strong>not</strong> working right.
If you checked out the source from GitHub make sure to run <code>npm run build</code>.
</p>
</div>
<script src="../../build/oss-experimental/react/umd/react.development.js"></script>
<script src="../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>
<script src="../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
<script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
let Suspense = React.Suspense;
function Text({children}) {
return <span>{children}</span>;
}
function HTML() {
return (
<div>
<Text>hello</Text>
<Text>world</Text>
</div>
);
}
let resolved = false;
let promise = new Promise(resolve => {
setTimeout(() => {
resolved = true;
resolve();
}, 100);
});
function read() {
if (!resolved) {
throw promise;
}
}
function Title() {
read();
return 'Title';
}
let model = {
title: <Title />,
content: <HTML />,
};
let stream = ReactServerDOMServer.renderToReadableStream(model);
let response = new Response(stream, {
headers: {'Content-Type': 'text/html'},
});
display(response);
async function display(responseToDisplay) {
let blob = await responseToDisplay.blob();
let url = URL.createObjectURL(blob);
let data = ReactServerDOMClient.createFromFetch(
fetch(url)
);
renderResult(data);
}
function Shell({ data }) {
let model = React.use(data);
return <div>
<Suspense fallback="...">
<h1>{model.title}</h1>
</Suspense>
{model.content}
</div>;
}
function renderResult(data) {
let container = document.getElementById('container');
ReactDOM.createRoot(
container
).render(
<Suspense fallback="Loading...">
<Shell data={data} />
</Suspense>,
);
}
</script>
</body>
</html>