react-server-dom-webpack 19.0.0-canary-cf5ab8b8b2-20240425 → 19.0.0-rc-3f1436cca1-20240516

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

@@ -229,9 +229,16 @@ var textEncoder = new util.TextEncoder();
 function stringToChunk(content) {
   return content;
 }
+function typedArrayToBinaryChunk(content) {
+  // Convert any non-Uint8Array array to Uint8Array. We could avoid this for Uint8Arrays.
+  return new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
+}
 function byteLengthOfChunk(chunk) {
   return typeof chunk === 'string' ? Buffer.byteLength(chunk, 'utf8') : chunk.byteLength;
 }
+function byteLengthOfBinaryChunk(chunk) {
+  return chunk.byteLength;
+}
 function closeWithError(destination, error) {
   // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
   destination.destroy(error);
@@ -832,14 +839,19 @@ function createHints() {
 
 var supportsRequestStorage = true;
 var requestStorage = new async_hooks.AsyncLocalStorage();
+var supportsComponentStorage = true;
+var componentStorage = new async_hooks.AsyncLocalStorage() ;
 
 var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
-function isTemporaryReference(reference) {
+function createTemporaryReferenceSet() {
+  return new WeakMap();
+}
+function isOpaqueTemporaryReference(reference) {
   return reference.$$typeof === TEMPORARY_REFERENCE_TAG;
 }
-function resolveTemporaryReferenceID(temporaryReference) {
-  return temporaryReference.$$id;
+function resolveTemporaryReference(temporaryReferences, temporaryReference) {
+  return temporaryReferences.get(temporaryReference);
 }
 var proxyHandlers = {
   get: function (target, name, receiver) {
@@ -850,12 +862,6 @@ var proxyHandlers = {
         // have the Flight runtime extract the inner target instead.
         return target.$$typeof;
 
-      case '$$id':
-        return target.$$id;
-
-      case '$$async':
-        return target.$$async;
-
       case 'name':
         return undefined;
 
@@ -890,21 +896,28 @@ var proxyHandlers = {
     throw new Error('Cannot assign to a temporary client reference from a server module.');
   }
 };
-function createTemporaryReference(id) {
+function createTemporaryReference(temporaryReferences, id) {
   var reference = Object.defineProperties(function () {
     throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
     "Attempted to call a temporary Client Reference from the server but it is on the client. " + "It's not possible to invoke a client function from the server, it can " + "only be rendered as a Component or passed to props of a Client Component.");
   }, {
     $$typeof: {
       value: TEMPORARY_REFERENCE_TAG
-    },
-    $$id: {
-      value: id
     }
   });
-  return new Proxy(reference, proxyHandlers);
+  var wrapper = new Proxy(reference, proxyHandlers);
+  registerTemporaryReference(temporaryReferences, wrapper, id);
+  return wrapper;
 }
+function registerTemporaryReference(temporaryReferences, object, id) {
+  temporaryReferences.set(object, id);
+}
+
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+// The Symbol used to tag the ReactElement-like types.
 
+var REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element');
 var REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element') ;
 var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
 var REACT_CONTEXT_TYPE = Symbol.for('react.context');
@@ -930,6 +943,7 @@ function getIteratorFn(maybeIterable) {
 
   return null;
 }
+var ASYNC_ITERATOR = Symbol.asyncIterator;
 
 // Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
 // changes to one module should be reflected in the others.
@@ -1178,6 +1192,21 @@ function use(usable) {
   }
 }
 
+var currentOwner = null;
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
+function resolveOwner() {
+  if (currentOwner) return currentOwner;
+
+  {
+    var owner = componentStorage.getStore();
+    if (owner) return owner;
+  }
+
+  return null;
+}
+
 function resolveCache() {
   var request = resolveRequest();
 
@@ -1188,7 +1217,7 @@ function resolveCache() {
   return new Map();
 }
 
-var DefaultCacheDispatcher = {
+var DefaultAsyncDispatcher = {
   getCacheForType: function (resourceType) {
     var cache = resolveCache();
     var entry = cache.get(resourceType);
@@ -1203,6 +1232,10 @@ var DefaultCacheDispatcher = {
   }
 };
 
+{
+  DefaultAsyncDispatcher.getOwner = resolveOwner;
+}
+
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
 function isArray(a) {
@@ -1551,10 +1584,7 @@ var stringify = JSON.stringify; // Serializable values
 var PENDING$1 = 0;
 var COMPLETED = 1;
 var ABORTED = 3;
-var ERRORED$1 = 4; // object reference status
-
-var SEEN_BUT_NOT_YET_OUTLINED = -1;
-var NEVER_OUTLINED = -2;
+var ERRORED$1 = 4;
 
 function defaultErrorHandler(error) {
   console['error'](error); // Don't transform to our wrapper
@@ -1566,12 +1596,12 @@ function defaultPostponeHandler(reason) {// Noop
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName) {
-  if (ReactSharedInternals.C !== null && ReactSharedInternals.C !== DefaultCacheDispatcher) {
+function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName, temporaryReferences) {
+  if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) {
     throw new Error('Currently React only supports one RSC renderer at a time.');
   }
 
-  ReactSharedInternals.C = DefaultCacheDispatcher;
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
   var abortSet = new Set();
   var pingedTasks = [];
   var cleanupQueue = [];
@@ -1598,6 +1628,7 @@ function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpo
     writtenClientReferences: new Map(),
     writtenServerReferences: new Map(),
     writtenObjects: new WeakMap(),
+    temporaryReferences: temporaryReferences,
     identifierPrefix: identifierPrefix || '',
     identifierCount: 1,
     taintCleanupQueue: cleanupQueue,
@@ -1705,6 +1736,192 @@ function serializeThenable(request, task, thenable) {
   return newTask.id;
 }
 
+function serializeReadableStream(request, task, stream) {
+  // Detect if this is a BYOB stream. BYOB streams should be able to be read as bytes on the
+  // receiving side. It also implies that different chunks can be split up or merged as opposed
+  // to a readable stream that happens to have Uint8Array as the type which might expect it to be
+  // received in the same slices.
+  // $FlowFixMe: This is a Node.js extension.
+  var supportsBYOB = stream.supportsBYOB;
+
+  if (supportsBYOB === undefined) {
+    try {
+      // $FlowFixMe[extra-arg]: This argument is accepted.
+      stream.getReader({
+        mode: 'byob'
+      }).releaseLock();
+      supportsBYOB = true;
+    } catch (x) {
+      supportsBYOB = false;
+    }
+  }
+
+  var reader = stream.getReader(); // This task won't actually be retried. We just use it to attempt synchronous renders.
+
+  var streamTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
+  request.abortableTasks.delete(streamTask);
+  request.pendingChunks++; // The task represents the Start row. This adds a Stop row.
+
+  var startStreamRow = streamTask.id.toString(16) + ':' + (supportsBYOB ? 'r' : 'R') + '\n';
+  request.completedRegularChunks.push(stringToChunk(startStreamRow)); // 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.
+
+  var aborted = false;
+
+  function progress(entry) {
+    if (aborted) {
+      return;
+    }
+
+    if (entry.done) {
+      request.abortListeners.delete(error);
+      var endStreamRow = streamTask.id.toString(16) + ':C\n';
+      request.completedRegularChunks.push(stringToChunk(endStreamRow));
+      enqueueFlush(request);
+      aborted = true;
+    } else {
+      try {
+        streamTask.model = entry.value;
+        request.pendingChunks++;
+        tryStreamTask(request, streamTask);
+        enqueueFlush(request);
+        reader.read().then(progress, error);
+      } catch (x) {
+        error(x);
+      }
+    }
+  }
+
+  function error(reason) {
+    if (aborted) {
+      return;
+    }
+
+    aborted = true;
+    request.abortListeners.delete(error);
+
+    {
+      var digest = logRecoverableError(request, reason);
+      emitErrorChunk(request, streamTask.id, digest, reason);
+    }
+
+    enqueueFlush(request); // $FlowFixMe should be able to pass mixed
+
+    reader.cancel(reason).then(error, error);
+  }
+
+  request.abortListeners.add(error);
+  reader.read().then(progress, error);
+  return serializeByValueID(streamTask.id);
+} // This indirect exists so we can exclude its stack frame in DEV (and anything below it).
+
+/** @noinline */
+
+
+function callIteratorInDEV(iterator, progress, error) {
+  iterator.next().then(progress, error);
+}
+
+function serializeAsyncIterable(request, task, iterable, iterator) {
+  // 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 client.
+  var isIterator = iterable === iterator; // This task won't actually be retried. We just use it to attempt synchronous renders.
+
+  var streamTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
+  request.abortableTasks.delete(streamTask);
+  request.pendingChunks++; // The task represents the Start row. This adds a Stop row.
+
+  var startStreamRow = streamTask.id.toString(16) + ':' + (isIterator ? 'x' : 'X') + '\n';
+  request.completedRegularChunks.push(stringToChunk(startStreamRow));
+
+  {
+    var debugInfo = iterable._debugInfo;
+
+    if (debugInfo) {
+      forwardDebugInfo(request, streamTask.id, debugInfo);
+    }
+  } // 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.
+
+
+  var aborted = false;
+
+  function progress(entry) {
+    if (aborted) {
+      return;
+    }
+
+    if (entry.done) {
+      request.abortListeners.delete(error);
+      var endStreamRow;
+
+      if (entry.value === undefined) {
+        endStreamRow = streamTask.id.toString(16) + ':C\n';
+      } 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 {
+          var chunkId = outlineModel(request, entry.value);
+          endStreamRow = streamTask.id.toString(16) + ':C' + stringify(serializeByValueID(chunkId)) + '\n';
+        } catch (x) {
+          error(x);
+          return;
+        }
+      }
+
+      request.completedRegularChunks.push(stringToChunk(endStreamRow));
+      enqueueFlush(request);
+      aborted = true;
+    } else {
+      try {
+        streamTask.model = entry.value;
+        request.pendingChunks++;
+        tryStreamTask(request, streamTask);
+        enqueueFlush(request);
+
+        if (true) {
+          callIteratorInDEV(iterator, progress, error);
+        }
+      } catch (x) {
+        error(x);
+        return;
+      }
+    }
+  }
+
+  function error(reason) {
+    if (aborted) {
+      return;
+    }
+
+    aborted = true;
+    request.abortListeners.delete(error);
+
+    {
+      var digest = logRecoverableError(request, reason);
+      emitErrorChunk(request, streamTask.id, digest, reason);
+    }
+
+    enqueueFlush(request);
+
+    if (typeof iterator.throw === 'function') {
+      // The iterator protocol doesn't necessarily include this but a generator do.
+      // $FlowFixMe should be able to pass mixed
+      iterator.throw(reason).then(error, error);
+    }
+  }
+
+  request.abortListeners.add(error);
+
+  {
+    callIteratorInDEV(iterator, progress, error);
+  }
+
+  return serializeByValueID(streamTask.id);
+}
+
 function emitHint(request, code, model) {
   emitHintChunk(request, code, model);
   enqueueFlush(request);
@@ -1776,15 +1993,45 @@ function createLazyWrapperAroundWakeable(wakeable) {
   }
 
   return lazyType;
+} // This indirect exists so we can exclude its stack frame in DEV (and anything below it).
+
+/** @noinline */
+
+
+function callComponentInDEV(Component, props, componentDebugInfo) {
+  // The secondArg is always undefined in Server Components since refs error early.
+  var secondArg = undefined;
+  setCurrentOwner(componentDebugInfo);
+
+  try {
+    if (supportsComponentStorage) {
+      // Run the component in an Async Context that tracks the current owner.
+      return componentStorage.run(componentDebugInfo, Component, props, secondArg);
+    }
+  } finally {
+    setCurrentOwner(null);
+  }
+} // This indirect exists so we can exclude its stack frame in DEV (and anything below it).
+
+/** @noinline */
+
+
+function callLazyInitInDEV(lazy) {
+  var payload = lazy._payload;
+  var init = lazy._init;
+  return init(payload);
 }
 
-function renderFunctionComponent(request, task, key, Component, props, owner) {
+function renderFunctionComponent(request, task, key, Component, props, owner, // DEV-only
+stack) // DEV-only
+{
   // Reset the task's thenable state before continuing, so that if a later
   // component suspends we can reuse the same task object. If the same
   // component suspends again, the thenable state will be restored.
   var prevThenableState = task.thenableState;
   task.thenableState = null;
-  var componentDebugInfo = null;
+  var result;
+  var componentDebugInfo;
 
   {
     if (debugID === null) {
@@ -1805,28 +2052,17 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
         name: componentName,
         env: request.environmentName,
         owner: owner
-      }; // We outline this model eagerly so that we can refer to by reference as an owner.
+      };
       // If we had a smarter way to dedupe we might not have to do this if there ends up
       // being no references to this as an owner.
 
+
       outlineModel(request, componentDebugInfo);
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
     }
-  }
-
-  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
 
-  var secondArg = undefined;
-  var result;
-
-  {
-    ReactSharedInternals.owner = componentDebugInfo;
-
-    try {
-      result = Component(props, secondArg);
-    } finally {
-      ReactSharedInternals.owner = null;
-    }
+    prepareToUseHooksForComponent(prevThenableState, componentDebugInfo);
+    result = callComponentInDEV(Component, props, componentDebugInfo);
   }
 
   if (typeof result === 'object' && result !== null) {
@@ -1878,6 +2114,33 @@ function renderFunctionComponent(request, task, key, Component, props, owner) {
       {
         result._debugInfo = iterableChild._debugInfo;
       }
+    } else if (typeof result[ASYNC_ITERATOR] === 'function' && (typeof ReadableStream !== 'function' || !(result instanceof ReadableStream))) {
+      var _iterableChild = result;
+      result = _defineProperty({}, ASYNC_ITERATOR, function () {
+        var iterator = _iterableChild[ASYNC_ITERATOR]();
+
+        {
+          // If this was an AsyncIterator but not an AsyncGeneratorFunction we warn because
+          // it might have been a mistake. Technically you can make this mistake with
+          // AsyncGeneratorFunctions and even single-shot AsyncIterables too but it's extra
+          // tempting to try to return the value from a generator.
+          if (iterator === _iterableChild) {
+            var isGeneratorComponent = // $FlowIgnore[method-unbinding]
+            Object.prototype.toString.call(Component) === '[object AsyncGeneratorFunction]' && // $FlowIgnore[method-unbinding]
+            Object.prototype.toString.call(_iterableChild) === '[object AsyncGenerator]';
+
+            if (!isGeneratorComponent) {
+              error('Returning an AsyncIterator from a Server Component is not supported ' + 'since it cannot be looped over more than once. ');
+            }
+          }
+        }
+
+        return iterator;
+      });
+
+      {
+        result._debugInfo = _iterableChild._debugInfo;
+      }
     }
   } // Track this element's key on the Server Component on the keyPath context..
 
@@ -1960,11 +2223,47 @@ function renderFragment(request, task, children) {
   return children;
 }
 
-function renderClientElement(task, type, key, props, owner) // DEV-only
-{
-  // the keys of any Server Components which are not serialized.
+function renderAsyncFragment(request, task, children, getAsyncIterator) {
+  if (task.keyPath !== null) {
+    // We have a Server Component that specifies a key but we're now splitting
+    // the tree using a fragment.
+    var fragment = [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {
+      children: children
+    }];
+
+    if (!task.implicitSlot) {
+      // If this was keyed inside a set. I.e. the outer Server Component was keyed
+      // then we need to handle reorders of the whole set. To do this we need to wrap
+      // this array in a keyed Fragment.
+      return fragment;
+    } // If the outer Server Component was implicit but then an inner one had a key
+    // we don't actually need to be able to move the whole set around. It'll always be
+    // in an implicit slot. The key only exists to be able to reset the state of the
+    // children. We could achieve the same effect by passing on the keyPath to the next
+    // set of components inside the fragment. This would also allow a keyless fragment
+    // reconcile against a single child.
+    // Unfortunately because of JSON.stringify, we can't call the recursive loop for
+    // each child within this context because we can't return a set with already resolved
+    // values. E.g. a string would get double encoded. Returning would pop the context.
+    // So instead, we wrap it with an unkeyed fragment and inner keyed fragment.
+
 
+    return [fragment];
+  } // Since we're yielding here, that implicitly resets the keyPath context on the
+  // way up. Which is what we want since we've consumed it. If this changes to
+  // be recursive serialization, we need to reset the keyPath and implicitSlot,
+  // before recursing here.
+
+
+  var asyncIterator = getAsyncIterator.call(children);
+  return serializeAsyncIterable(request, task, children, asyncIterator);
+}
 
+function renderClientElement(task, type, key, props, owner, // DEV-only
+stack) // DEV-only
+{
+  // We prepend the terminal client element that actually gets serialized with
+  // the keys of any Server Components which are not serialized.
   var keyPath = task.keyPath;
 
   if (key === null) {
@@ -2011,7 +2310,8 @@ function outlineTask(request, task) {
   return serializeLazyID(newTask.id);
 }
 
-function renderElement(request, task, type, key, ref, props, owner) // DEV only
+function renderElement(request, task, type, key, ref, props, owner, // DEV only
+stack) // DEV only
 {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -2031,7 +2331,7 @@ function renderElement(request, task, type, key, ref, props, owner) // DEV only
   }
 
   if (typeof type === 'function') {
-    if (isClientReference(type) || isTemporaryReference(type)) {
+    if (isClientReference(type) || isOpaqueTemporaryReference(type)) {
       // This is a reference to a Client Component.
       return renderClientElement(task, type, key, props, owner);
     } // This is a Server Component.
@@ -2068,9 +2368,12 @@ function renderElement(request, task, type, key, ref, props, owner) // DEV only
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE:
         {
-          var payload = type._payload;
-          var init = type._init;
-          var wrappedType = init(payload);
+          var wrappedType;
+
+          {
+            wrappedType = callLazyInitInDEV(type);
+          }
+
           return renderElement(request, task, wrappedType, key, ref, props, owner);
         }
 
@@ -2108,8 +2411,8 @@ function createTask(request, model, keyPath, implicitSlot, abortSet) {
   if (typeof model === 'object' && model !== null) {
     // If we're about to write this into a new task we can assign it an ID early so that
     // any other references can refer to the value we're about to write.
-    if ((keyPath !== null || implicitSlot)) ; else {
-      request.writtenObjects.set(model, id);
+    if (keyPath !== null || implicitSlot) ; else {
+      request.writtenObjects.set(model, serializeByValueID(id));
     }
   }
 
@@ -2172,10 +2475,6 @@ function serializeServerReferenceID(id) {
   return '$F' + id.toString(16);
 }
 
-function serializeTemporaryReferenceID(id) {
-  return '$T' + id;
-}
-
 function serializeSymbolReference(name) {
   return '$S' + name;
 }
@@ -2292,9 +2591,8 @@ function serializeServerReference(request, serverReference) {
   return serializeServerReferenceID(metadataId);
 }
 
-function serializeTemporaryReference(request, temporaryReference) {
-  var id = resolveTemporaryReferenceID(temporaryReference);
-  return serializeTemporaryReferenceID(id);
+function serializeTemporaryReference(request, reference) {
+  return '$T' + reference;
 }
 
 function serializeLargeTextString(request, text) {
@@ -2306,20 +2604,6 @@ function serializeLargeTextString(request, text) {
 
 function serializeMap(request, map) {
   var entries = Array.from(map);
-
-  for (var i = 0; i < entries.length; i++) {
-    var key = entries[i][0];
-
-    if (typeof key === 'object' && key !== null) {
-      var writtenObjects = request.writtenObjects;
-      var existingId = writtenObjects.get(key);
-
-      if (existingId === undefined) {
-        writtenObjects.set(key, SEEN_BUT_NOT_YET_OUTLINED);
-      }
-    }
-  }
-
   var id = outlineModel(request, entries);
   return '$Q' + id.toString(16);
 }
@@ -2332,20 +2616,6 @@ function serializeFormData(request, formData) {
 
 function serializeSet(request, set) {
   var entries = Array.from(set);
-
-  for (var i = 0; i < entries.length; i++) {
-    var key = entries[i];
-
-    if (typeof key === 'object' && key !== null) {
-      var writtenObjects = request.writtenObjects;
-      var existingId = writtenObjects.get(key);
-
-      if (existingId === undefined) {
-        writtenObjects.set(key, SEEN_BUT_NOT_YET_OUTLINED);
-      }
-    }
-  }
-
   var id = outlineModel(request, entries);
   return '$W' + id.toString(16);
 }
@@ -2355,6 +2625,58 @@ function serializeIterator(request, iterator) {
   return '$i' + id.toString(16);
 }
 
+function serializeTypedArray(request, tag, typedArray) {
+  request.pendingChunks++;
+  var bufferId = request.nextChunkId++;
+  emitTypedArrayChunk(request, bufferId, tag, typedArray);
+  return serializeByValueID(bufferId);
+}
+
+function serializeBlob(request, blob) {
+  var model = [blob.type];
+  var newTask = createTask(request, model, null, false, request.abortableTasks);
+  var reader = blob.stream().getReader();
+  var aborted = false;
+
+  function progress(entry) {
+    if (aborted) {
+      return;
+    }
+
+    if (entry.done) {
+      request.abortListeners.delete(error);
+      aborted = true;
+      pingTask(request, newTask);
+      return;
+    } // TODO: Emit the chunk early and refer to it later by dedupe.
+
+
+    model.push(entry.value); // $FlowFixMe[incompatible-call]
+
+    return reader.read().then(progress).catch(error);
+  }
+
+  function error(reason) {
+    if (aborted) {
+      return;
+    }
+
+    aborted = true;
+    request.abortListeners.delete(error);
+    var digest = logRecoverableError(request, reason);
+    emitErrorChunk(request, newTask.id, digest, reason);
+    request.abortableTasks.delete(newTask);
+    enqueueFlush(request); // $FlowFixMe should be able to pass mixed
+
+    reader.cancel(reason).then(error, error);
+  }
+
+  request.abortListeners.add(error); // $FlowFixMe[incompatible-call]
+
+  reader.read().then(progress).catch(error);
+  return '$B' + newTask.id.toString(16);
+}
+
 function escapeStringValue(value) {
   if (value[0] === '$') {
     // We need to escape $ prefixed strings since we use those to encode
@@ -2447,37 +2769,34 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
         {
           var _writtenObjects = request.writtenObjects;
 
-          var _existingId = _writtenObjects.get(value);
-
-          if (_existingId !== undefined) {
-            if ((task.keyPath !== null || task.implicitSlot)) ; else 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 if (_existingId === SEEN_BUT_NOT_YET_OUTLINED) {
-              // TODO: If we throw here we can treat this as suspending which causes an outline
-              // but that is able to reuse the same task if we're already in one but then that
-              // will be a lazy future value rather than guaranteed to exist but maybe that's good.
-              var newId = outlineModel(request, value);
-              return serializeByValueID(newId);
-            } else {
-              // We've already emitted this as an outlined object, so we can refer to that by its
-              // existing ID. TODO: We should use a lazy reference since, unlike plain objects,
-              // elements might suspend so it might not have emitted yet even if we have the ID for
-              // it. However, this creates an extra wrapper when it's not needed. We should really
-              // detect whether this already was emitted and synchronously available. In that
-              // case we can refer to it synchronously and only make it lazy otherwise.
-              // We currently don't have a data structure that lets us see that though.
-              return serializeByValueID(_existingId);
-            }
-          } else {
-            // This is the first time we've seen this object. We may never see it again
-            // so we'll inline it. Mark it as seen. If we see it again, we'll outline.
-            _writtenObjects.set(value, SEEN_BUT_NOT_YET_OUTLINED); // The element's props are marked as "never outlined" so that they are inlined into
-            // the same row as the element itself.
-
+          if (task.keyPath !== null || task.implicitSlot) ; else {
+            var _existingReference = _writtenObjects.get(value);
 
-            _writtenObjects.set(value.props, NEVER_OUTLINED);
+            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 refer to that by its
+                // existing ID. TODO: We should use a lazy reference since, unlike plain objects,
+                // elements might suspend so it might not have emitted yet even if we have the ID for
+                // it. However, this creates an extra wrapper when it's not needed. We should really
+                // detect whether this already was emitted and synchronously available. In that
+                // case we can refer to it synchronously and only make it lazy otherwise.
+                // We currently don't have a data structure that lets us see that though.
+                return _existingReference;
+              }
+            } else if (parentPropertyName.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.
+                _writtenObjects.set(value, parentReference + ':' + parentPropertyName);
+              }
+            }
           }
 
           var element = value;
@@ -2520,9 +2839,11 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           // from suspending the lazy before.
           task.thenableState = null;
           var lazy = value;
-          var payload = lazy._payload;
-          var init = lazy._init;
-          var resolvedModel = init(payload);
+          var resolvedModel;
+
+          {
+            resolvedModel = callLazyInitInDEV(lazy);
+          }
 
           {
             var _debugInfo = lazy._debugInfo;
@@ -2544,18 +2865,31 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
           return renderModelDestructive(request, task, emptyRoot, '', resolvedModel);
         }
+
+      case REACT_LEGACY_ELEMENT_TYPE:
+        {
+          throw new Error('A React Element from an older version of React was rendered. ' + 'This is not supported. It can happen if:\n' + '- Multiple copies of the "react" package is used.\n' + '- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' + '- A compiler tries to "inline" JSX instead of using the runtime.');
+        }
     }
 
     if (isClientReference(value)) {
       return serializeClientReference(request, parent, parentPropertyName, value);
     }
 
+    if (request.temporaryReferences !== undefined) {
+      var tempRef = resolveTemporaryReference(request.temporaryReferences, value);
+
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
     var writtenObjects = request.writtenObjects;
-    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+    var existingReference = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
 
     if (typeof value.then === 'function') {
-      if (existingId !== undefined) {
-        if ((task.keyPath !== null || task.implicitSlot)) {
+      if (existingReference !== undefined) {
+        if (task.keyPath !== null || task.implicitSlot) {
           // If we're in some kind of context we can't reuse the result of this render or
           // previous renders of this element. We only reuse Promises if they're not wrapped
           // by another Server Component.
@@ -2568,35 +2902,58 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
           modelRoot = null;
         } else {
           // We've seen this promise before, so we can just refer to the same result.
-          return serializePromiseID(existingId);
+          return existingReference;
         }
       } // We assume that any object with a .then property is a "Thenable" type,
       // or a Promise type. Either of which can be represented by a Promise.
 
 
       var promiseId = serializeThenable(request, task, value);
-      writtenObjects.set(value, promiseId);
-      return serializePromiseID(promiseId);
+      var promiseReference = serializePromiseID(promiseId);
+      writtenObjects.set(value, promiseReference);
+      return promiseReference;
     }
 
-    if (existingId !== undefined) {
+    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 if (existingId === SEEN_BUT_NOT_YET_OUTLINED) {
-        var _newId = outlineModel(request, value);
-
-        return serializeByValueID(_newId);
-      } else if (existingId !== NEVER_OUTLINED) {
+      } else {
         // We've already emitted this as an outlined object, so we can
         // just refer to that by its existing ID.
-        return serializeByValueID(existingId);
+        return existingReference;
+      }
+    } else if (parentPropertyName.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 propertyName = parentPropertyName;
+
+        if (isArray(parent) && parent[0] === REACT_ELEMENT_TYPE) {
+          // For elements, we've converted it to an array but we'll have converted
+          // it back to an element before we read the references so the property
+          // needs to be aliased.
+          switch (parentPropertyName) {
+            case '1':
+              propertyName = 'type';
+              break;
+
+            case '2':
+              propertyName = 'key';
+              break;
+
+            case '3':
+              propertyName = 'props';
+              break;
+          }
+        }
+
+        writtenObjects.set(value, _parentReference + ':' + propertyName);
       }
-    } else {
-      // This is the first time we've seen this object. We may never see it again
-      // so we'll inline it. Mark it as seen. If we see it again, we'll outline.
-      writtenObjects.set(value, SEEN_BUT_NOT_YET_OUTLINED);
     }
 
     if (isArray(value)) {
@@ -2616,20 +2973,105 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
       return serializeFormData(request, value);
     }
 
-    var iteratorFn = getIteratorFn(value);
+    {
+      if (value instanceof ArrayBuffer) {
+        return serializeTypedArray(request, 'A', new Uint8Array(value));
+      }
 
-    if (iteratorFn) {
-      // TODO: Should we serialize the return value as well like we do for AsyncIterables?
-      var iterator = iteratorFn.call(value);
+      if (value instanceof Int8Array) {
+        // char
+        return serializeTypedArray(request, 'O', value);
+      }
 
-      if (iterator === value) {
-        // Iterator, not Iterable
+      if (value instanceof Uint8Array) {
+        // unsigned char
+        return serializeTypedArray(request, 'o', value);
+      }
+
+      if (value instanceof Uint8ClampedArray) {
+        // unsigned clamped char
+        return serializeTypedArray(request, 'U', value);
+      }
+
+      if (value instanceof Int16Array) {
+        // sort
+        return serializeTypedArray(request, 'S', value);
+      }
+
+      if (value instanceof Uint16Array) {
+        // unsigned short
+        return serializeTypedArray(request, 's', value);
+      }
+
+      if (value instanceof Int32Array) {
+        // long
+        return serializeTypedArray(request, 'L', value);
+      }
+
+      if (value instanceof Uint32Array) {
+        // unsigned long
+        return serializeTypedArray(request, 'l', value);
+      }
+
+      if (value instanceof Float32Array) {
+        // float
+        return serializeTypedArray(request, 'G', value);
+      }
+
+      if (value instanceof Float64Array) {
+        // double
+        return serializeTypedArray(request, 'g', value);
+      }
+
+      if (value instanceof BigInt64Array) {
+        // number
+        return serializeTypedArray(request, 'M', value);
+      }
+
+      if (value instanceof BigUint64Array) {
+        // unsigned number
+        // We use "m" instead of "n" since JSON can start with "null"
+        return serializeTypedArray(request, 'm', value);
+      }
+
+      if (value instanceof DataView) {
+        return serializeTypedArray(request, 'V', value);
+      } // TODO: Blob is not available in old Node. Remove the typeof check later.
+
+
+      if (typeof Blob === 'function' && value instanceof Blob) {
+        return serializeBlob(request, value);
+      }
+    }
+
+    var iteratorFn = getIteratorFn(value);
+
+    if (iteratorFn) {
+      // TODO: Should we serialize the return value as well like we do for AsyncIterables?
+      var iterator = iteratorFn.call(value);
+
+      if (iterator === value) {
+        // Iterator, not Iterable
         return serializeIterator(request, iterator);
       }
 
       return renderFragment(request, task, Array.from(iterator));
     }
 
+    {
+      // TODO: Blob is not available in old Node. Remove the typeof check later.
+      if (typeof ReadableStream === 'function' && value instanceof ReadableStream) {
+        return serializeReadableStream(request, task, 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 renderAsyncFragment(request, task, value, getAsyncIterator);
+      }
+    } // Verify that this is a simple plain object.
+
 
     var proto = getPrototypeOf(value);
 
@@ -2699,11 +3141,17 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
       return serializeServerReference(request, value);
     }
 
-    if (isTemporaryReference(value)) {
-      return serializeTemporaryReference(request, value);
+    if (request.temporaryReferences !== undefined) {
+      var _tempRef = resolveTemporaryReference(request.temporaryReferences, value);
+
+      if (_tempRef !== undefined) {
+        return serializeTemporaryReference(request, _tempRef);
+      }
     }
 
-    if (/^on[A-Z]/.test(parentPropertyName)) {
+    if (isOpaqueTemporaryReference(value)) {
+      throw new Error('Could not reference an opaque temporary reference. ' + 'This is likely due to misconfiguring the temporaryReferences options ' + 'on the server.');
+    } else if (/^on[A-Z]/.test(parentPropertyName)) {
       throw new Error('Event handlers cannot be passed to Client Component props.' + describeObjectForErrorMessage(parent, parentPropertyName) + '\nIf you need interactivity, consider converting part of this to a Client Component.');
     } else if ((jsxChildrenParents.has(parent) || jsxPropsParents.has(parent) && parentPropertyName === 'children')) {
       var componentName = value.displayName || value.name || 'Component';
@@ -2715,11 +3163,10 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
   if (typeof value === 'symbol') {
     var writtenSymbols = request.writtenSymbols;
+    var existingId = writtenSymbols.get(value);
 
-    var _existingId2 = writtenSymbols.get(value);
-
-    if (_existingId2 !== undefined) {
-      return serializeByValueID(_existingId2);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
     } // $FlowFixMe[incompatible-type] `description` might be undefined
 
 
@@ -2903,6 +3350,18 @@ function emitDebugChunk(request, id, debugInfo) {
   request.completedRegularChunks.push(processedChunk);
 }
 
+function emitTypedArrayChunk(request, id, tag, typedArray) {
+
+  request.pendingChunks++; // Extra chunk for the header.
+  // TODO: Convert to little endian if that's not the server default.
+
+  var binaryChunk = typedArrayToBinaryChunk(typedArray);
+  var binaryLength = byteLengthOfBinaryChunk(binaryChunk);
+  var row = id.toString(16) + ':' + tag + binaryLength.toString(16) + ',';
+  var headerChunk = stringToChunk(row);
+  request.completedRegularChunks.push(headerChunk, binaryChunk);
+}
+
 function emitTextChunk(request, id, text) {
   request.pendingChunks++; // Extra chunk for the header.
 
@@ -2938,6 +3397,14 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
       return serializeClientReference(request, parent, parentPropertyName, value);
     }
 
+    if (request.temporaryReferences !== undefined) {
+      var tempRef = resolveTemporaryReference(request.temporaryReferences, value);
+
+      if (tempRef !== undefined) {
+        return serializeTemporaryReference(request, tempRef);
+      }
+    }
+
     if (counter.objectCount > 20) {
       // We've reached our max number of objects to serialize across the wire so we serialize this
       // object but no properties inside of it, as a place holder.
@@ -2946,12 +3413,12 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
 
     counter.objectCount++;
     var writtenObjects = request.writtenObjects;
-    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+    var existingReference = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
 
     if (typeof value.then === 'function') {
-      if (existingId !== undefined) {
+      if (existingReference !== undefined) {
         // We've seen this promise before, so we can just refer to the same result.
-        return serializePromiseID(existingId);
+        return existingReference;
       }
 
       var thenable = value;
@@ -2983,10 +3450,10 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
       return serializeInfinitePromise();
     }
 
-    if (existingId !== undefined && existingId >= 0) {
+    if (existingReference !== undefined) {
       // We've already emitted this as a real object, so we can
-      // just refer to that by its existing ID.
-      return serializeByValueID(existingId);
+      // just refer to that by its existing reference.
+      return existingReference;
     }
 
     if (isArray(value)) {
@@ -3006,6 +3473,77 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
       return serializeFormData(request, value);
     }
 
+    {
+      if (value instanceof ArrayBuffer) {
+        return serializeTypedArray(request, 'A', new Uint8Array(value));
+      }
+
+      if (value instanceof Int8Array) {
+        // char
+        return serializeTypedArray(request, 'O', value);
+      }
+
+      if (value instanceof Uint8Array) {
+        // unsigned char
+        return serializeTypedArray(request, 'o', value);
+      }
+
+      if (value instanceof Uint8ClampedArray) {
+        // unsigned clamped char
+        return serializeTypedArray(request, 'U', value);
+      }
+
+      if (value instanceof Int16Array) {
+        // sort
+        return serializeTypedArray(request, 'S', value);
+      }
+
+      if (value instanceof Uint16Array) {
+        // unsigned short
+        return serializeTypedArray(request, 's', value);
+      }
+
+      if (value instanceof Int32Array) {
+        // long
+        return serializeTypedArray(request, 'L', value);
+      }
+
+      if (value instanceof Uint32Array) {
+        // unsigned long
+        return serializeTypedArray(request, 'l', value);
+      }
+
+      if (value instanceof Float32Array) {
+        // float
+        return serializeTypedArray(request, 'G', value);
+      }
+
+      if (value instanceof Float64Array) {
+        // double
+        return serializeTypedArray(request, 'g', value);
+      }
+
+      if (value instanceof BigInt64Array) {
+        // number
+        return serializeTypedArray(request, 'M', value);
+      }
+
+      if (value instanceof BigUint64Array) {
+        // unsigned number
+        // We use "m" instead of "n" since JSON can start with "null"
+        return serializeTypedArray(request, 'm', value);
+      }
+
+      if (value instanceof DataView) {
+        return serializeTypedArray(request, 'V', value);
+      } // TODO: Blob is not available in old Node. Remove the typeof check later.
+
+
+      if (typeof Blob === 'function' && value instanceof Blob) {
+        return serializeBlob(request, value);
+      }
+    }
+
     var iteratorFn = getIteratorFn(value);
 
     if (iteratorFn) {
@@ -3051,8 +3589,12 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
       return serializeClientReference(request, parent, parentPropertyName, value);
     }
 
-    if (isTemporaryReference(value)) {
-      return serializeTemporaryReference(request, value);
+    if (request.temporaryReferences !== undefined) {
+      var _tempRef2 = resolveTemporaryReference(request.temporaryReferences, value);
+
+      if (_tempRef2 !== undefined) {
+        return serializeTemporaryReference(request, _tempRef2);
+      }
     } // Serialize the body of the function as an eval so it can be printed.
     // $FlowFixMe[method-unbinding]
 
@@ -3062,11 +3604,10 @@ function renderConsoleValue(request, counter, parent, parentPropertyName, value)
 
   if (typeof value === 'symbol') {
     var writtenSymbols = request.writtenSymbols;
+    var existingId = writtenSymbols.get(value);
 
-    var _existingId3 = writtenSymbols.get(value);
-
-    if (_existingId3 !== undefined) {
-      return serializeByValueID(_existingId3);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
     } // $FlowFixMe[incompatible-type] `description` might be undefined
 
 
@@ -3121,6 +3662,85 @@ function emitChunk(request, task, value) {
     emitTextChunk(request, id, value);
     return;
   }
+
+  {
+    if (value instanceof ArrayBuffer) {
+      emitTypedArrayChunk(request, id, 'A', new Uint8Array(value));
+      return;
+    }
+
+    if (value instanceof Int8Array) {
+      // char
+      emitTypedArrayChunk(request, id, 'O', value);
+      return;
+    }
+
+    if (value instanceof Uint8Array) {
+      // unsigned char
+      emitTypedArrayChunk(request, id, 'o', value);
+      return;
+    }
+
+    if (value instanceof Uint8ClampedArray) {
+      // unsigned clamped char
+      emitTypedArrayChunk(request, id, 'U', value);
+      return;
+    }
+
+    if (value instanceof Int16Array) {
+      // sort
+      emitTypedArrayChunk(request, id, 'S', value);
+      return;
+    }
+
+    if (value instanceof Uint16Array) {
+      // unsigned short
+      emitTypedArrayChunk(request, id, 's', value);
+      return;
+    }
+
+    if (value instanceof Int32Array) {
+      // long
+      emitTypedArrayChunk(request, id, 'L', value);
+      return;
+    }
+
+    if (value instanceof Uint32Array) {
+      // unsigned long
+      emitTypedArrayChunk(request, id, 'l', value);
+      return;
+    }
+
+    if (value instanceof Float32Array) {
+      // float
+      emitTypedArrayChunk(request, id, 'G', value);
+      return;
+    }
+
+    if (value instanceof Float64Array) {
+      // double
+      emitTypedArrayChunk(request, id, 'g', value);
+      return;
+    }
+
+    if (value instanceof BigInt64Array) {
+      // number
+      emitTypedArrayChunk(request, id, 'M', value);
+      return;
+    }
+
+    if (value instanceof BigUint64Array) {
+      // unsigned number
+      // We use "m" instead of "n" since JSON can start with "null"
+      emitTypedArrayChunk(request, id, 'm', value);
+      return;
+    }
+
+    if (value instanceof DataView) {
+      emitTypedArrayChunk(request, id, 'V', value);
+      return;
+    }
+  } // For anything else we need to try to serialize it using JSON.
   // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
 
 
@@ -3166,8 +3786,11 @@ function retryTask(request, task) {
     task.implicitSlot = false;
 
     if (typeof resolvedModel === 'object' && resolvedModel !== null) {
-      // Object might contain unresolved values like additional elements.
+      // We're not in a contextual place here so we can refer to this object by this ID for
+      // any future references.
+      request.writtenObjects.set(resolvedModel, serializeByValueID(task.id)); // Object might contain unresolved values like additional elements.
       // This is simulating what the JSON loop would do if this was part of it.
+
       emitChunk(request, task, resolvedModel);
     } else {
       // If the value is a string, it means it's a terminal value and we already escaped it
@@ -3209,6 +3832,26 @@ function retryTask(request, task) {
   }
 }
 
+function tryStreamTask(request, task) {
+  // This is used to try to emit something synchronously but if it suspends,
+  // we emit a reference to a new outlined task immediately instead.
+  var prevDebugID = debugID;
+
+  {
+    // We don't use the id of the stream task for debugID. Instead we leave it null
+    // so that we instead outline the row to get a new debugID if needed.
+    debugID = null;
+  }
+
+  try {
+    emitChunk(request, task, task.model);
+  } finally {
+    {
+      debugID = prevDebugID;
+    }
+  }
+}
+
 function performWork(request) {
   var prevDispatcher = ReactSharedInternals.H;
   ReactSharedInternals.H = HooksDispatcher;
@@ -3581,9 +4224,12 @@ function loadChunk(chunkId, filename) {
   return __webpack_chunk_load__(chunkId);
 }
 
-// The server acts as a Client of itself when resolving Server References.
+// $FlowFixMe[method-unbinding]
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
 var PENDING = 'pending';
 var BLOCKED = 'blocked';
+var CYCLIC = 'cyclic';
 var RESOLVED_MODEL = 'resolved_model';
 var INITIALIZED = 'fulfilled';
 var ERRORED = 'rejected'; // $FlowFixMe[missing-this-annot]
@@ -3616,6 +4262,7 @@ Chunk.prototype.then = function (resolve, reject) {
 
     case PENDING:
     case BLOCKED:
+    case CYCLIC:
       if (resolve) {
         if (chunk.value === null) {
           chunk.value = [];
@@ -3665,6 +4312,7 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
     case PENDING:
     case BLOCKED:
+    case CYCLIC:
       chunk.value = resolveListeners;
       chunk.reason = rejectListeners;
       break;
@@ -3680,7 +4328,15 @@ function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
 
 function triggerErrorOnChunk(chunk, error) {
   if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // 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;
   }
 
@@ -3694,14 +4350,26 @@ function triggerErrorOnChunk(chunk, error) {
   }
 }
 
-function createResolvedModelChunk(response, value) {
+function createResolvedModelChunk(response, value, id) {
   // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
-  return new Chunk(RESOLVED_MODEL, value, null, response);
+  return new Chunk(RESOLVED_MODEL, value, id, response);
 }
 
-function resolveModelChunk(chunk, value) {
+function resolveModelChunk(chunk, value, id) {
   if (chunk.status !== PENDING) {
-    // We already resolved. We didn't expect to see this.
+    {
+      // 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;
+
+      if (value[0] === 'C') {
+        controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+      } else {
+        controller.enqueueModel(value);
+      }
+    }
+
     return;
   }
 
@@ -3710,6 +4378,7 @@ function resolveModelChunk(chunk, value) {
   var resolvedChunk = chunk;
   resolvedChunk.status = RESOLVED_MODEL;
   resolvedChunk.value = value;
+  resolvedChunk.reason = id;
 
   if (resolveListeners !== null) {
     // This is unfortunate that we're reading this eagerly if
@@ -3721,6 +4390,26 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
+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, -1, 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, -1);
+}
+
 function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
@@ -3749,11 +4438,51 @@ function loadServerReference$1(response, id, bound, parentChunk, parentObject, k
     }
   }
 
-  promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+  promise.then(createModelResolver(parentChunk, parentObject, key, false, response, createModel, []), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
 
   return null;
 }
 
+function reviveModel(response, parentObj, parentKey, value, reference) {
+  if (typeof value === 'string') {
+    // We can't use .bind here because we need the "this" value.
+    return parseModelString(response, parentObj, parentKey, value, reference);
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    if (reference !== undefined && response._temporaryReferences !== undefined) {
+      // Store this object's reference in case it's returned later.
+      registerTemporaryReference(response._temporaryReferences, value, reference);
+    }
+
+    if (Array.isArray(value)) {
+      for (var i = 0; i < value.length; i++) {
+        var childRef = reference !== undefined ? reference + ':' + i : undefined; // $FlowFixMe[cannot-write]
+
+        value[i] = reviveModel(response, value, '' + i, value[i], childRef);
+      }
+    } else {
+      for (var key in value) {
+        if (hasOwnProperty.call(value, key)) {
+          var _childRef = reference !== undefined && key.indexOf(':') === -1 ? reference + ':' + key : undefined;
+
+          var newValue = reviveModel(response, value, key, value[key], _childRef);
+
+          if (newValue !== undefined) {
+            // $FlowFixMe[cannot-write]
+            value[key] = newValue;
+          } else {
+            // $FlowFixMe[cannot-write]
+            delete value[key];
+          }
+        }
+      }
+    }
+  }
+
+  return value;
+}
+
 var initializingChunk = null;
 var initializingChunkBlockedModel = null;
 
@@ -3762,9 +4491,21 @@ function initializeModelChunk(chunk) {
   var prevBlocked = initializingChunkBlockedModel;
   initializingChunk = chunk;
   initializingChunkBlockedModel = null;
+  var rootReference = chunk.reason === -1 ? undefined : chunk.reason.toString(16);
+  var resolvedModel = chunk.value; // We go to the CYCLIC state until we've fully resolved this.
+  // We do this before parsing in case we try to initialize the same chunk
+  // while parsing the model. Such as in a cyclic reference.
+
+  var cyclicChunk = chunk;
+  cyclicChunk.status = CYCLIC;
+  cyclicChunk.value = null;
+  cyclicChunk.reason = null;
 
   try {
-    var value = JSON.parse(chunk.value, chunk._response._fromJSON);
+    var rawModel = JSON.parse(resolvedModel);
+    var value = reviveModel(chunk._response, {
+      '': rawModel
+    }, '', rawModel, rootReference);
 
     if (initializingChunkBlockedModel !== null && initializingChunkBlockedModel.deps > 0) {
       initializingChunkBlockedModel.value = value; // We discovered new dependencies on modules that are not yet resolved.
@@ -3775,9 +4516,14 @@ function initializeModelChunk(chunk) {
       blockedChunk.value = null;
       blockedChunk.reason = null;
     } else {
+      var resolveListeners = cyclicChunk.value;
       var initializedChunk = chunk;
       initializedChunk.status = INITIALIZED;
       initializedChunk.value = value;
+
+      if (resolveListeners !== null) {
+        wakeChunk(resolveListeners, value);
+      }
     }
   } catch (error) {
     var erroredChunk = chunk;
@@ -3814,7 +4560,7 @@ function getChunk(response, id) {
 
     if (backingEntry != null) {
       // We assume that this is a string entry for now.
-      chunk = createResolvedModelChunk(response, backingEntry);
+      chunk = createResolvedModelChunk(response, backingEntry, id);
     } else {
       // We're still waiting on this entry to stream in.
       chunk = createPendingChunk(response);
@@ -3826,21 +4572,34 @@ function getChunk(response, id) {
   return chunk;
 }
 
-function createModelResolver(chunk, parentObject, key) {
+function createModelResolver(chunk, parentObject, key, cyclic, response, map, path) {
   var blocked;
 
   if (initializingChunkBlockedModel) {
     blocked = initializingChunkBlockedModel;
-    blocked.deps++;
+
+    if (!cyclic) {
+      blocked.deps++;
+    }
   } else {
     blocked = initializingChunkBlockedModel = {
-      deps: 1,
+      deps: cyclic ? 0 : 1,
       value: null
     };
   }
 
   return function (value) {
-    parentObject[key] = 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.
+
+    if (key === '' && blocked.value === null) {
+      blocked.value = parentObject[key];
+    }
+
     blocked.deps--;
 
     if (blocked.deps === 0) {
@@ -3866,22 +4625,271 @@ function createModelReject(chunk) {
   };
 }
 
-function getOutlinedModel(response, id) {
+function getOutlinedModel(response, reference, parentObject, key, map) {
+  var path = reference.split(':');
+  var id = parseInt(path[0], 16);
   var chunk = getChunk(response, id);
 
-  if (chunk.status === RESOLVED_MODEL) {
-    initializeModelChunk(chunk);
+  switch (chunk.status) {
+    case RESOLVED_MODEL:
+      initializeModelChunk(chunk);
+      break;
+  } // The status might have changed after initialization.
+
+
+  switch (chunk.status) {
+    case INITIALIZED:
+      var value = chunk.value;
+
+      for (var i = 1; i < path.length; i++) {
+        value = value[path[i]];
+      }
+
+      return map(response, value);
+
+    case PENDING:
+    case BLOCKED:
+    case CYCLIC:
+      var parentChunk = initializingChunk;
+      chunk.then(createModelResolver(parentChunk, parentObject, key, chunk.status === CYCLIC, response, map, path), createModelReject(parentChunk));
+      return null;
+
+    default:
+      throw chunk.reason;
   }
+}
+
+function createMap(response, model) {
+  return new Map(model);
+}
 
-  if (chunk.status !== INITIALIZED) {
-    // We know that this is emitted earlier so otherwise it's an error.
-    throw chunk.reason;
+function createSet(response, model) {
+  return new Set(model);
+}
+
+function extractIterator(response, model) {
+  // $FlowFixMe[incompatible-use]: This uses raw Symbols because we're extracting from a native array.
+  return model[Symbol.iterator]();
+}
+
+function createModel(response, model) {
+  return model;
+}
+
+function parseTypedArray(response, reference, constructor, bytesPerElement, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var prefix = response._prefix;
+  var key = prefix + id; // We should have this backingEntry in the store already because we emitted
+  // it before referencing it. It should be a Blob.
+
+  var backingEntry = response._formData.get(key);
+
+  var promise = constructor === ArrayBuffer ? backingEntry.arrayBuffer() : backingEntry.arrayBuffer().then(function (buffer) {
+    return new constructor(buffer);
+  }); // Since loading the buffer is an async operation we'll be blocking the parent
+  // chunk.
+
+  var parentChunk = initializingChunk;
+  promise.then(createModelResolver(parentChunk, parentObject, parentKey, false, response, createModel, []), createModelReject(parentChunk));
+  return null;
+}
+
+function resolveStream(response, id, stream, controller) {
+  var chunks = response._chunks;
+  var chunk = createInitializedStreamChunk(response, stream, controller);
+  chunks.set(id, chunk);
+  var prefix = response._prefix;
+  var key = prefix + id;
+
+  var existingEntries = response._formData.getAll(key);
+
+  for (var i = 0; i < existingEntries.length; i++) {
+    // We assume that this is a string entry for now.
+    var value = existingEntries[i];
+
+    if (value[0] === 'C') {
+      controller.close(value === 'C' ? '"$undefined"' : value.slice(1));
+    } else {
+      controller.enqueueModel(value);
+    }
   }
+}
 
-  return chunk.value;
+function parseReadableStream(response, reference, type, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var controller = null;
+  var stream = new ReadableStream({
+    type: type,
+    start: function (c) {
+      controller = c;
+    }
+  });
+  var previousBlockedChunk = null;
+  var flightController = {
+    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, -1);
+        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 _chunk = createPendingChunk(response);
+
+        _chunk.then(function (v) {
+          return controller.enqueue(v);
+        }, function (e) {
+          return controller.error(e);
+        });
+
+        previousBlockedChunk = _chunk;
+        blockedChunk.then(function () {
+          if (previousBlockedChunk === _chunk) {
+            // We were still the last chunk so we can now clear the queue and return
+            // to synchronous emitting.
+            previousBlockedChunk = null;
+          }
+
+          resolveModelChunk(_chunk, json, -1);
+        });
+      }
+    },
+    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);
+  return stream;
+}
+
+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 parseModelString(response, obj, key, value) {
+function parseAsyncIterable(response, reference, iterator, parentObject, parentKey) {
+  var id = parseInt(reference.slice(2), 16);
+  var buffer = [];
+  var closed = false;
+  var nextWriteIndex = 0;
+  var flightController = {
+    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.
+
+
+  var stream = iterator ? iterable[ASYNC_ITERATOR]() : iterable;
+  resolveStream(response, id, stream, flightController);
+  return stream;
+}
+
+function parseModelString(response, obj, key, value, reference) {
   if (value[0] === '$') {
     switch (value[1]) {
       case '$':
@@ -3893,46 +4901,45 @@ function parseModelString(response, obj, key, value) {
       case '@':
         {
           // Promise
-          var _id = parseInt(value.slice(2), 16);
-
-          var _chunk = getChunk(response, _id);
-
-          return _chunk;
+          var id = parseInt(value.slice(2), 16);
+          var chunk = getChunk(response, id);
+          return chunk;
         }
 
       case 'F':
         {
           // Server Reference
-          var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
+          var _ref2 = value.slice(2); // TODO: Just encode this in the reference inline instead of as a model.
 
 
-          var metaData = getOutlinedModel(response, _id2);
+          var metaData = getOutlinedModel(response, _ref2, obj, key, createModel);
           return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
         }
 
       case 'T':
         {
           // Temporary Reference
-          return createTemporaryReference(value.slice(2));
+          if (reference === undefined || response._temporaryReferences === undefined) {
+            throw new Error('Could not reference an opaque temporary reference. ' + 'This is likely due to misconfiguring the temporaryReferences options ' + 'on the server.');
+          }
+
+          return createTemporaryReference(response._temporaryReferences, reference);
         }
 
       case 'Q':
         {
           // Map
-          var _id3 = parseInt(value.slice(2), 16);
+          var _ref3 = value.slice(2);
 
-          var data = getOutlinedModel(response, _id3);
-          return new Map(data);
+          return getOutlinedModel(response, _ref3, obj, key, createMap);
         }
 
       case 'W':
         {
           // Set
-          var _id4 = parseInt(value.slice(2), 16);
-
-          var _data = getOutlinedModel(response, _id4);
+          var _ref4 = value.slice(2);
 
-          return new Set(_data);
+          return getOutlinedModel(response, _ref4, obj, key, createSet);
         }
 
       case 'K':
@@ -3940,9 +4947,7 @@ function parseModelString(response, obj, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-
-          var _data2 = new FormData();
-
+          var data = new FormData();
           var backingFormData = response._formData; // We assume that the reference to FormData always comes after each
           // entry that it references so we can assume they all exist in the
           // backing store already.
@@ -3950,20 +4955,18 @@ function parseModelString(response, obj, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              _data2.append(entryKey.slice(formPrefix.length), entry);
+              data.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return _data2;
+          return data;
         }
 
       case 'i':
         {
           // Iterator
-          var _id5 = parseInt(value.slice(2), 16);
-
-          var _data3 = getOutlinedModel(response, _id5);
+          var _ref5 = value.slice(2);
 
-          return _data3[Symbol.iterator]();
+          return getOutlinedModel(response, _ref5, obj, key, extractIterator);
         }
 
       case 'I':
@@ -4008,51 +5011,104 @@ function parseModelString(response, obj, key, value) {
         }
     }
 
+    {
+      switch (value[1]) {
+        case 'A':
+          return parseTypedArray(response, value, ArrayBuffer, 1, obj, key);
 
-    var id = parseInt(value.slice(1), 16);
-    var chunk = getChunk(response, id);
+        case 'O':
+          return parseTypedArray(response, value, Int8Array, 1, obj, key);
 
-    switch (chunk.status) {
-      case RESOLVED_MODEL:
-        initializeModelChunk(chunk);
-        break;
-    } // The status might have changed after initialization.
+        case 'o':
+          return parseTypedArray(response, value, Uint8Array, 1, obj, key);
+
+        case 'U':
+          return parseTypedArray(response, value, Uint8ClampedArray, 1, obj, key);
+
+        case 'S':
+          return parseTypedArray(response, value, Int16Array, 2, obj, key);
 
+        case 's':
+          return parseTypedArray(response, value, Uint16Array, 2, obj, key);
 
-    switch (chunk.status) {
-      case INITIALIZED:
-        return chunk.value;
+        case 'L':
+          return parseTypedArray(response, value, Int32Array, 4, obj, key);
 
-      case PENDING:
-      case BLOCKED:
-        var parentChunk = initializingChunk;
-        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
-        return null;
+        case 'l':
+          return parseTypedArray(response, value, Uint32Array, 4, obj, key);
 
-      default:
-        throw chunk.reason;
+        case 'G':
+          return parseTypedArray(response, value, Float32Array, 4, obj, key);
+
+        case 'g':
+          return parseTypedArray(response, value, Float64Array, 8, obj, key);
+
+        case 'M':
+          return parseTypedArray(response, value, BigInt64Array, 8, obj, key);
+
+        case 'm':
+          return parseTypedArray(response, value, BigUint64Array, 8, obj, key);
+
+        case 'V':
+          return parseTypedArray(response, value, DataView, 1, obj, key);
+
+        case 'B':
+          {
+            // Blob
+            var _id = parseInt(value.slice(2), 16);
+
+            var prefix = response._prefix;
+            var blobKey = prefix + _id; // We should have this backingEntry in the store already because we emitted
+            // it before referencing it. It should be a Blob.
+
+            var backingEntry = response._formData.get(blobKey);
+
+            return backingEntry;
+          }
+      }
     }
+
+    {
+      switch (value[1]) {
+        case 'R':
+          {
+            return parseReadableStream(response, value, undefined);
+          }
+
+        case 'r':
+          {
+            return parseReadableStream(response, value, 'bytes');
+          }
+
+        case 'X':
+          {
+            return parseAsyncIterable(response, value, false);
+          }
+
+        case 'x':
+          {
+            return parseAsyncIterable(response, value, true);
+          }
+      }
+    } // We assume that anything else is a reference ID.
+
+
+    var ref = value.slice(1);
+    return getOutlinedModel(response, ref, obj, key, createModel);
   }
 
   return value;
 }
 
-function createResponse(bundlerConfig, formFieldPrefix) {
-  var backingFormData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new FormData();
+function createResponse(bundlerConfig, formFieldPrefix, temporaryReferences) {
+  var backingFormData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new FormData();
   var chunks = new Map();
   var response = {
     _bundlerConfig: bundlerConfig,
     _prefix: formFieldPrefix,
     _formData: backingFormData,
     _chunks: chunks,
-    _fromJSON: function (key, value) {
-      if (typeof value === 'string') {
-        // We can't use .bind here because we need the "this" value.
-        return parseModelString(response, this, key, value);
-      }
-
-      return value;
-    }
+    _temporaryReferences: temporaryReferences
   };
   return response;
 }
@@ -4069,7 +5125,7 @@ function resolveField(response, key, value) {
 
     if (chunk) {
       // We were waiting on this key so now we can resolve it.
-      resolveModelChunk(chunk, value);
+      resolveModelChunk(chunk, value, id);
     }
   }
 }
@@ -4130,7 +5186,7 @@ function loadServerReference(bundlerConfig, id, bound) {
 
 function decodeBoundActionMetaData(body, serverManifest, formFieldPrefix) {
   // The data for this reference is encoded in multiple fields under this prefix.
-  var actionResponse = createResponse(serverManifest, formFieldPrefix, body);
+  var actionResponse = createResponse(serverManifest, formFieldPrefix, undefined, body);
   close(actionResponse);
   var refPromise = getRoot(actionResponse); // Force it to initialize
   // $FlowFixMe
@@ -4239,7 +5295,7 @@ function createCancelHandler(request, reason) {
 }
 
 function renderToPipeableStream(model, webpackMap, options) {
-  var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined, options ? options.environmentName : undefined);
+  var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined, options ? options.environmentName : undefined, options ? options.temporaryReferences : undefined);
   var hasStartedFlowing = false;
   startWork(request);
   return {
@@ -4313,20 +5369,21 @@ function decodeReplyFromBusboy(busboyStream, webpackMap) {
   return getRoot(response);
 }
 
-function decodeReply(body, webpackMap) {
+function decodeReply(body, webpackMap, options) {
   if (typeof body === 'string') {
     var form = new FormData();
     form.append('0', body);
     body = form;
   }
 
-  var response = createResponse(webpackMap, '', body);
+  var response = createResponse(webpackMap, '', options ? options.temporaryReferences : undefined, body);
   var root = getRoot(response);
   close(response);
   return root;
 }
 
 exports.createClientModuleProxy = createClientModuleProxy;
+exports.createTemporaryReferenceSet = createTemporaryReferenceSet;
 exports.decodeAction = decodeAction;
 exports.decodeFormState = decodeFormState;
 exports.decodeReply = decodeReply;