react-server-dom-webpack 18.3.0-canary-a870b2d54-20240314 → 18.3.0-canary-4b84f1161-20240318

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

@@ -62,7 +62,7 @@ var enablePostpone = false;
 function scheduleWork(callback) {
   setTimeout(callback, 0);
 }
-var VIEW_SIZE = 512;
+var VIEW_SIZE = 2048;
 var currentView = null;
 var writtenBytes = 0;
 function beginWriting(destination) {
@@ -75,15 +75,9 @@ function writeChunk(destination, chunk) {
   }
 
   if (chunk.byteLength > VIEW_SIZE) {
-    {
-      if (precomputedChunkSet.has(chunk)) {
-        error('A large precomputed chunk was passed to writeChunk without being copied.' + ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' + ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.');
-      }
-    } // this chunk may overflow a single view which implies it was not
+    // this chunk may overflow a single view which implies it was not
     // one that is cached by the streaming renderer. We will enqueu
     // it directly and expect it is not re-used
-
-
     if (writtenBytes > 0) {
       destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
       currentView = new Uint8Array(VIEW_SIZE);
@@ -138,7 +132,6 @@ var textEncoder = new TextEncoder();
 function stringToChunk(content) {
   return textEncoder.encode(content);
 }
-var precomputedChunkSet = new Set() ;
 function byteLengthOfChunk(chunk) {
   return chunk.byteLength;
 }
@@ -159,10 +152,10 @@ function closeWithError(destination, error) {
 }
 
 // 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;
@@ -174,7 +167,7 @@ function registerClientReference(proxyImplementation, id, exportName) {
 function registerClientReferenceImpl(proxyImplementation, id, async) {
   return Object.defineProperties(proxyImplementation, {
     $$typeof: {
-      value: CLIENT_REFERENCE_TAG$1
+      value: CLIENT_REFERENCE_TAG
     },
     $$id: {
       value: id
@@ -195,14 +188,6 @@ function bind() {
   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: {
@@ -229,16 +214,13 @@ function registerServerReference(reference, id, exportName) {
       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
     }
   });
 }
@@ -277,10 +259,6 @@ var deepProxyHandlers = {
         // $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
@@ -322,10 +300,6 @@ function getReference(target, name) {
       // $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.
@@ -366,10 +340,6 @@ function getReference(target, name) {
 
   }
 
-  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) {
@@ -462,9 +432,7 @@ function getServerReferenceBoundArguments(config, serverReference) {
 
 var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
-var previousDispatcher = ReactDOMCurrentDispatcher.current;
-ReactDOMCurrentDispatcher.current = {
+var ReactDOMFlightServerDispatcher = {
   prefetchDNS: prefetchDNS,
   preconnect: preconnect,
   preload: preload,
@@ -490,8 +458,6 @@ function prefetchDNS(href) {
 
         hints.add(key);
         emitHint(request, 'D', href);
-      } else {
-        previousDispatcher.prefetchDNS(href);
       }
     }
   }
@@ -518,8 +484,6 @@ function preconnect(href, crossOrigin) {
         } else {
           emitHint(request, 'C', href);
         }
-      } else {
-        previousDispatcher.preconnect(href, crossOrigin);
       }
     }
   }
@@ -553,8 +517,6 @@ function preload(href, as, options) {
         } else {
           emitHint(request, 'L', [href, as]);
         }
-      } else {
-        previousDispatcher.preload(href, as, options);
       }
     }
   }
@@ -582,8 +544,6 @@ function preloadModule$1(href, options) {
         } else {
           return emitHint(request, 'm', href);
         }
-      } else {
-        previousDispatcher.preloadModule(href, options);
       }
     }
   }
@@ -613,21 +573,19 @@ function preinitStyle(href, precedence, options) {
         } else {
           return emitHint(request, 'S', href);
         }
-      } else {
-        previousDispatcher.preinitStyle(href, precedence, options);
       }
     }
   }
 }
 
-function preinitScript(src, options) {
+function preinitScript(href, options) {
   {
-    if (typeof src === 'string') {
+    if (typeof href === 'string') {
       var request = resolveRequest();
 
       if (request) {
         var hints = getHints(request);
-        var key = 'X|' + src;
+        var key = 'X|' + href;
 
         if (hints.has(key)) {
           // duplicate hint
@@ -638,25 +596,23 @@ function preinitScript(src, options) {
         var trimmed = trimOptions(options);
 
         if (trimmed) {
-          return emitHint(request, 'X', [src, trimmed]);
+          return emitHint(request, 'X', [href, trimmed]);
         } else {
-          return emitHint(request, 'X', src);
+          return emitHint(request, 'X', href);
         }
-      } else {
-        previousDispatcher.preinitScript(src, options);
       }
     }
   }
 }
 
-function preinitModuleScript(src, options) {
+function preinitModuleScript(href, options) {
   {
-    if (typeof src === 'string') {
+    if (typeof href === 'string') {
       var request = resolveRequest();
 
       if (request) {
         var hints = getHints(request);
-        var key = 'M|' + src;
+        var key = 'M|' + href;
 
         if (hints.has(key)) {
           // duplicate hint
@@ -667,12 +623,10 @@ function preinitModuleScript(src, options) {
         var trimmed = trimOptions(options);
 
         if (trimmed) {
-          return emitHint(request, 'M', [src, trimmed]);
+          return emitHint(request, 'M', [href, trimmed]);
         } else {
-          return emitHint(request, 'M', src);
+          return emitHint(request, 'M', href);
         }
-      } else {
-        previousDispatcher.preinitModuleScript(src, options);
       }
     }
   }
@@ -714,7 +668,10 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
   return "[image]" + uniquePart;
 }
 
-// This module registers the host dispatcher so it needs to be imported
+var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
+function prepareHostDispatcher() {
+  ReactDOMCurrentDispatcher.current = ReactDOMFlightServerDispatcher;
+} // Used to distinguish these contexts from ones used in other renderers.
 // small, smaller than how we encode undefined, and is unambiguous. We could use
 // a different tuple structure to encode this instead but this makes the runtime
 // cost cheaper by eliminating a type checks in more positions.
@@ -741,7 +698,7 @@ typeof async_hooks === 'object' ? async_hooks.executionAsyncId : null;
 // 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');
@@ -765,6 +722,146 @@ function getIteratorFn(maybeIterable) {
   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"
@@ -893,13 +990,29 @@ function prepareToUseHooksForComponent(prevThenableState) {
   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();
@@ -910,8 +1023,8 @@ var HooksDispatcher = {
   useDebugValue: function () {},
   useDeferredValue: unsupportedHook,
   useTransition: unsupportedHook,
-  readContext: unsupportedContext,
-  useContext: unsupportedContext,
+  readContext: readContext,
+  useContext: readContext,
   useReducer: unsupportedHook,
   useRef: unsupportedHook,
   useState: unsupportedHook,
@@ -944,10 +1057,6 @@ function unsupportedRefresh() {
   throw new Error('Refreshing the cache is not supported in Server Components.');
 }
 
-function unsupportedContext() {
-  throw new Error('Cannot read a Client Context from a Server Component.');
-}
-
 function useId() {
   if (currentRequest$1 === null) {
     throw new Error('useId can only be used while React is rendering');
@@ -973,22 +1082,20 @@ function use(usable) {
       }
 
       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() {
@@ -1126,10 +1233,6 @@ function describeValueForErrorMessage(value) {
           return '[...]';
         }
 
-        if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
-          return describeClientReference();
-        }
-
         var name = objectName(value);
 
         if (name === 'Object') {
@@ -1140,15 +1243,7 @@ function describeValueForErrorMessage(value) {
       }
 
     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
@@ -1194,12 +1289,6 @@ function describeElementType(type) {
   return '';
 }
 
-var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-
-function describeClientReference(ref) {
-  return 'client';
-}
-
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   var objKind = objectName(objectOrArray);
 
@@ -1278,8 +1367,6 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   } else {
     if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) {
       str = '<' + describeElementType(objectOrArray.type) + '/>';
-    } else if (objectOrArray.$$typeof === CLIENT_REFERENCE_TAG) {
-      return describeClientReference();
     } else if (jsxPropsParents.has(objectOrArray)) {
       // Print JSX
       var _type = jsxPropsParents.get(objectOrArray);
@@ -1330,9 +1417,9 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
           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;
 
@@ -1342,7 +1429,7 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
           _substr3 = describeValueForErrorMessage(_value3);
         }
 
-        if (_name2 === expandedName) {
+        if (_name === expandedName) {
           start = str.length;
           length = _substr3.length;
           str += _substr3;
@@ -1397,11 +1484,12 @@ function defaultPostponeHandler(reason) {// Noop
 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.');
   }
 
+  prepareHostDispatcher();
   ReactCurrentCache.current = DefaultCacheDispatcher;
   var abortSet = new Set();
   var pingedTasks = [];
@@ -1427,19 +1515,21 @@ function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpo
     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;
 }
@@ -1455,18 +1545,13 @@ function resolveRequest() {
   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':
@@ -1602,136 +1687,14 @@ function createLazyWrapperAroundWakeable(wakeable) {
     _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.');
   }
 
@@ -1746,36 +1709,47 @@ function renderElement(request, task, type, key, ref, props) {
   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) {
@@ -1784,17 +1758,19 @@ function renderElement(request, task, type, key, ref, props) {
           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);
         }
     }
   }
@@ -1814,51 +1790,16 @@ function pingTask(request, task) {
   }
 }
 
-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);
@@ -1927,13 +1868,13 @@ function encodeReferenceChunk(request, id, reference) {
   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
@@ -1952,7 +1893,7 @@ function serializeClientReference(request, parent, parentPropertyName, clientRef
     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
@@ -1972,14 +1913,13 @@ function serializeClientReference(request, parent, parentPropertyName, clientRef
 }
 
 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);
 
@@ -2059,77 +1999,110 @@ function escapeStringValue(value) {
     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);
 
-    var model = task.model;
-    var wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE);
+        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
 
-    if (typeof x === 'object' && x !== null) {
-      // $FlowFixMe[method-unbinding]
-      if (typeof x.then === 'function') {
-        // Something suspended, we'll need to create a new task and resolve it later.
-        var newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
-        var ping = newTask.ping;
-        x.then(ping, ping);
-        newTask.thenableState = getThenableStateAfterSuspending(); // Restore the context. We assume that this will be restored by the inner
-        // functions in case nothing throws so we don't use "finally" here.
 
-        task.keyPath = prevKeyPath;
-        task.implicitSlot = prevImplicitSlot;
+  switch (value) {
+    case REACT_ELEMENT_TYPE:
+      return '$';
+  }
 
-        if (wasReactNode) {
-          return serializeLazyID(newTask.id);
-        }
 
-        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.
+  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.
+
 
+            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) {
@@ -2137,152 +2110,61 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
   }
 
   if (typeof value === 'object') {
-    switch (value.$$typeof) {
-      case REACT_ELEMENT_TYPE:
-        {
-          var _writtenObjects = request.writtenObjects;
-
-          var _existingId = _writtenObjects.get(value);
-
-          if (_existingId !== undefined) {
-            if (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) {
@@ -2296,7 +2178,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     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.
 
 
@@ -2308,14 +2190,14 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     {
       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]
@@ -2330,9 +2212,9 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     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);
       }
     }
@@ -2360,21 +2242,19 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
   }
 
   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));
     }
   }
 
@@ -2392,7 +2272,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
 
     if (Symbol.for(name) !== value) {
       throw new Error('Only global symbols received from Symbol.for(...) can be passed to Client Components. ' + ("The symbol Symbol.for(" + // $FlowFixMe[incompatible-type] `description` might be undefined
-      value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, parentPropertyName));
+      value.description + ") cannot be found among global symbols.") + describeObjectForErrorMessage(parent, key));
     }
 
     request.pendingChunks++;
@@ -2407,44 +2287,17 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     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) {
-      // Exit the request context while running callbacks.
-      requestStorage.run(undefined, onPostpone, reason);
-    } 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) {
-      // Exit the request context while running callbacks.
-      errorDigest = requestStorage.run(undefined, onError, error);
-    } 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
@@ -2503,11 +2356,8 @@ function emitErrorChunk(request, id, digest, error) {
         message = String(error.message); // eslint-disable-next-line react-internal/safe-string-coercion
 
         stack = String(error.stack);
-      } else if (typeof error === 'object' && error !== null) {
-        message = describeObjectForErrorMessage(error);
       } else {
-        // 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.';
@@ -2547,79 +2397,62 @@ function emitSymbolChunk(request, id, name) {
   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) {
@@ -2645,10 +2478,6 @@ function retryTask(request, task) {
     task.status = ERRORED$1;
     var digest = logRecoverableError(request, x);
     emitErrorChunk(request, task.id, digest, x);
-  } finally {
-    {
-      debugID = prevDebugID;
-    }
   }
 }
 
@@ -2865,6 +2694,11 @@ function abort(request, reason) {
   }
 }
 
+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;
@@ -3568,7 +3402,7 @@ function decodeFormState(actionResult, body, serverManifest) {
 }
 
 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;