react-server-dom-webpack 19.0.0-canary-cf5ab8b8b2-20240425 → 19.0.0-rc-915b914b3a-20240515

package/cjs/react-server-dom-webpack-client.node.development.js

@@ -18,8 +18,20 @@ var util = require('util');
 var ReactDOM = require('react-dom');
 var React = require('react');
 
-// -----------------------------------------------------------------------------
-var enableBinaryFlight = false;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
 
 function createStringDecoder() {
   return new util.TextDecoder();
@@ -813,20 +825,11 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   return '\n  ' + str;
 }
 
-function writeTemporaryReference(set, object) {
-  // We always create a new entry regardless if we've already written the same
-  // object. This ensures that we always generate a deterministic encoding of
-  // each slot in the reply for cacheability.
-  var newId = set.length;
-  set.push(object);
-  return newId;
+function writeTemporaryReference(set, reference, object) {
+  set.set(reference, object);
 }
-function readTemporaryReference(set, id) {
-  if (id < 0 || id >= set.length) {
-    throw new Error("The RSC response contained a reference that doesn't exist in the temporary reference set. " + 'Always pass the matching set that was used to create the reply when parsing its response.');
-  }
-
-  return set[id];
+function readTemporaryReference(set, reference) {
+  return set.get(reference);
 }
 
 var ObjectPrototype = Object.prototype;
@@ -845,8 +848,8 @@ function serializeServerReferenceID(id) {
   return '$F' + id.toString(16);
 }
 
-function serializeTemporaryReferenceID(id) {
-  return '$T' + id.toString(16);
+function serializeTemporaryReferenceMarker() {
+  return '$T';
 }
 
 function serializeFormDataReference(id) {
@@ -894,6 +897,10 @@ function serializeSetID(id) {
   return '$W' + id.toString(16);
 }
 
+function serializeBlobID(id) {
+  return '$B' + id.toString(16);
+}
+
 function serializeIteratorID(id) {
   return '$i' + id.toString(16);
 }
@@ -912,6 +919,170 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
   var nextPartId = 1;
   var pendingParts = 0;
   var formData = null;
+  var writtenObjects = new WeakMap();
+  var modelRoot = root;
+
+  function serializeTypedArray(tag, typedArray) {
+    var blob = new Blob([// We should be able to pass the buffer straight through but Node < 18 treat
+    // multi-byte array blobs differently so we first convert it to single-byte.
+    new Uint8Array(typedArray.buffer, typedArray.byteOffset, typedArray.byteLength)]);
+    var blobId = nextPartId++;
+
+    if (formData === null) {
+      formData = new FormData();
+    }
+
+    formData.append(formFieldPrefix + blobId, blob);
+    return '$' + tag + blobId.toString(16);
+  }
+
+  function serializeBinaryReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+    var buffer = [];
+
+    function progress(entry) {
+      if (entry.done) {
+        var blobId = nextPartId++; // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + blobId, new Blob(buffer)); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, '"$o' + blobId.toString(16) + '"'); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        buffer.push(entry.value);
+        reader.read(new Uint8Array(1024)).then(progress, reject);
+      }
+    }
+
+    reader.read(new Uint8Array(1024)).then(progress, reject);
+    return '$r' + streamId.toString(16);
+  }
+
+  function serializeReader(reader) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++;
+
+    function progress(entry) {
+      if (entry.done) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        data.append(formFieldPrefix + streamId, 'C'); // Close signal
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+          data.append(formFieldPrefix + streamId, partJSON);
+          reader.read().then(progress, reject);
+        } catch (x) {
+          reject(x);
+        }
+      }
+    }
+
+    reader.read().then(progress, reject);
+    return '$R' + streamId.toString(16);
+  }
+
+  function serializeReadableStream(stream) {
+    // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+    // receiving side. For binary streams, we serialize them as plain Blobs.
+    var binaryReader;
+
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      binaryReader = stream.getReader({
+        mode: 'byob'
+      });
+    } catch (x) {
+      return serializeReader(stream.getReader());
+    }
+
+    return serializeBinaryReader(binaryReader);
+  }
+
+  function serializeAsyncIterable(iterable, iterator) {
+    if (formData === null) {
+      // Upgrade to use FormData to allow us to stream this value.
+      formData = new FormData();
+    }
+
+    var data = formData;
+    pendingParts++;
+    var streamId = nextPartId++; // Generators/Iterators are Iterables but they're also their own iterator
+    // functions. If that's the case, we treat them as single-shot. Otherwise,
+    // we assume that this iterable might be a multi-shot and allow it to be
+    // iterated more than once on the receiving server.
+
+    var isIterator = iterable === iterator; // There's a race condition between when the stream is aborted and when the promise
+    // resolves so we track whether we already aborted it to avoid writing twice.
+
+    function progress(entry) {
+      if (entry.done) {
+        if (entry.value === undefined) {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          data.append(formFieldPrefix + streamId, 'C'); // Close signal
+        } else {
+          // Unlike streams, the last value may not be undefined. If it's not
+          // we outline it and encode a reference to it in the closing instruction.
+          try {
+            // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+            var partJSON = JSON.stringify(entry.value, resolveToJSON);
+            data.append(formFieldPrefix + streamId, 'C' + partJSON); // Close signal
+          } catch (x) {
+            reject(x);
+            return;
+          }
+        }
+
+        pendingParts--;
+
+        if (pendingParts === 0) {
+          resolve(data);
+        }
+      } else {
+        try {
+          // $FlowFixMe[incompatible-type]: While plain JSON can return undefined we never do here.
+          var _partJSON = JSON.stringify(entry.value, resolveToJSON); // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+          data.append(formFieldPrefix + streamId, _partJSON);
+          iterator.next().then(progress, reject);
+        } catch (x) {
+          reject(x);
+          return;
+        }
+      }
+    }
+
+    iterator.next().then(progress, reject);
+    return '$' + (isIterator ? 'x' : 'X') + streamId.toString(16);
+  }
 
   function resolveToJSON(key, value) {
     var parent = this; // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
@@ -937,11 +1108,21 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       switch (value.$$typeof) {
         case REACT_ELEMENT_TYPE:
           {
-            if (temporaryReferences === undefined) {
-              throw new Error('React Element cannot be passed to Server Functions from the Client without a ' + 'temporary reference set. Pass a TemporaryReferenceSet to the options.' + (describeObjectForErrorMessage(parent, key) ));
+            if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+              // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+              var parentReference = writtenObjects.get(parent);
+
+              if (parentReference !== undefined) {
+                // If the parent has a reference, we can refer to this object indirectly
+                // through the property name inside that parent.
+                var reference = parentReference + ':' + key; // Store this object so that the server can refer to it later in responses.
+
+                writeTemporaryReference(temporaryReferences, reference, value);
+                return serializeTemporaryReferenceMarker();
+              }
             }
 
-            return serializeTemporaryReferenceID(writeTemporaryReference(temporaryReferences, value));
+            throw new Error('React Element cannot be passed to Server Functions from the Client without a ' + 'temporary reference set. Pass a TemporaryReferenceSet to the options.' + (describeObjectForErrorMessage(parent, key) ));
           }
 
         case REACT_LAZY_TYPE:
@@ -963,7 +1144,7 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
               // because it ensures a more deterministic encoding.
 
               var lazyId = nextPartId++;
-              var partJSON = JSON.stringify(resolvedModel, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+              var partJSON = serializeModel(resolvedModel, lazyId); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
               var data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
@@ -982,12 +1163,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
                   // While the first promise resolved, its value isn't necessarily what we'll
                   // resolve into because we might suspend again.
                   try {
-                    var _partJSON = JSON.stringify(value, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+                    var _partJSON2 = serializeModel(value, _lazyId); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
                     var _data = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-                    _data.append(formFieldPrefix + _lazyId, _partJSON);
+                    _data.append(formFieldPrefix + _lazyId, _partJSON2);
 
                     pendingParts--;
 
@@ -1028,12 +1209,12 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         _thenable.then(function (partValue) {
           try {
-            var _partJSON2 = JSON.stringify(partValue, resolveToJSON); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
+            var _partJSON3 = serializeModel(partValue, promiseId); // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
 
 
             var _data2 = formData; // eslint-disable-next-line react-internal/safe-string-coercion
 
-            _data2.append(formFieldPrefix + promiseId, _partJSON2);
+            _data2.append(formFieldPrefix + promiseId, _partJSON3);
 
             pendingParts--;
 
@@ -1043,15 +1224,43 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
           } catch (reason) {
             reject(reason);
           }
-        }, function (reason) {
-          // In the future we could consider serializing this as an error
-          // that throws on the server instead.
-          reject(reason);
-        });
+        }, // In the future we could consider serializing this as an error
+        // that throws on the server instead.
+        reject);
 
         return serializePromiseID(promiseId);
       }
 
+      var existingReference = writtenObjects.get(value);
+
+      if (existingReference !== undefined) {
+        if (modelRoot === value) {
+          // This is the ID we're currently emitting so we need to write it
+          // once but if we discover it again, we refer to it by id.
+          modelRoot = null;
+        } else {
+          // We've already emitted this as an outlined object, so we can
+          // just refer to that by its existing ID.
+          return existingReference;
+        }
+      } else if (key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        var _parentReference = writtenObjects.get(parent);
+
+        if (_parentReference !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          var _reference = _parentReference + ':' + key;
+
+          writtenObjects.set(value, _reference);
+
+          if (temporaryReferences !== undefined) {
+            // Store this object so that the server can refer to it later in responses.
+            writeTemporaryReference(temporaryReferences, _reference, value);
+          }
+        }
+      }
+
       if (isArray(value)) {
         // $FlowFixMe[incompatible-return]
         return value;
@@ -1078,29 +1287,117 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       }
 
       if (value instanceof Map) {
-        var _partJSON3 = JSON.stringify(Array.from(value), resolveToJSON);
+        var mapId = nextPartId++;
+
+        var _partJSON4 = serializeModel(Array.from(value), mapId);
 
         if (formData === null) {
           formData = new FormData();
         }
 
-        var mapId = nextPartId++;
-        formData.append(formFieldPrefix + mapId, _partJSON3);
+        formData.append(formFieldPrefix + mapId, _partJSON4);
         return serializeMapID(mapId);
       }
 
       if (value instanceof Set) {
-        var _partJSON4 = JSON.stringify(Array.from(value), resolveToJSON);
+        var setId = nextPartId++;
+
+        var _partJSON5 = serializeModel(Array.from(value), setId);
 
         if (formData === null) {
           formData = new FormData();
         }
 
-        var setId = nextPartId++;
-        formData.append(formFieldPrefix + setId, _partJSON4);
+        formData.append(formFieldPrefix + setId, _partJSON5);
         return serializeSetID(setId);
       }
 
+      {
+        if (value instanceof ArrayBuffer) {
+          var blob = new Blob([value]);
+          var blobId = nextPartId++;
+
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          formData.append(formFieldPrefix + blobId, blob);
+          return '$' + 'A' + blobId.toString(16);
+        }
+
+        if (value instanceof Int8Array) {
+          // char
+          return serializeTypedArray('O', value);
+        }
+
+        if (value instanceof Uint8Array) {
+          // unsigned char
+          return serializeTypedArray('o', value);
+        }
+
+        if (value instanceof Uint8ClampedArray) {
+          // unsigned clamped char
+          return serializeTypedArray('U', value);
+        }
+
+        if (value instanceof Int16Array) {
+          // sort
+          return serializeTypedArray('S', value);
+        }
+
+        if (value instanceof Uint16Array) {
+          // unsigned short
+          return serializeTypedArray('s', value);
+        }
+
+        if (value instanceof Int32Array) {
+          // long
+          return serializeTypedArray('L', value);
+        }
+
+        if (value instanceof Uint32Array) {
+          // unsigned long
+          return serializeTypedArray('l', value);
+        }
+
+        if (value instanceof Float32Array) {
+          // float
+          return serializeTypedArray('G', value);
+        }
+
+        if (value instanceof Float64Array) {
+          // double
+          return serializeTypedArray('g', value);
+        }
+
+        if (value instanceof BigInt64Array) {
+          // number
+          return serializeTypedArray('M', value);
+        }
+
+        if (value instanceof BigUint64Array) {
+          // unsigned number
+          // We use "m" instead of "n" since JSON can start with "null"
+          return serializeTypedArray('m', value);
+        }
+
+        if (value instanceof DataView) {
+          return serializeTypedArray('V', value);
+        } // TODO: Blob is not available in old Node/browsers. Remove the typeof check later.
+
+
+        if (typeof Blob === 'function' && value instanceof Blob) {
+          if (formData === null) {
+            formData = new FormData();
+          }
+
+          var _blobId = nextPartId++;
+
+          formData.append(formFieldPrefix + _blobId, value);
+          return serializeBlobID(_blobId);
+        }
+      }
+
       var iteratorFn = getIteratorFn(value);
 
       if (iteratorFn) {
@@ -1108,18 +1405,33 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
 
         if (iterator === value) {
           // Iterator, not Iterable
-          var _partJSON5 = JSON.stringify(Array.from(iterator), resolveToJSON);
+          var iteratorId = nextPartId++;
+
+          var _partJSON6 = serializeModel(Array.from(iterator), iteratorId);
 
           if (formData === null) {
             formData = new FormData();
           }
 
-          var iteratorId = nextPartId++;
-          formData.append(formFieldPrefix + iteratorId, _partJSON5);
+          formData.append(formFieldPrefix + iteratorId, _partJSON6);
           return serializeIteratorID(iteratorId);
         }
 
         return Array.from(iterator);
+      }
+
+      {
+        // TODO: ReadableStream is not available in old Node. Remove the typeof check later.
+        if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+          return serializeReadableStream(value);
+        }
+
+        var getAsyncIterator = value[ASYNC_ITERATOR];
+
+        if (typeof getAsyncIterator === 'function') {
+          // We treat AsyncIterables as a Fragment and as such we might need to key them.
+          return serializeAsyncIterable(value, getAsyncIterator.call(value));
+        }
       } // Verify that this is a simple plain object.
 
 
@@ -1128,10 +1440,11 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
       if (proto !== ObjectPrototype && (proto === null || getPrototypeOf(proto) !== null)) {
         if (temporaryReferences === undefined) {
           throw new Error('Only plain objects, and a few built-ins, can be passed to Server Actions. ' + 'Classes or null prototypes are not supported.');
-        } // We can serialize class instances as temporary references.
+        } // We will have written this object to the temporary reference set above
+        // so we can replace it with a marker to refer to this slot later.
 
 
-        return serializeTemporaryReferenceID(writeTemporaryReference(temporaryReferences, value));
+        return serializeTemporaryReferenceMarker();
       }
 
       {
@@ -1200,19 +1513,41 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
         return serializeServerReferenceID(_refId);
       }
 
-      if (temporaryReferences === undefined) {
-        throw new Error('Client Functions cannot be passed directly to Server Functions. ' + 'Only Functions passed from the Server can be passed back again.');
+      if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        var _parentReference2 = writtenObjects.get(parent);
+
+        if (_parentReference2 !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          var _reference2 = _parentReference2 + ':' + key; // Store this object so that the server can refer to it later in responses.
+
+
+          writeTemporaryReference(temporaryReferences, _reference2, value);
+          return serializeTemporaryReferenceMarker();
+        }
       }
 
-      return serializeTemporaryReferenceID(writeTemporaryReference(temporaryReferences, value));
+      throw new Error('Client Functions cannot be passed directly to Server Functions. ' + 'Only Functions passed from the Server can be passed back again.');
     }
 
     if (typeof value === 'symbol') {
-      if (temporaryReferences === undefined) {
-        throw new Error('Symbols cannot be passed to a Server Function without a ' + 'temporary reference set. Pass a TemporaryReferenceSet to the options.' + (describeObjectForErrorMessage(parent, key) ));
+      if (temporaryReferences !== undefined && key.indexOf(':') === -1) {
+        // TODO: If the property name contains a colon, we don't dedupe. Escape instead.
+        var _parentReference3 = writtenObjects.get(parent);
+
+        if (_parentReference3 !== undefined) {
+          // If the parent has a reference, we can refer to this object indirectly
+          // through the property name inside that parent.
+          var _reference3 = _parentReference3 + ':' + key; // Store this object so that the server can refer to it later in responses.
+
+
+          writeTemporaryReference(temporaryReferences, _reference3, value);
+          return serializeTemporaryReferenceMarker();
+        }
       }
 
-      return serializeTemporaryReferenceID(writeTemporaryReference(temporaryReferences, value));
+      throw new Error('Symbols cannot be passed to a Server Function without a ' + 'temporary reference set. Pass a TemporaryReferenceSet to the options.' + (describeObjectForErrorMessage(parent, key) ));
     }
 
     if (typeof value === 'bigint') {
@@ -1220,10 +1555,25 @@ function processReply(root, formFieldPrefix, temporaryReferences, resolve, rejec
     }
 
     throw new Error("Type " + typeof value + " is not supported as an argument to a Server Function.");
-  } // $FlowFixMe[incompatible-type] it's not going to be undefined because we'll encode it.
+  }
+
+  function serializeModel(model, id) {
+    if (typeof model === 'object' && model !== null) {
+      var reference = serializeByValueID(id);
+      writtenObjects.set(model, reference);
+
+      if (temporaryReferences !== undefined) {
+        // Store this object so that the server can refer to it later in responses.
+        writeTemporaryReference(temporaryReferences, reference, model);
+      }
+    }
+
+    modelRoot = model; // $FlowFixMe[incompatible-return] it's not going to be undefined because we'll encode it.
 
+    return JSON.stringify(model, resolveToJSON);
+  }
 
-  var json = JSON.stringify(root, resolveToJSON);
+  var json = serializeModel(root, 0);
 
   if (formData === null) {
     // If it's a simple data structure, we just use plain JSON.
@@ -1649,6 +1999,14 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason; // $FlowFixMe[incompatible-call]: The error method should accept mixed.
+
+      controller.error(error);
+    }
 
     return;
   }
@@ -1678,8 +2036,48 @@ function createInitializedTextChunk(response, value) {
   return new Chunk(INITIALIZED, value, null, response);
 }
 
+function createInitializedBufferChunk(response, value) {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, null, response);
+}
+
+function createInitializedIteratorResultChunk(response, value, done) {
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, {
+    done: done,
+    value: value
+  }, null, response);
+}
+
+function createInitializedStreamChunk(response, value, controller) {
+  // We use the reason field to stash the controller since we already have that
+  // field. It's a bit of a hack but efficient.
+  // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+  return new Chunk(INITIALIZED, value, controller, response);
+}
+
+function createResolvedIteratorResultChunk(response, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}'; // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+
+  return new Chunk(RESOLVED_MODEL, iteratorResultJSON, null, response);
+}
+
+function resolveIteratorResultChunk(chunk, value, done) {
+  // To reuse code as much code as possible we add the wrapper element as part of the JSON.
+  var iteratorResultJSON = (done ? '{"done":true,"value":' : '{"done":false,"value":') + value + '}';
+  resolveModelChunk(chunk, iteratorResultJSON);
+}
+
 function resolveModelChunk(chunk, value) {
   if (chunk.status !== PENDING) {
+    {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+      controller.enqueueModel(value);
+    }
 
     return;
   }
@@ -1798,7 +2196,8 @@ function nullRefGetter() {
   }
 }
 
-function createElement(type, key, props, owner) // DEV-only
+function createElement(type, key, props, owner, // DEV-only
+stack) // DEV-only
 {
   var element;
 
@@ -1836,6 +2235,10 @@ function createElement(type, key, props, owner) // DEV-only
       writable: true,
       value: null
     });
+    // _debugInfo later. We could move it into _store which remains mutable.
+
+
+    Object.freeze(element.props);
   }
 
   return element;
@@ -1869,7 +2272,7 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map, path) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
@@ -1886,6 +2289,10 @@ function createModelResolver(chunk, parentObject, key, cyclic, response, map) {
   }
 
   return function (value) {
+    for (var i = 1; i < path.length; i++) {
+      value = value[path[i]];
+    }
+
     parentObject[key] = map(response, value); // If this is the root object for a model reference, where `blocked.value`
     // is a stale `null`, the resolved value can be used directly.
 
@@ -1946,7 +2353,9 @@ function createServerReferenceProxy(response, metaData) {
   return proxy;
 }
 
-function getOutlinedModel(response, id, parentObject, key, map) {
+function getOutlinedModel(response, reference, parentObject, key, map) {
+  var path = reference.split(':');
+  var id = parseInt(path[0], 16);
   var chunk = getChunk(response, id);
 
   switch (chunk.status) {
@@ -1962,7 +2371,13 @@ function getOutlinedModel(response, id, parentObject, key, map) {
 
   switch (chunk.status) {
     case INITIALIZED:
-      var chunkValue = map(response, chunk.value);
+      var value = chunk.value;
+
+      for (var i = 1; i < path.length; i++) {
+        value = value[path[i]];
+      }
+
+      var chunkValue = map(response, value);
 
       if (chunk._debugInfo) {
         // If we have a direct reference to an object that was rendered by a synchronous
@@ -1990,7 +2405,7 @@ function getOutlinedModel(response, id, parentObject, key, map) {
     case BLOCKED:
     case CYCLIC:
       var parentChunk = initializingChunk;
-      chunk.then(createModelResolver(parentChunk, parentObject, key, chunk.status === CYCLIC, response, map), createModelReject(parentChunk));
+      chunk.then(createModelResolver(parentChunk, parentObject, key, chunk.status === CYCLIC, response, map, path), createModelReject(parentChunk));
       return null;
 
     default:
@@ -2006,6 +2421,12 @@ function createSet(response, model) {
   return new Set(model);
 }
 
+function createBlob(response, model) {
+  return new Blob(model.slice(1), {
+    type: model[0]
+  });
+}
+
 function createFormData(response, model) {
   var formData = new FormData();
 
@@ -2073,61 +2494,63 @@ function parseModelString(response, parentObject, key, value) {
       case 'F':
         {
           // Server Reference
-          var _id2 = parseInt(value.slice(2), 16);
-
-          return getOutlinedModel(response, _id2, parentObject, key, createServerReferenceProxy);
+          var ref = value.slice(2);
+          return getOutlinedModel(response, ref, parentObject, key, createServerReferenceProxy);
         }
 
       case 'T':
         {
           // Temporary Reference
-          var _id3 = parseInt(value.slice(2), 16);
-
+          var reference = '$' + value.slice(2);
           var temporaryReferences = response._tempRefs;
 
           if (temporaryReferences == null) {
             throw new Error('Missing a temporary reference set but the RSC response returned a temporary reference. ' + 'Pass a temporaryReference option with the set that was used with the reply.');
           }
 
-          return readTemporaryReference(temporaryReferences, _id3);
+          return readTemporaryReference(temporaryReferences, reference);
         }
 
       case 'Q':
         {
           // Map
-          var _id4 = parseInt(value.slice(2), 16);
+          var _ref = value.slice(2);
 
-          return getOutlinedModel(response, _id4, parentObject, key, createMap);
+          return getOutlinedModel(response, _ref, parentObject, key, createMap);
         }
 
       case 'W':
         {
           // Set
-          var _id5 = parseInt(value.slice(2), 16);
+          var _ref2 = value.slice(2);
 
-          return getOutlinedModel(response, _id5, parentObject, key, createSet);
+          return getOutlinedModel(response, _ref2, parentObject, key, createSet);
         }
 
       case 'B':
         {
+          // Blob
+          {
+            var _ref3 = value.slice(2);
 
-          return undefined;
+            return getOutlinedModel(response, _ref3, parentObject, key, createBlob);
+          }
         }
 
       case 'K':
         {
           // FormData
-          var _id7 = parseInt(value.slice(2), 16);
+          var _ref4 = value.slice(2);
 
-          return getOutlinedModel(response, _id7, parentObject, key, createFormData);
+          return getOutlinedModel(response, _ref4, parentObject, key, createFormData);
         }
 
       case 'i':
         {
           // Iterator
-          var _id8 = parseInt(value.slice(2), 16);
+          var _ref5 = value.slice(2);
 
-          return getOutlinedModel(response, _id8, parentObject, key, extractIterator);
+          return getOutlinedModel(response, _ref5, parentObject, key, extractIterator);
         }
 
       case 'I':
@@ -2191,9 +2614,9 @@ function parseModelString(response, parentObject, key, value) {
       default:
         {
           // We assume that anything else is a reference ID.
-          var _id9 = parseInt(value.slice(1), 16);
+          var _ref6 = value.slice(1);
 
-          return getOutlinedModel(response, _id9, parentObject, key, createModel);
+          return getOutlinedModel(response, _ref6, parentObject, key, createModel);
         }
     }
   }
@@ -2254,9 +2677,41 @@ function resolveModel(response, id, model) {
 function resolveText(response, id, text) {
   var chunks = response._chunks;
 
+  {
+    var chunk = chunks.get(id);
+
+    if (chunk && chunk.status !== PENDING) {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+      controller.enqueueValue(text);
+      return;
+    }
+  }
+
   chunks.set(id, createInitializedTextChunk(response, text));
 }
 
+function resolveBuffer(response, id, buffer) {
+  var chunks = response._chunks;
+
+  {
+    var chunk = chunks.get(id);
+
+    if (chunk && chunk.status !== PENDING) {
+      // If we get more data to an already resolved ID, we assume that it's
+      // a stream chunk since any other row shouldn't have more than one entry.
+      var streamChunk = chunk;
+      var controller = streamChunk.reason;
+      controller.enqueueValue(buffer);
+      return;
+    }
+  }
+
+  chunks.set(id, createInitializedBufferChunk(response, buffer));
+}
+
 function resolveModule(response, id, model) {
   var chunks = response._chunks;
   var chunk = chunks.get(id);
@@ -2299,6 +2754,245 @@ function resolveModule(response, id, model) {
   }
 }
 
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = chunks.get(id);
+
+  if (!chunk) {
+    chunks.set(id, createInitializedStreamChunk(response, stream, controller));
+    return;
+  }
+
+  if (chunk.status !== PENDING) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+
+  var resolveListeners = chunk.value;
+  var resolvedChunk = chunk;
+  resolvedChunk.status = INITIALIZED;
+  resolvedChunk.value = stream;
+  resolvedChunk.reason = controller;
+
+  if (resolveListeners !== null) {
+    wakeChunk(resolveListeners, chunk.value);
+  }
+}
+
+function startReadableStream(response, id, type) {
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    enqueueValue: function (value) {
+      if (previousBlockedChunk === null) {
+        controller.enqueue(value);
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        previousBlockedChunk.then(function () {
+          controller.enqueue(value);
+        });
+      }
+    },
+    enqueueModel: function (json) {
+      if (previousBlockedChunk === null) {
+        // If we're not blocked on any other chunks, we can try to eagerly initialize
+        // this as a fast-path to avoid awaiting them.
+        var chunk = createResolvedModelChunk(response, json);
+        initializeModelChunk(chunk);
+        var initializedChunk = chunk;
+
+        if (initializedChunk.status === INITIALIZED) {
+          controller.enqueue(initializedChunk.value);
+        } else {
+          chunk.then(function (v) {
+            return controller.enqueue(v);
+          }, function (e) {
+            return controller.error(e);
+          });
+          previousBlockedChunk = chunk;
+        }
+      } else {
+        // We're still waiting on a previous chunk so we can't enqueue quite yet.
+        var blockedChunk = previousBlockedChunk;
+
+        var _chunk2 = createPendingChunk(response);
+
+        _chunk2.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk2;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk2) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk2, json);
+        });
+      }
+    },
+    close: function (json) {
+      if (previousBlockedChunk === null) {
+        controller.close();
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.close();
+        });
+      }
+    },
+    error: function (error) {
+      if (previousBlockedChunk === null) {
+        // $FlowFixMe[incompatible-call]
+        controller.error(error);
+      } else {
+        var blockedChunk = previousBlockedChunk; // We shouldn't get any more enqueues after this so we can set it back to null.
+
+        previousBlockedChunk = null;
+        blockedChunk.then(function () {
+          return controller.error(error);
+        });
+      }
+    }
+  };
+  resolveStream(response, id, stream, flightController);
+}
+
+function asyncIterator() {
+  // Self referencing iterator.
+  return this;
+}
+
+function createIterator(next) {
+  var iterator = {
+    next: next // TODO: Add return/throw as options for aborting.
+
+  }; // TODO: The iterator could inherit the AsyncIterator prototype which is not exposed as
+  // a global but exists as a prototype of an AsyncGenerator. However, it's not needed
+  // to satisfy the iterable protocol.
+
+  iterator[ASYNC_ITERATOR] = asyncIterator;
+  return iterator;
+}
+
+function startAsyncIterable(response, id, iterator) {
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    enqueueValue: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createInitializedIteratorResultChunk(response, value, false);
+      } else {
+        var chunk = buffer[nextWriteIndex];
+        var resolveListeners = chunk.value;
+        var rejectListeners = chunk.reason;
+        var initializedChunk = chunk;
+        initializedChunk.status = INITIALIZED;
+        initializedChunk.value = {
+          done: false,
+          value: value
+        };
+
+        if (resolveListeners !== null) {
+          wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
+        }
+      }
+
+      nextWriteIndex++;
+    },
+    enqueueModel: function (value) {
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, false);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, false);
+      }
+
+      nextWriteIndex++;
+    },
+    close: function (value) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createResolvedIteratorResultChunk(response, value, true);
+      } else {
+        resolveIteratorResultChunk(buffer[nextWriteIndex], value, true);
+      }
+
+      nextWriteIndex++;
+
+      while (nextWriteIndex < buffer.length) {
+        // In generators, any extra reads from the iterator have the value undefined.
+        resolveIteratorResultChunk(buffer[nextWriteIndex++], '"$undefined"', true);
+      }
+    },
+    error: function (error) {
+      closed = true;
+
+      if (nextWriteIndex === buffer.length) {
+        buffer[nextWriteIndex] = createPendingChunk(response);
+      }
+
+      while (nextWriteIndex < buffer.length) {
+        triggerErrorOnChunk(buffer[nextWriteIndex++], error);
+      }
+    }
+  };
+
+  var iterable = _defineProperty({}, ASYNC_ITERATOR, function () {
+    var nextReadIndex = 0;
+    return createIterator(function (arg) {
+      if (arg !== undefined) {
+        throw new Error('Values cannot be passed to next() of AsyncIterables passed to Client Components.');
+      }
+
+      if (nextReadIndex === buffer.length) {
+        if (closed) {
+          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
+          return new Chunk(INITIALIZED, {
+            done: true,
+            value: undefined
+          }, null, response);
+        }
+
+        buffer[nextReadIndex] = createPendingChunk(response);
+      }
+
+      return buffer[nextReadIndex++];
+    });
+  }); // TODO: If it's a single shot iterator we can optimize memory by cleaning up the buffer after
+  // reading through the end, but currently we favor code size over this optimization.
+
+
+  resolveStream(response, id, iterator ? iterable[ASYNC_ITERATOR]() : iterable, flightController);
+}
+
+function stopStream(response, id, row) {
+  var chunks = response._chunks;
+  var chunk = chunks.get(id);
+
+  if (!chunk || chunk.status !== INITIALIZED) {
+    // We didn't expect not to have an existing stream;
+    return;
+  }
+
+  var streamChunk = chunk;
+  var controller = streamChunk.reason;
+  controller.close(row === '' ? '"$undefined"' : row);
+}
+
 function resolveErrorDev(response, id, digest, message, stack) {
 
 
@@ -2340,7 +3034,127 @@ function resolveConsoleEntry(response, value) {
   printToConsole(methodName, args, env);
 }
 
+function mergeBuffer(buffer, lastChunk) {
+  var l = buffer.length; // Count the bytes we'll need
+
+  var byteLength = lastChunk.length;
+
+  for (var i = 0; i < l; i++) {
+    byteLength += buffer[i].byteLength;
+  } // Allocate enough contiguous space
+
+
+  var result = new Uint8Array(byteLength);
+  var offset = 0; // Copy all the buffers into it.
+
+  for (var _i = 0; _i < l; _i++) {
+    var chunk = buffer[_i];
+    result.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+
+  result.set(lastChunk, offset);
+  return result;
+}
+
+function resolveTypedArray(response, id, buffer, lastChunk, constructor, bytesPerElement) {
+  // If the view fits into one original buffer, we just reuse that buffer instead of
+  // copying it out to a separate copy. This means that it's not always possible to
+  // transfer these values to other threads without copying first since they may
+  // share array buffer. For this to work, it must also have bytes aligned to a
+  // multiple of a size of the type.
+  var chunk = buffer.length === 0 && lastChunk.byteOffset % bytesPerElement === 0 ? lastChunk : mergeBuffer(buffer, lastChunk); // TODO: The transfer protocol of RSC is little-endian. If the client isn't little-endian
+  // we should convert it instead. In practice big endian isn't really Web compatible so it's
+  // somewhat safe to assume that browsers aren't going to run it, but maybe there's some SSR
+  // server that's affected.
+
+  var view = new constructor(chunk.buffer, chunk.byteOffset, chunk.byteLength / bytesPerElement);
+  resolveBuffer(response, id, view);
+}
+
 function processFullRow(response, id, tag, buffer, chunk) {
+  {
+    switch (tag) {
+      case 65
+      /* "A" */
+      :
+        // We must always clone to extract it into a separate buffer instead of just a view.
+        resolveBuffer(response, id, mergeBuffer(buffer, chunk).buffer);
+        return;
+
+      case 79
+      /* "O" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Int8Array, 1);
+        return;
+
+      case 111
+      /* "o" */
+      :
+        resolveBuffer(response, id, buffer.length === 0 ? chunk : mergeBuffer(buffer, chunk));
+        return;
+
+      case 85
+      /* "U" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Uint8ClampedArray, 1);
+        return;
+
+      case 83
+      /* "S" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Int16Array, 2);
+        return;
+
+      case 115
+      /* "s" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Uint16Array, 2);
+        return;
+
+      case 76
+      /* "L" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Int32Array, 4);
+        return;
+
+      case 108
+      /* "l" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Uint32Array, 4);
+        return;
+
+      case 71
+      /* "G" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Float32Array, 4);
+        return;
+
+      case 103
+      /* "g" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, Float64Array, 8);
+        return;
+
+      case 77
+      /* "M" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, BigInt64Array, 8);
+        return;
+
+      case 109
+      /* "m" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, BigUint64Array, 8);
+        return;
+
+      case 86
+      /* "V" */
+      :
+        resolveTypedArray(response, id, buffer, chunk, DataView, 1);
+        return;
+    }
+  }
 
   var stringDecoder = response._stringDecoder;
   var row = '';
@@ -2415,26 +3229,56 @@ function processFullRow(response, id, tag, buffer, chunk) {
     case 82
     /* "R" */
     :
+      {
+        {
+          startReadableStream(response, id, undefined);
+          return;
+        }
+      }
     // Fallthrough
 
     case 114
     /* "r" */
     :
+      {
+        {
+          startReadableStream(response, id, 'bytes');
+          return;
+        }
+      }
     // Fallthrough
 
     case 88
     /* "X" */
     :
+      {
+        {
+          startAsyncIterable(response, id, false);
+          return;
+        }
+      }
     // Fallthrough
 
     case 120
     /* "x" */
     :
+      {
+        {
+          startAsyncIterable(response, id, true);
+          return;
+        }
+      }
     // Fallthrough
 
     case 67
     /* "C" */
     :
+      {
+        {
+          stopStream(response, id, row);
+          return;
+        }
+      }
     // Fallthrough
 
     case 80
@@ -2487,7 +3331,31 @@ function processBinaryChunk(response, chunk) {
 
           if (resolvedRowTag === 84
           /* "T" */
-          || enableBinaryFlight 
+          || (resolvedRowTag === 65
+          /* "A" */
+          || resolvedRowTag === 79
+          /* "O" */
+          || resolvedRowTag === 111
+          /* "o" */
+          || resolvedRowTag === 85
+          /* "U" */
+          || resolvedRowTag === 83
+          /* "S" */
+          || resolvedRowTag === 115
+          /* "s" */
+          || resolvedRowTag === 76
+          /* "L" */
+          || resolvedRowTag === 108
+          /* "l" */
+          || resolvedRowTag === 71
+          /* "G" */
+          || resolvedRowTag === 103
+          /* "g" */
+          || resolvedRowTag === 77
+          /* "M" */
+          || resolvedRowTag === 109
+          /* "m" */
+          || resolvedRowTag === 86)
           /* "V" */
           ) {
               rowTag = resolvedRowTag;