react-server-dom-webpack 18.3.0-canary-14898b6a9-20240318 → 18.3.0-canary-4b84f1161-20240318

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

@@ -149,10 +149,10 @@
   }
 
   // eslint-disable-next-line no-unused-vars
-  var CLIENT_REFERENCE_TAG$1 = Symbol.for('react.client.reference');
+  var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
   var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
   function isClientReference(reference) {
-    return reference.$$typeof === CLIENT_REFERENCE_TAG$1;
+    return reference.$$typeof === CLIENT_REFERENCE_TAG;
   }
   function isServerReference(reference) {
     return reference.$$typeof === SERVER_REFERENCE_TAG;
@@ -164,7 +164,7 @@
   function registerClientReferenceImpl(proxyImplementation, id, async) {
     return Object.defineProperties(proxyImplementation, {
       $$typeof: {
-        value: CLIENT_REFERENCE_TAG$1
+        value: CLIENT_REFERENCE_TAG
       },
       $$id: {
         value: id
@@ -185,14 +185,6 @@
     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: {
@@ -219,16 +211,13 @@
         value: SERVER_REFERENCE_TAG
       },
       $$id: {
-        value: exportName === null ? id : id + '#' + exportName,
-        configurable: true
+        value: exportName === null ? id : id + '#' + exportName
       },
       $$bound: {
-        value: null,
-        configurable: true
+        value: null
       },
       bind: {
-        value: bind,
-        configurable: true
+        value: bind
       }
     });
   }
@@ -267,10 +256,6 @@
           // $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
@@ -312,10 +297,6 @@
         // $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.
@@ -356,10 +337,6 @@
 
     }
 
-    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) {
@@ -701,16 +678,13 @@
     return new Set();
   }
 
-  var supportsRequestStorage = false;
-  var requestStorage = null;
-
   // 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_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');
@@ -734,6 +708,146 @@
     return null;
   }
 
+  // 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.
+
+
+  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;
+
+  function popNode(prev) {
+    {
+      prev.context._currentValue = prev.parentValue;
+    }
+  }
+
+  function pushNode(next) {
+    {
+      next.context._currentValue = next.value;
+    }
+  }
+
+  function popToNearestCommonAncestor(prev, next) {
+    if (prev === next) ; else {
+      popNode(prev);
+      var parentPrev = prev.parent;
+      var parentNext = next.parent;
+
+      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.');
+        }
+
+        popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+        pushNode(next);
+      }
+    }
+  }
+
+  function popAllPrevious(prev) {
+    popNode(prev);
+    var parentPrev = prev.parent;
+
+    if (parentPrev !== null) {
+      popAllPrevious(parentPrev);
+    }
+  }
+
+  function pushAllNext(next) {
+    var parentNext = next.parent;
+
+    if (parentNext !== null) {
+      pushAllNext(parentNext);
+    }
+
+    pushNode(next);
+  }
+
+  function popPreviousToCommonLevel(prev, next) {
+    popNode(prev);
+    var parentPrev = prev.parent;
+
+    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 (parentPrev.depth === next.depth) {
+      // We found the same level. Now we just need to find a shared ancestor.
+      popToNearestCommonAncestor(parentPrev, next);
+    } else {
+      // We must still be deeper.
+      popPreviousToCommonLevel(parentPrev, next);
+    }
+  }
+
+  function popNextToCommonLevel(prev, next) {
+    var parentNext = next.parent;
+
+    if (parentNext === null) {
+      throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
+    }
+
+    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);
+      }
+
+      currentActiveSnapshot = next;
+    }
+  }
+  function getActiveContext() {
+    return currentActiveSnapshot;
+  }
+  function readContext$1(context) {
+    var value = context._currentValue ;
+    return value;
+  }
+
   // Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally,
   // changes to one module should be reflected in the others.
   // TODO: Rename this module and the corresponding Fiber one to "Thenable"
@@ -862,13 +976,29 @@
     thenableState = prevThenableState;
   }
   function getThenableStateAfterSuspending() {
-    // 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();
+    var state = thenableState;
     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();
@@ -879,8 +1009,8 @@
     useDebugValue: function () {},
     useDeferredValue: unsupportedHook,
     useTransition: unsupportedHook,
-    readContext: unsupportedContext,
-    useContext: unsupportedContext,
+    readContext: readContext,
+    useContext: readContext,
     useReducer: unsupportedHook,
     useRef: unsupportedHook,
     useState: unsupportedHook,
@@ -913,10 +1043,6 @@
     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');
@@ -942,22 +1068,20 @@
         }
 
         return trackUsedThenable(thenableState, thenable, index);
-      } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
-        unsupportedContext();
+      } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
+        var context = usable;
+        return readContext(context);
       }
     }
 
-    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.');
+    {
+      if (isClientReference(usable)) {
+        error('Cannot use() an already resolved Client Reference.');
       }
-    } else {
-      throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
-      'An unsupported type was passed to use(): ' + String(usable));
-    }
+    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+    throw new Error('An unsupported type was passed to use(): ' + String(usable));
   }
 
   function createSignal() {
@@ -1095,10 +1219,6 @@
             return '[...]';
           }
 
-          if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
-            return describeClientReference();
-          }
-
           var name = objectName(value);
 
           if (name === 'Object') {
@@ -1109,15 +1229,7 @@
         }
 
       case 'function':
-        {
-          if (value.$$typeof === CLIENT_REFERENCE_TAG) {
-            return describeClientReference();
-          }
-
-          var _name = value.displayName || value.name;
-
-          return _name ? 'function ' + _name : 'function';
-        }
+        return 'function';
 
       default:
         // eslint-disable-next-line react-internal/safe-string-coercion
@@ -1163,12 +1275,6 @@
     return '';
   }
 
-  var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-
-  function describeClientReference(ref) {
-    return 'client';
-  }
-
   function describeObjectForErrorMessage(objectOrArray, expandedName) {
     var objKind = objectName(objectOrArray);
 
@@ -1247,8 +1353,6 @@
     } 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);
@@ -1299,9 +1403,9 @@
             str += ', ';
           }
 
-          var _name2 = _names[_i3];
-          str += describeKeyForErrorMessage(_name2) + ': ';
-          var _value3 = _object[_name2];
+          var _name = _names[_i3];
+          str += describeKeyForErrorMessage(_name) + ': ';
+          var _value3 = _object[_name];
 
           var _substr3 = void 0;
 
@@ -1311,7 +1415,7 @@
             _substr3 = describeValueForErrorMessage(_value3);
           }
 
-          if (_name2 === expandedName) {
+          if (_name === expandedName) {
             start = str.length;
             length = _substr3.length;
             str += _substr3;
@@ -1366,7 +1470,7 @@
   var OPEN = 0;
   var CLOSING = 1;
   var CLOSED = 2;
-  function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName) {
+  function createRequest(model, bundlerConfig, onError, context, identifierPrefix, onPostpone) {
     if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) {
       throw new Error('Currently React only supports one RSC renderer at a time.');
     }
@@ -1397,19 +1501,21 @@
       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,
-      onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone
+      onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone,
+      // $FlowFixMe[missing-this-annot]
+      toJSON: function (key, value) {
+        return resolveModelToJSON(request, this, key, value);
+      }
     };
-
-    {
-      request.environmentName = environmentName === undefined ? 'Server' : environmentName;
-    }
-
-    var rootTask = createTask(request, model, null, false, abortSet);
+    request.pendingChunks++;
+    var rootContext = createRootContext();
+    var rootTask = createTask(request, model, rootContext, abortSet);
     pingedTasks.push(rootTask);
     return request;
   }
@@ -1420,18 +1526,13 @@
     return null;
   }
 
-  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);
-
-    {
-      // If this came from Flight, forward any debug info into this new row.
-      var debugInfo = thenable._debugInfo;
+  function createRootContext(reqContext) {
+    return importServerContexts();
+  }
 
-      if (debugInfo) {
-        forwardDebugInfo(request, newTask.id, debugInfo);
-      }
-    }
+  function serializeThenable(request, thenable) {
+    request.pendingChunks++;
+    var newTask = createTask(request, null, getActiveContext(), request.abortableTasks);
 
     switch (thenable.status) {
       case 'fulfilled':
@@ -1567,136 +1668,14 @@
       _payload: thenable,
       _init: readThenable
     };
-
-    {
-      // If this came from React, transfer the debug info.
-      lazyType._debugInfo = thenable._debugInfo || [];
-    }
-
     return lazyType;
   }
 
-  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) {
+  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.
-      // 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.');
     }
 
@@ -1711,36 +1690,47 @@
     if (typeof type === 'function') {
       if (isClientReference(type)) {
         // This is a reference to a Client Component.
-        return renderClientElement(task, type, key, props);
-      } // This is a Server Component.
+        return [REACT_ELEMENT_TYPE, type, key, props];
+      } // This is a server-side 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;
 
-      return renderFunctionComponent(request, task, key, type, props);
+        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;
     } else if (typeof type === 'string') {
       // This is a host element. E.g. HTML.
-      return renderClientElement(task, type, key, props);
+      return [REACT_ELEMENT_TYPE, type, key, props];
     } else if (typeof type === 'symbol') {
-      if (type === REACT_FRAGMENT_TYPE && key === null) {
+      if (type === REACT_FRAGMENT_TYPE) {
         // For key-less fragments, we add a small optimization to avoid serializing
         // it as a wrapper.
-        var prevImplicitSlot = task.implicitSlot;
-
-        if (task.keyPath === null) {
-          task.implicitSlot = true;
-        }
-
-        var json = renderModelDestructive(request, task, emptyRoot, '', props.children);
-        task.implicitSlot = prevImplicitSlot;
-        return json;
+        // 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.
 
 
-      return renderClientElement(task, type, key, props);
+      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 renderClientElement(task, type, key, props);
+        return [REACT_ELEMENT_TYPE, type, key, props];
       }
 
       switch (type.$$typeof) {
@@ -1749,17 +1739,19 @@
             var payload = type._payload;
             var init = type._init;
             var wrappedType = init(payload);
-            return renderElement(request, task, wrappedType, key, ref, props);
+            return attemptResolveElement(request, wrappedType, key, ref, props, prevThenableState);
           }
 
         case REACT_FORWARD_REF_TYPE:
           {
-            return renderFunctionComponent(request, task, key, type.render, props);
+            var render = type.render;
+            prepareToUseHooksForComponent(prevThenableState);
+            return render(props, undefined);
           }
 
         case REACT_MEMO_TYPE:
           {
-            return renderElement(request, task, type.type, key, ref, props);
+            return attemptResolveElement(request, type.type, key, ref, props, prevThenableState);
           }
       }
     }
@@ -1779,51 +1771,16 @@
     }
   }
 
-  function createTask(request, model, keyPath, implicitSlot, abortSet) {
-    request.pendingChunks++;
+  function createTask(request, model, context, abortSet) {
     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,
-      keyPath: keyPath,
-      implicitSlot: implicitSlot,
+      context: context,
       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);
@@ -1892,13 +1849,13 @@
     return stringToChunk(row);
   }
 
-  function serializeClientReference(request, parent, parentPropertyName, clientReference) {
+  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 && parentPropertyName === '1') {
+      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
@@ -1917,7 +1874,7 @@
       emitImportChunk(request, importId, clientReferenceMetadata);
       writtenClientReferences.set(clientReferenceKey, importId);
 
-      if (parent[0] === REACT_ELEMENT_TYPE && parentPropertyName === '1') {
+      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
@@ -1937,14 +1894,13 @@
   }
 
   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);
+    request.pendingChunks++;
+    var newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
     retryTask(request, newTask);
     return newTask.id;
   }
 
-  function serializeServerReference(request, serverReference) {
+  function serializeServerReference(request, parent, key, serverReference) {
     var writtenServerReferences = request.writtenServerReferences;
     var existingId = writtenServerReferences.get(serverReference);
 
@@ -2024,77 +1980,110 @@
       return value;
     }
   }
-
   var modelRoot = false;
 
-  function renderModel(request, task, parent, key, value) {
-    var prevKeyPath = task.keyPath;
-    var prevImplicitSlot = task.implicitSlot;
+  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];
 
-    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.
+      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, key));
+          } else {
+            error('Only plain objects can be passed to Client Components from Server Components. ' + '%s objects are not supported.%s', objectName(originalValue), describeObjectForErrorMessage(parent, key));
+          }
+        } else {
+          error('Only plain objects can be passed to Client Components from Server Components. ' + 'Objects with toJSON methods are not supported. Convert it manually ' + 'to a simple value before passing it to props.%s', describeObjectForErrorMessage(parent, key));
+        }
+      }
+    } // Special Symbols
 
-      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.
+    switch (value) {
+      case REACT_ELEMENT_TYPE:
+        return '$';
+    }
 
-          task.keyPath = prevKeyPath;
-          task.implicitSlot = prevImplicitSlot;
 
-          if (wasReactNode) {
-            return serializeLazyID(newTask.id);
-          }
+    while (typeof value === 'object' && value !== null && (value.$$typeof === REACT_ELEMENT_TYPE || value.$$typeof === REACT_LAZY_TYPE)) {
+
+      try {
+        switch (value.$$typeof) {
+          case REACT_ELEMENT_TYPE:
+            {
+              var writtenObjects = request.writtenObjects;
+              var existingId = writtenObjects.get(value);
+
+              if (existingId !== undefined) {
+                if (existingId === -1) {
+                  // Seen but not yet outlined.
+                  var newId = outlineModel(request, value);
+                  return serializeByValueID(newId);
+                } else if (modelRoot === value) {
+                  // This is the ID we're currently emitting so we need to write it
+                  // once but if we discover it again, we refer to it by id.
+                  modelRoot = null;
+                } else {
+                  // We've 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);
+              } // TODO: Concatenate keys of parents onto children.
 
-          return serializeByValueID(newTask.id);
-        }
-      } // Restore the context. We assume that this will be restored by the inner
-      // functions in case nothing throws so we don't use "finally" here.
 
+              var element = value; // Attempt to render the Server Component.
 
-      task.keyPath = prevKeyPath;
-      task.implicitSlot = prevImplicitSlot;
+              value = attemptResolveElement(request, element.type, element.key, element.ref, element.props, null);
+              break;
+            }
 
-      if (wasReactNode) {
-        // Something errored. We'll still send everything we have up until this point.
+          case REACT_LAZY_TYPE:
+            {
+              var payload = value._payload;
+              var init = value._init;
+              value = init(payload);
+              break;
+            }
+        }
+      } catch (thrownValue) {
+        var x = thrownValue === SuspenseException ? // This is a special type of exception used for Suspense. For historical
+        // reasons, the rest of the Suspense implementation expects the thrown
+        // value to be a thenable, because before `use` existed that was the
+        // (unstable) API for suspending. This implementation detail can change
+        // later, once we deprecate the old API in favor of `use`.
+        getSuspendedThenable() : thrownValue;
+
+        if (typeof x === 'object' && x !== null) {
+          // $FlowFixMe[method-unbinding]
+          if (typeof x.then === 'function') {
+            // Something suspended, we'll need to create a new task and resolve it later.
+            request.pendingChunks++;
+            var newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
+            var ping = newTask.ping;
+            x.then(ping, ping);
+            newTask.thenableState = getThenableStateAfterSuspending();
+            return serializeLazyID(newTask.id);
+          }
+        } // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
+
+
         request.pendingChunks++;
         var errorId = request.nextChunkId++;
         var digest = logRecoverableError(request, x);
         emitErrorChunk(request, errorId, digest, x);
         return serializeLazyID(errorId);
-      } // Something errored but it was not in a React Node. There's no need to serialize
-      // it by value because it'll just error the whole parent row anyway so we can
-      // just stop any siblings and error the whole parent row.
-
-
-      throw x;
-    }
-  }
-
-  function renderModelDestructive(request, task, parent, parentPropertyName, value) {
-    // Set the currently rendering model
-    task.model = value; // Special Symbol, that's very common.
-
-    if (value === REACT_ELEMENT_TYPE) {
-      return '$';
+      }
     }
 
     if (value === null) {
@@ -2102,152 +2091,61 @@
     }
 
     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);
-            }
-
-            var element = value;
-
-            {
-              var debugInfo = value._debugInfo;
-
-              if (debugInfo) {
-                // If this came from Flight, forward any debug info into this new row.
-                if (debugID === null) {
-                  // We don't have a chunk to assign debug info. We need to outline this
-                  // component to assign it an ID.
-                  return outlineTask(request, task);
-                } else {
-                  // Forward any debug info we have the first time we see it.
-                  forwardDebugInfo(request, debugID, debugInfo);
-                }
-              }
-            }
-
-            var props = element.props;
-            var ref;
-
-            {
-              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:
-          {
-            // Reset the task's thenable state before continuing. If there was one, it was
-            // from suspending the lazy before.
-            task.thenableState = null;
-            var lazy = value;
-            var payload = lazy._payload;
-            var init = lazy._init;
-            var resolvedModel = init(payload);
-
-            {
-              var _debugInfo = lazy._debugInfo;
-
-              if (_debugInfo) {
-                // If this came from Flight, forward any debug info into this new row.
-                if (debugID === null) {
-                  // We don't have a chunk to assign debug info. We need to outline this
-                  // component to assign it an ID.
-                  return outlineTask(request, task);
-                } else {
-                  // Forward any debug info we have the first time we see it.
-                  // We do this after init so that we have received all the debug info
-                  // from the server by the time we emit it.
-                  forwardDebugInfo(request, debugID, _debugInfo);
-                }
-              }
-            }
-
-            return renderModelDestructive(request, task, emptyRoot, '', resolvedModel);
-          }
-      }
 
       if (isClientReference(value)) {
-        return serializeClientReference(request, parent, parentPropertyName, value);
+        return serializeClientReference(request, parent, key, value);
       }
 
-      var writtenObjects = request.writtenObjects;
-      var existingId = writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+      var _writtenObjects = request.writtenObjects;
+
+      var _existingId = _writtenObjects.get(value); // $FlowFixMe[method-unbinding]
+
 
       if (typeof value.then === 'function') {
-        if (existingId !== undefined) {
+        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);
+            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, task, value);
-        writtenObjects.set(value, promiseId);
+        var promiseId = serializeThenable(request, value);
+
+        _writtenObjects.set(value, promiseId);
+
         return serializePromiseID(promiseId);
       }
 
-      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) {
+      if (_existingId !== undefined) {
+        if (_existingId === -1) {
           // Seen but not yet outlined.
           var _newId = outlineModel(request, value);
 
           return serializeByValueID(_newId);
+        } else if (modelRoot === value) {
+          // This is the ID we're currently emitting so we need to write it
+          // once but if we discover it again, we refer to it by id.
+          modelRoot = null;
         } else {
           // We've already emitted this as an outlined object, so we can
           // just refer to that by its existing ID.
-          return serializeByValueID(existingId);
+          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);
+        _writtenObjects.set(value, -1);
       }
 
       if (isArray(value)) {
-        return renderFragment(request, task, value);
+        // $FlowFixMe[incompatible-return]
+        return value;
       }
 
       if (value instanceof Map) {
@@ -2261,7 +2159,7 @@
       var iteratorFn = getIteratorFn(value);
 
       if (iteratorFn) {
-        return renderFragment(request, task, Array.from(value));
+        return Array.from(value);
       } // Verify that this is a simple plain object.
 
 
@@ -2273,14 +2171,14 @@
 
       {
         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));
+          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, parentPropertyName));
+          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, parentPropertyName));
+            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));
           }
         }
       } // $FlowFixMe[incompatible-return]
@@ -2295,9 +2193,9 @@
       if (value[value.length - 1] === 'Z') {
         // Possibly a Date, whose toJSON automatically calls toISOString
         // $FlowFixMe[incompatible-use]
-        var originalValue = parent[parentPropertyName];
+        var _originalValue = parent[key];
 
-        if (originalValue instanceof Date) {
+        if (_originalValue instanceof Date) {
           return serializeDateFromDateJSON(value);
         }
       }
@@ -2325,21 +2223,19 @@
     }
 
     if (typeof value === 'function') {
+
       if (isClientReference(value)) {
-        return serializeClientReference(request, parent, parentPropertyName, value);
+        return serializeClientReference(request, parent, key, value);
       }
 
       if (isServerReference(value)) {
-        return serializeServerReference(request, value);
+        return serializeServerReference(request, parent, key, value);
       }
 
-      if (/^on[A-Z]/.test(parentPropertyName)) {
-        throw new Error('Event handlers cannot be passed to Client Component props.' + describeObjectForErrorMessage(parent, parentPropertyName) + '\nIf you need interactivity, consider converting part of this to a Client Component.');
-      } else if ((jsxChildrenParents.has(parent) || jsxPropsParents.has(parent) && parentPropertyName === 'children')) {
-        var componentName = value.displayName || value.name || 'Component';
-        throw new Error('Functions are not valid as a child of Client Components. This may happen if ' + 'you return ' + componentName + ' instead of <' + componentName + ' /> from render. ' + 'Or maybe you meant to call this function rather than return it.' + describeObjectForErrorMessage(parent, parentPropertyName));
+      if (/^on[A-Z]/.test(key)) {
+        throw new Error('Event handlers cannot be passed to Client Component props.' + describeObjectForErrorMessage(parent, key) + '\nIf you need interactivity, consider converting part of this to a Client Component.');
       } else {
-        throw new Error('Functions cannot be passed directly to Client Components ' + 'unless you explicitly expose it by marking it with "use server". ' + 'Or maybe you meant to call this function rather than return it.' + describeObjectForErrorMessage(parent, parentPropertyName));
+        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));
       }
     }
 
@@ -2357,7 +2253,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, parentPropertyName));
+        value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, key));
       }
 
       request.pendingChunks++;
@@ -2372,38 +2268,17 @@
       return serializeBigInt(value);
     }
 
-    throw new Error("Type " + typeof value + " is not supported in Client Component props." + describeObjectForErrorMessage(parent, parentPropertyName));
+    throw new Error("Type " + typeof value + " is not supported in Client Component props." + describeObjectForErrorMessage(parent, key));
   }
 
   function logPostpone(request, reason) {
-    var prevRequest = currentRequest;
-    currentRequest = null;
-
-    try {
-      var onPostpone = request.onPostpone;
-
-      if (supportsRequestStorage) ; else {
-        onPostpone(reason);
-      }
-    } finally {
-      currentRequest = prevRequest;
-    }
+    var onPostpone = request.onPostpone;
+    onPostpone(reason);
   }
 
   function logRecoverableError(request, error) {
-    var prevRequest = currentRequest;
-    currentRequest = null;
-    var errorDigest;
-
-    try {
-      var onError = request.onError;
-
-      if (supportsRequestStorage) ; else {
-        errorDigest = onError(error);
-      }
-    } finally {
-      currentRequest = prevRequest;
-    }
+    var onError = request.onError;
+    var errorDigest = onError(error);
 
     if (errorDigest != null && typeof errorDigest !== 'string') {
       // eslint-disable-next-line react-internal/prod-error-codes
@@ -2462,11 +2337,8 @@
           message = String(error.message); // eslint-disable-next-line react-internal/safe-string-coercion
 
           stack = String(error.stack);
-        } else if (typeof error === 'object' && error !== null) {
-          message = describeObjectForErrorMessage(error);
         } else {
-          // eslint-disable-next-line react-internal/safe-string-coercion
-          message = String(error);
+          message = 'Error: ' + error;
         }
       } catch (x) {
         message = 'An error occurred but serializing the error message failed.';
@@ -2506,79 +2378,62 @@
     request.completedImportChunks.push(processedChunk);
   }
 
-  function emitModelChunk(request, id, json) {
-    var row = id.toString(16) + ':' + json + '\n';
-    var processedChunk = stringToChunk(row);
-    request.completedRegularChunks.push(processedChunk);
-  }
-
-  function emitDebugChunk(request, id, debugInfo) {
+  function emitModelChunk(request, id, model) {
+    // 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 = model; // $FlowFixMe[incompatible-type] stringify can return null
 
-
-    var json = stringify(debugInfo);
-    var row = serializeRowHeader('D', id) + json + '\n';
+    var json = stringify(model, request.toJSON);
+    var row = id.toString(16) + ':' + 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;
     }
 
-    var prevDebugID = debugID;
+    switchContext(task.context);
 
     try {
-      // 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;
+      var value = 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.
+      if (typeof value === 'object' && value !== null && value.$$typeof === REACT_ELEMENT_TYPE) {
+        request.writtenObjects.set(value, task.id); // TODO: Concatenate keys of parents onto children.
 
+        var element = value; // When retrying a component, reuse the thenableState from the
+        // previous attempt.
 
-      var resolvedModel = renderModelDestructive(request, task, emptyRoot, '', task.model);
+        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.
 
-      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.
+        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.
 
-      modelRoot = resolvedModel; // The keyPath resets at any terminal child node.
+        while (typeof value === 'object' && value !== null && value.$$typeof === REACT_ELEMENT_TYPE) {
+          request.writtenObjects.set(value, task.id); // TODO: Concatenate keys of parents onto children.
 
-      task.keyPath = null;
-      task.implicitSlot = false;
-      var json;
+          var nextElement = value;
+          task.model = value;
+          value = attemptResolveElement(request, nextElement.type, nextElement.key, nextElement.ref, nextElement.props, null);
+        }
+      } // Track that this object is outlined and has an id.
 
-      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);
+
+      if (typeof value === 'object' && value !== null) {
+        request.writtenObjects.set(value, task.id);
       }
 
-      emitModelChunk(request, task.id, json);
+      emitModelChunk(request, task.id, value);
       request.abortableTasks.delete(task);
       task.status = COMPLETED;
     } catch (thrownValue) {
@@ -2604,10 +2459,6 @@
       task.status = ERRORED$1;
       var digest = logRecoverableError(request, x);
       emitErrorChunk(request, task.id, digest, x);
-    } finally {
-      {
-        debugID = prevDebugID;
-      }
     }
   }
 
@@ -2820,6 +2671,11 @@
     }
   }
 
+  function importServerContexts(contexts) {
+
+    return rootContextSnapshot;
+  }
+
   // This is the parsed shape of the wire format which is why it is
   // condensed to only the essentialy information
   var ID = 0;
@@ -3542,7 +3398,7 @@
   }
 
   function renderToReadableStream(model, webpackMap, options) {
-    var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined, options ? options.environmentName : undefined);
+    var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined);
 
     if (options && options.signal) {
       var signal = options.signal;