[Flight] Basic Streaming Suspense Support (#17285)

* Return whether to keep flowing in Host config * Emit basic chunk based streaming in the Flight server When something suspends a new chunk is created. * Add reentrancy check The WHATWG API is designed to be pulled recursively. We should refactor to favor that approach. * Basic streaming Suspense support on the client * Add basic suspense in example * Add comment describing the protocol that the server generates
facebook · Nov 6, 2019 · dee0304 · dee0304
1 parent f50f39b
commit dee0304
Show file tree

Hide file tree

Showing 11 changed files with 530 additions and 103 deletions.
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
@@ -37,8 +37,26 @@ <h1>Flight Example</h1>
         );
       }
 
+      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',
+        title: <Title />,
         content: {
           __html: <HTML />,
         }
@@ -69,7 +87,9 @@ <h1>Flight Example</h1>
       function Shell({ data }) {
         let model = data.model;
         return <div>
-          <h1>{model.title}</h1>
+          <Suspense fallback="...">
+            <h1>{model.title}</h1>
+          </Suspense>
           <div dangerouslySetInnerHTML={model.content} />
         </div>;
       }

diff --git a/packages/react-dom/src/client/flight/ReactFlightDOMClient.js b/packages/react-dom/src/client/flight/ReactFlightDOMClient.js
@@ -26,7 +26,7 @@ function startReadingFromStream(response, stream: ReadableStream): void {
       return;
     }
     let buffer: Uint8Array = (value: any);
-    processBinaryChunk(response, buffer, 0);
+    processBinaryChunk(response, buffer);
     return reader.read().then(progress, error);
   }
   function error(e) {

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -23,7 +23,7 @@ function renderToReadableStream(children: ReactNodeList): ReadableStream {
       startWork(request);
     },
     pull(controller) {
-      startFlowing(request, controller.desiredSize);
+      startFlowing(request);
     },
     cancel(reason) {},
   });

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -13,7 +13,7 @@ import type {Writable} from 'stream';
 import {createRequest, startWork, startFlowing} from 'react-server/inline.dom';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request, 0);
+  return () => startFlowing(request);
 }
 
 function pipeToNodeWritable(

diff --git a/packages/react-dom/src/server/flight/ReactFlightDOMServerBrowser.js b/packages/react-dom/src/server/flight/ReactFlightDOMServerBrowser.js
@@ -23,7 +23,7 @@ function renderToReadableStream(model: ReactModel): ReadableStream {
       startWork(request);
     },
     pull(controller) {
-      startFlowing(request, controller.desiredSize);
+      startFlowing(request);
     },
     cancel(reason) {},
   });

diff --git a/packages/react-dom/src/server/flight/ReactFlightDOMServerNode.js b/packages/react-dom/src/server/flight/ReactFlightDOMServerNode.js
@@ -17,7 +17,7 @@ import {
 } from 'react-server/flight.inline.dom';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request, 0);
+  return () => startFlowing(request);
 }
 
 function pipeToNodeWritable(model: ReactModel, destination: Writable): void {