react-server-dom-webpack 18.3.0-next-fa4314841-20230502 → 19.0.0-canary-05797cceb-20240328

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

@@ -7,6 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
@@ -52,10 +53,13 @@
     }
   }
 
+  // -----------------------------------------------------------------------------
+  var enablePostpone = false;
+
   function scheduleWork(callback) {
     callback();
   }
-  var VIEW_SIZE = 512;
+  var VIEW_SIZE = 2048;
   var currentView = null;
   var writtenBytes = 0;
   function beginWriting(destination) {
@@ -63,20 +67,14 @@
     writtenBytes = 0;
   }
   function writeChunk(destination, chunk) {
-    if (chunk.length === 0) {
+    if (chunk.byteLength === 0) {
       return;
     }
 
-    if (chunk.length > VIEW_SIZE) {
-      {
-        if (precomputedChunkSet.has(chunk)) {
-          error('A large precomputed chunk was passed to writeChunk without being copied.' + ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' + ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.');
-        }
-      } // this chunk may overflow a single view which implies it was not
+    if (chunk.byteLength > VIEW_SIZE) {
+      // this chunk may overflow a single view which implies it was not
       // one that is cached by the streaming renderer. We will enqueu
       // it directly and expect it is not re-used
-
-
       if (writtenBytes > 0) {
         destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
         currentView = new Uint8Array(VIEW_SIZE);
@@ -90,7 +88,7 @@
     var bytesToWrite = chunk;
     var allowableBytes = currentView.length - writtenBytes;
 
-    if (allowableBytes < bytesToWrite.length) {
+    if (allowableBytes < bytesToWrite.byteLength) {
       // this chunk would overflow the current view. We enqueue a full view
       // and start a new view with the remaining chunk
       if (allowableBytes === 0) {
@@ -110,7 +108,7 @@
     }
 
     currentView.set(bytesToWrite, writtenBytes);
-    writtenBytes += bytesToWrite.length;
+    writtenBytes += bytesToWrite.byteLength;
   }
   function writeChunkAndReturn(destination, chunk) {
     writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
@@ -131,7 +129,9 @@
   function stringToChunk(content) {
     return textEncoder.encode(content);
   }
-  var precomputedChunkSet = new Set() ;
+  function byteLengthOfChunk(chunk) {
+    return chunk.byteLength;
+  }
   function closeWithError(destination, error) {
     // $FlowFixMe[method-unbinding]
     if (typeof destination.error === 'function') {
@@ -148,65 +148,270 @@
     }
   }
 
-  // This file is an intermediate layer to translate between Flight
-  var stringify = JSON.stringify;
-
-  function serializeRowHeader(tag, id) {
-    return id.toString(16) + ':' + tag;
+  // eslint-disable-next-line no-unused-vars
+  var CLIENT_REFERENCE_TAG$1 = Symbol.for('react.client.reference');
+  var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
+  function isClientReference(reference) {
+    return reference.$$typeof === CLIENT_REFERENCE_TAG$1;
+  }
+  function isServerReference(reference) {
+    return reference.$$typeof === SERVER_REFERENCE_TAG;
+  }
+  function registerClientReference(proxyImplementation, id, exportName) {
+    return registerClientReferenceImpl(proxyImplementation, id + '#' + exportName, false);
   }
 
-  function processErrorChunkProd(request, id, digest) {
-    {
-      // These errors should never make it into a build so we don't need to encode them in codes.json
-      // eslint-disable-next-line react-internal/prod-error-codes
-      throw new Error('processErrorChunkProd should never be called while in development mode. Use processErrorChunkDev instead. This is a bug in React.');
+  function registerClientReferenceImpl(proxyImplementation, id, async) {
+    return Object.defineProperties(proxyImplementation, {
+      $$typeof: {
+        value: CLIENT_REFERENCE_TAG$1
+      },
+      $$id: {
+        value: id
+      },
+      $$async: {
+        value: async
+      }
+    });
+  } // $FlowFixMe[method-unbinding]
+
+
+  var FunctionBind = Function.prototype.bind; // $FlowFixMe[method-unbinding]
+
+  var ArraySlice = Array.prototype.slice;
+
+  function bind() {
+    // $FlowFixMe[unsupported-syntax]
+    var newFn = FunctionBind.apply(this, arguments);
+
+    if (this.$$typeof === SERVER_REFERENCE_TAG) {
+      {
+        var thisBind = arguments[0];
+
+        if (thisBind != null) {
+          error('Cannot bind "this" of a Server Action. Pass null or undefined as the first argument to .bind().');
+        }
+      }
+
+      var args = ArraySlice.call(arguments, 1);
+      return Object.defineProperties(newFn, {
+        $$typeof: {
+          value: SERVER_REFERENCE_TAG
+        },
+        $$id: {
+          value: this.$$id
+        },
+        $$bound: {
+          value: this.$$bound ? this.$$bound.concat(args) : args
+        },
+        bind: {
+          value: bind
+        }
+      });
     }
-  }
-  function processErrorChunkDev(request, id, digest, message, stack) {
 
-    var errorInfo = {
-      digest: digest,
-      message: message,
-      stack: stack
-    };
-    var row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
-    return stringToChunk(row);
-  }
-  function processModelChunk(request, id, model) {
-    // $FlowFixMe[incompatible-type] stringify can return null
-    var json = stringify(model, request.toJSON);
-    var row = id.toString(16) + ':' + json + '\n';
-    return stringToChunk(row);
+    return newFn;
   }
-  function processReferenceChunk(request, id, reference) {
-    var json = stringify(reference);
-    var row = id.toString(16) + ':' + json + '\n';
-    return stringToChunk(row);
+
+  function registerServerReference(reference, id, exportName) {
+    return Object.defineProperties(reference, {
+      $$typeof: {
+        value: SERVER_REFERENCE_TAG
+      },
+      $$id: {
+        value: exportName === null ? id : id + '#' + exportName,
+        configurable: true
+      },
+      $$bound: {
+        value: null,
+        configurable: true
+      },
+      bind: {
+        value: bind,
+        configurable: true
+      }
+    });
   }
-  function processImportChunk(request, id, clientReferenceMetadata) {
-    // $FlowFixMe[incompatible-type] stringify can return null
-    var json = stringify(clientReferenceMetadata);
-    var row = serializeRowHeader('I', id) + json + '\n';
-    return stringToChunk(row);
+  var PROMISE_PROTOTYPE = Promise.prototype;
+  var deepProxyHandlers = {
+    get: function (target, name, receiver) {
+      switch (name) {
+        // These names are read by the Flight runtime if you end up using the exports object.
+        case '$$typeof':
+          // These names are a little too common. We should probably have a way to
+          // have the Flight runtime extract the inner target instead.
+          return target.$$typeof;
+
+        case '$$id':
+          return target.$$id;
+
+        case '$$async':
+          return target.$$async;
+
+        case 'name':
+          return target.name;
+
+        case 'displayName':
+          return undefined;
+        // We need to special case this because createElement reads it if we pass this
+        // reference.
+
+        case 'defaultProps':
+          return undefined;
+        // Avoid this attempting to be serialized.
+
+        case 'toJSON':
+          return undefined;
+
+        case Symbol.toPrimitive:
+          // $FlowFixMe[prop-missing]
+          return Object.prototype[Symbol.toPrimitive];
+
+        case Symbol.toStringTag:
+          // $FlowFixMe[prop-missing]
+          return Object.prototype[Symbol.toStringTag];
+
+        case 'Provider':
+          throw new Error("Cannot render a Client Context Provider on the Server. " + "Instead, you can export a Client Component wrapper " + "that itself renders a Client Context Provider.");
+      } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+      var expression = String(target.name) + '.' + String(name);
+      throw new Error("Cannot access " + expression + " on the server. " + 'You cannot dot into a client module from a server component. ' + 'You can only pass the imported name through.');
+    },
+    set: function () {
+      throw new Error('Cannot assign to a client module from a server module.');
+    }
+  };
+
+  function getReference(target, name) {
+    switch (name) {
+      // These names are read by the Flight runtime if you end up using the exports object.
+      case '$$typeof':
+        return target.$$typeof;
+
+      case '$$id':
+        return target.$$id;
+
+      case '$$async':
+        return target.$$async;
+
+      case 'name':
+        return target.name;
+      // We need to special case this because createElement reads it if we pass this
+      // reference.
+
+      case 'defaultProps':
+        return undefined;
+      // Avoid this attempting to be serialized.
+
+      case 'toJSON':
+        return undefined;
+
+      case Symbol.toPrimitive:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toPrimitive];
+
+      case Symbol.toStringTag:
+        // $FlowFixMe[prop-missing]
+        return Object.prototype[Symbol.toStringTag];
+
+      case '__esModule':
+        // Something is conditionally checking which export to use. We'll pretend to be
+        // an ESM compat module but then we'll check again on the client.
+        var moduleId = target.$$id;
+        target.default = registerClientReferenceImpl(function () {
+          throw new Error("Attempted to call the default export of " + moduleId + " from the server " + "but it's on the client. It's not possible to invoke a client function from " + "the server, it can only be rendered as a Component or passed to props of a " + "Client Component.");
+        }, target.$$id + '#', target.$$async);
+        return true;
+
+      case 'then':
+        if (target.then) {
+          // Use a cached value
+          return target.then;
+        }
+
+        if (!target.$$async) {
+          // If this module is expected to return a Promise (such as an AsyncModule) then
+          // we should resolve that with a client reference that unwraps the Promise on
+          // the client.
+          var clientReference = registerClientReferenceImpl({}, target.$$id, true);
+          var proxy = new Proxy(clientReference, proxyHandlers$1); // Treat this as a resolved Promise for React's use()
+
+          target.status = 'fulfilled';
+          target.value = proxy;
+          var then = target.then = registerClientReferenceImpl(function then(resolve, reject) {
+            // Expose to React.
+            return Promise.resolve(resolve(proxy));
+          }, // If this is not used as a Promise but is treated as a reference to a `.then`
+          // export then we should treat it as a reference to that name.
+          target.$$id + '#then', false);
+          return then;
+        } else {
+          // Since typeof .then === 'function' is a feature test we'd continue recursing
+          // indefinitely if we return a function. Instead, we return an object reference
+          // if we check further.
+          return undefined;
+        }
+
+    }
+
+    if (typeof name === 'symbol') {
+      throw new Error('Cannot read Symbol exports. Only named exports are supported on a client module ' + 'imported on the server.');
+    }
+
+    var cachedReference = target[name];
+
+    if (!cachedReference) {
+      var reference = registerClientReferenceImpl(function () {
+        throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
+        "Attempted to call " + String(name) + "() from the server but " + String(name) + " is on the client. " + "It's not possible to invoke a client function from the server, it can " + "only be rendered as a Component or passed to props of a Client Component.");
+      }, target.$$id + '#' + name, target.$$async);
+      Object.defineProperty(reference, 'name', {
+        value: name
+      });
+      cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
+    }
+
+    return cachedReference;
   }
-  function processHintChunk(request, id, code, model) {
-    var json = stringify(model);
-    var row = serializeRowHeader('H' + code, id) + json + '\n';
-    return stringToChunk(row);
+
+  var proxyHandlers$1 = {
+    get: function (target, name, receiver) {
+      return getReference(target, name);
+    },
+    getOwnPropertyDescriptor: function (target, name) {
+      var descriptor = Object.getOwnPropertyDescriptor(target, name);
+
+      if (!descriptor) {
+        descriptor = {
+          value: getReference(target, name),
+          writable: false,
+          configurable: false,
+          enumerable: false
+        };
+        Object.defineProperty(target, name, descriptor);
+      }
+
+      return descriptor;
+    },
+    getPrototypeOf: function (target) {
+      // Pretend to be a Promise in case anyone asks.
+      return PROMISE_PROTOTYPE;
+    },
+    set: function () {
+      throw new Error('Cannot assign to a client module from a server module.');
+    }
+  };
+  function createClientModuleProxy(moduleId) {
+    var clientReference = registerClientReferenceImpl({}, // Represents the whole Module object instead of a particular import.
+    moduleId, false);
+    return new Proxy(clientReference, proxyHandlers$1);
   }
 
-  // eslint-disable-next-line no-unused-vars
-  var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-  var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
   function getClientReferenceKey(reference) {
     return reference.$$async ? reference.$$id + '#async' : reference.$$id;
   }
-  function isClientReference(reference) {
-    return reference.$$typeof === CLIENT_REFERENCE_TAG;
-  }
-  function isServerReference(reference) {
-    return reference.$$typeof === SERVER_REFERENCE_TAG;
-  }
   function resolveClientReferenceMetadata(config, clientReference) {
     var modulePath = clientReference.$$id;
     var name = '';
@@ -232,12 +437,11 @@
       }
     }
 
-    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;
@@ -248,337 +452,357 @@
 
   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();
 
-  // ATTENTION
-  // When adding new symbols to this file,
-  // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-  // The Symbol used to tag the ReactElement-like types.
-  var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-  var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-  var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-  var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-  var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-  var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-  var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-  var REACT_MEMO_TYPE = Symbol.for('react.memo');
-  var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-  var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
-  var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel');
-  var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
-  var FAUX_ITERATOR_SYMBOL = '@@iterator';
-  function getIteratorFn(maybeIterable) {
-    if (maybeIterable === null || typeof maybeIterable !== 'object') {
-      return null;
-    }
+      if (request) {
+        var hints = getHints(request);
+        var key = 'S|' + href;
 
-    var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+        if (hints.has(key)) {
+          // duplicate hint
+          return;
+        }
 
-    if (typeof maybeIterator === 'function') {
-      return maybeIterator;
-    }
+        hints.add(key);
+        var trimmed = trimOptions(options);
 
-    return null;
+        if (trimmed) {
+          return emitHint(request, '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);
+      }
+    }
   }
 
-  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 = false;
+  var requestStorage = null;
 
-      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 pushProvider(context, nextValue) {
-    var prevValue;
+  function resolveTemporaryReferenceID(temporaryReference) {
+    return temporaryReference.$$id;
+  }
+  var proxyHandlers = {
+    get: function (target, name, receiver) {
+      switch (name) {
+        // These names are read by the Flight runtime if you end up using the exports object.
+        case '$$typeof':
+          // These names are a little too common. We should probably have a way to
+          // have the Flight runtime extract the inner target instead.
+          return target.$$typeof;
 
-    {
-      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.
+
+        case 'toJSON':
+          return undefined;
 
-        context._currentRenderer = rendererSigil;
+        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,
@@ -709,29 +933,13 @@
     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();
@@ -742,8 +950,8 @@
     useDebugValue: function () {},
     useDeferredValue: unsupportedHook,
     useTransition: unsupportedHook,
-    readContext: readContext,
-    useContext: readContext,
+    readContext: unsupportedContext,
+    useContext: unsupportedContext,
     useReducer: unsupportedHook,
     useRef: unsupportedHook,
     useState: unsupportedHook,
@@ -752,7 +960,6 @@
     useImperativeHandle: unsupportedHook,
     useEffect: unsupportedHook,
     useId: useId,
-    useMutableSource: unsupportedHook,
     useSyncExternalStore: unsupportedHook,
     useCacheRefresh: function () {
       return unsupportedRefresh;
@@ -777,6 +984,10 @@
     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');
@@ -802,20 +1013,22 @@
         }
 
         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() {
@@ -864,6 +1077,8 @@
     return isArrayImpl(a);
   }
 
+  var getPrototypeOf = Object.getPrototypeOf;
+
   // in case they error.
 
   var jsxPropsParents = new WeakMap();
@@ -882,7 +1097,7 @@
     // still just a plain simple object.
 
 
-    if (Object.getPrototypeOf(object)) {
+    if (getPrototypeOf(object)) {
       return false;
     }
 
@@ -898,7 +1113,7 @@
   }
 
   function isSimpleObject(object) {
-    if (!isObjectPrototype(Object.getPrototypeOf(object))) {
+    if (!isObjectPrototype(getPrototypeOf(object))) {
       return false;
     }
 
@@ -951,6 +1166,10 @@
             return '[...]';
           }
 
+          if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
+            return describeClientReference();
+          }
+
           var name = objectName(value);
 
           if (name === 'Object') {
@@ -961,7 +1180,15 @@
         }
 
       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
@@ -1007,6 +1234,12 @@
     return '';
   }
 
+  var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+
+  function describeClientReference(ref) {
+    return 'client';
+  }
+
   function describeObjectForErrorMessage(objectOrArray, expandedName) {
     var objKind = objectName(objectOrArray);
 
@@ -1032,7 +1265,6 @@
           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) + '}';
@@ -1065,7 +1297,6 @@
           var _substr = void 0;
 
           if (typeof _value === 'object' && _value !== null) {
-            // $FlowFixMe[incompatible-call] found when upgrading Flow
             _substr = describeObjectForErrorMessage(_value);
           } else {
             _substr = describeValueForErrorMessage(_value);
@@ -1087,6 +1318,8 @@
     } 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);
@@ -1104,7 +1337,6 @@
           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);
@@ -1138,20 +1370,19 @@
             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;
@@ -1178,41 +1409,44 @@
     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,
@@ -1228,23 +1462,24 @@
       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;
   }
@@ -1255,15 +1490,18 @@
     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':
@@ -1277,14 +1515,10 @@
       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;
@@ -1322,18 +1556,16 @@
       newTask.model = value;
       pingTask(request, newTask);
     }, function (reason) {
-      newTask.status = ERRORED$1; // TODO: We should ideally do this inside performWork so it's scheduled
-
-      var digest = logRecoverableError(request, reason);
-
       {
-        var _getErrorMessageAndSt2 = getErrorMessageAndStackDev(reason),
-            _message = _getErrorMessageAndSt2.message,
-            _stack = _getErrorMessageAndSt2.stack;
+        newTask.status = ERRORED$1;
 
-        emitErrorChunkDev(request, newTask.id, digest, _message, _stack);
+        var _digest = logRecoverableError(request, reason);
+
+        emitErrorChunk(request, newTask.id, _digest, reason);
       }
 
+      request.abortableTasks.delete(newTask);
+
       if (request.destination !== null) {
         flushCompletedChunks(request, request.destination);
       }
@@ -1405,14 +1637,136 @@
       _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.');
     }
 
@@ -1425,49 +1779,38 @@
     }
 
     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) {
@@ -1476,45 +1819,17 @@
             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);
           }
       }
     }
@@ -1534,16 +1849,51 @@
     }
   }
 
-  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);
@@ -1566,12 +1916,12 @@
     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) {
@@ -1606,13 +1956,23 @@
     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
@@ -1631,7 +1991,7 @@
       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
@@ -1645,20 +2005,20 @@
       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);
 
@@ -1671,15 +2031,69 @@
       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
@@ -1690,166 +2104,262 @@
     }
   }
 
-  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.
+
+    if (value === REACT_ELEMENT_TYPE) {
+      return '$';
+    }
+
+    if (value === null) {
+      return null;
+    }
 
-              value = attemptResolveElement(request, element.type, element.key, element.ref, element.props, null);
-              break;
+    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]
@@ -1859,17 +2369,25 @@
     }
 
     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);
     }
 
@@ -1887,26 +2405,34 @@
 
     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 (isTemporaryReference(value)) {
+        return serializeTemporaryReference(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 (/^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
 
 
@@ -1914,7 +2440,7 @@
 
       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++;
@@ -1925,15 +2451,42 @@
     }
 
     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) ; else {
+        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) ; else {
+        errorDigest = onError(error);
+      }
+    } finally {
+      currentRequest = prevRequest;
+    }
 
     if (errorDigest != null && typeof errorDigest !== 'string') {
       // eslint-disable-next-line react-internal/prod-error-codes
@@ -1943,7 +2496,45 @@
     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 = '';
@@ -1954,101 +2545,123 @@
           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) {
@@ -2057,27 +2670,27 @@
       // value to be a thenable, because before `use` existed that was the
       // (unstable) API for suspending. This implementation detail can change
       // later, once we deprecate the old API in favor of `use`.
-      getSuspendedThenable() : thrownValue; // $FlowFixMe[method-unbinding]
-
-      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-        // Something suspended again, let's pick it back up later.
-        var ping = task.ping;
-        x.then(ping, ping);
-        task.thenableState = getThenableStateAfterSuspending();
-        return;
-      } else {
-        request.abortableTasks.delete(task);
-        task.status = ERRORED$1;
-        var digest = logRecoverableError(request, x);
-
-        {
-          var _getErrorMessageAndSt5 = getErrorMessageAndStackDev(x),
-              message = _getErrorMessageAndSt5.message,
-              stack = _getErrorMessageAndSt5.stack;
+      getSuspendedThenable() : thrownValue;
 
-          emitErrorChunkDev(request, task.id, digest, message, stack);
+      if (typeof x === 'object' && x !== null) {
+        // $FlowFixMe[method-unbinding]
+        if (typeof x.then === 'function') {
+          // Something suspended again, let's pick it back up later.
+          var ping = task.ping;
+          x.then(ping, ping);
+          task.thenableState = getThenableStateAfterSuspending();
+          return;
         }
       }
+
+      request.abortableTasks.delete(task);
+      task.status = ERRORED$1;
+      var digest = logRecoverableError(request, x);
+      emitErrorChunk(request, task.id, digest, x);
+    } finally {
+      {
+        debugID = prevDebugID;
+      }
     }
   }
 
@@ -2115,7 +2728,7 @@
     // 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);
   }
 
@@ -2159,12 +2772,12 @@
 
       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);
 
@@ -2175,7 +2788,7 @@
         }
       }
 
-      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.
 
@@ -2202,7 +2815,7 @@
     }
 
     if (request.pendingChunks === 0) {
-      // We're done.
+
       close$1(destination);
     }
   }
@@ -2254,6 +2867,9 @@
       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) {
@@ -2263,17 +2879,13 @@
       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) {
@@ -2291,28 +2903,20 @@
     }
   }
 
-  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];
@@ -2338,19 +2942,38 @@
     } // 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.
@@ -2358,16 +2981,17 @@
 
 
   function preloadModule(metadata) {
-    var chunks = metadata.chunks;
+    var chunks = metadata[CHUNKS];
     var promises = [];
+    var i = 0;
 
-    for (var i = 0; i < chunks.length; i++) {
-      var chunkId = chunks[i];
+    while (i < chunks.length) {
+      var chunkId = chunks[i++];
+      var chunkFilename = chunks[i++];
       var entry = chunkCache.get(chunkId);
 
       if (entry === undefined) {
-        var thenable = __webpack_chunk_load__(chunkId);
-
+        var thenable = loadChunk(chunkId, chunkFilename);
         promises.push(thenable); // $FlowFixMe[method-unbinding]
 
         var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
@@ -2378,30 +3002,13 @@
       }
     }
 
-    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);
@@ -2412,35 +3019,53 @@
   // 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]];
+  }
+
+  var chunkMap = new Map();
+  /**
+   * We patch the chunk filename function in webpack to insert our own resolution
+   * of chunks that come from Flight and may not be known to the webpack runtime
+   */
+
+  var webpackGetChunkFilename = __webpack_require__.u;
+
+  __webpack_require__.u = function (chunkId) {
+    var flightChunk = chunkMap.get(chunkId);
+
+    if (flightChunk !== undefined) {
+      return flightChunk;
+    }
+
+    return webpackGetChunkFilename(chunkId);
+  };
+
+  function loadChunk(chunkId, filename) {
+    chunkMap.set(chunkId, filename);
+    return __webpack_chunk_load__(chunkId);
   }
 
   // The server acts as a Client of itself when resolving Server References.
@@ -2540,11 +3165,11 @@
     return new Chunk(RESOLVED_MODEL, value, null, response);
   }
 
-  function bindArgs(fn, args) {
+  function bindArgs$1(fn, args) {
     return fn.bind.apply(fn, [null].concat(args));
   }
 
-  function loadServerReference(response, id, bound, parentChunk, parentObject, key) {
+  function loadServerReference$1(response, id, bound, parentChunk, parentObject, key) {
     var serverReference = resolveServerReference(response._bundlerConfig, id); // We expect most servers to not really need this because you'd just have all
     // the relevant modules already loaded but it allows for lazy loading of code
     // if needed.
@@ -2555,7 +3180,7 @@
     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) {
@@ -2685,6 +3310,21 @@
     };
   }
 
+  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]) {
@@ -2702,31 +3342,39 @@
             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':
@@ -2734,7 +3382,9 @@
             // 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.
@@ -2742,10 +3392,10 @@
 
             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':
@@ -2792,31 +3442,31 @@
         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;
             }
           }
       }
@@ -2852,8 +3502,130 @@
     reportGlobalError(response, new Error('Connection closed.'));
   }
 
+  function bindArgs(fn, args) {
+    return fn.bind.apply(fn, [null].concat(args));
+  }
+
+  function loadServerReference(bundlerConfig, id, bound) {
+    var serverReference = resolveServerReference(bundlerConfig, id); // We expect most servers to not really need this because you'd just have all
+    // the relevant modules already loaded but it allows for lazy loading of code
+    // if needed.
+
+    var preloadPromise = preloadModule(serverReference);
+
+    if (bound) {
+      return Promise.all([bound, preloadPromise]).then(function (_ref) {
+        var args = _ref[0];
+        return bindArgs(requireModule(serverReference), args);
+      });
+    } else if (preloadPromise) {
+      return Promise.resolve(preloadPromise).then(function () {
+        return requireModule(serverReference);
+      });
+    } else {
+      // Synchronously available
+      return Promise.resolve(requireModule(serverReference));
+    }
+  }
+
+  function decodeBoundActionMetaData(body, serverManifest, formFieldPrefix) {
+    // The data for this reference is encoded in multiple fields under this prefix.
+    var actionResponse = createResponse(serverManifest, formFieldPrefix, body);
+    close(actionResponse);
+    var refPromise = getRoot(actionResponse); // Force it to initialize
+    // $FlowFixMe
+
+    refPromise.then(function () {});
+
+    if (refPromise.status !== 'fulfilled') {
+      // $FlowFixMe
+      throw refPromise.reason;
+    }
+
+    return refPromise.value;
+  }
+
+  function decodeAction(body, serverManifest) {
+    // We're going to create a new formData object that holds all the fields except
+    // the implementation details of the action data.
+    var formData = new FormData();
+    var action = null; // $FlowFixMe[prop-missing]
+
+    body.forEach(function (value, key) {
+      if (!key.startsWith('$ACTION_')) {
+        formData.append(key, value);
+        return;
+      } // Later actions may override earlier actions if a button is used to override the default
+      // form action.
+
+
+      if (key.startsWith('$ACTION_REF_')) {
+        var formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+        var metaData = decodeBoundActionMetaData(body, serverManifest, formFieldPrefix);
+        action = loadServerReference(serverManifest, metaData.id, metaData.bound);
+        return;
+      }
+
+      if (key.startsWith('$ACTION_ID_')) {
+        var id = key.slice(11);
+        action = loadServerReference(serverManifest, id, null);
+        return;
+      }
+    });
+
+    if (action === null) {
+      return null;
+    } // Return the action with the remaining FormData bound to the first argument.
+
+
+    return action.then(function (fn) {
+      return fn.bind(null, formData);
+    });
+  }
+  function decodeFormState(actionResult, body, serverManifest) {
+    var keyPath = body.get('$ACTION_KEY');
+
+    if (typeof keyPath !== 'string') {
+      // This form submission did not include any form state.
+      return Promise.resolve(null);
+    } // Search through the form data object to get the reference id and the number
+    // of bound arguments. This repeats some of the work done in decodeAction.
+
+
+    var metaData = null; // $FlowFixMe[prop-missing]
+
+    body.forEach(function (value, key) {
+      if (key.startsWith('$ACTION_REF_')) {
+        var formFieldPrefix = '$ACTION_' + key.slice(12) + ':';
+        metaData = decodeBoundActionMetaData(body, serverManifest, formFieldPrefix);
+      } // We don't check for the simple $ACTION_ID_ case because form state actions
+      // are always bound to the state argument.
+
+    });
+
+    if (metaData === null) {
+      // Should be unreachable.
+      return Promise.resolve(null);
+    }
+
+    var referenceId = metaData.id;
+    return Promise.resolve(metaData.bound).then(function (bound) {
+      if (bound === null) {
+        // Should be unreachable because form state actions are always bound to the
+        // state argument.
+        return null;
+      } // The form action dispatch method is always bound to the initial state.
+      // But when comparing signatures, we compare to the original unbound action.
+      // Subtract one from the arity to account for this.
+
+
+      var boundArity = bound.length - 1;
+      return [actionResult, keyPath, referenceId, boundArity];
+    });
+  }
+
   function renderToReadableStream(model, webpackMap, options) {
-    var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined);
+    var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined, options ? options.environmentName : undefined);
 
     if (options && options.signal) {
       var signal = options.signal;
@@ -2878,7 +3650,10 @@
       pull: function (controller) {
         startFlowing(request, controller);
       },
-      cancel: function (reason) {}
+      cancel: function (reason) {
+        stopFlowing(request);
+        abort(request, reason);
+      }
     }, // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
     {
       highWaterMark: 0
@@ -2894,11 +3669,17 @@
     }
 
     var response = createResponse(webpackMap, '', body);
+    var root = getRoot(response);
     close(response);
-    return getRoot(response);
+    return root;
   }
 
+  exports.createClientModuleProxy = createClientModuleProxy;
+  exports.decodeAction = decodeAction;
+  exports.decodeFormState = decodeFormState;
   exports.decodeReply = decodeReply;
+  exports.registerClientReference = registerClientReference;
+  exports.registerServerReference = registerServerReference;
   exports.renderToReadableStream = renderToReadableStream;
 
 }));