fixtures/flight-browser/index.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>