Encode Iterator separately from Iterable in Flight

Just giving it a special tag and indirect reference for this edge case.

packages/react-client/src/ReactFlightClient.js

@@ -824,6 +824,11 @@ function createFormData(
   return formData;
 }
 
+function extractIterator(response: Response, model: Array<any>): Iterator<any> {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
 function createModel(response: Response, model: any): any {
   return model;
 }
@@ -918,6 +923,17 @@ function parseModelString(
           createFormData,
         );
       }
+      case 'i': {
+        // Iterator
+        const id = parseInt(value.slice(2), 16);
+        return getOutlinedModel(
+          response,
+          id,
+          parentObject,
+          key,
+          extractIterator,
+        );
+      }
       case 'I': {
         // $Infinity
         return Infinity;

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -277,6 +277,24 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>ABC</span>);
   });
 
+  it('can render an iterator as a single shot iterator', async () => {
+    const iterator = (function* () {
+      yield 'A';
+      yield 'B';
+      yield 'C';
+    })();
+
+    const transport = ReactNoopFlightServer.render(iterator);
+    const result = await ReactNoopFlightClient.read(transport);
+
+    // The iterator should be the same as itself.
+    expect(result[Symbol.iterator]()).toBe(result);
+
+    expect(Array.from(result)).toEqual(['A', 'B', 'C']);
+    // We've already consumed this iterator.
+    expect(Array.from(result)).toEqual([]);
+  });
+
   it('can render undefined', async () => {
     function Undefined() {
       return undefined;

packages/react-server/src/ReactFlightServer.js

@@ -242,7 +242,9 @@ export type ReactClientValue =
   | bigint
   | ReadableStream
   | $AsyncIterable<ReactClientValue, ReactClientValue, void>
+  | $AsyncIterator<ReactClientValue, ReactClientValue, void>
   | Iterable<ReactClientValue>
+  | Iterator<ReactClientValue>
   | Array<ReactClientValue>
   | Map<ReactClientValue, ReactClientValue>
   | Set<ReactClientValue>
@@ -1458,6 +1460,14 @@ function serializeSet(request: Request, set: Set<ReactClientValue>): string {
   return '$W' + id.toString(16);
 }
 
+function serializeIterator(
+  request: Request,
+  iterator: Iterator<ReactClientValue>,
+): string {
+  const id = outlineModel(request, Array.from(iterator));
+  return '$i' + id.toString(16);
+}
+
 function serializeTypedArray(
   request: Request,
   tag: string,
@@ -1911,7 +1921,13 @@ function renderModelDestructive(
 
     const iteratorFn = getIteratorFn(value);
     if (iteratorFn) {
-      return renderFragment(request, task, Array.from((value: any)));
+      // TODO: Should we serialize the return value as well like we do for AsyncIterables?
+      const iterator = iteratorFn.call(value);
+      if (iterator === value) {
+        // Iterator, not Iterable
+        return serializeIterator(request, (iterator: any));
+      }
+      return renderFragment(request, task, Array.from((iterator: any)));
     }
 
     if (enableFlightReadableStream) {