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/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)
|
|
);
|
|
// 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>
|