react-server-dom-webpack 18.3.0-next-a8875eab7-20230310 → 18.3.0-next-f828bad38-20230313

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

@@ -124,7 +124,7 @@
       writtenBytes = 0;
     }
   }
-  function close(destination) {
+  function close$1(destination) {
     destination.close();
   }
   var textEncoder = new TextEncoder();
@@ -1154,779 +1154,779 @@
     return currentCache;
   }
 
-  var ContextRegistry = ReactSharedInternals.ContextRegistry;
-  function getOrCreateServerContext(globalName) {
-    if (!ContextRegistry[globalName]) {
-      ContextRegistry[globalName] = React.createServerContext(globalName, // $FlowFixMe function signature doesn't reflect the symbol value
-      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+  // in case they error.
+
+  var jsxPropsParents = new WeakMap();
+  var jsxChildrenParents = new WeakMap();
+
+  function isObjectPrototype(object) {
+    if (!object) {
+      return false;
     }
 
-    return ContextRegistry[globalName];
-  }
+    var ObjectPrototype = Object.prototype;
 
-  // Thenable<ReactClientValue>
+    if (object === ObjectPrototype) {
+      return true;
+    } // It might be an object from a different Realm which is
+    // still just a plain simple object.
 
-  var PENDING = 0;
-  var COMPLETED = 1;
-  var ABORTED = 3;
-  var ERRORED = 4;
-  var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-  var ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
 
-  function defaultErrorHandler(error) {
-    console['error'](error); // Don't transform to our wrapper
+    if (Object.getPrototypeOf(object)) {
+      return false;
+    }
+
+    var names = Object.getOwnPropertyNames(object);
+
+    for (var i = 0; i < names.length; i++) {
+      if (!(names[i] in ObjectPrototype)) {
+        return false;
+      }
+    }
+
+    return true;
   }
 
-  var OPEN = 0;
-  var CLOSING = 1;
-  var CLOSED = 2;
-  function createRequest(model, bundlerConfig, onError, context, identifierPrefix) {
-    if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) {
-      throw new Error('Currently React only supports one RSC renderer at a time.');
+  function isSimpleObject(object) {
+    if (!isObjectPrototype(Object.getPrototypeOf(object))) {
+      return false;
     }
 
-    ReactCurrentCache.current = DefaultCacheDispatcher;
-    var abortSet = new Set();
-    var pingedTasks = [];
-    var request = {
-      status: OPEN,
-      fatalError: null,
-      destination: null,
-      bundlerConfig: bundlerConfig,
-      cache: new Map(),
-      nextChunkId: 0,
-      pendingChunks: 0,
-      abortableTasks: abortSet,
-      pingedTasks: pingedTasks,
-      completedImportChunks: [],
-      completedJSONChunks: [],
-      completedErrorChunks: [],
-      writtenSymbols: new Map(),
-      writtenClientReferences: new Map(),
-      writtenServerReferences: new Map(),
-      writtenProviders: new Map(),
-      identifierPrefix: identifierPrefix || '',
-      identifierCount: 1,
-      onError: onError === undefined ? defaultErrorHandler : onError,
-      // $FlowFixMe[missing-this-annot]
-      toJSON: function (key, value) {
-        return resolveModelToJSON(request, this, key, value);
+    var names = Object.getOwnPropertyNames(object);
+
+    for (var i = 0; i < names.length; i++) {
+      var descriptor = Object.getOwnPropertyDescriptor(object, names[i]);
+
+      if (!descriptor) {
+        return false;
       }
-    };
-    request.pendingChunks++;
-    var rootContext = createRootContext(context);
-    var rootTask = createTask(request, model, rootContext, abortSet);
-    pingedTasks.push(rootTask);
-    return request;
-  }
 
-  function createRootContext(reqContext) {
-    return importServerContexts(reqContext);
-  }
+      if (!descriptor.enumerable) {
+        if ((names[i] === 'key' || names[i] === 'ref') && typeof descriptor.get === 'function') {
+          // React adds key and ref getters to props objects to issue warnings.
+          // Those getters will not be transferred to the client, but that's ok,
+          // so we'll special case them.
+          continue;
+        }
 
-  var POP = {}; // Used for DEV messages to keep track of which parent rendered some props,
-  // in case they error.
+        return false;
+      }
+    }
 
-  var jsxPropsParents = new WeakMap();
-  var jsxChildrenParents = new WeakMap();
+    return true;
+  }
+  function objectName(object) {
+    // $FlowFixMe[method-unbinding]
+    var name = Object.prototype.toString.call(object);
+    return name.replace(/^\[object (.*)\]$/, function (m, p0) {
+      return p0;
+    });
+  }
 
-  function serializeThenable(request, thenable) {
-    request.pendingChunks++;
-    var newTask = createTask(request, null, getActiveContext(), request.abortableTasks);
+  function describeKeyForErrorMessage(key) {
+    var encodedKey = JSON.stringify(key);
+    return '"' + key + '"' === encodedKey ? key : encodedKey;
+  }
 
-    switch (thenable.status) {
-      case 'fulfilled':
+  function describeValueForErrorMessage(value) {
+    switch (typeof value) {
+      case 'string':
         {
-          // We have the resolved value, we can go ahead and schedule it for serialization.
-          newTask.model = thenable.value;
-          pingTask(request, newTask);
-          return newTask.id;
+          return JSON.stringify(value.length <= 10 ? value : value.substr(0, 10) + '...');
         }
 
-      case 'rejected':
+      case 'object':
         {
-          var x = thenable.reason;
-          var digest = logRecoverableError(request, x);
+          if (isArray(value)) {
+            return '[...]';
+          }
 
-          {
-            var _getErrorMessageAndSt = getErrorMessageAndStackDev(x),
-                message = _getErrorMessageAndSt.message,
-                stack = _getErrorMessageAndSt.stack;
+          var name = objectName(value);
 
-            emitErrorChunkDev(request, newTask.id, digest, message, stack);
+          if (name === 'Object') {
+            return '{...}';
           }
 
-          return newTask.id;
+          return name;
         }
 
+      case 'function':
+        return 'function';
+
       default:
-        {
-          if (typeof thenable.status === 'string') {
-            // Only instrument the thenable if the status if not defined. If
-            // it's defined, but an unknown value, assume it's been instrumented by
-            // some custom userspace implementation. We treat it as "pending".
-            break;
-          }
+        // eslint-disable-next-line react-internal/safe-string-coercion
+        return String(value);
+    }
+  }
 
-          var pendingThenable = thenable;
-          pendingThenable.status = 'pending';
-          pendingThenable.then(function (fulfilledValue) {
-            if (thenable.status === 'pending') {
-              var fulfilledThenable = thenable;
-              fulfilledThenable.status = 'fulfilled';
-              fulfilledThenable.value = fulfilledValue;
-            }
-          }, function (error) {
-            if (thenable.status === 'pending') {
-              var rejectedThenable = thenable;
-              rejectedThenable.status = 'rejected';
-              rejectedThenable.reason = error;
-            }
-          });
-          break;
-        }
+  function describeElementType(type) {
+    if (typeof type === 'string') {
+      return type;
     }
 
-    thenable.then(function (value) {
-      newTask.model = value;
-      pingTask(request, newTask);
-    }, function (reason) {
-      newTask.status = ERRORED; // TODO: We should ideally do this inside performWork so it's scheduled
+    switch (type) {
+      case REACT_SUSPENSE_TYPE:
+        return 'Suspense';
 
-      var digest = logRecoverableError(request, reason);
+      case REACT_SUSPENSE_LIST_TYPE:
+        return 'SuspenseList';
+    }
 
-      {
-        var _getErrorMessageAndSt2 = getErrorMessageAndStackDev(reason),
-            _message = _getErrorMessageAndSt2.message,
-            _stack = _getErrorMessageAndSt2.stack;
+    if (typeof type === 'object') {
+      switch (type.$$typeof) {
+        case REACT_FORWARD_REF_TYPE:
+          return describeElementType(type.render);
 
-        emitErrorChunkDev(request, newTask.id, digest, _message, _stack);
-      }
+        case REACT_MEMO_TYPE:
+          return describeElementType(type.type);
 
-      if (request.destination !== null) {
-        flushCompletedChunks(request, request.destination);
-      }
-    });
-    return newTask.id;
-  }
+        case REACT_LAZY_TYPE:
+          {
+            var lazyComponent = type;
+            var payload = lazyComponent._payload;
+            var init = lazyComponent._init;
 
-  function readThenable(thenable) {
-    if (thenable.status === 'fulfilled') {
-      return thenable.value;
-    } else if (thenable.status === 'rejected') {
-      throw thenable.reason;
+            try {
+              // Lazy may contain any component type so we recursively resolve it.
+              return describeElementType(init(payload));
+            } catch (x) {}
+          }
+      }
     }
 
-    throw thenable;
+    return '';
   }
 
-  function createLazyWrapperAroundWakeable(wakeable) {
-    // This is a temporary fork of the `use` implementation until we accept
-    // promises everywhere.
-    var thenable = wakeable;
+  function describeObjectForErrorMessage(objectOrArray, expandedName) {
+    var objKind = objectName(objectOrArray);
 
-    switch (thenable.status) {
-      case 'fulfilled':
-      case 'rejected':
-        break;
+    if (objKind !== 'Object' && objKind !== 'Array') {
+      return objKind;
+    }
 
-      default:
-        {
-          if (typeof thenable.status === 'string') {
-            // Only instrument the thenable if the status if not defined. If
-            // it's defined, but an unknown value, assume it's been instrumented by
-            // some custom userspace implementation. We treat it as "pending".
-            break;
-          }
+    var str = '';
+    var start = -1;
+    var length = 0;
 
-          var pendingThenable = thenable;
-          pendingThenable.status = 'pending';
-          pendingThenable.then(function (fulfilledValue) {
-            if (thenable.status === 'pending') {
-              var fulfilledThenable = thenable;
-              fulfilledThenable.status = 'fulfilled';
-              fulfilledThenable.value = fulfilledValue;
-            }
-          }, function (error) {
-            if (thenable.status === 'pending') {
-              var rejectedThenable = thenable;
-              rejectedThenable.status = 'rejected';
-              rejectedThenable.reason = error;
-            }
-          });
-          break;
-        }
-    }
-
-    var lazyType = {
-      $$typeof: REACT_LAZY_TYPE,
-      _payload: thenable,
-      _init: readThenable
-    };
-    return lazyType;
-  }
+    if (isArray(objectOrArray)) {
+      if (jsxChildrenParents.has(objectOrArray)) {
+        // Print JSX Children
+        var type = jsxChildrenParents.get(objectOrArray);
+        str = '<' + describeElementType(type) + '>';
+        var array = objectOrArray;
 
-  function attemptResolveElement(request, type, key, ref, props, prevThenableState) {
-    if (ref !== null && ref !== undefined) {
-      // When the ref moves to the regular props object this will implicitly
-      // throw for functions. We could probably relax it to a DEV warning for other
-      // cases.
-      throw new Error('Refs cannot be used in Server Components, nor passed to Client Components.');
-    }
+        for (var i = 0; i < array.length; i++) {
+          var value = array[i];
+          var substr = void 0;
 
-    {
-      jsxPropsParents.set(props, type);
+          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) + '}';
+          }
 
-      if (typeof props.children === 'object' && props.children !== null) {
-        jsxChildrenParents.set(props.children, type);
-      }
-    }
+          if ('' + i === expandedName) {
+            start = str.length;
+            length = substr.length;
+            str += substr;
+          } else if (substr.length < 15 && str.length + substr.length < 40) {
+            str += substr;
+          } else {
+            str += '{...}';
+          }
+        }
 
-    if (typeof type === 'function') {
-      if (isClientReference(type)) {
-        // This is a reference to a Client Component.
-        return [REACT_ELEMENT_TYPE, type, key, props];
-      } // This is a server-side component.
+        str += '</' + describeElementType(type) + '>';
+      } else {
+        // Print Array
+        str = '[';
+        var _array = objectOrArray;
 
+        for (var _i = 0; _i < _array.length; _i++) {
+          if (_i > 0) {
+            str += ', ';
+          }
 
-      prepareToUseHooksForComponent(prevThenableState);
-      var result = type(props);
+          var _value = _array[_i];
 
-      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;
+          var _substr = void 0;
 
-        if (thenable.status === 'fulfilled') {
-          return thenable.value;
-        } // TODO: Once we accept Promises as children on the client, we can just return
-        // the thenable here.
+          if (typeof _value === 'object' && _value !== null) {
+            // $FlowFixMe[incompatible-call] found when upgrading Flow
+            _substr = describeObjectForErrorMessage(_value);
+          } else {
+            _substr = describeValueForErrorMessage(_value);
+          }
 
+          if ('' + _i === expandedName) {
+            start = str.length;
+            length = _substr.length;
+            str += _substr;
+          } else if (_substr.length < 10 && str.length + _substr.length < 40) {
+            str += _substr;
+          } else {
+            str += '...';
+          }
+        }
 
-        return createLazyWrapperAroundWakeable(result);
+        str += ']';
       }
+    } else {
+      if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
+        str = '<' + describeElementType(objectOrArray.type) + '/>';
+      } else if (jsxPropsParents.has(objectOrArray)) {
+        // Print JSX
+        var _type = jsxPropsParents.get(objectOrArray);
 
-      return result;
-    } else if (typeof type === 'string') {
-      // This is a host element. E.g. HTML.
-      return [REACT_ELEMENT_TYPE, type, key, props];
-    } else if (typeof type === 'symbol') {
-      if (type === REACT_FRAGMENT_TYPE) {
-        // 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;
-      } // 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.
+        str = '<' + (describeElementType(_type) || '...');
+        var object = objectOrArray;
+        var names = Object.keys(object);
 
+        for (var _i2 = 0; _i2 < names.length; _i2++) {
+          str += ' ';
+          var name = names[_i2];
+          str += describeKeyForErrorMessage(name) + '=';
+          var _value2 = object[name];
 
-      return [REACT_ELEMENT_TYPE, 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];
-      }
+          var _substr2 = void 0;
 
-      switch (type.$$typeof) {
-        case REACT_LAZY_TYPE:
-          {
-            var payload = type._payload;
-            var init = type._init;
-            var wrappedType = init(payload);
-            return attemptResolveElement(request, wrappedType, key, ref, props, prevThenableState);
+          if (name === expandedName && typeof _value2 === 'object' && _value2 !== null) {
+            // $FlowFixMe[incompatible-call] found when upgrading Flow
+            _substr2 = describeObjectForErrorMessage(_value2);
+          } else {
+            _substr2 = describeValueForErrorMessage(_value2);
           }
 
-        case REACT_FORWARD_REF_TYPE:
-          {
-            var render = type.render;
-            prepareToUseHooksForComponent(prevThenableState);
-            return render(props, undefined);
+          if (typeof _value2 !== 'string') {
+            _substr2 = '{' + _substr2 + '}';
           }
 
-        case REACT_MEMO_TYPE:
-          {
-            return attemptResolveElement(request, type.type, key, ref, props, prevThenableState);
+          if (name === expandedName) {
+            start = str.length;
+            length = _substr2.length;
+            str += _substr2;
+          } else if (_substr2.length < 10 && str.length + _substr2.length < 40) {
+            str += _substr2;
+          } else {
+            str += '...';
           }
+        }
 
-        case REACT_PROVIDER_TYPE:
-          {
-            pushProvider(type._context, props.value);
+        str += '>';
+      } else {
+        // Print Object
+        str = '{';
+        var _object = objectOrArray;
 
-            {
-              var extraKeys = Object.keys(props).filter(function (value) {
-                if (value === 'children' || value === 'value') {
-                  return false;
-                }
+        var _names = Object.keys(_object);
 
-                return true;
-              });
+        for (var _i3 = 0; _i3 < _names.length; _i3++) {
+          if (_i3 > 0) {
+            str += ', ';
+          }
 
-              if (extraKeys.length !== 0) {
-                error('ServerContext can only have a value prop and children. Found: %s', JSON.stringify(extraKeys));
-              }
-            }
+          var _name = _names[_i3];
+          str += describeKeyForErrorMessage(_name) + ': ';
+          var _value3 = _object[_name];
 
-            return [REACT_ELEMENT_TYPE, type, key, // Rely on __popProvider being serialized last to pop the provider.
-            {
-              value: props.value,
-              children: props.children,
-              __pop: POP
-            }];
+          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) {
+            start = str.length;
+            length = _substr3.length;
+            str += _substr3;
+          } else if (_substr3.length < 10 && str.length + _substr3.length < 40) {
+            str += _substr3;
+          } else {
+            str += '...';
           }
+        }
+
+        str += '}';
       }
     }
 
-    throw new Error("Unsupported Server Component type: " + describeValueForErrorMessage(type));
-  }
-
-  function pingTask(request, task) {
-    var pingedTasks = request.pingedTasks;
-    pingedTasks.push(task);
+    if (expandedName === undefined) {
+      return str;
+    }
 
-    if (pingedTasks.length === 1) {
-      scheduleWork(function () {
-        return performWork(request);
-      });
+    if (start > -1 && length > 0) {
+      var highlight = ' '.repeat(start) + '^'.repeat(length);
+      return '\n  ' + str + '\n  ' + highlight;
     }
-  }
 
-  function createTask(request, model, context, abortSet) {
-    var id = request.nextChunkId++;
-    var task = {
-      id: id,
-      status: PENDING,
-      model: model,
-      context: context,
-      ping: function () {
-        return pingTask(request, task);
-      },
-      thenableState: null
-    };
-    abortSet.add(task);
-    return task;
+    return '\n  ' + str;
   }
 
-  function serializeByValueID(id) {
-    return '$' + id.toString(16);
-  }
-
-  function serializeLazyID(id) {
-    return '$L' + id.toString(16);
-  }
-
-  function serializePromiseID(id) {
-    return '$@' + id.toString(16);
-  }
+  var ContextRegistry = ReactSharedInternals.ContextRegistry;
+  function getOrCreateServerContext(globalName) {
+    if (!ContextRegistry[globalName]) {
+      ContextRegistry[globalName] = React.createServerContext(globalName, // $FlowFixMe function signature doesn't reflect the symbol value
+      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+    }
 
-  function serializeServerReferenceID(id) {
-    return '$F' + id.toString(16);
+    return ContextRegistry[globalName];
   }
 
-  function serializeSymbolReference(name) {
-    return '$S' + name;
-  }
+  // Thenable<ReactClientValue>
 
-  function serializeProviderReference(name) {
-    return '$P' + name;
-  }
+  var PENDING$1 = 0;
+  var COMPLETED = 1;
+  var ABORTED = 3;
+  var ERRORED$1 = 4;
+  var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+  var ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
 
-  function serializeUndefined() {
-    return '$undefined';
+  function defaultErrorHandler(error) {
+    console['error'](error); // Don't transform to our wrapper
   }
 
-  function serializeClientReference(request, parent, key, 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 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
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeLazyID(existingId);
-      }
-
-      return serializeByValueID(existingId);
+  var OPEN = 0;
+  var CLOSING = 1;
+  var CLOSED = 2;
+  function createRequest(model, bundlerConfig, onError, context, identifierPrefix) {
+    if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) {
+      throw new Error('Currently React only supports one RSC renderer at a time.');
     }
 
-    try {
-      var clientReferenceMetadata = resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
-      request.pendingChunks++;
-      var importId = request.nextChunkId++;
-      emitImportChunk(request, importId, clientReferenceMetadata);
-      writtenClientReferences.set(clientReferenceKey, importId);
-
-      if (parent[0] === REACT_ELEMENT_TYPE && key === '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
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeLazyID(importId);
-      }
-
-      return serializeByValueID(importId);
-    } catch (x) {
-      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);
+    ReactCurrentCache.current = DefaultCacheDispatcher;
+    var abortSet = new Set();
+    var pingedTasks = [];
+    var request = {
+      status: OPEN,
+      fatalError: null,
+      destination: null,
+      bundlerConfig: bundlerConfig,
+      cache: new Map(),
+      nextChunkId: 0,
+      pendingChunks: 0,
+      abortableTasks: abortSet,
+      pingedTasks: pingedTasks,
+      completedImportChunks: [],
+      completedJSONChunks: [],
+      completedErrorChunks: [],
+      writtenSymbols: new Map(),
+      writtenClientReferences: new Map(),
+      writtenServerReferences: new Map(),
+      writtenProviders: new Map(),
+      identifierPrefix: identifierPrefix || '',
+      identifierCount: 1,
+      onError: onError === undefined ? defaultErrorHandler : onError,
+      // $FlowFixMe[missing-this-annot]
+      toJSON: function (key, value) {
+        return resolveModelToJSON(request, this, key, value);
       }
-
-      return serializeByValueID(errorId);
-    }
-  }
-
-  function serializeServerReference(request, parent, key, serverReference) {
-    var writtenServerReferences = request.writtenServerReferences;
-    var existingId = writtenServerReferences.get(serverReference);
-
-    if (existingId !== undefined) {
-      return serializeServerReferenceID(existingId);
-    }
-
-    var bound = getServerReferenceBoundArguments(request.bundlerConfig, serverReference);
-    var serverReferenceMetadata = {
-      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);
-    writtenServerReferences.set(serverReference, metadataId);
-    return serializeServerReferenceID(metadataId);
+    var rootContext = createRootContext(context);
+    var rootTask = createTask(request, model, rootContext, abortSet);
+    pingedTasks.push(rootTask);
+    return request;
   }
 
-  function escapeStringValue(value) {
-    if (value[0] === '$') {
-      // We need to escape $ or @ prefixed strings since we use those to encode
-      // references to IDs and as special symbol values.
-      return '$' + value;
-    } else {
-      return value;
-    }
+  function createRootContext(reqContext) {
+    return importServerContexts(reqContext);
   }
 
-  function isObjectPrototype(object) {
-    if (!object) {
-      return false;
-    }
+  var POP = {};
 
-    var ObjectPrototype = Object.prototype;
+  function serializeThenable(request, thenable) {
+    request.pendingChunks++;
+    var newTask = createTask(request, null, getActiveContext(), request.abortableTasks);
 
-    if (object === ObjectPrototype) {
-      return true;
-    } // It might be an object from a different Realm which is
-    // still just a plain simple object.
+    switch (thenable.status) {
+      case 'fulfilled':
+        {
+          // We have the resolved value, we can go ahead and schedule it for serialization.
+          newTask.model = thenable.value;
+          pingTask(request, newTask);
+          return newTask.id;
+        }
 
+      case 'rejected':
+        {
+          var x = thenable.reason;
+          var digest = logRecoverableError(request, x);
 
-    if (Object.getPrototypeOf(object)) {
-      return false;
-    }
+          {
+            var _getErrorMessageAndSt = getErrorMessageAndStackDev(x),
+                message = _getErrorMessageAndSt.message,
+                stack = _getErrorMessageAndSt.stack;
 
-    var names = Object.getOwnPropertyNames(object);
+            emitErrorChunkDev(request, newTask.id, digest, message, stack);
+          }
 
-    for (var i = 0; i < names.length; i++) {
-      if (!(names[i] in ObjectPrototype)) {
-        return false;
-      }
-    }
+          return newTask.id;
+        }
 
-    return true;
-  }
+      default:
+        {
+          if (typeof thenable.status === 'string') {
+            // Only instrument the thenable if the status if not defined. If
+            // it's defined, but an unknown value, assume it's been instrumented by
+            // some custom userspace implementation. We treat it as "pending".
+            break;
+          }
 
-  function isSimpleObject(object) {
-    if (!isObjectPrototype(Object.getPrototypeOf(object))) {
-      return false;
+          var pendingThenable = thenable;
+          pendingThenable.status = 'pending';
+          pendingThenable.then(function (fulfilledValue) {
+            if (thenable.status === 'pending') {
+              var fulfilledThenable = thenable;
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          }, function (error) {
+            if (thenable.status === 'pending') {
+              var rejectedThenable = thenable;
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          });
+          break;
+        }
     }
 
-    var names = Object.getOwnPropertyNames(object);
+    thenable.then(function (value) {
+      newTask.model = value;
+      pingTask(request, newTask);
+    }, function (reason) {
+      newTask.status = ERRORED$1; // TODO: We should ideally do this inside performWork so it's scheduled
 
-    for (var i = 0; i < names.length; i++) {
-      var descriptor = Object.getOwnPropertyDescriptor(object, names[i]);
+      var digest = logRecoverableError(request, reason);
 
-      if (!descriptor) {
-        return false;
-      }
+      {
+        var _getErrorMessageAndSt2 = getErrorMessageAndStackDev(reason),
+            _message = _getErrorMessageAndSt2.message,
+            _stack = _getErrorMessageAndSt2.stack;
 
-      if (!descriptor.enumerable) {
-        if ((names[i] === 'key' || names[i] === 'ref') && typeof descriptor.get === 'function') {
-          // React adds key and ref getters to props objects to issue warnings.
-          // Those getters will not be transferred to the client, but that's ok,
-          // so we'll special case them.
-          continue;
-        }
+        emitErrorChunkDev(request, newTask.id, digest, _message, _stack);
+      }
 
-        return false;
+      if (request.destination !== null) {
+        flushCompletedChunks(request, request.destination);
       }
+    });
+    return newTask.id;
+  }
+
+  function readThenable(thenable) {
+    if (thenable.status === 'fulfilled') {
+      return thenable.value;
+    } else if (thenable.status === 'rejected') {
+      throw thenable.reason;
     }
 
-    return true;
+    throw thenable;
   }
 
-  function objectName(object) {
-    // $FlowFixMe[method-unbinding]
-    var name = Object.prototype.toString.call(object);
-    return name.replace(/^\[object (.*)\]$/, function (m, p0) {
-      return p0;
-    });
-  }
-
-  function describeKeyForErrorMessage(key) {
-    var encodedKey = JSON.stringify(key);
-    return '"' + key + '"' === encodedKey ? key : encodedKey;
-  }
+  function createLazyWrapperAroundWakeable(wakeable) {
+    // This is a temporary fork of the `use` implementation until we accept
+    // promises everywhere.
+    var thenable = wakeable;
 
-  function describeValueForErrorMessage(value) {
-    switch (typeof value) {
-      case 'string':
-        {
-          return JSON.stringify(value.length <= 10 ? value : value.substr(0, 10) + '...');
-        }
+    switch (thenable.status) {
+      case 'fulfilled':
+      case 'rejected':
+        break;
 
-      case 'object':
+      default:
         {
-          if (isArray(value)) {
-            return '[...]';
-          }
-
-          var name = objectName(value);
-
-          if (name === 'Object') {
-            return '{...}';
+          if (typeof thenable.status === 'string') {
+            // Only instrument the thenable if the status if not defined. If
+            // it's defined, but an unknown value, assume it's been instrumented by
+            // some custom userspace implementation. We treat it as "pending".
+            break;
           }
 
-          return name;
+          var pendingThenable = thenable;
+          pendingThenable.status = 'pending';
+          pendingThenable.then(function (fulfilledValue) {
+            if (thenable.status === 'pending') {
+              var fulfilledThenable = thenable;
+              fulfilledThenable.status = 'fulfilled';
+              fulfilledThenable.value = fulfilledValue;
+            }
+          }, function (error) {
+            if (thenable.status === 'pending') {
+              var rejectedThenable = thenable;
+              rejectedThenable.status = 'rejected';
+              rejectedThenable.reason = error;
+            }
+          });
+          break;
         }
-
-      case 'function':
-        return 'function';
-
-      default:
-        // eslint-disable-next-line react-internal/safe-string-coercion
-        return String(value);
     }
+
+    var lazyType = {
+      $$typeof: REACT_LAZY_TYPE,
+      _payload: thenable,
+      _init: readThenable
+    };
+    return lazyType;
   }
 
-  function describeElementType(type) {
-    if (typeof type === 'string') {
-      return type;
+  function attemptResolveElement(request, type, key, ref, props, prevThenableState) {
+    if (ref !== null && ref !== undefined) {
+      // When the ref moves to the regular props object this will implicitly
+      // throw for functions. We could probably relax it to a DEV warning for other
+      // cases.
+      throw new Error('Refs cannot be used in Server Components, nor passed to Client Components.');
     }
 
-    switch (type) {
-      case REACT_SUSPENSE_TYPE:
-        return 'Suspense';
+    {
+      jsxPropsParents.set(props, type);
 
-      case REACT_SUSPENSE_LIST_TYPE:
-        return 'SuspenseList';
+      if (typeof props.children === 'object' && props.children !== null) {
+        jsxChildrenParents.set(props.children, type);
+      }
     }
 
-    if (typeof type === 'object') {
-      switch (type.$$typeof) {
-        case REACT_FORWARD_REF_TYPE:
-          return describeElementType(type.render);
+    if (typeof type === 'function') {
+      if (isClientReference(type)) {
+        // This is a reference to a Client Component.
+        return [REACT_ELEMENT_TYPE, type, key, props];
+      } // This is a server-side component.
 
-        case REACT_MEMO_TYPE:
-          return describeElementType(type.type);
 
-        case REACT_LAZY_TYPE:
-          {
-            var lazyComponent = type;
-            var payload = lazyComponent._payload;
-            var init = lazyComponent._init;
+      prepareToUseHooksForComponent(prevThenableState);
+      var result = type(props);
 
-            try {
-              // Lazy may contain any component type so we recursively resolve it.
-              return describeElementType(init(payload));
-            } catch (x) {}
-          }
-      }
-    }
+      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;
 
-    return '';
-  }
+        if (thenable.status === 'fulfilled') {
+          return thenable.value;
+        } // TODO: Once we accept Promises as children on the client, we can just return
+        // the thenable here.
 
-  function describeObjectForErrorMessage(objectOrArray, expandedName) {
-    var objKind = objectName(objectOrArray);
 
-    if (objKind !== 'Object' && objKind !== 'Array') {
-      return objKind;
-    }
+        return createLazyWrapperAroundWakeable(result);
+      }
 
-    var str = '';
-    var start = -1;
-    var length = 0;
+      return result;
+    } else if (typeof type === 'string') {
+      // This is a host element. E.g. HTML.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    } else if (typeof type === 'symbol') {
+      if (type === REACT_FRAGMENT_TYPE) {
+        // 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;
+      } // 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.
 
-    if (isArray(objectOrArray)) {
-      if (jsxChildrenParents.has(objectOrArray)) {
-        // Print JSX Children
-        var type = jsxChildrenParents.get(objectOrArray);
-        str = '<' + describeElementType(type) + '>';
-        var array = objectOrArray;
 
-        for (var i = 0; i < array.length; i++) {
-          var value = array[i];
-          var substr = void 0;
+      return [REACT_ELEMENT_TYPE, 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];
+      }
 
-          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) + '}';
+      switch (type.$$typeof) {
+        case REACT_LAZY_TYPE:
+          {
+            var payload = type._payload;
+            var init = type._init;
+            var wrappedType = init(payload);
+            return attemptResolveElement(request, wrappedType, key, ref, props, prevThenableState);
           }
 
-          if ('' + i === expandedName) {
-            start = str.length;
-            length = substr.length;
-            str += substr;
-          } else if (substr.length < 15 && str.length + substr.length < 40) {
-            str += substr;
-          } else {
-            str += '{...}';
+        case REACT_FORWARD_REF_TYPE:
+          {
+            var render = type.render;
+            prepareToUseHooksForComponent(prevThenableState);
+            return render(props, undefined);
           }
-        }
-
-        str += '</' + describeElementType(type) + '>';
-      } else {
-        // Print Array
-        str = '[';
-        var _array = objectOrArray;
 
-        for (var _i = 0; _i < _array.length; _i++) {
-          if (_i > 0) {
-            str += ', ';
+        case REACT_MEMO_TYPE:
+          {
+            return attemptResolveElement(request, type.type, key, ref, props, prevThenableState);
           }
 
-          var _value = _array[_i];
+        case REACT_PROVIDER_TYPE:
+          {
+            pushProvider(type._context, props.value);
 
-          var _substr = void 0;
+            {
+              var extraKeys = Object.keys(props).filter(function (value) {
+                if (value === 'children' || value === 'value') {
+                  return false;
+                }
 
-          if (typeof _value === 'object' && _value !== null) {
-            // $FlowFixMe[incompatible-call] found when upgrading Flow
-            _substr = describeObjectForErrorMessage(_value);
-          } else {
-            _substr = describeValueForErrorMessage(_value);
-          }
+                return true;
+              });
 
-          if ('' + _i === expandedName) {
-            start = str.length;
-            length = _substr.length;
-            str += _substr;
-          } else if (_substr.length < 10 && str.length + _substr.length < 40) {
-            str += _substr;
-          } else {
-            str += '...';
-          }
-        }
+              if (extraKeys.length !== 0) {
+                error('ServerContext can only have a value prop and children. Found: %s', JSON.stringify(extraKeys));
+              }
+            }
 
-        str += ']';
+            return [REACT_ELEMENT_TYPE, type, key, // Rely on __popProvider being serialized last to pop the provider.
+            {
+              value: props.value,
+              children: props.children,
+              __pop: POP
+            }];
+          }
       }
-    } else {
-      if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
-        str = '<' + describeElementType(objectOrArray.type) + '/>';
-      } else if (jsxPropsParents.has(objectOrArray)) {
-        // Print JSX
-        var _type = jsxPropsParents.get(objectOrArray);
+    }
 
-        str = '<' + (describeElementType(_type) || '...');
-        var object = objectOrArray;
-        var names = Object.keys(object);
+    throw new Error("Unsupported Server Component type: " + describeValueForErrorMessage(type));
+  }
 
-        for (var _i2 = 0; _i2 < names.length; _i2++) {
-          str += ' ';
-          var name = names[_i2];
-          str += describeKeyForErrorMessage(name) + '=';
-          var _value2 = object[name];
+  function pingTask(request, task) {
+    var pingedTasks = request.pingedTasks;
+    pingedTasks.push(task);
 
-          var _substr2 = void 0;
+    if (pingedTasks.length === 1) {
+      scheduleWork(function () {
+        return performWork(request);
+      });
+    }
+  }
 
-          if (name === expandedName && typeof _value2 === 'object' && _value2 !== null) {
-            // $FlowFixMe[incompatible-call] found when upgrading Flow
-            _substr2 = describeObjectForErrorMessage(_value2);
-          } else {
-            _substr2 = describeValueForErrorMessage(_value2);
-          }
+  function createTask(request, model, context, abortSet) {
+    var id = request.nextChunkId++;
+    var task = {
+      id: id,
+      status: PENDING$1,
+      model: model,
+      context: context,
+      ping: function () {
+        return pingTask(request, task);
+      },
+      thenableState: null
+    };
+    abortSet.add(task);
+    return task;
+  }
 
-          if (typeof _value2 !== 'string') {
-            _substr2 = '{' + _substr2 + '}';
-          }
+  function serializeByValueID(id) {
+    return '$' + id.toString(16);
+  }
 
-          if (name === expandedName) {
-            start = str.length;
-            length = _substr2.length;
-            str += _substr2;
-          } else if (_substr2.length < 10 && str.length + _substr2.length < 40) {
-            str += _substr2;
-          } else {
-            str += '...';
-          }
-        }
+  function serializeLazyID(id) {
+    return '$L' + id.toString(16);
+  }
 
-        str += '>';
-      } else {
-        // Print Object
-        str = '{';
-        var _object = objectOrArray;
+  function serializePromiseID(id) {
+    return '$@' + id.toString(16);
+  }
 
-        var _names = Object.keys(_object);
+  function serializeServerReferenceID(id) {
+    return '$F' + id.toString(16);
+  }
 
-        for (var _i3 = 0; _i3 < _names.length; _i3++) {
-          if (_i3 > 0) {
-            str += ', ';
-          }
+  function serializeSymbolReference(name) {
+    return '$S' + name;
+  }
 
-          var _name = _names[_i3];
-          str += describeKeyForErrorMessage(_name) + ': ';
-          var _value3 = _object[_name];
+  function serializeProviderReference(name) {
+    return '$P' + name;
+  }
 
-          var _substr3 = void 0;
+  function serializeUndefined() {
+    return '$undefined';
+  }
 
-          if (typeof _value3 === 'object' && _value3 !== null) {
-            // $FlowFixMe[incompatible-call] found when upgrading Flow
-            _substr3 = describeObjectForErrorMessage(_value3);
-          } else {
-            _substr3 = describeValueForErrorMessage(_value3);
-          }
+  function serializeClientReference(request, parent, key, clientReference) {
+    var clientReferenceKey = getClientReferenceKey(clientReference);
+    var writtenClientReferences = request.writtenClientReferences;
+    var existingId = writtenClientReferences.get(clientReferenceKey);
 
-          if (_name === expandedName) {
-            start = str.length;
-            length = _substr3.length;
-            str += _substr3;
-          } else if (_substr3.length < 10 && str.length + _substr3.length < 40) {
-            str += _substr3;
-          } else {
-            str += '...';
-          }
-        }
+    if (existingId !== undefined) {
+      if (parent[0] === REACT_ELEMENT_TYPE && key === '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
+        // on this component rather than its parent until the code has
+        // loaded.
+        return serializeLazyID(existingId);
+      }
+
+      return serializeByValueID(existingId);
+    }
+
+    try {
+      var clientReferenceMetadata = resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
+      request.pendingChunks++;
+      var importId = request.nextChunkId++;
+      emitImportChunk(request, importId, clientReferenceMetadata);
+      writtenClientReferences.set(clientReferenceKey, importId);
+
+      if (parent[0] === REACT_ELEMENT_TYPE && key === '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
+        // on this component rather than its parent until the code has
+        // loaded.
+        return serializeLazyID(importId);
+      }
+
+      return serializeByValueID(importId);
+    } catch (x) {
+      request.pendingChunks++;
+      var errorId = request.nextChunkId++;
+      var digest = logRecoverableError(request, x);
 
-        str += '}';
+      {
+        var _getErrorMessageAndSt3 = getErrorMessageAndStackDev(x),
+            message = _getErrorMessageAndSt3.message,
+            stack = _getErrorMessageAndSt3.stack;
+
+        emitErrorChunkDev(request, errorId, digest, message, stack);
       }
-    }
 
-    if (expandedName === undefined) {
-      return str;
+      return serializeByValueID(errorId);
     }
+  }
 
-    if (start > -1 && length > 0) {
-      var highlight = ' '.repeat(start) + '^'.repeat(length);
-      return '\n  ' + str + '\n  ' + highlight;
+  function serializeServerReference(request, parent, key, serverReference) {
+    var writtenServerReferences = request.writtenServerReferences;
+    var existingId = writtenServerReferences.get(serverReference);
+
+    if (existingId !== undefined) {
+      return serializeServerReferenceID(existingId);
     }
 
-    return '\n  ' + str;
+    var bound = getServerReferenceBoundArguments(request.bundlerConfig, serverReference);
+    var serverReferenceMetadata = {
+      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);
+    writtenServerReferences.set(serverReference, metadataId);
+    return serializeServerReferenceID(metadataId);
+  }
+
+  function escapeStringValue(value) {
+    if (value[0] === '$') {
+      // We need to escape $ prefixed strings since we use those to encode
+      // references to IDs and as special symbol values.
+      return '$' + value;
+    } else {
+      return value;
+    }
   }
 
   var insideContextProps = null;
@@ -2230,7 +2230,7 @@
   }
 
   function retryTask(request, task) {
-    if (task.status !== PENDING) {
+    if (task.status !== PENDING$1) {
       // We completed this by other means before we had a chance to retry it.
       return;
     }
@@ -2285,7 +2285,7 @@
         return;
       } else {
         request.abortableTasks.delete(task);
-        task.status = ERRORED;
+        task.status = ERRORED$1;
         var digest = logRecoverableError(request, x);
 
         {
@@ -2403,7 +2403,7 @@
 
     if (request.pendingChunks === 0) {
       // We're done.
-      close(destination);
+      close$1(destination);
     }
   }
 
@@ -2496,6 +2496,506 @@
     return rootContextSnapshot;
   }
 
+  // eslint-disable-next-line no-unused-vars
+  function resolveServerReference(bundlerConfig, id) {
+    // This needs to return async: true if it's an async module.
+    return bundlerConfig[id];
+  } // 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 ignoreReject() {// We rely on rejected promises to be handled by another listener.
+  } // Start preloading the modules since we might need them soon.
+  // This function doesn't suspend.
+
+
+  function preloadModule(metadata) {
+    var chunks = metadata.chunks;
+    var promises = [];
+
+    for (var i = 0; i < chunks.length; i++) {
+      var chunkId = chunks[i];
+      var entry = chunkCache.get(chunkId);
+
+      if (entry === undefined) {
+        var thenable = __webpack_chunk_load__(chunkId);
+
+        promises.push(thenable); // $FlowFixMe[method-unbinding]
+
+        var resolve = chunkCache.set.bind(chunkCache, chunkId, null);
+        thenable.then(resolve, ignoreReject);
+        chunkCache.set(chunkId, thenable);
+      } else if (entry !== null) {
+        promises.push(entry);
+      }
+    }
+
+    if (metadata.async) {
+      var existingPromise = asyncModuleCache.get(metadata.id);
+
+      if (existingPromise) {
+        if (existingPromise.status === 'fulfilled') {
+          return null;
+        }
+
+        return existingPromise;
+      } else {
+        var modulePromise = Promise.all(promises).then(function () {
+          return __webpack_require__(metadata.id);
+        });
+        modulePromise.then(function (value) {
+          var fulfilledThenable = modulePromise;
+          fulfilledThenable.status = 'fulfilled';
+          fulfilledThenable.value = value;
+        }, function (reason) {
+          var rejectedThenable = modulePromise;
+          rejectedThenable.status = 'rejected';
+          rejectedThenable.reason = reason;
+        });
+        asyncModuleCache.set(metadata.id, modulePromise);
+        return modulePromise;
+      }
+    } else if (promises.length > 0) {
+      return Promise.all(promises);
+    } else {
+      return null;
+    }
+  } // Actually require the module or suspend if it's not yet ready.
+  // 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);
+
+      if (promise.status === 'fulfilled') {
+        moduleExports = promise.value;
+      } else {
+        throw promise.reason;
+      }
+    } else {
+      moduleExports = __webpack_require__(metadata.id);
+    }
+
+    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 === '') {
+      // 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];
+  }
+
+  // The server acts as a Client of itself when resolving Server References.
+  var PENDING = 'pending';
+  var BLOCKED = 'blocked';
+  var RESOLVED_MODEL = 'resolved_model';
+  var INITIALIZED = 'fulfilled';
+  var ERRORED = 'rejected'; // $FlowFixMe[missing-this-annot]
+
+  function Chunk(status, value, reason, response) {
+    this.status = status;
+    this.value = value;
+    this.reason = reason;
+    this._response = response;
+  } // We subclass Promise.prototype so that we get other methods like .catch
+
+
+  Chunk.prototype = Object.create(Promise.prototype); // TODO: This doesn't return a new Promise chain unlike the real .then
+
+  Chunk.prototype.then = function (resolve, reject) {
+    var chunk = this; // If we have resolved content, we try to initialize it first which
+    // might put us back into one of the other states.
+
+    switch (chunk.status) {
+      case RESOLVED_MODEL:
+        initializeModelChunk(chunk);
+        break;
+    } // The status might have changed after initialization.
+
+
+    switch (chunk.status) {
+      case INITIALIZED:
+        resolve(chunk.value);
+        break;
+
+      case PENDING:
+      case BLOCKED:
+        if (resolve) {
+          if (chunk.value === null) {
+            chunk.value = [];
+          }
+
+          chunk.value.push(resolve);
+        }
+
+        if (reject) {
+          if (chunk.reason === null) {
+            chunk.reason = [];
+          }
+
+          chunk.reason.push(reject);
+        }
+
+        break;
+
+      default:
+        reject(chunk.reason);
+        break;
+    }
+  };
+
+  function getRoot(response) {
+    var chunk = getChunk(response, 0);
+    return chunk;
+  }
+
+  function createPendingChunk(response) {
+    // $FlowFixMe Flow doesn't support functions as constructors
+    return new Chunk(PENDING, null, null, response);
+  }
+
+  function wakeChunk(listeners, value) {
+    for (var i = 0; i < listeners.length; i++) {
+      var listener = listeners[i];
+      listener(value);
+    }
+  }
+
+  function wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners) {
+    switch (chunk.status) {
+      case INITIALIZED:
+        wakeChunk(resolveListeners, chunk.value);
+        break;
+
+      case PENDING:
+      case BLOCKED:
+        chunk.value = resolveListeners;
+        chunk.reason = rejectListeners;
+        break;
+
+      case ERRORED:
+        if (rejectListeners) {
+          wakeChunk(rejectListeners, chunk.reason);
+        }
+
+        break;
+    }
+  }
+
+  function triggerErrorOnChunk(chunk, error) {
+    if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
+      // We already resolved. We didn't expect to see this.
+      return;
+    }
+
+    var listeners = chunk.reason;
+    var erroredChunk = chunk;
+    erroredChunk.status = ERRORED;
+    erroredChunk.reason = error;
+
+    if (listeners !== null) {
+      wakeChunk(listeners, error);
+    }
+  }
+
+  function createResolvedModelChunk(response, value) {
+    // $FlowFixMe Flow doesn't support functions as constructors
+    return new Chunk(RESOLVED_MODEL, value, null, response);
+  }
+
+  function resolveModelChunk(chunk, value) {
+    if (chunk.status !== PENDING) {
+      // We already resolved. We didn't expect to see this.
+      return;
+    }
+
+    var resolveListeners = chunk.value;
+    var rejectListeners = chunk.reason;
+    var resolvedChunk = chunk;
+    resolvedChunk.status = RESOLVED_MODEL;
+    resolvedChunk.value = value;
+
+    if (resolveListeners !== null) {
+      // This is unfortunate that we're reading this eagerly if
+      // we already have listeners attached since they might no
+      // longer be rendered or might not be the highest pri.
+      initializeModelChunk(resolvedChunk); // The status might have changed after initialization.
+
+      wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
+    }
+  }
+
+  function bindArgs(fn, args) {
+    return fn.bind.apply(fn, [null].concat(args));
+  }
+
+  function loadServerReference(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.
+
+    var preloadPromise = preloadModule(serverReference);
+    var promise;
+
+    if (bound) {
+      promise = Promise.all([bound, preloadPromise]).then(function (_ref) {
+        var args = _ref[0];
+        return bindArgs(requireModule(serverReference), args);
+      });
+    } else {
+      if (preloadPromise) {
+        promise = Promise.resolve(preloadPromise).then(function () {
+          return requireModule(serverReference);
+        });
+      } else {
+        // Synchronously available
+        return requireModule(serverReference);
+      }
+    }
+
+    promise.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk)); // We need a placeholder value that will be replaced later.
+
+    return null;
+  }
+
+  var initializingChunk = null;
+  var initializingChunkBlockedModel = null;
+
+  function initializeModelChunk(chunk) {
+    var prevChunk = initializingChunk;
+    var prevBlocked = initializingChunkBlockedModel;
+    initializingChunk = chunk;
+    initializingChunkBlockedModel = null;
+
+    try {
+      var value = JSON.parse(chunk.value, chunk._response._fromJSON);
+
+      if (initializingChunkBlockedModel !== null && initializingChunkBlockedModel.deps > 0) {
+        initializingChunkBlockedModel.value = value; // We discovered new dependencies on modules that are not yet resolved.
+        // We have to go the BLOCKED state until they're resolved.
+
+        var blockedChunk = chunk;
+        blockedChunk.status = BLOCKED;
+        blockedChunk.value = null;
+        blockedChunk.reason = null;
+      } else {
+        var initializedChunk = chunk;
+        initializedChunk.status = INITIALIZED;
+        initializedChunk.value = value;
+      }
+    } catch (error) {
+      var erroredChunk = chunk;
+      erroredChunk.status = ERRORED;
+      erroredChunk.reason = error;
+    } finally {
+      initializingChunk = prevChunk;
+      initializingChunkBlockedModel = prevBlocked;
+    }
+  } // Report that any missing chunks in the model is now going to throw this
+  // error upon read. Also notify any pending promises.
+
+
+  function reportGlobalError(response, error) {
+    response._chunks.forEach(function (chunk) {
+      // If this chunk was already resolved or errored, it won't
+      // trigger an error but if it wasn't then we need to
+      // because we won't be getting any new data to resolve it.
+      if (chunk.status === PENDING) {
+        triggerErrorOnChunk(chunk, error);
+      }
+    });
+  }
+
+  function getChunk(response, id) {
+    var chunks = response._chunks;
+    var chunk = chunks.get(id);
+
+    if (!chunk) {
+      chunk = createPendingChunk(response);
+      chunks.set(id, chunk);
+    }
+
+    return chunk;
+  }
+
+  function createModelResolver(chunk, parentObject, key) {
+    var blocked;
+
+    if (initializingChunkBlockedModel) {
+      blocked = initializingChunkBlockedModel;
+      blocked.deps++;
+    } else {
+      blocked = initializingChunkBlockedModel = {
+        deps: 1,
+        value: null
+      };
+    }
+
+    return function (value) {
+      parentObject[key] = value;
+      blocked.deps--;
+
+      if (blocked.deps === 0) {
+        if (chunk.status !== BLOCKED) {
+          return;
+        }
+
+        var resolveListeners = chunk.value;
+        var initializedChunk = chunk;
+        initializedChunk.status = INITIALIZED;
+        initializedChunk.value = blocked.value;
+
+        if (resolveListeners !== null) {
+          wakeChunk(resolveListeners, blocked.value);
+        }
+      }
+    };
+  }
+
+  function createModelReject(chunk) {
+    return function (error) {
+      return triggerErrorOnChunk(chunk, error);
+    };
+  }
+
+  function parseModelString(response, parentObject, key, value) {
+    if (value[0] === '$') {
+      switch (value[1]) {
+        case '$':
+          {
+            // This was an escaped string value.
+            return value.substring(1);
+          }
+
+        case '@':
+          {
+            // Promise
+            var id = parseInt(value.substring(2), 16);
+            var chunk = getChunk(response, id);
+            return chunk;
+          }
+
+        case 'S':
+          {
+            // Symbol
+            return Symbol.for(value.substring(2));
+          }
+
+        case 'F':
+          {
+            // Server Reference
+            var _id = parseInt(value.substring(2), 16);
+
+            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;
+            } // TODO: Just encode this in the reference inline instead of as a model.
+
+
+            var metaData = _chunk.value;
+            return loadServerReference(response, metaData.id, metaData.bound, initializingChunk, parentObject, key);
+          }
+
+        case 'u':
+          {
+            // matches "$undefined"
+            // Special encoding for `undefined` which can't be serialized as JSON otherwise.
+            return undefined;
+          }
+
+        default:
+          {
+            // We assume that anything else is a reference ID.
+            var _id2 = parseInt(value.substring(1), 16);
+
+            var _chunk2 = getChunk(response, _id2);
+
+            switch (_chunk2.status) {
+              case RESOLVED_MODEL:
+                initializeModelChunk(_chunk2);
+                break;
+            } // The status might have changed after initialization.
+
+
+            switch (_chunk2.status) {
+              case INITIALIZED:
+                return _chunk2.value;
+
+              case PENDING:
+              case BLOCKED:
+                var parentChunk = initializingChunk;
+
+                _chunk2.then(createModelResolver(parentChunk, parentObject, key), createModelReject(parentChunk));
+
+                return null;
+
+              default:
+                throw _chunk2.reason;
+            }
+          }
+      }
+    }
+
+    return value;
+  }
+
+  function createResponse(bundlerConfig) {
+    var chunks = new Map();
+    var response = {
+      _bundlerConfig: bundlerConfig,
+      _chunks: chunks,
+      _fromJSON: function (key, value) {
+        if (typeof value === 'string') {
+          // We can't use .bind here because we need the "this" value.
+          return parseModelString(response, this, key, value);
+        }
+
+        return value;
+      }
+    };
+    return response;
+  }
+  function resolveField(response, id, model) {
+    var chunks = response._chunks;
+    var chunk = chunks.get(id);
+
+    if (!chunk) {
+      chunks.set(id, createResolvedModelChunk(response, model));
+    } else {
+      resolveModelChunk(chunk, model);
+    }
+  }
+  function resolveFile(response, id, file) {
+    throw new Error('Not implemented.');
+  }
+  function close(response) {
+    // In case there are any remaining unresolved chunks, they won't
+    // be resolved now. So we need to issue an error to those.
+    // Ideally we should be able to early bail out if we kept a
+    // ref count of pending chunks.
+    reportGlobalError(response, new Error('Connection closed.'));
+  }
+
   function renderToReadableStream(model, webpackMap, options) {
     var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined);
 
@@ -2530,6 +3030,29 @@
     return stream;
   }
 
+  function decodeReply(body, webpackMap) {
+    var response = createResponse(webpackMap);
+
+    if (typeof body === 'string') {
+      resolveField(response, 0, body);
+    } else {
+      // $FlowFixMe[prop-missing] Flow doesn't know that forEach exists.
+      body.forEach(function (value, key) {
+        var id = +key;
+
+        if (typeof value === 'string') {
+          resolveField(response, id, value);
+        } else {
+          resolveFile();
+        }
+      });
+    }
+
+    close(response);
+    return getRoot(response);
+  }
+
+  exports.decodeReply = decodeReply;
   exports.renderToReadableStream = renderToReadableStream;
 
 }));