mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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:
@@ -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>
|
||||
Reference in New Issue
Block a user