mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandGitHub
e6fae308e9
We currently support passing an XHR request to Flight for broader compat and possibly better perf than `fetch()`. However, it's a little tricky because ideally the RSC protocol is really meant to support binary data too. XHR does support binary but it doesn't support it while also streaming. We could maybe support this only when you know it's going to be only text streams but it has some limitations in how we can encode separators if we can't use binary. Nobody is really asking for this so we might as well delete it.
102 lines
2.9 KiB
HTML
102 lines
2.9 KiB
HTML
<!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>
|