react-server-dom-webpack 18.3.0-next-fa4314841-20230502 → 19.0.0-canary-2b036d3f1-20240327

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

@@ -15,8 +15,9 @@ if (process.env.NODE_ENV !== "production") {
 'use strict';
 
 var React = require('react');
-var async_hooks = require('async_hooks');
 var util = require('util');
+require('crypto');
+var async_hooks = require('async_hooks');
 var ReactDOM = require('react-dom');
 
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -58,6 +59,9 @@ function printWarning(level, format, args) {
   }
 }
 
+// -----------------------------------------------------------------------------
+var enablePostpone = false;
+
 function scheduleWork(callback) {
   setImmediate(callback);
 }
@@ -128,15 +132,9 @@ function writeViewChunk(destination, chunk) {
   }
 
   if (chunk.byteLength > VIEW_SIZE) {
-    {
-      if (precomputedChunkSet && 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
+    // 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) {
       writeToDestination(destination, currentView.subarray(0, writtenBytes));
       currentView = new Uint8Array(VIEW_SIZE);
@@ -212,71 +210,278 @@ var textEncoder = new util.TextEncoder();
 function stringToChunk(content) {
   return content;
 }
-var precomputedChunkSet = new Set() ;
+function byteLengthOfChunk(chunk) {
+  return typeof chunk === 'string' ? Buffer.byteLength(chunk, 'utf8') : chunk.byteLength;
+}
 function closeWithError(destination, error) {
   // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.
   destination.destroy(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);
+  return newFn;
 }
-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);
-}
-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 = '';
@@ -302,12 +507,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;
@@ -318,339 +522,357 @@ function getServerReferenceBoundArguments(config, serverReference) {
 
 var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-var ReactDOMFlightServerDispatcher = {
+var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
+var previousDispatcher = ReactDOMCurrentDispatcher.current;
+ReactDOMCurrentDispatcher.current = {
   prefetchDNS: prefetchDNS,
   preconnect: preconnect,
   preload: preload,
-  preinit: preinit
+  preloadModule: preloadModule$1,
+  preinitStyle: preinitStyle,
+  preinitScript: preinitScript,
+  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.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.preconnect(href, crossOrigin);
     }
   }
 }
 
-function preload(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
+function preload(href, as, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-      if (request) {
-        var hints = getHints(request);
-        var key = 'L' + href;
+    if (request) {
+      var hints = getHints(request);
+      var key = 'L';
 
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+      if (as === 'image' && options) {
+        key += getImagePreloadKey(href, options.imageSrcSet, options.imageSizes);
+      } else {
+        key += "[" + as + "]" + href;
+      }
+
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
+
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-        hints.add(key);
-        emitHint(request, 'L', [href, options]);
+      if (trimmed) {
+        emitHint(request, 'L', [href, as, trimmed]);
+      } else {
+        emitHint(request, 'L', [href, as]);
       }
+    } else {
+      previousDispatcher.preload(href, as, options);
     }
   }
 }
 
-function preinit(href, options) {
-  {
-    if (typeof href === 'string') {
-      var request = resolveRequest();
+function preloadModule$1(href, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-      if (request) {
-        var hints = getHints(request);
-        var key = 'I' + href;
+    if (request) {
+      var hints = getHints(request);
+      var key = 'm|' + href;
 
-        if (hints.has(key)) {
-          // duplicate hint
-          return;
-        }
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-        hints.add(key);
-        emitHint(request, 'I', [href, options]);
+      hints.add(key);
+      var trimmed = trimOptions(options);
+
+      if (trimmed) {
+        return emitHint(request, 'm', [href, trimmed]);
+      } else {
+        return emitHint(request, 'm', href);
       }
+    } else {
+      previousDispatcher.preloadModule(href, 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 preinitStyle(href, precedence, options) {
+  if (typeof href === 'string') {
+    var request = resolveRequest();
 
-var requestStorage = new async_hooks.AsyncLocalStorage();
+    if (request) {
+      var hints = getHints(request);
+      var key = 'S|' + href;
 
-// 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 (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-  if (typeof maybeIterator === 'function') {
-    return maybeIterator;
+      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.preinitStyle(href, precedence, options);
+    }
   }
-
-  return null;
 }
 
-var rendererSigil;
+function preinitScript(src, options) {
+  if (typeof src === 'string') {
+    var request = resolveRequest();
 
-{
-  // 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.
+    if (request) {
+      var hints = getHints(request);
+      var key = 'X|' + src;
 
+      if (hints.has(key)) {
+        // duplicate hint
+        return;
+      }
 
-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.
-
-var currentActiveSnapshot = null;
+      hints.add(key);
+      var trimmed = trimOptions(options);
 
-function popNode(prev) {
-  {
-    prev.context._currentValue = prev.parentValue;
+      if (trimmed) {
+        return emitHint(request, 'X', [src, trimmed]);
+      } else {
+        return emitHint(request, 'X', src);
+      }
+    } else {
+      previousDispatcher.preinitScript(src, options);
+    }
   }
 }
 
-function pushNode(next) {
-  {
-    next.context._currentValue = next.value;
-  }
-}
+function preinitModuleScript(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 = 'M|' + 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, 'M', [src, trimmed]);
+      } else {
+        return emitHint(request, 'M', src);
+      }
+    } else {
+      previousDispatcher.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 popAllPrevious(prev) {
-  popNode(prev);
-  var parentPrev = prev.parent;
 
-  if (parentPrev !== null) {
-    popAllPrevious(parentPrev);
-  }
-}
-
-function pushAllNext(next) {
-  var parentNext = next.parent;
+function trimOptions(options) {
+  if (options == null) return null;
+  var hasProperties = false;
+  var trimmed = {};
 
-  if (parentNext !== null) {
-    pushAllNext(parentNext);
+  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;
   }
+
+  return "[image]" + uniquePart;
 }
 
-function popNextToCommonLevel(prev, next) {
-  var parentNext = next.parent;
+// 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
 
-  if (parentNext === null) {
-    throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
-  }
+function createHints() {
+  return new Set();
+}
 
-  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);
-    }
+var supportsRequestStorage = true;
+var requestStorage = new async_hooks.AsyncLocalStorage();
 
-    currentActiveSnapshot = next;
-  }
+var TEMPORARY_REFERENCE_TAG = Symbol.for('react.temporary.reference'); // eslint-disable-next-line no-unused-vars
+
+function isTemporaryReference(reference) {
+  return reference.$$typeof === TEMPORARY_REFERENCE_TAG;
+}
+function resolveTemporaryReferenceID(temporaryReference) {
+  return temporaryReference.$$id;
 }
-function pushProvider(context, nextValue) {
-  var prevValue;
+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;
 
-  {
-    prevValue = context._currentValue;
-    context._currentValue = nextValue;
+      case '$$id':
+        return target.$$id;
 
-    {
-      if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
-        error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
-      }
+      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.
 
-      context._currentRenderer = rendererSigil;
+      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.');
+// 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_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,
@@ -781,29 +1003,13 @@ function prepareToUseHooksForComponent(prevThenableState) {
   thenableState = prevThenableState;
 }
 function getThenableStateAfterSuspending() {
-  var state = thenableState;
+  // 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();
   thenableState = null;
   return state;
 }
-
-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().');
-    }
-  }
-
-  return readContext$1(context);
-}
-
 var HooksDispatcher = {
   useMemo: function (nextCreate) {
     return nextCreate();
@@ -814,8 +1020,8 @@ var HooksDispatcher = {
   useDebugValue: function () {},
   useDeferredValue: unsupportedHook,
   useTransition: unsupportedHook,
-  readContext: readContext,
-  useContext: readContext,
+  readContext: unsupportedContext,
+  useContext: unsupportedContext,
   useReducer: unsupportedHook,
   useRef: unsupportedHook,
   useState: unsupportedHook,
@@ -824,7 +1030,6 @@ var HooksDispatcher = {
   useImperativeHandle: unsupportedHook,
   useEffect: unsupportedHook,
   useId: useId,
-  useMutableSource: unsupportedHook,
   useSyncExternalStore: unsupportedHook,
   useCacheRefresh: function () {
     return unsupportedRefresh;
@@ -849,6 +1054,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');
@@ -874,20 +1083,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));
+  } else {
+    throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
+    'An unsupported type was passed to use(): ' + String(usable));
+  }
 }
 
 function createSignal() {
@@ -936,6 +1147,8 @@ function isArray(a) {
   return isArrayImpl(a);
 }
 
+var getPrototypeOf = Object.getPrototypeOf;
+
 // in case they error.
 
 var jsxPropsParents = new WeakMap();
@@ -954,7 +1167,7 @@ function isObjectPrototype(object) {
   // still just a plain simple object.
 
 
-  if (Object.getPrototypeOf(object)) {
+  if (getPrototypeOf(object)) {
     return false;
   }
 
@@ -970,7 +1183,7 @@ function isObjectPrototype(object) {
 }
 
 function isSimpleObject(object) {
-  if (!isObjectPrototype(Object.getPrototypeOf(object))) {
+  if (!isObjectPrototype(getPrototypeOf(object))) {
     return false;
   }
 
@@ -1023,6 +1236,10 @@ function describeValueForErrorMessage(value) {
           return '[...]';
         }
 
+        if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
+          return describeClientReference();
+        }
+
         var name = objectName(value);
 
         if (name === 'Object') {
@@ -1033,7 +1250,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
@@ -1079,6 +1304,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);
 
@@ -1104,7 +1335,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) + '}';
@@ -1137,7 +1367,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);
@@ -1159,6 +1388,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);
@@ -1176,7 +1407,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);
@@ -1210,20 +1440,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;
@@ -1250,41 +1479,44 @@ 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);
-  }
+var ReactSharedServerInternals = // $FlowFixMe: It's defined in the one we resolve to.
+React.__SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-  return ContextRegistry[globalName];
+if (!ReactSharedServerInternals) {
+  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.');
 }
 
+var ObjectPrototype = Object.prototype;
+var stringify = JSON.stringify; // Serializable values
 // Thenable<ReactClientValue>
 
 var PENDING$1 = 0;
 var COMPLETED = 1;
 var ABORTED = 3;
 var ERRORED$1 = 4;
+var ReactCurrentCache = ReactSharedServerInternals.ReactCurrentCache;
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-var ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
 
 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) {
+function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName) {
   if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) {
     throw new Error('Currently React only supports one RSC renderer at a time.');
   }
 
-  prepareHostDispatcher();
   ReactCurrentCache.current = DefaultCacheDispatcher;
   var abortSet = new Set();
   var pingedTasks = [];
+  var cleanupQueue = [];
+
   var hints = createHints();
   var request = {
     status: OPEN,
@@ -1300,23 +1532,24 @@ function createRequest(model, bundlerConfig, onError, context, identifierPrefix)
     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;
 }
@@ -1332,15 +1565,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':
@@ -1354,14 +1590,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;
@@ -1399,18 +1631,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;
+
+      var _digest = logRecoverableError(request, reason);
 
-      emitErrorChunkDev(request, newTask.id, digest, _message, _stack);
+      emitErrorChunk(request, newTask.id, _digest, reason);
     }
 
+    request.abortableTasks.delete(newTask);
+
     if (request.destination !== null) {
       flushCompletedChunks(request, request.destination);
     }
@@ -1482,14 +1712,136 @@ 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) {
+function renderFunctionComponent(request, task, key, Component, props) {
+  // 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;
+
+  {
+    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) ; 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++;
+      emitDebugChunk(request, debugID, {
+        name: componentName,
+        env: request.environmentName
+      });
+    }
+  }
+
+  prepareToUseHooksForComponent(prevThenableState); // The secondArg is always undefined in Server Components since refs error early.
+
+  var secondArg = undefined;
+  var result = Component(props, secondArg);
+
+  if (typeof result === 'object' && result !== null && 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;
+
+    if (thenable.status === 'fulfilled') {
+      return thenable.value;
+    } // TODO: Once we accept Promises as children on the client, we can just return
+    // the thenable here.
+
+
+    result = createLazyWrapperAroundWakeable(result);
+  } // 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) {
+  {
+    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);
+      }
+    }
+  }
+
+  {
+    return children;
+  }
+}
+
+function renderClientElement(task, type, key, props) {
+  {
+    return [REACT_ELEMENT_TYPE, type, key, props];
+  } // We prepend the terminal client element that actually gets serialized with
+} // 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) {
   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.');
   }
 
@@ -1502,49 +1854,38 @@ function attemptResolveElement(request, type, key, ref, props, prevThenableState
   }
 
   if (typeof type === 'function') {
-    if (isClientReference(type)) {
+    if (isClientReference(type) || isTemporaryReference(type)) {
       // This is a reference to a Client Component.
-      return [REACT_ELEMENT_TYPE, type, key, props];
-    } // This is a server-side component.
+      return renderClientElement(task, type, key, props);
+    } // This is a Server Component.
 
 
-    prepareToUseHooksForComponent(prevThenableState);
-    var result = type(props);
-
-    if (typeof result === 'object' && result !== null && 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;
-
-      if (thenable.status === 'fulfilled') {
-        return thenable.value;
-      } // TODO: Once we accept Promises as children on the client, we can just return
-      // the thenable here.
-
-
-      return createLazyWrapperAroundWakeable(result);
-    }
-
-    return result;
+    return renderFunctionComponent(request, task, key, type, props);
   } 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);
   } 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);
   } 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);
     }
 
     switch (type.$$typeof) {
@@ -1553,45 +1894,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);
         }
 
       case REACT_FORWARD_REF_TYPE:
         {
-          var render = type.render;
-          prepareToUseHooksForComponent(prevThenableState);
-          return render(props, undefined);
+          return renderFunctionComponent(request, task, key, type.render, props);
         }
 
       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);
         }
     }
   }
@@ -1611,16 +1924,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.
+    {
+      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);
@@ -1643,12 +1991,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) {
@@ -1683,13 +2031,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
@@ -1708,7 +2066,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
@@ -1722,20 +2080,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);
 
@@ -1748,15 +2106,69 @@ 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 serializeTemporaryReference(request, temporaryReference) {
+  var id = resolveTemporaryReferenceID(temporaryReference);
+  return serializeTemporaryReferenceID(id);
+}
+
+function serializeLargeTextString(request, text) {
+  request.pendingChunks += 2;
+  var textId = request.nextChunkId++;
+  var textChunk = stringToChunk(text);
+  var binaryLength = byteLengthOfChunk(textChunk);
+  var row = textId.toString(16) + ':T' + binaryLength.toString(16) + ',';
+  var headerChunk = stringToChunk(row);
+  request.completedRegularChunks.push(headerChunk, textChunk);
+  return serializeByValueID(textId);
+}
+
+function serializeMap(request, map) {
+  var entries = Array.from(map);
+
+  for (var i = 0; i < entries.length; i++) {
+    var key = entries[i][0];
+
+    if (typeof key === 'object' && key !== null) {
+      var writtenObjects = request.writtenObjects;
+      var existingId = writtenObjects.get(key);
+
+      if (existingId === undefined) {
+        // Mark all object keys as seen so that they're always outlined.
+        writtenObjects.set(key, -1);
+      }
+    }
+  }
+
+  var id = outlineModel(request, entries);
+  return '$Q' + id.toString(16);
+}
+
+function serializeSet(request, set) {
+  var entries = Array.from(set);
+
+  for (var i = 0; i < entries.length; i++) {
+    var key = entries[i];
+
+    if (typeof key === 'object' && key !== null) {
+      var writtenObjects = request.writtenObjects;
+      var existingId = writtenObjects.get(key);
+
+      if (existingId === undefined) {
+        // Mark all object keys as seen so that they're always outlined.
+        writtenObjects.set(key, -1);
+      }
+    }
+  }
+
+  var id = outlineModel(request, entries);
+  return '$W' + id.toString(16);
+}
+
 function escapeStringValue(value) {
   if (value[0] === '$') {
     // We need to escape $ prefixed strings since we use those to encode
@@ -1767,166 +2179,262 @@ function escapeStringValue(value) {
   }
 }
 
-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];
+var modelRoot = false;
 
-    if (typeof originalValue === 'object' && originalValue !== value && !(originalValue instanceof Date)) {
-      if (objectName(originalValue) !== 'Object') {
-        var jsxParentType = jsxChildrenParents.get(parent);
+function renderModel(request, task, parent, key, value) {
+  var prevKeyPath = task.keyPath;
+  var prevImplicitSlot = task.implicitSlot;
 
-        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));
+  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.
+        var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
+        var ping = newTask.ping;
+        x.then(ping, ping);
+        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.
+
+        task.keyPath = prevKeyPath;
+        task.implicitSlot = prevImplicitSlot;
+
+        if (wasReactNode) {
+          return serializeLazyID(newTask.id);
         }
-      } 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));
+
+        return serializeByValueID(newTask.id);
       }
-    }
-  } // Special Symbols
+    } // 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.
 
 
-  switch (value) {
-    case REACT_ELEMENT_TYPE:
-      return '$';
-  }
+    task.keyPath = prevKeyPath;
+    task.implicitSlot = prevImplicitSlot;
 
-  {
-    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.
+    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.
 
 
-  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');
-      }
-    }
+    throw x;
+  }
+}
 
-    try {
-      switch (value.$$typeof) {
-        case REACT_ELEMENT_TYPE:
-          {
-            // TODO: Concatenate keys of parents onto children.
-            var element = value; // Attempt to render the Server Component.
+function renderModelDestructive(request, task, parent, parentPropertyName, value) {
+  // Set the currently rendering model
+  task.model = value; // Special Symbol, that's very common.
 
-            value = attemptResolveElement(request, element.type, element.key, element.ref, element.props, null);
-            break;
+  if (value === REACT_ELEMENT_TYPE) {
+    return '$';
+  }
+
+  if (value === null) {
+    return null;
+  }
+
+  if (typeof value === 'object') {
+    switch (value.$$typeof) {
+      case REACT_ELEMENT_TYPE:
+        {
+          var _writtenObjects = request.writtenObjects;
+
+          var _existingId = _writtenObjects.get(value);
+
+          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 === -1) {
+              // 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, -1);
           }
 
-        case REACT_LAZY_TYPE:
+          var element = value;
+
           {
-            var payload = value._payload;
-            var init = value._init;
-            value = init(payload);
-            break;
+            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);
+              }
+            }
           }
-      }
-    } 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') {
-        // 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 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);
 
+          var props = element.props;
+          var ref;
+
+          {
+            ref = element.ref;
+          } // 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);
+        }
+
+      case REACT_LAZY_TYPE:
         {
-          var _getErrorMessageAndSt4 = getErrorMessageAndStackDev(x),
-              message = _getErrorMessageAndSt4.message,
-              stack = _getErrorMessageAndSt4.stack;
+          // 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);
+              }
+            }
+          }
 
-          emitErrorChunkDev(request, errorId, digest, message, stack);
+          return renderModelDestructive(request, task, emptyRoot, '', resolvedModel);
         }
+    }
 
-        return serializeLazyID(errorId);
-      }
+    if (isClientReference(value)) {
+      return serializeClientReference(request, parent, parentPropertyName, value);
     }
-  }
 
-  if (value === null) {
-    return null;
-  }
+    var writtenObjects = request.writtenObjects;
+    var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
 
-  if (typeof value === 'object') {
-    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,
+    if (typeof value.then === 'function') {
+      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 {
+          // 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 === -1) {
+        // Seen but not yet outlined.
+        var _newId = outlineModel(request, value);
+
+        return serializeByValueID(_newId);
+      } else {
+        // 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, -1);
+    }
 
-      return serializeByValueID(providerId);
-    } else if (value === POP) {
-      popProvider();
+    if (isArray(value)) {
+      return renderFragment(request, task, value);
+    }
 
-      {
-        insideContextProps = null;
-        isInsideContextValue = false;
-      }
+    if (value instanceof Map) {
+      return serializeMap(request, value);
+    }
 
-      return undefined;
+    if (value instanceof Set) {
+      return serializeSet(request, value);
     }
 
-    if (!isArray(value)) {
-      var iteratorFn = getIteratorFn(value);
+    var iteratorFn = getIteratorFn(value);
 
-      if (iteratorFn) {
-        return Array.from(value);
-      }
+    if (iteratorFn) {
+      return renderFragment(request, task, Array.from(value));
+    } // Verify that this is a simple plain object.
+
+
+    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 (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));
-          }
+      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]
@@ -1936,17 +2444,25 @@ 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]
+      var originalValue = parent[parentPropertyName];
 
-      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);
   }
 
@@ -1964,26 +2480,34 @@ 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);
+      return serializeServerReference(request, value);
     }
 
-    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.');
+    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".' + describeObjectForErrorMessage(parent, key));
+      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 existingId = writtenSymbols.get(value);
 
-    if (existingId !== undefined) {
-      return serializeByValueID(existingId);
+    var _existingId2 = writtenSymbols.get(value);
+
+    if (_existingId2 !== undefined) {
+      return serializeByValueID(_existingId2);
     } // $FlowFixMe[incompatible-type] `description` might be undefined
 
 
@@ -1991,7 +2515,7 @@ function resolveModelToJSON(request, parent, key, value) {
 
     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));
+      value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, parentPropertyName));
     }
 
     request.pendingChunks++;
@@ -2002,15 +2526,44 @@ function resolveModelToJSON(request, parent, key, value) {
   }
 
   if (typeof value === 'bigint') {
+
     return serializeBigInt(value);
   }
 
-  throw new Error("Type " + typeof value + " is not supported in Client Component props." + describeObjectForErrorMessage(parent, key));
+  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) {
+      // Exit the request context while running callbacks.
+      requestStorage.run(undefined, onPostpone, reason);
+    }
+  } finally {
+    currentRequest = prevRequest;
+  }
 }
 
 function logRecoverableError(request, error) {
-  var onError = request.onError;
-  var errorDigest = onError(error);
+  var prevRequest = currentRequest;
+  currentRequest = null;
+  var errorDigest;
+
+  try {
+    var onError = request.onError;
+
+    if (supportsRequestStorage) {
+      // Exit the request context while running callbacks.
+      errorDigest = requestStorage.run(undefined, onError, error);
+    }
+  } finally {
+    currentRequest = prevRequest;
+  }
 
   if (errorDigest != null && typeof errorDigest !== 'string') {
     // eslint-disable-next-line react-internal/prod-error-codes
@@ -2020,7 +2573,45 @@ function logRecoverableError(request, error) {
   return errorDigest || '';
 }
 
-function getErrorMessageAndStackDev(error) {
+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 = '';
@@ -2031,101 +2622,123 @@ function getErrorMessageAndStackDev(error) {
         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 {
-        message = 'Error: ' + error;
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        message = String(error);
       }
     } catch (x) {
       message = 'An error occurred but serializing the error message failed.';
     }
 
-    return {
+    errorInfo = {
+      digest: digest,
       message: message,
       stack: stack
     };
   }
-}
-
-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 emitErrorChunkProd(request, id, digest) {
-  var processedChunk = processErrorChunkProd();
-  request.completedErrorChunks.push(processedChunk);
-}
 
-function emitErrorChunkDev(request, id, digest, message, stack) {
-  var processedChunk = processErrorChunkDev(request, id, digest, message, stack);
+  var row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
+  var processedChunk = stringToChunk(row);
   request.completedErrorChunks.push(processedChunk);
 }
 
 function emitImportChunk(request, id, clientReferenceMetadata) {
-  var processedChunk = processImportChunk(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 processedChunk = processHintChunk(request, request.nextChunkId++, 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 = processReferenceChunk(request, id, symbolReference);
+  var processedChunk = encodeReferenceChunk(request, id, symbolReference);
   request.completedImportChunks.push(processedChunk);
 }
 
-function emitProviderChunk(request, id, contextName) {
-  var contextReference = serializeProviderReference(contextName);
-  var processedChunk = processReferenceChunk(request, id, contextReference);
-  request.completedJSONChunks.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) {
+
+
+  var json = stringify(debugInfo);
+  var row = serializeRowHeader('D', id) + json + '\n';
+  var processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
+}
+
+function forwardDebugInfo(request, id, debugInfo) {
+  for (var i = 0; i < debugInfo.length; i++) {
+    request.pendingChunks++;
+    emitDebugChunk(request, id, debugInfo[i]);
+  }
 }
 
+var emptyRoot = {};
+
 function retryTask(request, task) {
   if (task.status !== PENDING$1) {
     // We completed this by other means before we had a chance to retry it.
     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;
+    var json;
+
+    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.
+      // $FlowFixMe[incompatible-type] stringify can return null for undefined but we never do
+      json = stringify(resolvedModel, task.toJSON);
+    } 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
+      json = stringify(resolvedModel);
     }
 
-    var processedChunk = processModelChunk(request, task.id, value);
-    request.completedJSONChunks.push(processedChunk);
+    emitModelChunk(request, task.id, json);
     request.abortableTasks.delete(task);
     task.status = COMPLETED;
   } catch (thrownValue) {
@@ -2134,27 +2747,27 @@ 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);
+    getSuspendedThenable() : thrownValue;
 
-      {
-        var _getErrorMessageAndSt5 = getErrorMessageAndStackDev(x),
-            message = _getErrorMessageAndSt5.message,
-            stack = _getErrorMessageAndSt5.stack;
-
-        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;
+    }
   }
 }
 
@@ -2192,7 +2805,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);
 }
 
@@ -2236,12 +2849,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);
 
@@ -2252,7 +2865,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.
 
@@ -2281,7 +2894,7 @@ function flushCompletedChunks(request, destination) {
   flushBuffered(destination);
 
   if (request.pendingChunks === 0) {
-    // We're done.
+
     close$1(destination);
   }
 }
@@ -2333,6 +2946,9 @@ 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) {
@@ -2342,17 +2958,13 @@ function abort(request, reason) {
     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) {
@@ -2370,28 +2982,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;
-  }
+// 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
 
-  return rootContextSnapshot;
+function isAsyncImport(metadata) {
+  return metadata.length === 4;
 }
 
-// eslint-disable-next-line no-unused-vars
 function resolveServerReference(bundlerConfig, id) {
   var name = '';
   var resolvedModuleData = bundlerConfig[id];
@@ -2417,19 +3021,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.
@@ -2437,16 +3060,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++];
+    chunks[i++];
     var entry = chunkCache.get(chunkId);
 
     if (entry === undefined) {
-      var thenable = __webpack_chunk_load__(chunkId);
-
+      var thenable = loadChunk(chunkId);
       promises.push(thenable); // $FlowFixMe[method-unbinding]
 
       var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
@@ -2457,30 +3081,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);
+      return Promise.all(promises).then(function () {
+        return requireAsyncModule(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;
-      });
-      asyncModuleCache.set(metadata.id, modulePromise);
-      return modulePromise;
     }
   } else if (promises.length > 0) {
     return Promise.all(promises);
@@ -2491,35 +3098,34 @@ function preloadModule(metadata) {
 // Increase priority if necessary.
 
 function requireModule(metadata) {
-  var moduleExports;
-
-  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);
+  var moduleExports = __webpack_require__(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]];
+}
+
+function loadChunk(chunkId, filename) {
+  return __webpack_chunk_load__(chunkId);
 }
 
 // The server acts as a Client of itself when resolving Server References.
@@ -2662,11 +3268,11 @@ function resolveModelChunk(chunk, value) {
   }
 }
 
-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.
@@ -2677,7 +3283,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) {
@@ -2807,6 +3413,21 @@ function createModelReject(chunk) {
   };
 }
 
+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, parentObject, key, value) {
   if (value[0] === '$') {
     switch (value[1]) {
@@ -2824,31 +3445,39 @@ function parseModelString(response, parentObject, key, value) {
           return chunk;
         }
 
-      case 'S':
+      case 'F':
         {
-          // Symbol
-          return Symbol.for(value.slice(2));
+          // Server Reference
+          var _id = parseInt(value.slice(2), 16); // TODO: Just encode this in the reference inline instead of as a model.
+
+
+          var metaData = getOutlinedModel(response, _id);
+          return loadServerReference$1(response, metaData.id, metaData.bound, initializingChunk, parentObject, key);
         }
 
-      case 'F':
+      case 'T':
         {
-          // Server Reference
-          var _id = parseInt(value.slice(2), 16);
+          // Temporary Reference
+          return createTemporaryReference(value.slice(2));
+        }
 
-          var _chunk = getChunk(response, _id);
+      case 'Q':
+        {
+          // Map
+          var _id2 = parseInt(value.slice(2), 16);
 
-          if (_chunk.status === RESOLVED_MODEL) {
-            initializeModelChunk(_chunk);
-          }
+          var data = getOutlinedModel(response, _id2);
+          return new Map(data);
+        }
 
-          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.
+      case 'W':
+        {
+          // Set
+          var _id3 = parseInt(value.slice(2), 16);
 
+          var _data = getOutlinedModel(response, _id3);
 
-          var metaData = _chunk.value;
-          return loadServerReference(response, metaData.id, metaData.bound, initializingChunk, parentObject, key);
+          return new Set(_data);
         }
 
       case 'K':
@@ -2856,7 +3485,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.
@@ -2864,10 +3495,10 @@ 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':
@@ -2914,31 +3545,31 @@ function parseModelString(response, parentObject, key, value) {
       default:
         {
           // We assume that anything else is a reference ID.
-          var _id2 = parseInt(value.slice(1), 16);
+          var _id4 = parseInt(value.slice(1), 16);
 
-          var _chunk2 = getChunk(response, _id2);
+          var _chunk = getChunk(response, _id4);
 
-          switch (_chunk2.status) {
+          switch (_chunk.status) {
             case RESOLVED_MODEL:
-              initializeModelChunk(_chunk2);
+              initializeModelChunk(_chunk);
               break;
           } // The status might have changed after initialization.
 
 
-          switch (_chunk2.status) {
+          switch (_chunk.status) {
             case INITIALIZED:
-              return _chunk2.value;
+              return _chunk.value;
 
             case PENDING:
             case BLOCKED:
               var parentChunk = initializingChunk;
 
-              _chunk2.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk));
+              _chunk.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk));
 
               return null;
 
             default:
-              throw _chunk2.reason;
+              throw _chunk.reason;
           }
         }
     }
@@ -3012,14 +3643,144 @@ 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 createDrainHandler(destination, request) {
   return function () {
     return startFlowing(request, destination);
   };
 }
 
+function createCancelHandler(request, reason) {
+  return function () {
+    stopFlowing(request); // eslint-disable-next-line react-internal/prod-error-codes
+
+    abort(request, new Error(reason));
+  };
+}
+
 function renderToPipeableStream(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);
   var hasStartedFlowing = false;
   startWork(request);
   return {
@@ -3031,6 +3792,8 @@ function renderToPipeableStream(model, webpackMap, options) {
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
+      destination.on('error', createCancelHandler(request, 'The destination stream errored while writing data.'));
+      destination.on('close', createCancelHandler(request, 'The destination stream closed early.'));
       return destination;
     },
     abort: function (reason) {
@@ -3085,7 +3848,8 @@ function decodeReplyFromBusboy(busboyStream, webpackMap) {
     close(response);
   });
   busboyStream.on('error', function (err) {
-    reportGlobalError(response, err);
+    reportGlobalError(response, // $FlowFixMe[incompatible-call] types Error and mixed are incompatible
+    err);
   });
   return getRoot(response);
 }
@@ -3098,12 +3862,18 @@ 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.decodeReplyFromBusboy = decodeReplyFromBusboy;
+exports.registerClientReference = registerClientReference;
+exports.registerServerReference = registerServerReference;
 exports.renderToPipeableStream = renderToPipeableStream;
   })();
 }