react-server-dom-webpack 18.3.0-next-fa4314841-20230502 → 19.0.0-beta-4508873393-20240430

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

@@ -17,7 +17,27 @@ if (process.env.NODE_ENV !== "production") {
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+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;
+}
+
+var ReactSharedInternalsServer = // $FlowFixMe: It's defined in the one we resolve to.
+React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+if (!ReactSharedInternalsServer) {
+  throw new Error('The "react" package in this environment is not configured correctly. ' + 'The "react-server" condition must be enabled in any environment that ' + 'runs React Server Components.');
+}
 
 function error(format) {
   {
@@ -35,8 +55,7 @@ function printWarning(level, format, args) {
   // When changing this logic, you might want to also
   // update consoleWithStackDev.www.js as well.
   {
-    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-    var stack = ReactDebugCurrentFrame.getStackAddendum();
+    var stack = ReactSharedInternalsServer.getStackAddendum();
 
     if (stack !== '') {
       format += '%s';
@@ -56,10 +75,13 @@ function printWarning(level, format, args) {
   }
 }
 
+// -----------------------------------------------------------------------------
+var enablePostpone = false;
+
 function scheduleWork(callback) {
   callback();
 }
-var VIEW_SIZE = 512;
+var VIEW_SIZE = 2048;
 var currentView = null;
 var writtenBytes = 0;
 function beginWriting(destination) {
@@ -67,20 +89,14 @@ function beginWriting(destination) {
   writtenBytes = 0;
 }
 function writeChunk(destination, chunk) {
-  if (chunk.length === 0) {
+  if (chunk.byteLength === 0) {
     return;
   }
 
-  if (chunk.length > VIEW_SIZE) {
-    {
-      if (precomputedChunkSet.has(chunk)) {
-        error('A large precomputed chunk was passed to writeChunk without being copied.' + ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' + ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.');
-      }
-    } // this chunk may overflow a single view which implies it was not
+  if (chunk.byteLength > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
     // one that is cached by the streaming renderer. We will enqueu
     // it directly and expect it is not re-used
-
-
     if (writtenBytes > 0) {
       destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
       currentView = new Uint8Array(VIEW_SIZE);
@@ -94,7 +110,7 @@ function writeChunk(destination, chunk) {
   var bytesToWrite = chunk;
   var allowableBytes = currentView.length - writtenBytes;
 
-  if (allowableBytes < bytesToWrite.length) {
+  if (allowableBytes < bytesToWrite.byteLength) {
     // this chunk would overflow the current view. We enqueue a full view
     // and start a new view with the remaining chunk
     if (allowableBytes === 0) {
@@ -114,7 +130,7 @@ function writeChunk(destination, chunk) {
   }
 
   currentView.set(bytesToWrite, writtenBytes);
-  writtenBytes += bytesToWrite.length;
+  writtenBytes += bytesToWrite.byteLength;
 }
 function writeChunkAndReturn(destination, chunk) {
   writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
@@ -135,7 +151,9 @@ var textEncoder = new TextEncoder();
 function stringToChunk(content) {
   return textEncoder.encode(content);
 }
-var precomputedChunkSet = new Set() ;
+function byteLengthOfChunk(chunk) {
+  return chunk.byteLength;
+}
 function closeWithError(destination, error) {
   // $FlowFixMe[method-unbinding]
   if (typeof destination.error === 'function') {
@@ -152,65 +170,270 @@ function closeWithError(destination, error) {
   }
 }
 
-// This file is an intermediate layer to translate between Flight
-var stringify = JSON.stringify;
-
-function serializeRowHeader(tag, id) {
-  return id.toString(16) + ':' + tag;
+// eslint-disable-next-line no-unused-vars
+var CLIENT_REFERENCE_TAG$1 = Symbol.for('react.client.reference');
+var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+function isClientReference(reference) {
+  return reference.$$typeof === CLIENT_REFERENCE_TAG$1;
+}
+function isServerReference(reference) {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+function registerClientReference(proxyImplementation, id, exportName) {
+  return registerClientReferenceImpl(proxyImplementation, id + '#' + exportName, false);
 }
 
-function processErrorChunkProd(request, id, digest) {
-  {
-    // These errors should never make it into a build so we don't need to encode them in codes.json
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error('processErrorChunkProd should never be called while in development mode. Use processErrorChunkDev instead. This is a bug in React.');
+function registerClientReferenceImpl(proxyImplementation, id, async) {
+  return Object.defineProperties(proxyImplementation, {
+    $$typeof: {
+      value: CLIENT_REFERENCE_TAG$1
+    },
+    $$id: {
+      value: id
+    },
+    $$async: {
+      value: async
+    }
+  });
+} // $FlowFixMe[method-unbinding]
+
+
+var FunctionBind = Function.prototype.bind; // $FlowFixMe[method-unbinding]
+
+var ArraySlice = Array.prototype.slice;
+
+function bind() {
+  // $FlowFixMe[unsupported-syntax]
+  var newFn = FunctionBind.apply(this, arguments);
+
+  if (this.$$typeof === SERVER_REFERENCE_TAG) {
+    {
+      var thisBind = arguments[0];
+
+      if (thisBind != null) {
+        error('Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().');
+      }
+    }
+
+    var args = ArraySlice.call(arguments, 1);
+    return Object.defineProperties(newFn, {
+      $$typeof: {
+        value: SERVER_REFERENCE_TAG
+      },
+      $$id: {
+        value: this.$$id
+      },
+      $$bound: {
+        value: this.$$bound ? this.$$bound.concat(args) : args
+      },
+      bind: {
+        value: bind
+      }
+    });
   }
-}
-function processErrorChunkDev(request, id, digest, message, stack) {
 
-  var errorInfo = {
-    digest: digest,
-    message: message,
-    stack: stack
-  };
-  var row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
-  return stringToChunk(row);
-}
-function processModelChunk(request, id, model) {
-  // $FlowFixMe[incompatible-type] stringify can return null
-  var json = stringify(model, request.toJSON);
-  var row = id.toString(16) + ':' + json + '\n';
-  return stringToChunk(row);
+  return newFn;
 }
-function processReferenceChunk(request, id, reference) {
-  var json = stringify(reference);
-  var row = id.toString(16) + ':' + json + '\n';
-  return stringToChunk(row);
+
+function registerServerReference(reference, id, exportName) {
+  return Object.defineProperties(reference, {
+    $$typeof: {
+      value: SERVER_REFERENCE_TAG
+    },
+    $$id: {
+      value: exportName === null ? id : id + '#' + exportName,
+      configurable: true
+    },
+    $$bound: {
+      value: null,
+      configurable: true
+    },
+    bind: {
+      value: bind,
+      configurable: true
+    }
+  });
 }
-function processImportChunk(request, id, clientReferenceMetadata) {
-  // $FlowFixMe[incompatible-type] stringify can return null
-  var json = stringify(clientReferenceMetadata);
-  var row = serializeRowHeader('I', id) + json + '\n';
-  return stringToChunk(row);
+var PROMISE_PROTOTYPE = Promise.prototype;
+var deepProxyHandlers = {
+  get: function (target, name, receiver) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // 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 target.name;
+
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+
+      case 'defaultProps':
+        return undefined;
+      // Avoid this attempting to be serialized.
+
+      case 'toJSON':
+        return undefined;
+
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+
+      case 'Provider':
+        throw new Error("Cannot render a Client Context Provider on the Server. " + "Instead, you can export a Client Component wrapper " + "that itself renders a Client Context Provider.");
+    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+    var expression = String(target.name) + '.' + String(name);
+    throw new Error("Cannot access " + expression + " on the server. " + 'You cannot dot into a client module from a server component. ' + 'You can only pass the imported name through.');
+  },
+  set: function () {
+    throw new Error('Cannot assign to a client module from a server module.');
+  }
+};
+
+function getReference(target, name) {
+  switch (name) {
+    // These names are read by the Flight runtime if you end up using the exports object.
+    case '$$typeof':
+      return target.$$typeof;
+
+    case '$$id':
+      return target.$$id;
+
+    case '$$async':
+      return target.$$async;
+
+    case 'name':
+      return target.name;
+    // We need to special case this because createElement reads it if we pass this
+    // reference.
+
+    case 'defaultProps':
+      return undefined;
+    // Avoid this attempting to be serialized.
+
+    case 'toJSON':
+      return undefined;
+
+    case Symbol.toPrimitive:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toPrimitive];
+
+    case Symbol.toStringTag:
+      // $FlowFixMe[prop-missing]
+      return Object.prototype[Symbol.toStringTag];
+
+    case '__esModule':
+      // Something is conditionally checking which export to use. We'll pretend to be
+      // an ESM compat module but then we'll check again on the client.
+      var moduleId = target.$$id;
+      target.default = registerClientReferenceImpl(function () {
+        throw new Error("Attempted to call the default export of " + moduleId + " from the server " + "but it's 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.");
+      }, target.$$id + '#', target.$$async);
+      return true;
+
+    case 'then':
+      if (target.then) {
+        // Use a cached value
+        return target.then;
+      }
+
+      if (!target.$$async) {
+        // If this module is expected to return a Promise (such as an AsyncModule) then
+        // we should resolve that with a client reference that unwraps the Promise on
+        // the client.
+        var clientReference = registerClientReferenceImpl({}, target.$$id, true);
+        var proxy = new Proxy(clientReference, proxyHandlers$1); // Treat this as a resolved Promise for React's use()
+
+        target.status = 'fulfilled';
+        target.value = proxy;
+        var then = target.then = registerClientReferenceImpl(function then(resolve, reject) {
+          // Expose to React.
+          return Promise.resolve(resolve(proxy));
+        }, // If this is not used as a Promise but is treated as a reference to a `.then`
+        // export then we should treat it as a reference to that name.
+        target.$$id + '#then', false);
+        return then;
+      } else {
+        // Since typeof .then === 'function' is a feature test we'd continue recursing
+        // indefinitely if we return a function. Instead, we return an object reference
+        // if we check further.
+        return undefined;
+      }
+
+  }
+
+  if (typeof name === 'symbol') {
+    throw new Error('Cannot read Symbol exports. Only named exports are supported on a client module ' + 'imported on the server.');
+  }
+
+  var cachedReference = target[name];
+
+  if (!cachedReference) {
+    var reference = registerClientReferenceImpl(function () {
+      throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
+      "Attempted to call " + String(name) + "() from the server but " + String(name) + " 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.");
+    }, target.$$id + '#' + name, target.$$async);
+    Object.defineProperty(reference, 'name', {
+      value: name
+    });
+    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+  }
+
+  return cachedReference;
 }
-function processHintChunk(request, id, code, model) {
-  var json = stringify(model);
-  var row = serializeRowHeader('H' + code, id) + json + '\n';
-  return stringToChunk(row);
+
+var proxyHandlers$1 = {
+  get: function (target, name, receiver) {
+    return getReference(target, name);
+  },
+  getOwnPropertyDescriptor: function (target, name) {
+    var descriptor = Object.getOwnPropertyDescriptor(target, name);
+
+    if (!descriptor) {
+      descriptor = {
+        value: getReference(target, name),
+        writable: false,
+        configurable: false,
+        enumerable: false
+      };
+      Object.defineProperty(target, name, descriptor);
+    }
+
+    return descriptor;
+  },
+  getPrototypeOf: function (target) {
+    // Pretend to be a Promise in case anyone asks.
+    return PROMISE_PROTOTYPE;
+  },
+  set: function () {
+    throw new Error('Cannot assign to a client module from a server module.');
+  }
+};
+function createClientModuleProxy(moduleId) {
+  var clientReference = registerClientReferenceImpl({}, // Represents the whole Module object instead of a particular import.
+  moduleId, false);
+  return new Proxy(clientReference, proxyHandlers$1);
 }
 
-// eslint-disable-next-line no-unused-vars
-var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
 function getClientReferenceKey(reference) {
   return reference.$$async ? reference.$$id + '#async' : reference.$$id;
 }
-function isClientReference(reference) {
-  return reference.$$typeof === CLIENT_REFERENCE_TAG;
-}
-function isServerReference(reference) {
-  return reference.$$typeof === SERVER_REFERENCE_TAG;
-}
 function resolveClientReferenceMetadata(config, clientReference) {
   var modulePath = clientReference.$$id;
   var name = '';
@@ -236,12 +459,11 @@ function resolveClientReferenceMetadata(config, clientReference) {
     }
   }
 
-  return {
-    id: resolvedModuleData.id,
-    chunks: resolvedModuleData.chunks,
-    name: name,
-    async: !!clientReference.$$async
-  };
+  if (clientReference.$$async === true) {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
+  } else {
+    return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+  }
 }
 function getServerReferenceId(config, serverReference) {
   return serverReference.$$id;
@@ -250,339 +472,396 @@ function getServerReferenceBoundArguments(config, serverReference) {
   return serverReference.$$bound;
 }
 
-var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-var ReactDOMFlightServerDispatcher = {
-  prefetchDNS: prefetchDNS,
-  preconnect: preconnect,
-  preload: preload,
-  preinit: preinit
+var ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+var previousDispatcher = ReactDOMSharedInternals.d;
+/* ReactDOMCurrentDispatcher */
+
+ReactDOMSharedInternals.d
+/* ReactDOMCurrentDispatcher */
+= {
+  f
+  /* flushSyncWork */
+  : previousDispatcher.f
+  /* flushSyncWork */
+  ,
+  r
+  /* requestFormReset */
+  : previousDispatcher.r
+  /* requestFormReset */
+  ,
+  D
+  /* prefetchDNS */
+  : prefetchDNS,
+  C
+  /* preconnect */
+  : preconnect,
+  L
+  /* preload */
+  : preload,
+  m
+  /* preloadModule */
+  : preloadModule$1,
+  X
+  /* preinitScript */
+  : preinitScript,
+  S
+  /* preinitStyle */
+  : preinitStyle,
+  M
+  /* preinitModuleScript */
+  : preinitModuleScript
 };
 
-function prefetchDNS(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
-
-      if (request) {
-        var hints = getHints(request);
-        var key = 'D' + href;
-
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+function prefetchDNS(href) {
+  if (typeof href === 'string' && href) {
+    var request = resolveRequest();
 
-        hints.add(key);
+    if (request) {
+      var hints = getHints(request);
+      var key = 'D|' + href;
 
-        if (options) {
-          emitHint(request, 'D', [href, options]);
-        } else {
-          emitHint(request, 'D', href);
-        }
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
       }
+
+      hints.add(key);
+      emitHint(request, 'D', href);
+    } else {
+      previousDispatcher.D(
+      /* prefetchDNS */
+      href);
     }
   }
 }
 
-function preconnect(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
+function preconnect(href, crossOrigin) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-      if (request) {
-        var hints = getHints(request);
-        var crossOrigin = options == null || typeof options.crossOrigin !== 'string' ? null : options.crossOrigin === 'use-credentials' ? 'use-credentials' : '';
-        var key = "C" + (crossOrigin === null ? 'null' : crossOrigin) + "|" + href;
+    if (request) {
+      var hints = getHints(request);
+      var key = "C|" + (crossOrigin == null ? 'null' : crossOrigin) + "|" + href;
 
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-        hints.add(key);
+      hints.add(key);
 
-        if (options) {
-          emitHint(request, 'C', [href, options]);
-        } else {
-          emitHint(request, 'C', href);
-        }
+      if (typeof crossOrigin === 'string') {
+        emitHint(request, 'C', [href, crossOrigin]);
+      } else {
+        emitHint(request, 'C', href);
       }
+    } else {
+      previousDispatcher.C(
+      /* preconnect */
+      href, crossOrigin);
     }
   }
 }
 
-function preload(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
-
-      if (request) {
-        var hints = getHints(request);
-        var key = 'L' + href;
+function preload(href, as, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+    if (request) {
+      var hints = getHints(request);
+      var key = 'L';
 
-        hints.add(key);
-        emitHint(request, 'L', [href, options]);
+      if (as === 'image' && options) {
+        key += getImagePreloadKey(href, options.imageSrcSet, options.imageSizes);
+      } else {
+        key += "[" + as + "]" + href;
       }
-    }
-  }
-}
-
-function preinit(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
 
-      if (request) {
-        var hints = getHints(request);
-        var key = 'I' + href;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-        hints.add(key);
-        emitHint(request, 'I', [href, options]);
+      if (trimmed) {
+        emitHint(request, 'L', [href, as, trimmed]);
+      } else {
+        emitHint(request, 'L', [href, as]);
       }
+    } else {
+      previousDispatcher.L(
+      /* preload */
+      href, as, options);
     }
   }
 }
 
-var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
-function prepareHostDispatcher() {
-  ReactDOMCurrentDispatcher.current = ReactDOMFlightServerDispatcher;
-} // Used to distinguish these contexts from ones used in other renderers.
-function createHints() {
-  return new Set();
-}
+function preloadModule$1(href, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-// ATTENTION
-// 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_ELEMENT_TYPE = Symbol.for('react.element');
-var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-var REACT_MEMO_TYPE = Symbol.for('react.memo');
-var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
-var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
-var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-var FAUX_ITERATOR_SYMBOL = '@@iterator';
-function getIteratorFn(maybeIterable) {
-  if (maybeIterable === null || typeof maybeIterable !== 'object') {
-    return null;
-  }
+    if (request) {
+      var hints = getHints(request);
+      var key = 'm|' + href;
 
-  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-  if (typeof maybeIterator === 'function') {
-    return maybeIterator;
-  }
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-  return null;
+      if (trimmed) {
+        return emitHint(request, 'm', [href, trimmed]);
+      } else {
+        return emitHint(request, 'm', href);
+      }
+    } else {
+      previousDispatcher.m(
+      /* preloadModule */
+      href, options);
+    }
+  }
 }
 
-var rendererSigil;
-
-{
-  // Use this to detect multiple renderers using the same context
-  rendererSigil = {};
-} // Used to store the parent path of all context overrides in a shared linked list.
-// Forming a reverse tree.
-// The structure of a context snapshot is an implementation of this file.
-// Currently, it's implemented as tracking the current active node.
+function preinitStyle(href, precedence, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
+    if (request) {
+      var hints = getHints(request);
+      var key = 'S|' + href;
 
-var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
-// This global (actually thread local) state represents what state all those "current",
-// fields are currently in.
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-var currentActiveSnapshot = null;
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-function popNode(prev) {
-  {
-    prev.context._currentValue = prev.parentValue;
+      if (trimmed) {
+        return emitHint(request, 'S', [href, typeof precedence === 'string' ? precedence : 0, trimmed]);
+      } else if (typeof precedence === 'string') {
+        return emitHint(request, 'S', [href, precedence]);
+      } else {
+        return emitHint(request, 'S', href);
+      }
+    } else {
+      previousDispatcher.S(
+      /* preinitStyle */
+      href, precedence, options);
+    }
   }
 }
 
-function pushNode(next) {
-  {
-    next.context._currentValue = next.value;
-  }
-}
+function preinitScript(src, options) {
+  if (typeof src === 'string') {
+    var request = resolveRequest();
 
-function popToNearestCommonAncestor(prev, next) {
-  if (prev === next) ; else {
-    popNode(prev);
-    var parentPrev = prev.parent;
-    var parentNext = next.parent;
+    if (request) {
+      var hints = getHints(request);
+      var key = 'X|' + src;
 
-    if (parentPrev === null) {
-      if (parentNext !== null) {
-        throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
-      }
-    } else {
-      if (parentNext === null) {
-        throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
       }
 
-      popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-      pushNode(next);
+      if (trimmed) {
+        return emitHint(request, 'X', [src, trimmed]);
+      } else {
+        return emitHint(request, 'X', src);
+      }
+    } else {
+      previousDispatcher.X(
+      /* preinitScript */
+      src, options);
     }
   }
 }
 
-function popAllPrevious(prev) {
-  popNode(prev);
-  var parentPrev = prev.parent;
+function preinitModuleScript(src, options) {
+  if (typeof src === 'string') {
+    var request = resolveRequest();
 
-  if (parentPrev !== null) {
-    popAllPrevious(parentPrev);
-  }
-}
+    if (request) {
+      var hints = getHints(request);
+      var key = 'M|' + src;
 
-function pushAllNext(next) {
-  var parentNext = next.parent;
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-  if (parentNext !== null) {
-    pushAllNext(parentNext);
+      hints.add(key);
+      var trimmed = trimOptions(options);
+
+      if (trimmed) {
+        return emitHint(request, 'M', [src, trimmed]);
+      } else {
+        return emitHint(request, 'M', src);
+      }
+    } else {
+      previousDispatcher.M(
+      /* preinitModuleScript */
+      src, options);
+    }
+  }
+} // Flight normally encodes undefined as a special character however for directive option
+// arguments we don't want to send unnecessary keys and bloat the payload so we create a
+// trimmed object which omits any keys with null or undefined values.
+// This is only typesafe because these option objects have entirely optional fields where
+// null and undefined represent the same thing as no property.
+
+
+function trimOptions(options) {
+  if (options == null) return null;
+  var hasProperties = false;
+  var trimmed = {};
+
+  for (var key in options) {
+    if (options[key] != null) {
+      hasProperties = true;
+      trimmed[key] = options[key];
+    }
   }
 
-  pushNode(next);
+  return hasProperties ? trimmed : null;
 }
 
-function popPreviousToCommonLevel(prev, next) {
-  popNode(prev);
-  var parentPrev = prev.parent;
+function getImagePreloadKey(href, imageSrcSet, imageSizes) {
+  var uniquePart = '';
 
-  if (parentPrev === null) {
-    throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
-  }
+  if (typeof imageSrcSet === 'string' && imageSrcSet !== '') {
+    uniquePart += '[' + imageSrcSet + ']';
 
-  if (parentPrev.depth === next.depth) {
-    // We found the same level. Now we just need to find a shared ancestor.
-    popToNearestCommonAncestor(parentPrev, next);
+    if (typeof imageSizes === 'string') {
+      uniquePart += '[' + imageSizes + ']';
+    }
   } else {
-    // We must still be deeper.
-    popPreviousToCommonLevel(parentPrev, next);
+    uniquePart += '[][]' + href;
   }
-}
 
-function popNextToCommonLevel(prev, next) {
-  var parentNext = next.parent;
-
-  if (parentNext === null) {
-    throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
-  }
+  return "[image]" + uniquePart;
+}
 
-  if (prev.depth === parentNext.depth) {
-    // We found the same level. Now we just need to find a shared ancestor.
-    popToNearestCommonAncestor(prev, parentNext);
-  } else {
-    // We must still be deeper.
-    popNextToCommonLevel(prev, parentNext);
-  }
-
-  pushNode(next);
-} // Perform context switching to the new snapshot.
-// To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
-// updating all the context's current values. That way reads, always just read the current value.
-// At the cost of updating contexts even if they're never read by this subtree.
-
-
-function switchContext(newSnapshot) {
-  // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
-  // We also need to update any new contexts that are now on the stack with the deepest value.
-  // The easiest way to update new contexts is to just reapply them in reverse order from the
-  // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
-  // for that. Therefore this algorithm is recursive.
-  // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
-  // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
-  // 3) Then we reapply new contexts on the way back up the stack.
-  var prev = currentActiveSnapshot;
-  var next = newSnapshot;
-
-  if (prev !== next) {
-    if (prev === null) {
-      // $FlowFixMe[incompatible-call]: This has to be non-null since it's not equal to prev.
-      pushAllNext(next);
-    } else if (next === null) {
-      popAllPrevious(prev);
-    } else if (prev.depth === next.depth) {
-      popToNearestCommonAncestor(prev, next);
-    } else if (prev.depth > next.depth) {
-      popPreviousToCommonLevel(prev, next);
-    } else {
-      popNextToCommonLevel(prev, next);
-    }
+// This module registers the host dispatcher so it needs to be imported
+// small, smaller than how we encode undefined, and is unambiguous. We could use
+// a different tuple structure to encode this instead but this makes the runtime
+// cost cheaper by eliminating a type checks in more positions.
+// prettier-ignore
 
-    currentActiveSnapshot = next;
-  }
+function createHints() {
+  return new Set();
 }
-function pushProvider(context, nextValue) {
-  var prevValue;
 
-  {
-    prevValue = context._currentValue;
-    context._currentValue = nextValue;
+var supportsRequestStorage = false;
+var requestStorage = null;
 
-    {
-      if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
-        error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
-      }
+var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
 
-      context._currentRenderer = rendererSigil;
+function isTemporaryReference(reference) {
+  return reference.$$typeof === TEMPORARY_REFERENCE_TAG;
+}
+function resolveTemporaryReferenceID(temporaryReference) {
+  return temporaryReference.$$id;
+}
+var proxyHandlers = {
+  get: function (target, name, receiver) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        // These names are a little too common. We should probably have a way to
+        // 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;
+
+      case 'displayName':
+        return undefined;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+
+      case 'defaultProps':
+        return undefined;
+      // Avoid this attempting to be serialized.
+
+      case 'toJSON':
+        return undefined;
+
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+
+      case 'Provider':
+        throw new Error("Cannot render a Client Context Provider on the Server. " + "Instead, you can export a Client Component wrapper " + "that itself renders a Client Context Provider.");
     }
-  }
 
-  var prevNode = currentActiveSnapshot;
-  var newNode = {
-    parent: prevNode,
-    depth: prevNode === null ? 0 : prevNode.depth + 1,
-    context: context,
-    parentValue: prevValue,
-    value: nextValue
-  };
-  currentActiveSnapshot = newNode;
-  return newNode;
+    throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
+    "Cannot access " + String(name) + " on the server. " + 'You cannot dot into a temporary client reference from a server component. ' + 'You can only pass the value through to the client.');
+  },
+  set: function () {
+    throw new Error('Cannot assign to a temporary client reference from a server module.');
+  }
+};
+function createTemporaryReference(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);
 }
-function popProvider() {
-  var prevSnapshot = currentActiveSnapshot;
 
-  if (prevSnapshot === null) {
-    throw new Error('Tried to pop a Context at the root of the app. This is a bug in React.');
+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');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
+var REACT_POSTPONE_TYPE = Symbol.for('react.postpone');
+var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+var FAUX_ITERATOR_SYMBOL = '@@iterator';
+function getIteratorFn(maybeIterable) {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
   }
 
-  {
-    var value = prevSnapshot.parentValue;
+  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
 
-    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
-      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
-    } else {
-      prevSnapshot.context._currentValue = value;
-    }
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
   }
 
-  return currentActiveSnapshot = prevSnapshot.parent;
-}
-function getActiveContext() {
-  return currentActiveSnapshot;
-}
-function readContext$1(context) {
-  var value = context._currentValue ;
-  return value;
+  return null;
 }
 
 // Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
@@ -637,11 +916,18 @@ function trackUsedThenable(thenableState, thenable, index) {
 
     default:
       {
-        if (typeof thenable.status === 'string') ; else {
-          var pendingThenable = thenable;
-          pendingThenable.status = 'pending';
-          pendingThenable.then(function (fulfilledValue) {
-            if (thenable.status === 'pending') {
+        if (typeof thenable.status === 'string') {
+          // Only instrument the thenable if the status if not defined. If
+          // it's defined, but an unknown value, assume it's been instrumented by
+          // some custom userspace implementation. We treat it as "pending".
+          // Attach a dummy listener, to ensure that any lazy initialization can
+          // happen. Flight lazily parses JSON when the value is actually awaited.
+          thenable.then(noop, noop);
+        } else {
+          var pendingThenable = thenable;
+          pendingThenable.status = 'pending';
+          pendingThenable.then(function (fulfilledValue) {
+            if (thenable.status === 'pending') {
               var fulfilledThenable = thenable;
               fulfilledThenable.status = 'fulfilled';
               fulfilledThenable.value = fulfilledValue;
@@ -652,21 +938,22 @@ function trackUsedThenable(thenableState, thenable, index) {
               rejectedThenable.status = 'rejected';
               rejectedThenable.reason = error;
             }
-          }); // Check one more time in case the thenable resolved synchronously
+          });
+        } // Check one more time in case the thenable resolved synchronously
 
-          switch (thenable.status) {
-            case 'fulfilled':
-              {
-                var fulfilledThenable = thenable;
-                return fulfilledThenable.value;
-              }
 
-            case 'rejected':
-              {
-                var rejectedThenable = thenable;
-                throw rejectedThenable.reason;
-              }
-          }
+        switch (thenable.status) {
+          case 'fulfilled':
+            {
+              var fulfilledThenable = thenable;
+              return fulfilledThenable.value;
+            }
+
+          case 'rejected':
+            {
+              var rejectedThenable = thenable;
+              throw rejectedThenable.reason;
+            }
         } // Suspend.
         //
         // Throwing here is an implementation detail that allows us to unwind the
@@ -702,40 +989,37 @@ function getSuspendedThenable() {
 var currentRequest$1 = null;
 var thenableIndexCounter = 0;
 var thenableState = null;
+var currentComponentDebugInfo = null;
 function prepareToUseHooksForRequest(request) {
   currentRequest$1 = request;
 }
 function resetHooksForRequest() {
   currentRequest$1 = null;
 }
-function prepareToUseHooksForComponent(prevThenableState) {
+function prepareToUseHooksForComponent(prevThenableState, componentDebugInfo) {
   thenableIndexCounter = 0;
   thenableState = prevThenableState;
+
+  {
+    currentComponentDebugInfo = componentDebugInfo;
+  }
 }
 function getThenableStateAfterSuspending() {
-  var state = thenableState;
-  thenableState = null;
-  return state;
-}
+  // If you use() to Suspend this should always exist but if you throw a Promise instead,
+  // which is not really supported anymore, it will be empty. We use the empty set as a
+  // marker to know if this was a replay of the same component or first attempt.
+  var state = thenableState || createThenableState();
 
-function readContext(context) {
   {
-    if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
-      if (isClientReference(context)) {
-        error('Cannot read a Client Context from a Server Component.');
-      } else {
-        error('Only createServerContext is supported in Server Components.');
-      }
-    }
-
-    if (currentRequest$1 === null) {
-      error('Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().');
-    }
+    // This is a hack but we stash the debug info here so that we don't need a completely
+    // different data structure just for this in DEV. Not too happy about it.
+    state._componentDebugInfo = currentComponentDebugInfo;
+    currentComponentDebugInfo = null;
   }
 
-  return readContext$1(context);
+  thenableState = null;
+  return state;
 }
-
 var HooksDispatcher = {
   useMemo: function (nextCreate) {
     return nextCreate();
@@ -746,8 +1030,8 @@ var HooksDispatcher = {
   useDebugValue: function () {},
   useDeferredValue: unsupportedHook,
   useTransition: unsupportedHook,
-  readContext: readContext,
-  useContext: readContext,
+  readContext: unsupportedContext,
+  useContext: unsupportedContext,
   useReducer: unsupportedHook,
   useRef: unsupportedHook,
   useState: unsupportedHook,
@@ -756,7 +1040,6 @@ var HooksDispatcher = {
   useImperativeHandle: unsupportedHook,
   useEffect: unsupportedHook,
   useId: useId,
-  useMutableSource: unsupportedHook,
   useSyncExternalStore: unsupportedHook,
   useCacheRefresh: function () {
     return unsupportedRefresh;
@@ -781,6 +1064,10 @@ function unsupportedRefresh() {
   throw new Error('Refreshing the cache is not supported in Server Components.');
 }
 
+function unsupportedContext() {
+  throw new Error('Cannot read a Client Context from a Server Component.');
+}
+
 function useId() {
   if (currentRequest$1 === null) {
     throw new Error('useId can only be used while React is rendering');
@@ -806,24 +1093,22 @@ function use(usable) {
       }
 
       return trackUsedThenable(thenableState, thenable, index);
-    } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
-      var context = usable;
-      return readContext(context);
+    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
+      unsupportedContext();
     }
   }
 
-  {
-    if (isClientReference(usable)) {
-      error('Cannot use() an already resolved Client Reference.');
+  if (isClientReference(usable)) {
+    if (usable.value != null && usable.value.$$typeof === REACT_CONTEXT_TYPE) {
+      // Show a more specific message since it's a common mistake.
+      throw new Error('Cannot read a Client Context from a Server Component.');
+    } else {
+      throw new Error('Cannot use() an already resolved Client Reference.');
     }
-  } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-  throw new Error('An unsupported type was passed to use(): ' + String(usable));
-}
-
-function createSignal() {
-  return new AbortController().signal;
+  } else {
+    throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
+    'An unsupported type was passed to use(): ' + String(usable));
+  }
 }
 
 function resolveCache() {
@@ -836,18 +1121,7 @@ function resolveCache() {
   return new Map();
 }
 
-var DefaultCacheDispatcher = {
-  getCacheSignal: function () {
-    var cache = resolveCache();
-    var entry = cache.get(createSignal);
-
-    if (entry === undefined) {
-      entry = createSignal();
-      cache.set(createSignal, entry);
-    }
-
-    return entry;
-  },
+var DefaultAsyncDispatcher = {
   getCacheForType: function (resourceType) {
     var cache = resolveCache();
     var entry = cache.get(resourceType);
@@ -861,6 +1135,17 @@ var DefaultCacheDispatcher = {
     return entry;
   }
 };
+var currentOwner = null;
+
+{
+  DefaultAsyncDispatcher.getOwner = function () {
+    return currentOwner;
+  };
+}
+
+function setCurrentOwner(componentInfo) {
+  currentOwner = componentInfo;
+}
 
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
@@ -868,6 +1153,8 @@ function isArray(a) {
   return isArrayImpl(a);
 }
 
+var getPrototypeOf = Object.getPrototypeOf;
+
 // in case they error.
 
 var jsxPropsParents = new WeakMap();
@@ -886,7 +1173,7 @@ function isObjectPrototype(object) {
   // still just a plain simple object.
 
 
-  if (Object.getPrototypeOf(object)) {
+  if (getPrototypeOf(object)) {
     return false;
   }
 
@@ -902,7 +1189,7 @@ function isObjectPrototype(object) {
 }
 
 function isSimpleObject(object) {
-  if (!isObjectPrototype(Object.getPrototypeOf(object))) {
+  if (!isObjectPrototype(getPrototypeOf(object))) {
     return false;
   }
 
@@ -955,6 +1242,10 @@ function describeValueForErrorMessage(value) {
           return '[...]';
         }
 
+        if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
+          return describeClientReference();
+        }
+
         var name = objectName(value);
 
         if (name === 'Object') {
@@ -965,7 +1256,15 @@ function describeValueForErrorMessage(value) {
       }
 
     case 'function':
-      return 'function';
+      {
+        if (value.$$typeof === CLIENT_REFERENCE_TAG) {
+          return describeClientReference();
+        }
+
+        var _name = value.displayName || value.name;
+
+        return _name ? 'function ' + _name : 'function';
+      }
 
     default:
       // eslint-disable-next-line react-internal/safe-string-coercion
@@ -1011,6 +1310,12 @@ function describeElementType(type) {
   return '';
 }
 
+var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+
+function describeClientReference(ref) {
+  return 'client';
+}
+
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   var objKind = objectName(objectOrArray);
 
@@ -1036,7 +1341,6 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
         if (typeof value === 'string') {
           substr = value;
         } else if (typeof value === 'object' && value !== null) {
-          // $FlowFixMe[incompatible-call] found when upgrading Flow
           substr = '{' + describeObjectForErrorMessage(value) + '}';
         } else {
           substr = '{' + describeValueForErrorMessage(value) + '}';
@@ -1069,7 +1373,6 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
         var _substr = void 0;
 
         if (typeof _value === 'object' && _value !== null) {
-          // $FlowFixMe[incompatible-call] found when upgrading Flow
           _substr = describeObjectForErrorMessage(_value);
         } else {
           _substr = describeValueForErrorMessage(_value);
@@ -1091,6 +1394,8 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   } else {
     if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
       str = '<' + describeElementType(objectOrArray.type) + '/>';
+    } else if (objectOrArray.$$typeof === CLIENT_REFERENCE_TAG) {
+      return describeClientReference();
     } else if (jsxPropsParents.has(objectOrArray)) {
       // Print JSX
       var _type = jsxPropsParents.get(objectOrArray);
@@ -1108,7 +1413,6 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
         var _substr2 = void 0;
 
         if (name === expandedName && typeof _value2 === 'object' && _value2 !== null) {
-          // $FlowFixMe[incompatible-call] found when upgrading Flow
           _substr2 = describeObjectForErrorMessage(_value2);
         } else {
           _substr2 = describeValueForErrorMessage(_value2);
@@ -1142,20 +1446,19 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
           str += ', ';
         }
 
-        var _name = _names[_i3];
-        str += describeKeyForErrorMessage(_name) + ': ';
-        var _value3 = _object[_name];
+        var _name2 = _names[_i3];
+        str += describeKeyForErrorMessage(_name2) + ': ';
+        var _value3 = _object[_name2];
 
         var _substr3 = void 0;
 
         if (typeof _value3 === 'object' && _value3 !== null) {
-          // $FlowFixMe[incompatible-call] found when upgrading Flow
           _substr3 = describeObjectForErrorMessage(_value3);
         } else {
           _substr3 = describeValueForErrorMessage(_value3);
         }
 
-        if (_name === expandedName) {
+        if (_name2 === expandedName) {
           start = str.length;
           length = _substr3.length;
           str += _substr3;
@@ -1182,41 +1485,41 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   return '\n  ' + str;
 }
 
-var ContextRegistry = ReactSharedInternals.ContextRegistry;
-function getOrCreateServerContext(globalName) {
-  if (!ContextRegistry[globalName]) {
-    ContextRegistry[globalName] = React.createServerContext(globalName, // $FlowFixMe[incompatible-call] function signature doesn't reflect the symbol value
-    REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
-  }
-
-  return ContextRegistry[globalName];
-}
+var ReactSharedInternals = ReactSharedInternalsServer;
 
+var ObjectPrototype = Object.prototype;
+var stringify = JSON.stringify; // Serializable values
 // Thenable<ReactClientValue>
+// task status
 
 var PENDING$1 = 0;
 var COMPLETED = 1;
 var ABORTED = 3;
-var ERRORED$1 = 4;
-var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-var ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
+var ERRORED$1 = 4; // object reference status
+
+var SEEN_BUT_NOT_YET_OUTLINED = -1;
+var NEVER_OUTLINED = -2;
 
 function defaultErrorHandler(error) {
   console['error'](error); // Don't transform to our wrapper
 }
 
+function defaultPostponeHandler(reason) {// Noop
+}
+
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError, context, identifierPrefix) {
-  if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) {
+function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName) {
+  if (ReactSharedInternals.A !== null && ReactSharedInternals.A !== DefaultAsyncDispatcher) {
     throw new Error('Currently React only supports one RSC renderer at a time.');
   }
 
-  prepareHostDispatcher();
-  ReactCurrentCache.current = DefaultCacheDispatcher;
+  ReactSharedInternals.A = DefaultAsyncDispatcher;
   var abortSet = new Set();
   var pingedTasks = [];
+  var cleanupQueue = [];
+
   var hints = createHints();
   var request = {
     status: OPEN,
@@ -1228,27 +1531,29 @@ function createRequest(model, bundlerConfig, onError, context, identifierPrefix)
     nextChunkId: 0,
     pendingChunks: 0,
     hints: hints,
+    abortListeners: new Set(),
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
     completedImportChunks: [],
     completedHintChunks: [],
-    completedJSONChunks: [],
+    completedRegularChunks: [],
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenClientReferences: new Map(),
     writtenServerReferences: new Map(),
-    writtenProviders: new Map(),
+    writtenObjects: new WeakMap(),
     identifierPrefix: identifierPrefix || '',
     identifierCount: 1,
+    taintCleanupQueue: cleanupQueue,
     onError: onError === undefined ? defaultErrorHandler : onError,
-    // $FlowFixMe[missing-this-annot]
-    toJSON: function (key, value) {
-      return resolveModelToJSON(request, this, key, value);
-    }
+    onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone
   };
-  request.pendingChunks++;
-  var rootContext = createRootContext(context);
-  var rootTask = createTask(request, model, rootContext, abortSet);
+
+  {
+    request.environmentName = environmentName === undefined ? 'Server' : environmentName;
+  }
+
+  var rootTask = createTask(request, model, null, false, abortSet);
   pingedTasks.push(rootTask);
   return request;
 }
@@ -1259,15 +1564,18 @@ function resolveRequest() {
   return null;
 }
 
-function createRootContext(reqContext) {
-  return importServerContexts(reqContext);
-}
+function serializeThenable(request, task, thenable) {
+  var newTask = createTask(request, null, task.keyPath, // the server component sequence continues through Promise-as-a-child.
+  task.implicitSlot, request.abortableTasks);
 
-var POP = {};
+  {
+    // If this came from Flight, forward any debug info into this new row.
+    var debugInfo = thenable._debugInfo;
 
-function serializeThenable(request, thenable) {
-  request.pendingChunks++;
-  var newTask = createTask(request, null, getActiveContext(), request.abortableTasks);
+    if (debugInfo) {
+      forwardDebugInfo(request, newTask.id, debugInfo);
+    }
+  }
 
   switch (thenable.status) {
     case 'fulfilled':
@@ -1281,14 +1589,10 @@ function serializeThenable(request, thenable) {
     case 'rejected':
       {
         var x = thenable.reason;
-        var digest = logRecoverableError(request, x);
 
         {
-          var _getErrorMessageAndSt = getErrorMessageAndStackDev(x),
-              message = _getErrorMessageAndSt.message,
-              stack = _getErrorMessageAndSt.stack;
-
-          emitErrorChunkDev(request, newTask.id, digest, message, stack);
+          var digest = logRecoverableError(request, x);
+          emitErrorChunk(request, newTask.id, digest, x);
         }
 
         return newTask.id;
@@ -1326,21 +1630,16 @@ function serializeThenable(request, thenable) {
     newTask.model = value;
     pingTask(request, newTask);
   }, function (reason) {
-    newTask.status = ERRORED$1; // TODO: We should ideally do this inside performWork so it's scheduled
-
-    var digest = logRecoverableError(request, reason);
-
     {
-      var _getErrorMessageAndSt2 = getErrorMessageAndStackDev(reason),
-          _message = _getErrorMessageAndSt2.message,
-          _stack = _getErrorMessageAndSt2.stack;
+      newTask.status = ERRORED$1;
 
-      emitErrorChunkDev(request, newTask.id, digest, _message, _stack);
-    }
+      var _digest = logRecoverableError(request, reason);
 
-    if (request.destination !== null) {
-      flushCompletedChunks(request, request.destination);
+      emitErrorChunk(request, newTask.id, _digest, reason);
     }
+
+    request.abortableTasks.delete(newTask);
+    enqueueFlush(request);
   });
   return newTask.id;
 }
@@ -1409,36 +1708,68 @@ function createLazyWrapperAroundWakeable(wakeable) {
     _payload: thenable,
     _init: readThenable
   };
+
+  {
+    // If this came from React, transfer the debug info.
+    lazyType._debugInfo = thenable._debugInfo || [];
+  }
+
   return lazyType;
 }
 
-function attemptResolveElement(request, type, key, ref, props, prevThenableState) {
-  if (ref !== null && ref !== undefined) {
-    // When the ref moves to the regular props object this will implicitly
-    // throw for functions. We could probably relax it to a DEV warning for other
-    // cases.
-    throw new Error('Refs cannot be used in Server Components, nor passed to Client Components.');
-  }
+function renderFunctionComponent(request, task, key, Component, props, owner) {
+  // 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;
 
   {
-    jsxPropsParents.set(props, type);
-
-    if (typeof props.children === 'object' && props.children !== null) {
-      jsxChildrenParents.set(props.children, type);
+    if (debugID === null) {
+      // We don't have a chunk to assign debug info. We need to outline this
+      // component to assign it an ID.
+      return outlineTask(request, task);
+    } else if (prevThenableState !== null) {
+      // This is a replay and we've already emitted the debug info of this component
+      // in the first pass. We skip emitting a duplicate line.
+      // As a hack we stashed the previous component debug info on this object in DEV.
+      componentDebugInfo = prevThenableState._componentDebugInfo;
+    } else {
+      // This is a new component in the same task so we can emit more debug info.
+      var componentName = Component.displayName || Component.name || '';
+      request.pendingChunks++;
+      var componentDebugID = debugID;
+      componentDebugInfo = {
+        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);
     }
   }
 
-  if (typeof type === 'function') {
-    if (isClientReference(type)) {
-      // This is a reference to a Client Component.
-      return [REACT_ELEMENT_TYPE, type, key, props];
-    } // This is a server-side component.
+  prepareToUseHooksForComponent(prevThenableState, componentDebugInfo); // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result;
 
+  {
+    setCurrentOwner(componentDebugInfo);
 
-    prepareToUseHooksForComponent(prevThenableState);
-    var result = type(props);
+    try {
+      result = Component(props, secondArg);
+    } finally {
+      setCurrentOwner(null);
+    }
+  }
 
-    if (typeof result === 'object' && result !== null && typeof result.then === 'function') {
+  if (typeof result === 'object' && result !== null) {
+    if (typeof result.then === 'function') {
       // When the return value is in children position we can resolve it immediately,
       // to its value without a wrapper if it's synchronously available.
       var thenable = result;
@@ -1449,29 +1780,228 @@ function attemptResolveElement(request, type, key, ref, props, prevThenableState
       // the thenable here.
 
 
-      return createLazyWrapperAroundWakeable(result);
+      result = createLazyWrapperAroundWakeable(result);
+    } // Normally we'd serialize an Iterator/AsyncIterator as a single-shot which is not compatible
+    // to be rendered as a React Child. However, because we have the function to recreate
+    // an iterable from rendering the element again, we can effectively treat it as multi-
+    // shot. Therefore we treat this as an Iterable/AsyncIterable, whether it was one or not, by
+    // adding a wrapper so that this component effectively renders down to an AsyncIterable.
+
+
+    var iteratorFn = getIteratorFn(result);
+
+    if (iteratorFn) {
+      var iterableChild = result;
+      result = _defineProperty({}, Symbol.iterator, function () {
+        var iterator = iteratorFn.call(iterableChild);
+
+        {
+          // If this was an Iterator but not a GeneratorFunction we warn because
+          // it might have been a mistake. Technically you can make this mistake with
+          // GeneratorFunctions and even single-shot Iterables 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 GeneratorFunction]' && // $FlowIgnore[method-unbinding]
+            Object.prototype.toString.call(iterableChild) === '[object Generator]';
+
+            if (!isGeneratorComponent) {
+              error('Returning an Iterator 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..
+
+
+  var prevKeyPath = task.keyPath;
+  var prevImplicitSlot = task.implicitSlot;
+
+  if (key !== null) {
+    // Append the key to the path. Technically a null key should really add the child
+    // index. We don't do that to hold the payload small and implementation simple.
+    task.keyPath = prevKeyPath === null ? key : prevKeyPath + ',' + key;
+  } else if (prevKeyPath === null) {
+    // This sequence of Server Components has no keys. This means that it was rendered
+    // in a slot that needs to assign an implicit key. Even if children below have
+    // explicit keys, they should not be used for the outer most key since it might
+    // collide with other slots in that set.
+    task.implicitSlot = true;
+  }
+
+  var json = renderModelDestructive(request, task, emptyRoot, '', result);
+  task.keyPath = prevKeyPath;
+  task.implicitSlot = prevImplicitSlot;
+  return json;
+}
+
+function renderFragment(request, task, children) {
+  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 debugInfo = children._debugInfo;
+
+    if (debugInfo) {
+      // If this came from Flight, forward any debug info into this new row.
+      if (debugID === null) {
+        // We don't have a chunk to assign debug info. We need to outline this
+        // component to assign it an ID.
+        return outlineTask(request, task);
+      } else {
+        // Forward any debug info we have the first time we see it.
+        // We do this after init so that we have received all the debug info
+        // from the server by the time we emit it.
+        forwardDebugInfo(request, debugID, debugInfo);
+      } // Since we're rendering this array again, create a copy that doesn't
+      // have the debug info so we avoid outlining or emitting debug info again.
+
+
+      children = Array.from(children);
+    }
+  }
+
+  return children;
+}
+
+function renderClientElement(task, type, key, props, owner) // DEV-only
+{
+  // the keys of any Server Components which are not serialized.
+
+
+  var keyPath = task.keyPath;
+
+  if (key === null) {
+    key = keyPath;
+  } else if (keyPath !== null) {
+    key = keyPath + ',' + key;
+  }
+
+  var element = [REACT_ELEMENT_TYPE, type, key, props, owner] ;
+
+  if (task.implicitSlot && key !== null) {
+    // The root Server Component had no key so it was in an implicit slot.
+    // If we had a key lower, it would end up in that slot with an explicit key.
+    // We wrap the element in a fragment to give it an implicit key slot with
+    // an inner explicit key.
+    return [element];
+  } // 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. We also need to reset it once we render into an array
+  // or anything else too which we also get implicitly.
+
+
+  return element;
+} // The chunk ID we're currently rendering that we can assign debug data to.
+
+
+var debugID = null;
+
+function outlineTask(request, task) {
+  var newTask = createTask(request, task.model, // the currently rendering element
+  task.keyPath, // unlike outlineModel this one carries along context
+  task.implicitSlot, request.abortableTasks);
+  retryTask(request, newTask);
+
+  if (newTask.status === COMPLETED) {
+    // We completed synchronously so we can refer to this by reference. This
+    // makes it behaves the same as prod during deserialization.
+    return serializeByValueID(newTask.id);
+  } // This didn't complete synchronously so it wouldn't have even if we didn't
+  // outline it, so this would reduce to a lazy reference even in prod.
+
+
+  return serializeLazyID(newTask.id);
+}
+
+function renderElement(request, task, type, key, ref, props, owner) // DEV only
+{
+  if (ref !== null && ref !== undefined) {
+    // When the ref moves to the regular props object this will implicitly
+    // throw for functions. We could probably relax it to a DEV warning for other
+    // cases.
+    // TODO: `ref` is now just a prop when `enableRefAsProp` is on. Should we
+    // do what the above comment says?
+    throw new Error('Refs cannot be used in Server Components, nor passed to Client Components.');
+  }
+
+  {
+    jsxPropsParents.set(props, type);
+
+    if (typeof props.children === 'object' && props.children !== null) {
+      jsxChildrenParents.set(props.children, type);
     }
+  }
 
-    return result;
+  if (typeof type === 'function') {
+    if (isClientReference(type) || isTemporaryReference(type)) {
+      // This is a reference to a Client Component.
+      return renderClientElement(task, type, key, props, owner);
+    } // This is a Server Component.
+
+
+    return renderFunctionComponent(request, task, key, type, props, owner);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
-    return [REACT_ELEMENT_TYPE, type, key, props];
+    return renderClientElement(task, type, key, props, owner);
   } else if (typeof type === 'symbol') {
-    if (type === REACT_FRAGMENT_TYPE) {
+    if (type === REACT_FRAGMENT_TYPE && key === null) {
       // For key-less fragments, we add a small optimization to avoid serializing
       // it as a wrapper.
-      // TODO: If a key is specified, we should propagate its key to any children.
-      // Same as if a Server Component has a key.
-      return props.children;
+      var prevImplicitSlot = task.implicitSlot;
+
+      if (task.keyPath === null) {
+        task.implicitSlot = true;
+      }
+
+      var json = renderModelDestructive(request, task, emptyRoot, '', props.children);
+      task.implicitSlot = prevImplicitSlot;
+      return json;
     } // This might be a built-in React component. We'll let the client decide.
     // Any built-in works as long as its props are serializable.
 
 
-    return [REACT_ELEMENT_TYPE, type, key, props];
+    return renderClientElement(task, type, key, props, owner);
   } else if (type != null && typeof type === 'object') {
     if (isClientReference(type)) {
       // This is a reference to a Client Component.
-      return [REACT_ELEMENT_TYPE, type, key, props];
+      return renderClientElement(task, type, key, props, owner);
     }
 
     switch (type.$$typeof) {
@@ -1480,45 +2010,17 @@ function attemptResolveElement(request, type, key, ref, props, prevThenableState
           var payload = type._payload;
           var init = type._init;
           var wrappedType = init(payload);
-          return attemptResolveElement(request, wrappedType, key, ref, props, prevThenableState);
+          return renderElement(request, task, wrappedType, key, ref, props, owner);
         }
 
       case REACT_FORWARD_REF_TYPE:
         {
-          var render = type.render;
-          prepareToUseHooksForComponent(prevThenableState);
-          return render(props, undefined);
+          return renderFunctionComponent(request, task, key, type.render, props, owner);
         }
 
       case REACT_MEMO_TYPE:
         {
-          return attemptResolveElement(request, type.type, key, ref, props, prevThenableState);
-        }
-
-      case REACT_PROVIDER_TYPE:
-        {
-          pushProvider(type._context, props.value);
-
-          {
-            var extraKeys = Object.keys(props).filter(function (value) {
-              if (value === 'children' || value === 'value') {
-                return false;
-              }
-
-              return true;
-            });
-
-            if (extraKeys.length !== 0) {
-              error('ServerContext can only have a value prop and children. Found: %s', JSON.stringify(extraKeys));
-            }
-          }
-
-          return [REACT_ELEMENT_TYPE, type, key, // Rely on __popProvider being serialized last to pop the provider.
-          {
-            value: props.value,
-            children: props.children,
-            __pop: POP
-          }];
+          return renderElement(request, task, type.type, key, ref, props, owner);
         }
     }
   }
@@ -1538,16 +2040,51 @@ function pingTask(request, task) {
   }
 }
 
-function createTask(request, model, context, abortSet) {
+function createTask(request, model, keyPath, implicitSlot, abortSet) {
+  request.pendingChunks++;
   var id = request.nextChunkId++;
+
+  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);
+    }
+  }
+
   var task = {
     id: id,
     status: PENDING$1,
     model: model,
-    context: context,
+    keyPath: keyPath,
+    implicitSlot: implicitSlot,
     ping: function () {
       return pingTask(request, task);
     },
+    toJSON: function (parentPropertyName, value) {
+      var parent = this; // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
+
+      {
+        // $FlowFixMe[incompatible-use]
+        var originalValue = parent[parentPropertyName];
+
+        if (typeof originalValue === 'object' && originalValue !== value && !(originalValue instanceof Date)) {
+          if (objectName(originalValue) !== 'Object') {
+            var jsxParentType = jsxChildrenParents.get(parent);
+
+            if (typeof jsxParentType === 'string') {
+              error('%s objects cannot be rendered as text children. Try formatting it using toString().%s', objectName(originalValue), describeObjectForErrorMessage(parent, parentPropertyName));
+            } else {
+              error('Only plain objects can be passed to Client Components from Server Components. ' + '%s objects are not supported.%s', objectName(originalValue), describeObjectForErrorMessage(parent, parentPropertyName));
+            }
+          } else {
+            error('Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with toJSON methods are not supported. Convert it manually ' + 'to a simple value before passing it to props.%s', describeObjectForErrorMessage(parent, parentPropertyName));
+          }
+        }
+      }
+
+      return renderModel(request, task, parent, parentPropertyName, value);
+    },
     thenableState: null
   };
   abortSet.add(task);
@@ -1562,6 +2099,10 @@ function serializeLazyID(id) {
   return '$L' + id.toString(16);
 }
 
+function serializeInfinitePromise() {
+  return '$@';
+}
+
 function serializePromiseID(id) {
   return '$@' + id.toString(16);
 }
@@ -1570,12 +2111,12 @@ function serializeServerReferenceID(id) {
   return '$F' + id.toString(16);
 }
 
-function serializeSymbolReference(name) {
-  return '$S' + name;
+function serializeTemporaryReferenceID(id) {
+  return '$T' + id;
 }
 
-function serializeProviderReference(name) {
-  return '$P' + name;
+function serializeSymbolReference(name) {
+  return '$S' + name;
 }
 
 function serializeNumber(number) {
@@ -1610,13 +2151,23 @@ function serializeBigInt(n) {
   return '$n' + n.toString(10);
 }
 
-function serializeClientReference(request, parent, key, clientReference) {
+function serializeRowHeader(tag, id) {
+  return id.toString(16) + ':' + tag;
+}
+
+function encodeReferenceChunk(request, id, reference) {
+  var json = stringify(reference);
+  var row = id.toString(16) + ':' + json + '\n';
+  return stringToChunk(row);
+}
+
+function serializeClientReference(request, parent, parentPropertyName, clientReference) {
   var clientReferenceKey = getClientReferenceKey(clientReference);
   var writtenClientReferences = request.writtenClientReferences;
   var existingId = writtenClientReferences.get(clientReferenceKey);
 
   if (existingId !== undefined) {
-    if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
       // If we're encoding the "type" of an element, we can refer
       // to that by a lazy reference instead of directly since React
       // knows how to deal with lazy values. This lets us suspend
@@ -1635,7 +2186,7 @@ function serializeClientReference(request, parent, key, clientReference) {
     emitImportChunk(request, importId, clientReferenceMetadata);
     writtenClientReferences.set(clientReferenceKey, importId);
 
-    if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+    if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
       // If we're encoding the "type" of an element, we can refer
       // to that by a lazy reference instead of directly since React
       // knows how to deal with lazy values. This lets us suspend
@@ -1649,20 +2200,20 @@ function serializeClientReference(request, parent, key, clientReference) {
     request.pendingChunks++;
     var errorId = request.nextChunkId++;
     var digest = logRecoverableError(request, x);
-
-    {
-      var _getErrorMessageAndSt3 = getErrorMessageAndStackDev(x),
-          message = _getErrorMessageAndSt3.message,
-          stack = _getErrorMessageAndSt3.stack;
-
-      emitErrorChunkDev(request, errorId, digest, message, stack);
-    }
-
+    emitErrorChunk(request, errorId, digest, x);
     return serializeByValueID(errorId);
   }
 }
 
-function serializeServerReference(request, parent, key, serverReference) {
+function outlineModel(request, value) {
+  var newTask = createTask(request, value, null, // The way we use outlining is for reusing an object.
+  false, // It makes no sense for that use case to be contextual.
+  request.abortableTasks);
+  retryTask(request, newTask);
+  return newTask.id;
+}
+
+function serializeServerReference(request, serverReference) {
   var writtenServerReferences = request.writtenServerReferences;
   var existingId = writtenServerReferences.get(serverReference);
 
@@ -1675,126 +2226,154 @@ function serializeServerReference(request, parent, key, serverReference) {
     id: getServerReferenceId(request.bundlerConfig, serverReference),
     bound: bound ? Promise.resolve(bound) : null
   };
-  request.pendingChunks++;
-  var metadataId = request.nextChunkId++; // We assume that this object doesn't suspend.
-
-  var processedChunk = processModelChunk(request, metadataId, serverReferenceMetadata);
-  request.completedJSONChunks.push(processedChunk);
+  var metadataId = outlineModel(request, serverReferenceMetadata);
   writtenServerReferences.set(serverReference, metadataId);
   return serializeServerReferenceID(metadataId);
 }
 
-function escapeStringValue(value) {
-  if (value[0] === '$') {
-    // We need to escape $ prefixed strings since we use those to encode
-    // references to IDs and as special symbol values.
-    return '$' + value;
-  } else {
-    return value;
-  }
+function serializeTemporaryReference(request, temporaryReference) {
+  var id = resolveTemporaryReferenceID(temporaryReference);
+  return serializeTemporaryReferenceID(id);
 }
 
-var insideContextProps = null;
-var isInsideContextValue = false;
-function resolveModelToJSON(request, parent, key, value) {
-  // Make sure that `parent[key]` wasn't JSONified before `value` was passed to us
-  {
-    // $FlowFixMe[incompatible-use]
-    var originalValue = parent[key];
+function serializeLargeTextString(request, text) {
+  request.pendingChunks++;
+  var textId = request.nextChunkId++;
+  emitTextChunk(request, textId, text);
+  return serializeByValueID(textId);
+}
 
-    if (typeof originalValue === 'object' && originalValue !== value && !(originalValue instanceof Date)) {
-      if (objectName(originalValue) !== 'Object') {
-        var jsxParentType = jsxChildrenParents.get(parent);
+function serializeMap(request, map) {
+  var entries = Array.from(map);
 
-        if (typeof jsxParentType === 'string') {
-          error('%s objects cannot be rendered as text children. Try formatting it using toString().%s', objectName(originalValue), describeObjectForErrorMessage(parent, key));
-        } else {
-          error('Only plain objects can be passed to Client Components from Server Components. ' + '%s objects are not supported.%s', objectName(originalValue), describeObjectForErrorMessage(parent, key));
-        }
-      } else {
-        error('Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with toJSON methods are not supported. Convert it manually ' + 'to a simple value before passing it to props.%s', describeObjectForErrorMessage(parent, key));
+  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);
       }
     }
-  } // Special Symbols
+  }
 
+  var id = outlineModel(request, entries);
+  return '$Q' + id.toString(16);
+}
 
-  switch (value) {
-    case REACT_ELEMENT_TYPE:
-      return '$';
-  }
+function serializeFormData(request, formData) {
+  var entries = Array.from(formData.entries());
+  var id = outlineModel(request, entries);
+  return '$K' + id.toString(16);
+}
 
-  {
-    if (parent[0] === REACT_ELEMENT_TYPE && parent[1] && parent[1].$$typeof === REACT_PROVIDER_TYPE && key === '3') {
-      insideContextProps = value;
-    } else if (insideContextProps === parent && key === 'value') {
-      isInsideContextValue = true;
-    } else if (insideContextProps === parent && key === 'children') {
-      isInsideContextValue = false;
-    }
-  } // Resolve Server Components.
+function serializeSet(request, set) {
+  var entries = Array.from(set);
 
+  for (var i = 0; i < entries.length; i++) {
+    var key = entries[i];
 
-  while (typeof value === 'object' && value !== null && (value.$$typeof === REACT_ELEMENT_TYPE || value.$$typeof === REACT_LAZY_TYPE)) {
-    {
-      if (isInsideContextValue) {
-        error('React elements are not allowed in ServerContext');
+    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);
       }
     }
+  }
 
-    try {
-      switch (value.$$typeof) {
-        case REACT_ELEMENT_TYPE:
-          {
-            // TODO: Concatenate keys of parents onto children.
-            var element = value; // Attempt to render the Server Component.
+  var id = outlineModel(request, entries);
+  return '$W' + id.toString(16);
+}
 
-            value = attemptResolveElement(request, element.type, element.key, element.ref, element.props, null);
-            break;
-          }
+function serializeIterator(request, iterator) {
+  var id = outlineModel(request, Array.from(iterator));
+  return '$i' + id.toString(16);
+}
 
-        case REACT_LAZY_TYPE:
-          {
-            var payload = value._payload;
-            var init = value._init;
-            value = init(payload);
-            break;
-          }
-      }
-    } catch (thrownValue) {
-      var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical
-      // reasons, the rest of the Suspense implementation expects the thrown
-      // value to be a thenable, because before `use` existed that was the
-      // (unstable) API for suspending. This implementation detail can change
-      // later, once we deprecate the old API in favor of `use`.
-      getSuspendedThenable() : thrownValue; // $FlowFixMe[method-unbinding]
-
-      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+function escapeStringValue(value) {
+  if (value[0] === '$') {
+    // We need to escape $ prefixed strings since we use those to encode
+    // references to IDs and as special symbol values.
+    return '$' + value;
+  } else {
+    return value;
+  }
+}
+
+var modelRoot = false;
+
+function renderModel(request, task, parent, key, value) {
+  var prevKeyPath = task.keyPath;
+  var prevImplicitSlot = task.implicitSlot;
+
+  try {
+    return renderModelDestructive(request, task, parent, key, value);
+  } catch (thrownValue) {
+    var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical
+    // reasons, the rest of the Suspense implementation expects the thrown
+    // value to be a thenable, because before `use` existed that was the
+    // (unstable) API for suspending. This implementation detail can change
+    // later, once we deprecate the old API in favor of `use`.
+    getSuspendedThenable() : thrownValue; // If the suspended/errored value was an element or lazy it can be reduced
+    // to a lazy reference, so that it doesn't error the parent.
+
+    var model = task.model;
+    var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE);
+
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
         // Something suspended, we'll need to create a new task and resolve it later.
-        request.pendingChunks++;
-        var newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
+        var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
         var ping = newTask.ping;
         x.then(ping, ping);
-        newTask.thenableState = getThenableStateAfterSuspending();
-        return serializeLazyID(newTask.id);
-      } else {
-        // Something errored. We'll still send everything we have up until this point.
-        // We'll replace this element with a lazy reference that throws on the client
-        // once it gets rendered.
-        request.pendingChunks++;
-        var errorId = request.nextChunkId++;
-        var digest = logRecoverableError(request, x);
+        newTask.thenableState = getThenableStateAfterSuspending(); // Restore the context. We assume that this will be restored by the inner
+        // functions in case nothing throws so we don't use "finally" here.
 
-        {
-          var _getErrorMessageAndSt4 = getErrorMessageAndStackDev(x),
-              message = _getErrorMessageAndSt4.message,
-              stack = _getErrorMessageAndSt4.stack;
+        task.keyPath = prevKeyPath;
+        task.implicitSlot = prevImplicitSlot;
 
-          emitErrorChunkDev(request, errorId, digest, message, stack);
+        if (wasReactNode) {
+          return serializeLazyID(newTask.id);
         }
 
-        return serializeLazyID(errorId);
+        return serializeByValueID(newTask.id);
       }
-    }
+    } // Restore the context. We assume that this will be restored by the inner
+    // functions in case nothing throws so we don't use "finally" here.
+
+
+    task.keyPath = prevKeyPath;
+    task.implicitSlot = prevImplicitSlot;
+
+    if (wasReactNode) {
+      // Something errored. We'll still send everything we have up until this point.
+      // We'll replace this element with a lazy reference that throws on the client
+      // once it gets rendered.
+      request.pendingChunks++;
+      var errorId = request.nextChunkId++;
+      var digest = logRecoverableError(request, x);
+      emitErrorChunk(request, errorId, digest, x);
+      return serializeLazyID(errorId);
+    } // Something errored but it was not in a React Node. There's no need to serialize
+    // it by value because it'll just error the whole parent row anyway so we can
+    // just stop any siblings and error the whole parent row.
+
+
+    throw x;
+  }
+}
+
+function renderModelDestructive(request, task, parent, parentPropertyName, value) {
+  // Set the currently rendering model
+  task.model = value; // Special Symbol, that's very common.
+
+  if (value === REACT_ELEMENT_TYPE) {
+    return '$';
   }
 
   if (value === null) {
@@ -1802,60 +2381,572 @@ function resolveModelToJSON(request, parent, key, value) {
   }
 
   if (typeof value === 'object') {
+    switch (value.$$typeof) {
+      case REACT_ELEMENT_TYPE:
+        {
+          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.
+
+
+            _writtenObjects.set(value.props, NEVER_OUTLINED);
+          }
+
+          var element = value;
+
+          {
+            var debugInfo = value._debugInfo;
+
+            if (debugInfo) {
+              // If this came from Flight, forward any debug info into this new row.
+              if (debugID === null) {
+                // We don't have a chunk to assign debug info. We need to outline this
+                // component to assign it an ID.
+                return outlineTask(request, task);
+              } else {
+                // Forward any debug info we have the first time we see it.
+                forwardDebugInfo(request, debugID, debugInfo);
+              }
+            }
+          }
+
+          var props = element.props;
+          var ref;
+
+          {
+            // TODO: This is a temporary, intermediate step. Once the feature
+            // flag is removed, we should get the ref off the props object right
+            // before using it.
+            var refProp = props.ref;
+            ref = refProp !== undefined ? refProp : null;
+          } // Attempt to render the Server Component.
+
+
+          return renderElement(request, task, element.type, // $FlowFixMe[incompatible-call] the key of an element is null | string
+          element.key, ref, props, element._owner );
+        }
+
+      case REACT_LAZY_TYPE:
+        {
+          // Reset the task's thenable state before continuing. If there was one, it was
+          // from suspending the lazy before.
+          task.thenableState = null;
+          var lazy = value;
+          var payload = lazy._payload;
+          var init = lazy._init;
+          var resolvedModel = init(payload);
+
+          {
+            var _debugInfo = lazy._debugInfo;
+
+            if (_debugInfo) {
+              // If this came from Flight, forward any debug info into this new row.
+              if (debugID === null) {
+                // We don't have a chunk to assign debug info. We need to outline this
+                // component to assign it an ID.
+                return outlineTask(request, task);
+              } else {
+                // Forward any debug info we have the first time we see it.
+                // We do this after init so that we have received all the debug info
+                // from the server by the time we emit it.
+                forwardDebugInfo(request, debugID, _debugInfo);
+              }
+            }
+          }
+
+          return renderModelDestructive(request, task, emptyRoot, '', resolvedModel);
+        }
+    }
+
     if (isClientReference(value)) {
-      return serializeClientReference(request, parent, key, value); // $FlowFixMe[method-unbinding]
-    } else if (typeof value.then === 'function') {
-      // We assume that any object with a .then property is a "Thenable" type,
+      return serializeClientReference(request, parent, parentPropertyName, value);
+    }
+
+    var writtenObjects = request.writtenObjects;
+    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+
+    if (typeof value.then === 'function') {
+      if (existingId !== 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.
+          var _promiseId = serializeThenable(request, task, value);
+
+          return serializePromiseID(_promiseId);
+        } 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 {
+          // We've seen this promise before, so we can just refer to the same result.
+          return serializePromiseID(existingId);
+        }
+      } // 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, value);
+
+
+      var promiseId = serializeThenable(request, task, value);
+      writtenObjects.set(value, promiseId);
       return serializePromiseID(promiseId);
-    } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
-      var providerKey = value._context._globalName;
-      var writtenProviders = request.writtenProviders;
-      var providerId = writtenProviders.get(key);
-
-      if (providerId === undefined) {
-        request.pendingChunks++;
-        providerId = request.nextChunkId++;
-        writtenProviders.set(providerKey, providerId);
-        emitProviderChunk(request, providerId, providerKey);
+    }
+
+    if (existingId !== 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) {
+        // We've already emitted this as an outlined object, so we can
+        // just refer to that by its existing ID.
+        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);
+    }
+
+    if (isArray(value)) {
+      return renderFragment(request, task, value);
+    }
+
+    if (value instanceof Map) {
+      return serializeMap(request, value);
+    }
+
+    if (value instanceof Set) {
+      return serializeSet(request, value);
+    } // TODO: FormData is not available in old Node. Remove the typeof later.
+
+
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(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));
+    }
+
+
+    var proto = getPrototypeOf(value);
+
+    if (proto !== ObjectPrototype && (proto === null || getPrototypeOf(proto) !== null)) {
+      throw new Error('Only plain objects, and a few built-ins, can be passed to Client Components ' + 'from Server Components. Classes or null prototypes are not supported.');
+    }
+
+    {
+      if (objectName(value) !== 'Object') {
+        error('Only plain objects can be passed to Client Components from Server Components. ' + '%s objects are not supported.%s', objectName(value), describeObjectForErrorMessage(parent, parentPropertyName));
+      } else if (!isSimpleObject(value)) {
+        error('Only plain objects can be passed to Client Components from Server Components. ' + 'Classes or other objects with methods are not supported.%s', describeObjectForErrorMessage(parent, parentPropertyName));
+      } else if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(value);
+
+        if (symbols.length > 0) {
+          error('Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with symbol properties like %s are not supported.%s', symbols[0].description, describeObjectForErrorMessage(parent, parentPropertyName));
+        }
+      }
+    } // $FlowFixMe[incompatible-return]
+
+
+    return value;
+  }
+
+  if (typeof value === 'string') {
+
+
+    if (value[value.length - 1] === 'Z') {
+      // Possibly a Date, whose toJSON automatically calls toISOString
+      // $FlowFixMe[incompatible-use]
+      var originalValue = parent[parentPropertyName];
+
+      if (originalValue instanceof Date) {
+        return serializeDateFromDateJSON(value);
+      }
+    }
+
+    if (value.length >= 1024) {
+      // For large strings, we encode them outside the JSON payload so that we
+      // don't have to double encode and double parse the strings. This can also
+      // be more compact in case the string has a lot of escaped characters.
+      return serializeLargeTextString(request, value);
+    }
+
+    return escapeStringValue(value);
+  }
+
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'number') {
+    return serializeNumber(value);
+  }
+
+  if (typeof value === 'undefined') {
+    return serializeUndefined();
+  }
+
+  if (typeof value === 'function') {
+    if (isClientReference(value)) {
+      return serializeClientReference(request, parent, parentPropertyName, value);
+    }
+
+    if (isServerReference(value)) {
+      return serializeServerReference(request, value);
+    }
+
+    if (isTemporaryReference(value)) {
+      return serializeTemporaryReference(request, value);
+    }
+
+    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';
+      throw new Error('Functions are not valid as a child of Client Components. This may happen if ' + 'you return ' + componentName + ' instead of <' + componentName + ' /> from render. ' + 'Or maybe you meant to call this function rather than return it.' + describeObjectForErrorMessage(parent, parentPropertyName));
+    } else {
+      throw new Error('Functions cannot be passed directly to Client Components ' + 'unless you explicitly expose it by marking it with "use server". ' + 'Or maybe you meant to call this function rather than return it.' + describeObjectForErrorMessage(parent, parentPropertyName));
+    }
+  }
+
+  if (typeof value === 'symbol') {
+    var writtenSymbols = request.writtenSymbols;
+
+    var _existingId2 = writtenSymbols.get(value);
+
+    if (_existingId2 !== undefined) {
+      return serializeByValueID(_existingId2);
+    } // $FlowFixMe[incompatible-type] `description` might be undefined
+
+
+    var name = value.description;
+
+    if (Symbol.for(name) !== value) {
+      throw new Error('Only global symbols received from Symbol.for(...) can be passed to Client Components. ' + ("The symbol Symbol.for(" + // $FlowFixMe[incompatible-type] `description` might be undefined
+      value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, parentPropertyName));
+    }
+
+    request.pendingChunks++;
+    var symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    writtenSymbols.set(value, symbolId);
+    return serializeByValueID(symbolId);
+  }
+
+  if (typeof value === 'bigint') {
+
+    return serializeBigInt(value);
+  }
+
+  throw new Error("Type " + typeof value + " is not supported in Client Component props." + describeObjectForErrorMessage(parent, parentPropertyName));
+}
+
+function logPostpone(request, reason) {
+  var prevRequest = currentRequest;
+  currentRequest = null;
+
+  try {
+    var onPostpone = request.onPostpone;
+
+    if (supportsRequestStorage) ; else {
+      onPostpone(reason);
+    }
+  } finally {
+    currentRequest = prevRequest;
+  }
+}
+
+function logRecoverableError(request, error) {
+  var prevRequest = currentRequest;
+  currentRequest = null;
+  var errorDigest;
+
+  try {
+    var onError = request.onError;
+
+    if (supportsRequestStorage) ; else {
+      errorDigest = onError(error);
+    }
+  } finally {
+    currentRequest = prevRequest;
+  }
+
+  if (errorDigest != null && typeof errorDigest !== 'string') {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error("onError returned something with a type other than \"string\". onError should return a string and may return null or undefined but must not return anything else. It received something of type \"" + typeof errorDigest + "\" instead");
+  }
+
+  return errorDigest || '';
+}
+
+function fatalError(request, error) {
+
+
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
+}
+
+function emitPostponeChunk(request, id, postponeInstance) {
+  var row;
+
+  {
+    var reason = '';
+    var stack = '';
+
+    try {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      reason = String(postponeInstance.message); // eslint-disable-next-line react-internal/safe-string-coercion
+
+      stack = String(postponeInstance.stack);
+    } catch (x) {}
+
+    row = serializeRowHeader('P', id) + stringify({
+      reason: reason,
+      stack: stack
+    }) + '\n';
+  }
+
+  var processedChunk = stringToChunk(row);
+  request.completedErrorChunks.push(processedChunk);
+}
+
+function emitErrorChunk(request, id, digest, error) {
+  var errorInfo;
+
+  {
+    var message;
+    var stack = '';
+
+    try {
+      if (error instanceof Error) {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error.message); // eslint-disable-next-line react-internal/safe-string-coercion
+
+        stack = String(error.stack);
+      } else if (typeof error === 'object' && error !== null) {
+        message = describeObjectForErrorMessage(error);
+      } else {
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error);
       }
+    } catch (x) {
+      message = 'An error occurred but serializing the error message failed.';
+    }
+
+    errorInfo = {
+      digest: digest,
+      message: message,
+      stack: stack
+    };
+  }
+
+  var row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedErrorChunks.push(processedChunk);
+}
+
+function emitImportChunk(request, id, clientReferenceMetadata) {
+  // $FlowFixMe[incompatible-type] stringify can return null
+  var json = stringify(clientReferenceMetadata);
+  var row = serializeRowHeader('I', id) + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedImportChunks.push(processedChunk);
+}
+
+function emitHintChunk(request, code, model) {
+  var json = stringify(model);
+  var id = request.nextChunkId++;
+  var row = serializeRowHeader('H' + code, id) + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedHintChunks.push(processedChunk);
+}
+
+function emitSymbolChunk(request, id, name) {
+  var symbolReference = serializeSymbolReference(name);
+  var processedChunk = encodeReferenceChunk(request, id, symbolReference);
+  request.completedImportChunks.push(processedChunk);
+}
+
+function emitModelChunk(request, id, json) {
+  var row = id.toString(16) + ':' + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+}
+
+function emitDebugChunk(request, id, debugInfo) {
+  // use the full serialization that requires a task.
+
+
+  var counter = {
+    objectCount: 0
+  };
+
+  function replacer(parentPropertyName, value) {
+    return renderConsoleValue(request, counter, this, parentPropertyName, value);
+  } // $FlowFixMe[incompatible-type] stringify can return null
+
+
+  var json = stringify(debugInfo, replacer);
+  var row = serializeRowHeader('D', id) + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+}
+
+function emitTextChunk(request, id, text) {
+  request.pendingChunks++; // Extra chunk for the header.
+
+  var textChunk = stringToChunk(text);
+  var binaryLength = byteLengthOfChunk(textChunk);
+  var row = id.toString(16) + ':T' + binaryLength.toString(16) + ',';
+  var headerChunk = stringToChunk(row);
+  request.completedRegularChunks.push(headerChunk, textChunk);
+}
+
+function serializeEval(source) {
+
+  return '$E' + source;
+} // This is a forked version of renderModel which should never error, never suspend and is limited
+// in the depth it can encode.
+
+
+function renderConsoleValue(request, counter, parent, parentPropertyName, value) {
+  // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
+  // $FlowFixMe[incompatible-use]
+  var originalValue = parent[parentPropertyName];
+
+  if (value === null) {
+    return null;
+  }
+
+  if (typeof value === 'object') {
+    if (isClientReference(value)) {
+      // We actually have this value on the client so we could import it.
+      // This might be confusing though because on the Server it won't actually
+      // be this value, so if you're debugging client references maybe you'd be
+      // better with a place holder.
+      return serializeClientReference(request, parent, parentPropertyName, value);
+    }
+
+    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.
+      return Array.isArray(value) ? [] : {};
+    }
+
+    counter.objectCount++;
+    var writtenObjects = request.writtenObjects;
+    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+
+    if (typeof value.then === 'function') {
+      if (existingId !== undefined) {
+        // We've seen this promise before, so we can just refer to the same result.
+        return serializePromiseID(existingId);
+      }
+
+      var thenable = value;
+
+      switch (thenable.status) {
+        case 'fulfilled':
+          {
+            return serializePromiseID(outlineConsoleValue(request, counter, thenable.value));
+          }
+
+        case 'rejected':
+          {
+            var x = thenable.reason;
+            request.pendingChunks++;
+            var errorId = request.nextChunkId++;
+
+            {
+              // We don't log these errors since they didn't actually throw into Flight.
+              var digest = '';
+              emitErrorChunk(request, errorId, digest, x);
+            }
+
+            return serializePromiseID(errorId);
+          }
+      } // If it hasn't already resolved (and been instrumented) we just encode an infinite
+      // promise that will never resolve.
+
 
-      return serializeByValueID(providerId);
-    } else if (value === POP) {
-      popProvider();
+      return serializeInfinitePromise();
+    }
 
-      {
-        insideContextProps = null;
-        isInsideContextValue = false;
-      }
+    if (existingId !== undefined && existingId >= 0) {
+      // We've already emitted this as a real object, so we can
+      // just refer to that by its existing ID.
+      return serializeByValueID(existingId);
+    }
 
-      return undefined;
+    if (isArray(value)) {
+      return value;
+    }
+
+    if (value instanceof Map) {
+      return serializeMap(request, value);
     }
 
-    if (!isArray(value)) {
-      var iteratorFn = getIteratorFn(value);
+    if (value instanceof Set) {
+      return serializeSet(request, value);
+    } // TODO: FormData is not available in old Node. Remove the typeof later.
 
-      if (iteratorFn) {
-        return Array.from(value);
-      }
+
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
     }
 
-    {
-      if (value !== null && !isArray(value)) {
-        // Verify that this is a simple plain object.
-        if (objectName(value) !== 'Object') {
-          error('Only plain objects can be passed to Client Components from Server Components. ' + '%s objects are not supported.%s', objectName(value), describeObjectForErrorMessage(parent, key));
-        } else if (!isSimpleObject(value)) {
-          error('Only plain objects can be passed to Client Components from Server Components. ' + 'Classes or other objects with methods are not supported.%s', describeObjectForErrorMessage(parent, key));
-        } else if (Object.getOwnPropertySymbols) {
-          var symbols = Object.getOwnPropertySymbols(value);
-
-          if (symbols.length > 0) {
-            error('Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with symbol properties like %s are not supported.%s', symbols[0].description, describeObjectForErrorMessage(parent, key));
-          }
-        }
-      }
+    var iteratorFn = getIteratorFn(value);
+
+    if (iteratorFn) {
+      return Array.from(value);
     } // $FlowFixMe[incompatible-return]
 
 
@@ -1863,17 +2954,20 @@ function resolveModelToJSON(request, parent, key, value) {
   }
 
   if (typeof value === 'string') {
-    // TODO: Maybe too clever. If we support URL there's no similar trick.
     if (value[value.length - 1] === 'Z') {
       // Possibly a Date, whose toJSON automatically calls toISOString
-      // $FlowFixMe[incompatible-use]
-      var _originalValue = parent[key]; // $FlowFixMe[method-unbinding]
-
-      if (_originalValue instanceof Date) {
+      if (originalValue instanceof Date) {
         return serializeDateFromDateJSON(value);
       }
     }
 
+    if (value.length >= 1024) {
+      // For large strings, we encode them outside the JSON payload so that we
+      // don't have to double encode and double parse the strings. This can also
+      // be more compact in case the string has a lot of escaped characters.
+      return serializeLargeTextString(request, value);
+    }
+
     return escapeStringValue(value);
   }
 
@@ -1891,40 +2985,33 @@ function resolveModelToJSON(request, parent, key, value) {
 
   if (typeof value === 'function') {
     if (isClientReference(value)) {
-      return serializeClientReference(request, parent, key, value);
+      return serializeClientReference(request, parent, parentPropertyName, value);
     }
 
-    if (isServerReference(value)) {
-      return serializeServerReference(request, parent, key, value);
-    }
+    if (isTemporaryReference(value)) {
+      return serializeTemporaryReference(request, value);
+    } // Serialize the body of the function as an eval so it can be printed.
+    // $FlowFixMe[method-unbinding]
 
-    if (/^on[A-Z]/.test(key)) {
-      throw new Error('Event handlers cannot be passed to Client Component props.' + describeObjectForErrorMessage(parent, key) + '\nIf you need interactivity, consider converting part of this to a Client Component.');
-    } else {
-      throw new Error('Functions cannot be passed directly to Client Components ' + 'unless you explicitly expose it by marking it with "use server".' + describeObjectForErrorMessage(parent, key));
-    }
+
+    return serializeEval('(' + Function.prototype.toString.call(value) + ')');
   }
 
   if (typeof value === 'symbol') {
     var writtenSymbols = request.writtenSymbols;
-    var existingId = writtenSymbols.get(value);
 
-    if (existingId !== undefined) {
-      return serializeByValueID(existingId);
-    } // $FlowFixMe[incompatible-type] `description` might be undefined
+    var _existingId3 = writtenSymbols.get(value);
 
+    if (_existingId3 !== undefined) {
+      return serializeByValueID(_existingId3);
+    } // $FlowFixMe[incompatible-type] `description` might be undefined
 
-    var name = value.description;
 
-    if (Symbol.for(name) !== value) {
-      throw new Error('Only global symbols received from Symbol.for(...) can be passed to Client Components. ' + ("The symbol Symbol.for(" + // $FlowFixMe[incompatible-type] `description` might be undefined
-      value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, key));
-    }
+    var name = value.description; // We use the Symbol.for version if it's not a global symbol. Close enough.
 
     request.pendingChunks++;
     var symbolId = request.nextChunkId++;
     emitSymbolChunk(request, symbolId, name);
-    writtenSymbols.set(value, symbolId);
     return serializeByValueID(symbolId);
   }
 
@@ -1932,88 +3019,53 @@ function resolveModelToJSON(request, parent, key, value) {
     return serializeBigInt(value);
   }
 
-  throw new Error("Type " + typeof value + " is not supported in Client Component props." + describeObjectForErrorMessage(parent, key));
-}
-
-function logRecoverableError(request, error) {
-  var onError = request.onError;
-  var errorDigest = onError(error);
-
-  if (errorDigest != null && typeof errorDigest !== 'string') {
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error("onError returned something with a type other than \"string\". onError should return a string and may return null or undefined but must not return anything else. It received something of type \"" + typeof errorDigest + "\" instead");
-  }
-
-  return errorDigest || '';
+  return 'unknown type ' + typeof value;
 }
 
-function getErrorMessageAndStackDev(error) {
-  {
-    var message;
-    var stack = '';
+function outlineConsoleValue(request, counter, model) {
 
+  function replacer(parentPropertyName, value) {
     try {
-      if (error instanceof Error) {
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        message = String(error.message); // eslint-disable-next-line react-internal/safe-string-coercion
-
-        stack = String(error.stack);
-      } else {
-        message = 'Error: ' + error;
-      }
+      return renderConsoleValue(request, counter, this, parentPropertyName, value);
     } catch (x) {
-      message = 'An error occurred but serializing the error message failed.';
+      return 'unknown value';
     }
+  } // $FlowFixMe[incompatible-type] stringify can return null
 
-    return {
-      message: message,
-      stack: stack
-    };
-  }
+
+  var json = stringify(model, replacer);
+  request.pendingChunks++;
+  var id = request.nextChunkId++;
+  var row = id.toString(16) + ':' + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+  return id;
 }
 
-function fatalError(request, error) {
-  // This is called outside error handling code such as if an error happens in React internals.
-  if (request.destination !== null) {
-    request.status = CLOSED;
-    closeWithError(request.destination, error);
-  } else {
-    request.status = CLOSING;
-    request.fatalError = error;
+function forwardDebugInfo(request, id, debugInfo) {
+  for (var i = 0; i < debugInfo.length; i++) {
+    request.pendingChunks++;
+    emitDebugChunk(request, id, debugInfo[i]);
   }
 }
 
-function emitErrorChunkProd(request, id, digest) {
-  var processedChunk = processErrorChunkProd();
-  request.completedErrorChunks.push(processedChunk);
-}
+function emitChunk(request, task, value) {
+  var id = task.id; // For certain types we have special types, we typically outlined them but
+  // we can emit them directly for this row instead of through an indirection.
 
-function emitErrorChunkDev(request, id, digest, message, stack) {
-  var processedChunk = processErrorChunkDev(request, id, digest, message, stack);
-  request.completedErrorChunks.push(processedChunk);
-}
+  if (typeof value === 'string') {
 
-function emitImportChunk(request, id, clientReferenceMetadata) {
-  var processedChunk = processImportChunk(request, id, clientReferenceMetadata);
-  request.completedImportChunks.push(processedChunk);
-}
+    emitTextChunk(request, id, value);
+    return;
+  }
+  // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
 
-function emitHintChunk(request, code, model) {
-  var processedChunk = processHintChunk(request, request.nextChunkId++, code, model);
-  request.completedHintChunks.push(processedChunk);
-}
 
-function emitSymbolChunk(request, id, name) {
-  var symbolReference = serializeSymbolReference(name);
-  var processedChunk = processReferenceChunk(request, id, symbolReference);
-  request.completedImportChunks.push(processedChunk);
+  var json = stringify(value, task.toJSON);
+  emitModelChunk(request, task.id, json);
 }
 
-function emitProviderChunk(request, id, contextName) {
-  var contextReference = serializeProviderReference(contextName);
-  var processedChunk = processReferenceChunk(request, id, contextReference);
-  request.completedJSONChunks.push(processedChunk);
-}
+var emptyRoot = {};
 
 function retryTask(request, task) {
   if (task.status !== PENDING$1) {
@@ -2021,38 +3073,47 @@ function retryTask(request, task) {
     return;
   }
 
-  switchContext(task.context);
+  var prevDebugID = debugID;
 
   try {
-    var value = task.model;
-
-    if (typeof value === 'object' && value !== null && value.$$typeof === REACT_ELEMENT_TYPE) {
-      // TODO: Concatenate keys of parents onto children.
-      var element = value; // When retrying a component, reuse the thenableState from the
-      // previous attempt.
-
-      var prevThenableState = task.thenableState; // Attempt to render the Server Component.
-      // Doing this here lets us reuse this same task if the next component
-      // also suspends.
-
-      task.model = value;
-      value = attemptResolveElement(request, element.type, element.key, element.ref, element.props, prevThenableState); // Successfully finished this component. We're going to keep rendering
-      // using the same task, but we reset its thenable state before continuing.
-
-      task.thenableState = null; // Keep rendering and reuse the same task. This inner loop is separate
-      // from the render above because we don't need to reset the thenable state
-      // until the next time something suspends and retries.
-
-      while (typeof value === 'object' && value !== null && value.$$typeof === REACT_ELEMENT_TYPE) {
-        // TODO: Concatenate keys of parents onto children.
-        var nextElement = value;
-        task.model = value;
-        value = attemptResolveElement(request, nextElement.type, nextElement.key, nextElement.ref, nextElement.props, null);
-      }
+    // Track the root so we know that we have to emit this object even though it
+    // already has an ID. This is needed because we might see this object twice
+    // in the same toJSON if it is cyclic.
+    modelRoot = task.model;
+
+    if (true) {
+      // Track the ID of the current task so we can assign debug info to this id.
+      debugID = task.id;
+    } // We call the destructive form that mutates this task. That way if something
+    // suspends again, we can reuse the same task instead of spawning a new one.
+
+
+    var resolvedModel = renderModelDestructive(request, task, emptyRoot, '', task.model);
+
+    if (true) {
+      // We're now past rendering this task and future renders will spawn new tasks for their
+      // debug info.
+      debugID = null;
+    } // Track the root again for the resolved object.
+
+
+    modelRoot = resolvedModel; // The keyPath resets at any terminal child node.
+
+    task.keyPath = null;
+    task.implicitSlot = false;
+
+    if (typeof resolvedModel === 'object' && resolvedModel !== null) {
+      // 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
+      // We don't need to escape it again so it's not passed the toJSON replacer.
+      // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
+      var json = stringify(resolvedModel);
+      emitModelChunk(request, task.id, json);
     }
 
-    var processedChunk = processModelChunk(request, task.id, value);
-    request.completedJSONChunks.push(processedChunk);
     request.abortableTasks.delete(task);
     task.status = COMPLETED;
   } catch (thrownValue) {
@@ -2061,33 +3122,33 @@ function retryTask(request, task) {
     // value to be a thenable, because before `use` existed that was the
     // (unstable) API for suspending. This implementation detail can change
     // later, once we deprecate the old API in favor of `use`.
-    getSuspendedThenable() : thrownValue; // $FlowFixMe[method-unbinding]
-
-    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      // Something suspended again, let's pick it back up later.
-      var ping = task.ping;
-      x.then(ping, ping);
-      task.thenableState = getThenableStateAfterSuspending();
-      return;
-    } else {
-      request.abortableTasks.delete(task);
-      task.status = ERRORED$1;
-      var digest = logRecoverableError(request, x);
-
-      {
-        var _getErrorMessageAndSt5 = getErrorMessageAndStackDev(x),
-            message = _getErrorMessageAndSt5.message,
-            stack = _getErrorMessageAndSt5.stack;
+    getSuspendedThenable() : thrownValue;
 
-        emitErrorChunkDev(request, task.id, digest, message, stack);
+    if (typeof x === 'object' && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === 'function') {
+        // Something suspended again, let's pick it back up later.
+        var ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState = getThenableStateAfterSuspending();
+        return;
       }
     }
+
+    request.abortableTasks.delete(task);
+    task.status = ERRORED$1;
+    var digest = logRecoverableError(request, x);
+    emitErrorChunk(request, task.id, digest, x);
+  } finally {
+    {
+      debugID = prevDebugID;
+    }
   }
 }
 
 function performWork(request) {
-  var prevDispatcher = ReactCurrentDispatcher.current;
-  ReactCurrentDispatcher.current = HooksDispatcher;
+  var prevDispatcher = ReactSharedInternals.H;
+  ReactSharedInternals.H = HooksDispatcher;
   var prevRequest = currentRequest;
   currentRequest = request;
   prepareToUseHooksForRequest(request);
@@ -2108,7 +3169,7 @@ function performWork(request) {
     logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
-    ReactCurrentDispatcher.current = prevDispatcher;
+    ReactSharedInternals.H = prevDispatcher;
     resetHooksForRequest();
     currentRequest = prevRequest;
   }
@@ -2119,7 +3180,7 @@ function abortTask(task, request, errorId) {
   // has a single value referencing the error.
 
   var ref = serializeByValueID(errorId);
-  var processedChunk = processReferenceChunk(request, task.id, ref);
+  var processedChunk = encodeReferenceChunk(request, task.id, ref);
   request.completedErrorChunks.push(processedChunk);
 }
 
@@ -2163,12 +3224,12 @@ function flushCompletedChunks(request, destination) {
 
     hintChunks.splice(0, i); // Next comes model data.
 
-    var jsonChunks = request.completedJSONChunks;
+    var regularChunks = request.completedRegularChunks;
     i = 0;
 
-    for (; i < jsonChunks.length; i++) {
+    for (; i < regularChunks.length; i++) {
       request.pendingChunks--;
-      var _chunk2 = jsonChunks[i];
+      var _chunk2 = regularChunks[i];
 
       var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
 
@@ -2179,7 +3240,7 @@ function flushCompletedChunks(request, destination) {
       }
     }
 
-    jsonChunks.splice(0, i); // Finally, errors are sent. The idea is that it's ok to delay
+    regularChunks.splice(0, i); // Finally, errors are sent. The idea is that it's ok to delay
     // any error messages and prioritize display of other parts of
     // the page.
 
@@ -2206,8 +3267,9 @@ function flushCompletedChunks(request, destination) {
   }
 
   if (request.pendingChunks === 0) {
-    // We're done.
+
     close$1(destination);
+    request.destination = null;
   }
 }
 
@@ -2258,26 +3320,24 @@ function startFlowing(request, destination) {
     logRecoverableError(request, error);
     fatalError(request, error);
   }
+}
+function stopFlowing(request) {
+  request.destination = null;
 } // This is called to early terminate a request. It creates an error at all pending tasks.
 
 function abort(request, reason) {
   try {
-    var abortableTasks = request.abortableTasks;
+    var abortableTasks = request.abortableTasks; // We have tasks to abort. We'll emit one error row and then emit a reference
+    // to that row from every row that's still remaining.
 
     if (abortableTasks.size > 0) {
-      // We have tasks to abort. We'll emit one error row and then emit a reference
-      // to that row from every row that's still remaining.
-      var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
-      var digest = logRecoverableError(request, error);
       request.pendingChunks++;
       var errorId = request.nextChunkId++;
 
-      if (true) {
-        var _getErrorMessageAndSt6 = getErrorMessageAndStackDev(error),
-            message = _getErrorMessageAndSt6.message,
-            stack = _getErrorMessageAndSt6.stack;
-
-        emitErrorChunkDev(request, errorId, digest, message, stack);
+      var postponeInstance; if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else {
+        var error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
+        var digest = logRecoverableError(request, error);
+        emitErrorChunk(request, errorId, digest, error);
       }
 
       abortableTasks.forEach(function (task) {
@@ -2286,6 +3346,21 @@ function abort(request, reason) {
       abortableTasks.clear();
     }
 
+    var abortListeners = request.abortListeners;
+
+    if (abortListeners.size > 0) {
+      var _error;
+
+      if (enablePostpone && typeof reason === 'object' && reason !== null && reason.$$typeof === REACT_POSTPONE_TYPE) ; else {
+        _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
+      }
+
+      abortListeners.forEach(function (callback) {
+        return callback(_error);
+      });
+      abortListeners.clear();
+    }
+
     if (request.destination !== null) {
       flushCompletedChunks(request, request.destination);
     }
@@ -2295,28 +3370,20 @@ function abort(request, reason) {
   }
 }
 
-function importServerContexts(contexts) {
-  if (contexts) {
-    var prevContext = getActiveContext();
-    switchContext(rootContextSnapshot);
-
-    for (var i = 0; i < contexts.length; i++) {
-      var _contexts$i = contexts[i],
-          name = _contexts$i[0],
-          value = _contexts$i[1];
-      var context = getOrCreateServerContext(name);
-      pushProvider(context, value);
-    }
-
-    var importedContext = getActiveContext();
-    switchContext(prevContext);
-    return importedContext;
-  }
-
-  return rootContextSnapshot;
+// This is the parsed shape of the wire format which is why it is
+// condensed to only the essentialy information
+var ID = 0;
+var CHUNKS = 1;
+var NAME = 2; // export const ASYNC = 3;
+// This logic is correct because currently only include the 4th tuple member
+// when the module is async. If that changes we will need to actually assert
+// the value is true. We don't index into the 4th slot because flow does not
+// like the potential out of bounds access
+
+function isAsyncImport(metadata) {
+  return metadata.length === 4;
 }
 
-// eslint-disable-next-line no-unused-vars
 function resolveServerReference(bundlerConfig, id) {
   var name = '';
   var resolvedModuleData = bundlerConfig[id];
@@ -2342,19 +3409,38 @@ function resolveServerReference(bundlerConfig, id) {
   } // TODO: This needs to return async: true if it's an async module.
 
 
-  return {
-    id: resolvedModuleData.id,
-    chunks: resolvedModuleData.chunks,
-    name: name,
-    async: false
-  };
+  return [resolvedModuleData.id, resolvedModuleData.chunks, name];
 } // The chunk cache contains all the chunks we've preloaded so far.
 // If they're still pending they're a thenable. This map also exists
 // in Webpack but unfortunately it's not exposed so we have to
 // replicate it in user space. null means that it has already loaded.
 
 var chunkCache = new Map();
-var asyncModuleCache = new Map();
+
+function requireAsyncModule(id) {
+  // We've already loaded all the chunks. We can require the module.
+  var promise = __webpack_require__(id);
+
+  if (typeof promise.then !== 'function') {
+    // This wasn't a promise after all.
+    return null;
+  } else if (promise.status === 'fulfilled') {
+    // This module was already resolved earlier.
+    return null;
+  } else {
+    // Instrument the Promise to stash the result.
+    promise.then(function (value) {
+      var fulfilledThenable = promise;
+      fulfilledThenable.status = 'fulfilled';
+      fulfilledThenable.value = value;
+    }, function (reason) {
+      var rejectedThenable = promise;
+      rejectedThenable.status = 'rejected';
+      rejectedThenable.reason = reason;
+    });
+    return promise;
+  }
+}
 
 function ignoreReject() {// We rely on rejected promises to be handled by another listener.
 } // Start preloading the modules since we might need them soon.
@@ -2362,16 +3448,17 @@ function ignoreReject() {// We rely on rejected promises to be handled by anothe
 
 
 function preloadModule(metadata) {
-  var chunks = metadata.chunks;
+  var chunks = metadata[CHUNKS];
   var promises = [];
+  var i = 0;
 
-  for (var i = 0; i < chunks.length; i++) {
-    var chunkId = chunks[i];
+  while (i < chunks.length) {
+    var chunkId = chunks[i++];
+    var chunkFilename = chunks[i++];
     var entry = chunkCache.get(chunkId);
 
     if (entry === undefined) {
-      var thenable = __webpack_chunk_load__(chunkId);
-
+      var thenable = loadChunk(chunkId, chunkFilename);
       promises.push(thenable); // $FlowFixMe[method-unbinding]
 
       var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
@@ -2382,30 +3469,13 @@ function preloadModule(metadata) {
     }
   }
 
-  if (metadata.async) {
-    var existingPromise = asyncModuleCache.get(metadata.id);
-
-    if (existingPromise) {
-      if (existingPromise.status === 'fulfilled') {
-        return null;
-      }
-
-      return existingPromise;
+  if (isAsyncImport(metadata)) {
+    if (promises.length === 0) {
+      return requireAsyncModule(metadata[ID]);
     } else {
-      var modulePromise = Promise.all(promises).then(function () {
-        return __webpack_require__(metadata.id);
-      });
-      modulePromise.then(function (value) {
-        var fulfilledThenable = modulePromise;
-        fulfilledThenable.status = 'fulfilled';
-        fulfilledThenable.value = value;
-      }, function (reason) {
-        var rejectedThenable = modulePromise;
-        rejectedThenable.status = 'rejected';
-        rejectedThenable.reason = reason;
+      return Promise.all(promises).then(function () {
+        return requireAsyncModule(metadata[ID]);
       });
-      asyncModuleCache.set(metadata.id, modulePromise);
-      return modulePromise;
     }
   } else if (promises.length > 0) {
     return Promise.all(promises);
@@ -2416,35 +3486,53 @@ function preloadModule(metadata) {
 // Increase priority if necessary.
 
 function requireModule(metadata) {
-  var moduleExports;
+  var moduleExports = __webpack_require__(metadata[ID]);
 
-  if (metadata.async) {
-    // We assume that preloadModule has been called before, which
-    // should have added something to the module cache.
-    var promise = asyncModuleCache.get(metadata.id);
-
-    if (promise.status === 'fulfilled') {
-      moduleExports = promise.value;
+  if (isAsyncImport(metadata)) {
+    if (typeof moduleExports.then !== 'function') ; else if (moduleExports.status === 'fulfilled') {
+      // This Promise should've been instrumented by preloadModule.
+      moduleExports = moduleExports.value;
     } else {
-      throw promise.reason;
+      throw moduleExports.reason;
     }
-  } else {
-    moduleExports = __webpack_require__(metadata.id);
   }
 
-  if (metadata.name === '*') {
+  if (metadata[NAME] === '*') {
     // This is a placeholder value that represents that the caller imported this
     // as a CommonJS module as is.
     return moduleExports;
   }
 
-  if (metadata.name === '') {
+  if (metadata[NAME] === '') {
     // This is a placeholder value that represents that the caller accessed the
     // default property of this if it was an ESM interop module.
     return moduleExports.__esModule ? moduleExports.default : moduleExports;
   }
 
-  return moduleExports[metadata.name];
+  return moduleExports[metadata[NAME]];
+}
+
+var chunkMap = new Map();
+/**
+ * We patch the chunk filename function in webpack to insert our own resolution
+ * of chunks that come from Flight and may not be known to the webpack runtime
+ */
+
+var webpackGetChunkFilename = __webpack_require__.u;
+
+__webpack_require__.u = function (chunkId) {
+  var flightChunk = chunkMap.get(chunkId);
+
+  if (flightChunk !== undefined) {
+    return flightChunk;
+  }
+
+  return webpackGetChunkFilename(chunkId);
+};
+
+function loadChunk(chunkId, filename) {
+  chunkMap.set(chunkId, filename);
+  return __webpack_chunk_load__(chunkId);
 }
 
 // The server acts as a Client of itself when resolving Server References.
@@ -2544,11 +3632,11 @@ function createResolvedModelChunk(response, value) {
   return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
-function bindArgs(fn, args) {
+function bindArgs$1(fn, args) {
   return fn.bind.apply(fn, [null].concat(args));
 }
 
-function loadServerReference(response, id, bound, parentChunk, parentObject, key) {
+function loadServerReference$1(response, id, bound, parentChunk, parentObject, key) {
   var serverReference = resolveServerReference(response._bundlerConfig, id); // We expect most servers to not really need this because you'd just have all
   // the relevant modules already loaded but it allows for lazy loading of code
   // if needed.
@@ -2559,7 +3647,7 @@ function loadServerReference(response, id, bound, parentChunk, parentObject, key
   if (bound) {
     promise = Promise.all([bound, preloadPromise]).then(function (_ref) {
       var args = _ref[0];
-      return bindArgs(requireModule(serverReference), args);
+      return bindArgs$1(requireModule(serverReference), args);
     });
   } else {
     if (preloadPromise) {
@@ -2689,7 +3777,22 @@ function createModelReject(chunk) {
   };
 }
 
-function parseModelString(response, parentObject, key, value) {
+function getOutlinedModel(response, id) {
+  var chunk = getChunk(response, id);
+
+  if (chunk.status === RESOLVED_MODEL) {
+    initializeModelChunk(chunk);
+  }
+
+  if (chunk.status !== INITIALIZED) {
+    // We know that this is emitted earlier so otherwise it's an error.
+    throw chunk.reason;
+  }
+
+  return chunk.value;
+}
+
+function parseModelString(response, obj, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
       case '$':
@@ -2701,36 +3804,46 @@ function parseModelString(response, parentObject, 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);
 
-      case 'S':
-        {
-          // Symbol
-          return Symbol.for(value.slice(2));
+          var _chunk = getChunk(response, _id);
+
+          return _chunk;
         }
 
       case 'F':
         {
           // Server Reference
-          var _id = parseInt(value.slice(2), 16);
+          var _id2 = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
 
-          var _chunk = getChunk(response, _id);
 
-          if (_chunk.status === RESOLVED_MODEL) {
-            initializeModelChunk(_chunk);
-          }
+          var metaData = getOutlinedModel(response, _id2);
+          return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, obj, key);
+        }
+
+      case 'T':
+        {
+          // Temporary Reference
+          return createTemporaryReference(value.slice(2));
+        }
+
+      case 'Q':
+        {
+          // Map
+          var _id3 = parseInt(value.slice(2), 16);
 
-          if (_chunk.status !== INITIALIZED) {
-            // We know that this is emitted earlier so otherwise it's an error.
-            throw _chunk.reason;
-          } // TODO: Just encode this in the reference inline instead of as a model.
+          var data = getOutlinedModel(response, _id3);
+          return new Map(data);
+        }
+
+      case 'W':
+        {
+          // Set
+          var _id4 = parseInt(value.slice(2), 16);
 
+          var _data = getOutlinedModel(response, _id4);
 
-          var metaData = _chunk.value;
-          return loadServerReference(response, metaData.id, metaData.bound, initializingChunk, parentObject, key);
+          return new Set(_data);
         }
 
       case 'K':
@@ -2738,7 +3851,9 @@ function parseModelString(response, parentObject, key, value) {
           // FormData
           var stringId = value.slice(2);
           var formPrefix = response._prefix + stringId + '_';
-          var data = new FormData();
+
+          var _data2 = 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.
@@ -2746,10 +3861,20 @@ function parseModelString(response, parentObject, key, value) {
 
           backingFormData.forEach(function (entry, entryKey) {
             if (entryKey.startsWith(formPrefix)) {
-              data.append(entryKey.slice(formPrefix.length), entry);
+              _data2.append(entryKey.slice(formPrefix.length), entry);
             }
           });
-          return data;
+          return _data2;
+        }
+
+      case 'i':
+        {
+          // Iterator
+          var _id5 = parseInt(value.slice(2), 16);
+
+          var _data3 = getOutlinedModel(response, _id5);
+
+          return _data3[Symbol.iterator]();
         }
 
       case 'I':
@@ -2792,37 +3917,31 @@ function parseModelString(response, parentObject, key, value) {
           // BigInt
           return BigInt(value.slice(2));
         }
+    }
 
-      default:
-        {
-          // We assume that anything else is a reference ID.
-          var _id2 = parseInt(value.slice(1), 16);
-
-          var _chunk2 = getChunk(response, _id2);
-
-          switch (_chunk2.status) {
-            case RESOLVED_MODEL:
-              initializeModelChunk(_chunk2);
-              break;
-          } // The status might have changed after initialization.
 
+    var id = parseInt(value.slice(1), 16);
+    var chunk = getChunk(response, id);
 
-          switch (_chunk2.status) {
-            case INITIALIZED:
-              return _chunk2.value;
+    switch (chunk.status) {
+      case RESOLVED_MODEL:
+        initializeModelChunk(chunk);
+        break;
+    } // The status might have changed after initialization.
 
-            case PENDING:
-            case BLOCKED:
-              var parentChunk = initializingChunk;
 
-              _chunk2.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk));
+    switch (chunk.status) {
+      case INITIALIZED:
+        return chunk.value;
 
-              return null;
+      case PENDING:
+      case BLOCKED:
+        var parentChunk = initializingChunk;
+        chunk.then(createModelResolver(parentChunk, obj, key), createModelReject(parentChunk));
+        return null;
 
-            default:
-              throw _chunk2.reason;
-          }
-        }
+      default:
+        throw chunk.reason;
     }
   }
 
@@ -2856,8 +3975,130 @@ function close(response) {
   reportGlobalError(response, new Error('Connection closed.'));
 }
 
+function bindArgs(fn, args) {
+  return fn.bind.apply(fn, [null].concat(args));
+}
+
+function loadServerReference(bundlerConfig, id, bound) {
+  var serverReference = resolveServerReference(bundlerConfig, id); // We expect most servers to not really need this because you'd just have all
+  // the relevant modules already loaded but it allows for lazy loading of code
+  // if needed.
+
+  var preloadPromise = preloadModule(serverReference);
+
+  if (bound) {
+    return Promise.all([bound, preloadPromise]).then(function (_ref) {
+      var args = _ref[0];
+      return bindArgs(requireModule(serverReference), args);
+    });
+  } else if (preloadPromise) {
+    return Promise.resolve(preloadPromise).then(function () {
+      return requireModule(serverReference);
+    });
+  } else {
+    // Synchronously available
+    return Promise.resolve(requireModule(serverReference));
+  }
+}
+
+function decodeBoundActionMetaData(body, serverManifest, formFieldPrefix) {
+  // The data for this reference is encoded in multiple fields under this prefix.
+  var actionResponse = createResponse(serverManifest, formFieldPrefix, body);
+  close(actionResponse);
+  var refPromise = getRoot(actionResponse); // Force it to initialize
+  // $FlowFixMe
+
+  refPromise.then(function () {});
+
+  if (refPromise.status !== 'fulfilled') {
+    // $FlowFixMe
+    throw refPromise.reason;
+  }
+
+  return refPromise.value;
+}
+
+function decodeAction(body, serverManifest) {
+  // We're going to create a new formData object that holds all the fields except
+  // the implementation details of the action data.
+  var formData = new FormData();
+  var action = null; // $FlowFixMe[prop-missing]
+
+  body.forEach(function (value, key) {
+    if (!key.startsWith('$ACTION_')) {
+      formData.append(key, value);
+      return;
+    } // Later actions may override earlier actions if a button is used to override the default
+    // form action.
+
+
+    if (key.startsWith('$ACTION_REF_')) {
+      var formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+      var metaData = decodeBoundActionMetaData(body, serverManifest, formFieldPrefix);
+      action = loadServerReference(serverManifest, metaData.id, metaData.bound);
+      return;
+    }
+
+    if (key.startsWith('$ACTION_ID_')) {
+      var id = key.slice(11);
+      action = loadServerReference(serverManifest, id, null);
+      return;
+    }
+  });
+
+  if (action === null) {
+    return null;
+  } // Return the action with the remaining FormData bound to the first argument.
+
+
+  return action.then(function (fn) {
+    return fn.bind(null, formData);
+  });
+}
+function decodeFormState(actionResult, body, serverManifest) {
+  var keyPath = body.get('$ACTION_KEY');
+
+  if (typeof keyPath !== 'string') {
+    // This form submission did not include any form state.
+    return Promise.resolve(null);
+  } // Search through the form data object to get the reference id and the number
+  // of bound arguments. This repeats some of the work done in decodeAction.
+
+
+  var metaData = null; // $FlowFixMe[prop-missing]
+
+  body.forEach(function (value, key) {
+    if (key.startsWith('$ACTION_REF_')) {
+      var formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+      metaData = decodeBoundActionMetaData(body, serverManifest, formFieldPrefix);
+    } // We don't check for the simple $ACTION_ID_ case because form state actions
+    // are always bound to the state argument.
+
+  });
+
+  if (metaData === null) {
+    // Should be unreachable.
+    return Promise.resolve(null);
+  }
+
+  var referenceId = metaData.id;
+  return Promise.resolve(metaData.bound).then(function (bound) {
+    if (bound === null) {
+      // Should be unreachable because form state actions are always bound to the
+      // state argument.
+      return null;
+    } // The form action dispatch method is always bound to the initial state.
+    // But when comparing signatures, we compare to the original unbound action.
+    // Subtract one from the arity to account for this.
+
+
+    var boundArity = bound.length - 1;
+    return [actionResult, keyPath, referenceId, boundArity];
+  });
+}
+
 function renderToReadableStream(model, webpackMap, options) {
-  var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined);
+  var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined, options ? options.environmentName : undefined);
 
   if (options && options.signal) {
     var signal = options.signal;
@@ -2882,7 +4123,10 @@ function renderToReadableStream(model, webpackMap, options) {
     pull: function (controller) {
       startFlowing(request, controller);
     },
-    cancel: function (reason) {}
+    cancel: function (reason) {
+      stopFlowing(request);
+      abort(request, reason);
+    }
   }, // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
   {
     highWaterMark: 0
@@ -2898,11 +4142,17 @@ function decodeReply(body, webpackMap) {
   }
 
   var response = createResponse(webpackMap, '', body);
+  var root = getRoot(response);
   close(response);
-  return getRoot(response);
+  return root;
 }
 
+exports.createClientModuleProxy = createClientModuleProxy;
+exports.decodeAction = decodeAction;
+exports.decodeFormState = decodeFormState;
 exports.decodeReply = decodeReply;
+exports.registerClientReference = registerClientReference;
+exports.registerServerReference = registerServerReference;
 exports.renderToReadableStream = renderToReadableStream;
   })();
 }