mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
f0cf832e1d
This updates the Flight fixture to support the new ESM loaders in newer versions of Node.js. It also uses native fetch since react-fetch is gone now. (This part requires Node 18 to run the fixture.) I also updated everything to use the `"use client"` convention instead of file name based convention. The biggest hack here is that the Webpack plugin now just writes every `.js` file in the manifest. This needs to be more scoped. In practice, this new convention effectively requires you to traverse the server graph first to find the actual used files. This is enough to at least run our own fixture though. I didn't update the "blocks" fixture. More details in each commit message.
108 lines
3.1 KiB
HTML
108 lines
3.1 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/node_modules/react/umd/react.development.js"></script>
|
|
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
|
|
<script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
|
|
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
|
|
<script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.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)
|
|
);
|
|
// The client also supports XHR streaming.
|
|
// var xhr = new XMLHttpRequest();
|
|
// xhr.open('GET', url);
|
|
// let data = ReactServerDOMClient.createFromXHR(xhr);
|
|
// xhr.send();
|
|
|
|
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>
|