1. <!DOCTYPE html>

  2. <html style="width: 100%; height: 100%; overflow: hidden">

  3.   <head>

  4.     <meta charset="utf-8">

  5.     <title>Flight Example</title>

  6.   </head>

  7.   <body>

  8.     <h1>Flight Example</h1>

  9.     <div id="container">

  10.       <p>

  11.         To install React, follow the instructions on

  12.         <a href="https://github.com/facebook/react/">GitHub</a>.

  13.       </p>

  14.       <p>

  15.         If you can see this, React is <strong>not</strong> working right.

  16.         If you checked out the source from GitHub make sure to run <code>npm run build</code>.

  17.       </p>

  18.     </div>

  19.     <script src="../../build/oss-experimental/react/umd/react.development.js"></script>

  20.     <script src="../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>

  21.     <script src="../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js"></script>

  22.     <script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>

  23.     <script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js"></script>

  24.     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

  25.     <script type="text/babel">

  26.       let Suspense = React.Suspense;

  27. 

  28.       function Text({children}) {

  29.         return <span>{children}</span>;

  30.       }

  31.       function HTML() {

  32.         return (

  33.           <div>

  34.             <Text>hello</Text>

  35.             <Text>world</Text>

  36.           </div>

  37.         );

  38.       }

  39. 

  40.       let resolved = false;

  41.       let promise = new Promise(resolve => {

  42.         setTimeout(() => {

  43.           resolved = true;

  44.           resolve();

  45.         }, 100);

  46.       });

  47.       function read() {

  48.         if (!resolved) {

  49.           throw promise;

  50.         }

  51.       }

  52. 

  53.       function Title() {

  54.         read();

  55.         return 'Title';

  56.       }

  57. 

  58.       let model = {

  59.         title: <Title />,

  60.         content: <HTML />,

  61.       };

  62. 

  63.       let stream = ReactServerDOMServer.renderToReadableStream(model);

  64.       let response = new Response(stream, {

  65.         headers: {'Content-Type': 'text/html'},

  66.       });

  67.       display(response);

  68. 

  69.       async function display(responseToDisplay) {

  70.         let blob = await responseToDisplay.blob();

  71.         let url = URL.createObjectURL(blob);

  72. 

  73.         let data = ReactServerDOMClient.createFromFetch(

  74.           fetch(url)

  75.         );

  76.         renderResult(data);

  77.       }

  78. 

  79.       function Shell({ data }) {

  80.         let model = React.use(data);

  81.         return <div>

  82.           <Suspense fallback="...">

  83.             <h1>{model.title}</h1>

  84.           </Suspense>

  85.           {model.content}

  86.         </div>;

  87.       }

  88. 

  89.       function renderResult(data) {

  90.         let container = document.getElementById('container');

  91.         ReactDOM.createRoot(

  92.           container

  93.         ).render(

  94.           <Suspense fallback="Loading...">

  95.             <Shell data={data} />

  96.           </Suspense>,

  97.         );

  98.       }

  99.     </script>

  100.   </body>

  101. </html>
About Sign Up Leave Feedback Contact