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

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

@@ -10,8 +10,8 @@
 
 'use strict';
 
-var ReactDOM = require('react-dom');
 var React = require('react');
+var ReactDOM = require('react-dom');
 
 // -----------------------------------------------------------------------------
 const enablePostpone = false;
@@ -19,7 +19,7 @@ const enablePostpone = false;
 function scheduleWork(callback) {
   setTimeout(callback, 0);
 }
-const VIEW_SIZE = 512;
+const VIEW_SIZE = 2048;
 let currentView = null;
 let writtenBytes = 0;
 function beginWriting(destination) {
@@ -32,10 +32,9 @@ function writeChunk(destination, chunk) {
   }
 
   if (chunk.byteLength > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
     // one that is cached by the streaming renderer. We will enqueu
     // it directly and expect it is not re-used
-
-
     if (writtenBytes > 0) {
       destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
       currentView = new Uint8Array(VIEW_SIZE);
@@ -110,10 +109,10 @@ function closeWithError(destination, error) {
 }
 
 // eslint-disable-next-line no-unused-vars
-const CLIENT_REFERENCE_TAG$1 = Symbol.for('react.client.reference');
+const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
 const 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;
@@ -125,7 +124,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
@@ -146,7 +145,6 @@ function bind() {
   const newFn = FunctionBind.apply(this, arguments);
 
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
-
     const args = ArraySlice.call(arguments, 1);
     return Object.defineProperties(newFn, {
       $$typeof: {
@@ -173,16 +171,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
     }
   });
 }
@@ -221,10 +216,6 @@ const 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
@@ -266,10 +257,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.
@@ -310,10 +297,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.');
-  }
-
   let cachedReference = target[name];
 
   if (!cachedReference) {
@@ -408,9 +391,7 @@ function getServerReferenceBoundArguments(config, serverReference) {
 
 const ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
-const previousDispatcher = ReactDOMCurrentDispatcher.current;
-ReactDOMCurrentDispatcher.current = {
+const ReactDOMFlightServerDispatcher = {
   prefetchDNS,
   preconnect,
   preload,
@@ -436,8 +417,6 @@ function prefetchDNS(href) {
 
         hints.add(key);
         emitHint(request, 'D', href);
-      } else {
-        previousDispatcher.prefetchDNS(href);
       }
     }
   }
@@ -464,8 +443,6 @@ function preconnect(href, crossOrigin) {
         } else {
           emitHint(request, 'C', href);
         }
-      } else {
-        previousDispatcher.preconnect(href, crossOrigin);
       }
     }
   }
@@ -499,8 +476,6 @@ function preload(href, as, options) {
         } else {
           emitHint(request, 'L', [href, as]);
         }
-      } else {
-        previousDispatcher.preload(href, as, options);
       }
     }
   }
@@ -528,8 +503,6 @@ function preloadModule$1(href, options) {
         } else {
           return emitHint(request, 'm', href);
         }
-      } else {
-        previousDispatcher.preloadModule(href, options);
       }
     }
   }
@@ -559,21 +532,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') {
       const request = resolveRequest();
 
       if (request) {
         const hints = getHints(request);
-        const key = 'X|' + src;
+        const key = 'X|' + href;
 
         if (hints.has(key)) {
           // duplicate hint
@@ -584,25 +555,23 @@ function preinitScript(src, options) {
         const 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') {
       const request = resolveRequest();
 
       if (request) {
         const hints = getHints(request);
-        const key = 'M|' + src;
+        const key = 'M|' + href;
 
         if (hints.has(key)) {
           // duplicate hint
@@ -613,12 +582,10 @@ function preinitModuleScript(src, options) {
         const 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);
       }
     }
   }
@@ -660,7 +627,10 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
   return "[image]" + uniquePart;
 }
 
-// This module registers the host dispatcher so it needs to be imported
+const 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.
@@ -689,7 +659,7 @@ typeof async_hooks === 'object' ? async_hooks.executionAsyncId : null;
 // The Symbol used to tag the ReactElement-like types.
 const REACT_ELEMENT_TYPE = Symbol.for('react.element');
 const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-const REACT_CONTEXT_TYPE = Symbol.for('react.context');
+const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
 const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
 const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
@@ -713,6 +683,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.
+
+
+const 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.
+
+let 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);
+    const parentPrev = prev.parent;
+    const 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);
+  const parentPrev = prev.parent;
+
+  if (parentPrev !== null) {
+    popAllPrevious(parentPrev);
+  }
+}
+
+function pushAllNext(next) {
+  const parentNext = next.parent;
+
+  if (parentNext !== null) {
+    pushAllNext(parentNext);
+  }
+
+  pushNode(next);
+}
+
+function popPreviousToCommonLevel(prev, next) {
+  popNode(prev);
+  const 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) {
+  const 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.
+  const prev = currentActiveSnapshot;
+  const 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) {
+  const 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"
@@ -841,13 +951,16 @@ 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.
-  const state = thenableState || createThenableState();
+  const state = thenableState;
   thenableState = null;
   return state;
 }
+
+function readContext(context) {
+
+  return readContext$1(context);
+}
+
 const HooksDispatcher = {
   useMemo(nextCreate) {
     return nextCreate();
@@ -861,8 +974,8 @@ const HooksDispatcher = {
 
   useDeferredValue: unsupportedHook,
   useTransition: unsupportedHook,
-  readContext: unsupportedContext,
-  useContext: unsupportedContext,
+  readContext,
+  useContext: readContext,
   useReducer: unsupportedHook,
   useRef: unsupportedHook,
   useState: unsupportedHook,
@@ -898,10 +1011,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');
@@ -927,22 +1036,14 @@ function use(usable) {
       }
 
       return trackUsedThenable(thenableState, thenable, index);
-    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
-      unsupportedContext();
+    } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
+      const 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.');
-    }
-  } else {
-    throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion
-    'An unsupported type was passed to use(): ' + String(usable));
-  }
+
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
 
 function createSignal() {
@@ -1021,10 +1122,6 @@ function describeValueForErrorMessage(value) {
           return '[...]';
         }
 
-        if (value !== null && value.$$typeof === CLIENT_REFERENCE_TAG) {
-          return describeClientReference();
-        }
-
         const name = objectName(value);
 
         if (name === 'Object') {
@@ -1035,14 +1132,7 @@ function describeValueForErrorMessage(value) {
       }
 
     case 'function':
-      {
-        if (value.$$typeof === CLIENT_REFERENCE_TAG) {
-          return describeClientReference();
-        }
-
-        const name = value.displayName || value.name;
-        return name ? 'function ' + name : 'function';
-      }
+      return 'function';
 
     default:
       // eslint-disable-next-line react-internal/safe-string-coercion
@@ -1088,12 +1178,6 @@ function describeElementType(type) {
   return '';
 }
 
-const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
-
-function describeClientReference(ref) {
-  return 'client';
-}
-
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   const objKind = objectName(objectOrArray);
 
@@ -1141,8 +1225,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 {
       // Print Object
       str = '{';
@@ -1222,11 +1304,12 @@ function defaultPostponeHandler(reason) {// Noop
 const OPEN = 0;
 const CLOSING = 1;
 const 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;
   const abortSet = new Set();
   const pingedTasks = [];
@@ -1252,15 +1335,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);
+    }
   };
-
-  const rootTask = createTask(request, model, null, false, abortSet);
+  request.pendingChunks++;
+  const rootContext = createRootContext();
+  const rootTask = createTask(request, model, rootContext, abortSet);
   pingedTasks.push(rootTask);
   return request;
 }
@@ -1276,9 +1365,13 @@ function resolveRequest() {
   return null;
 }
 
-function serializeThenable(request, task, thenable) {
-  const newTask = createTask(request, null, task.keyPath, // the server component sequence continues through Promise-as-a-child.
-  task.implicitSlot, request.abortableTasks);
+function createRootContext(reqContext) {
+  return importServerContexts();
+}
+
+function serializeThenable(request, thenable) {
+  request.pendingChunks++;
+  const newTask = createTask(request, null, getActiveContext(), request.abortableTasks);
 
   switch (thenable.status) {
     case 'fulfilled':
@@ -1412,117 +1505,61 @@ function createLazyWrapperAroundWakeable(wakeable) {
     _payload: thenable,
     _init: readThenable
   };
-
   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.
-  const prevThenableState = task.thenableState;
-  task.thenableState = null;
-
-  prepareToUseHooksForComponent(prevThenableState); // The secondArg is always undefined in Server Components since refs error early.
-
-  const secondArg = undefined;
-  let 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.
-    const 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..
-
-
-  const prevKeyPath = task.keyPath;
-  const 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;
-  }
-
-  const json = renderModelDestructive(request, task, emptyRoot, '', result);
-  task.keyPath = prevKeyPath;
-  task.implicitSlot = prevImplicitSlot;
-  return json;
-}
-
-function renderFragment(request, task, children) {
-
-  {
-    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.
-
-
-let debugID = null;
-
-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.');
   }
 
   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.
 
 
-    return renderFunctionComponent(request, task, key, type, props);
+    prepareToUseHooksForComponent(prevThenableState);
+    const 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.
+      const thenable = result;
+
+      if (thenable.status === 'fulfilled') {
+        return thenable.value;
+      } // TODO: Once we accept Promises as children on the client, we can just return
+      // the thenable here.
+
+
+      return createLazyWrapperAroundWakeable(result);
+    }
+
+    return result;
   } 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.
-      const prevImplicitSlot = task.implicitSlot;
-
-      if (task.keyPath === null) {
-        task.implicitSlot = true;
-      }
-
-      const 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) {
@@ -1531,17 +1568,19 @@ function renderElement(request, task, type, key, ref, props) {
           const payload = type._payload;
           const init = type._init;
           const 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);
+          const 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);
         }
     }
   }
@@ -1559,30 +1598,14 @@ function pingTask(request, task) {
   }
 }
 
-function createTask(request, model, keyPath, implicitSlot, abortSet) {
-  request.pendingChunks++;
+function createTask(request, model, context, abortSet) {
   const 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);
-    }
-  }
-
   const task = {
     id,
     status: PENDING$1,
     model,
-    keyPath,
-    implicitSlot,
+    context,
     ping: () => pingTask(request, task),
-    toJSON: function (parentPropertyName, value) {
-      const parent = this; // Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-
-      return renderModel(request, task, parent, parentPropertyName, value);
-    },
     thenableState: null
   };
   abortSet.add(task);
@@ -1651,13 +1674,13 @@ function encodeReferenceChunk(request, id, reference) {
   return stringToChunk(row);
 }
 
-function serializeClientReference(request, parent, parentPropertyName, clientReference) {
+function serializeClientReference(request, parent, key, clientReference) {
   const clientReferenceKey = getClientReferenceKey(clientReference);
   const writtenClientReferences = request.writtenClientReferences;
   const 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
@@ -1676,7 +1699,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
@@ -1696,14 +1719,13 @@ function serializeClientReference(request, parent, parentPropertyName, clientRef
 }
 
 function outlineModel(request, value) {
-  const 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++;
+  const newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
   retryTask(request, newTask);
   return newTask.id;
 }
 
-function serializeServerReference(request, serverReference) {
+function serializeServerReference(request, parent, key, serverReference) {
   const writtenServerReferences = request.writtenServerReferences;
   const existingId = writtenServerReferences.get(serverReference);
 
@@ -1783,77 +1805,91 @@ function escapeStringValue(value) {
     return value;
   }
 }
-
 let modelRoot = false;
 
-function renderModel(request, task, parent, key, value) {
-  const prevKeyPath = task.keyPath;
-  const prevImplicitSlot = task.implicitSlot;
+function resolveModelToJSON(request, parent, key, value) {
 
-  try {
-    return renderModelDestructive(request, task, parent, key, value);
-  } catch (thrownValue) {
-    const 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.
 
-    const model = task.model;
-    const wasReactNode = typeof model === 'object' && model !== null && (model.$$typeof === REACT_ELEMENT_TYPE || model.$$typeof === REACT_LAZY_TYPE);
+  switch (value) {
+    case REACT_ELEMENT_TYPE:
+      return '$';
+  }
 
-    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.
-        const newTask = createTask(request, task.model, task.keyPath, task.implicitSlot, request.abortableTasks);
-        const 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;
+  while (typeof value === 'object' && value !== null && (value.$$typeof === REACT_ELEMENT_TYPE || value.$$typeof === REACT_LAZY_TYPE)) {
 
-        if (wasReactNode) {
-          return serializeLazyID(newTask.id);
-        }
+    try {
+      switch (value.$$typeof) {
+        case REACT_ELEMENT_TYPE:
+          {
+            const writtenObjects = request.writtenObjects;
+            const existingId = writtenObjects.get(value);
+
+            if (existingId !== undefined) {
+              if (existingId === -1) {
+                // Seen but not yet outlined.
+                const 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.
 
+            const 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:
+          {
+            const payload = value._payload;
+            const init = value._init;
+            value = init(payload);
+            break;
+          }
+      }
+    } catch (thrownValue) {
+      const 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++;
+          const newTask = createTask(request, value, getActiveContext(), request.abortableTasks);
+          const 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++;
       const errorId = request.nextChunkId++;
       const digest = logRecoverableError(request, x);
       emitErrorChunk(request, errorId, digest);
       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) {
@@ -1861,70 +1897,9 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
   }
 
   if (typeof value === 'object') {
-    switch (value.$$typeof) {
-      case REACT_ELEMENT_TYPE:
-        {
-          const writtenObjects = request.writtenObjects;
-          const 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.
-              const 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);
-          }
-
-          const element = value;
-
-          const props = element.props;
-          let 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;
-          const lazy = value;
-          const payload = lazy._payload;
-          const init = lazy._init;
-          const resolvedModel = init(payload);
-
-          return renderModelDestructive(request, task, emptyRoot, '', resolvedModel);
-        }
-    }
 
     if (isClientReference(value)) {
-      return serializeClientReference(request, parent, parentPropertyName, value);
+      return serializeClientReference(request, parent, key, value);
     }
 
     const writtenObjects = request.writtenObjects;
@@ -1944,20 +1919,20 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
       // or a Promise type. Either of which can be represented by a Promise.
 
 
-      const promiseId = serializeThenable(request, task, value);
+      const 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 === -1) {
         // Seen but not yet outlined.
         const 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.
@@ -1970,7 +1945,8 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     }
 
     if (isArray(value)) {
-      return renderFragment(request, task, value);
+      // $FlowFixMe[incompatible-return]
+      return value;
     }
 
     if (value instanceof Map) {
@@ -1984,7 +1960,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     const iteratorFn = getIteratorFn(value);
 
     if (iteratorFn) {
-      return renderFragment(request, task, Array.from(value));
+      return Array.from(value);
     } // Verify that this is a simple plain object.
 
 
@@ -2004,7 +1980,7 @@ function renderModelDestructive(request, task, parent, parentPropertyName, value
     if (value[value.length - 1] === 'Z') {
       // Possibly a Date, whose toJSON automatically calls toISOString
       // $FlowFixMe[incompatible-use]
-      const originalValue = parent[parentPropertyName];
+      const originalValue = parent[key];
 
       if (originalValue instanceof Date) {
         return serializeDateFromDateJSON(value);
@@ -2034,18 +2010,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.');
+    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));
     }
   }
 
@@ -2062,7 +2039,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++;
@@ -2077,44 +2054,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) {
-  const prevRequest = currentRequest;
-  currentRequest = null;
-
-  try {
-    const onPostpone = request.onPostpone;
-
-    if (supportsRequestStorage) {
-      // Exit the request context while running callbacks.
-      requestStorage.run(undefined, onPostpone, reason);
-    } else {
-      onPostpone(reason);
-    }
-  } finally {
-    currentRequest = prevRequest;
-  }
+  const onPostpone = request.onPostpone;
+  onPostpone(reason);
 }
 
 function logRecoverableError(request, error) {
-  const prevRequest = currentRequest;
-  currentRequest = null;
-  let errorDigest;
-
-  try {
-    const 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;
-  }
+  const onError = request.onError;
+  const errorDigest = onError(error);
 
   if (errorDigest != null && typeof errorDigest !== 'string') {
     // eslint-disable-next-line react-internal/prod-error-codes
@@ -2184,54 +2134,62 @@ function emitSymbolChunk(request, id, name) {
   request.completedImportChunks.push(processedChunk);
 }
 
-function emitModelChunk(request, id, json) {
+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
+
+  const json = stringify(model, request.toJSON);
   const row = id.toString(16) + ':' + json + '\n';
   const processedChunk = stringToChunk(row);
   request.completedRegularChunks.push(processedChunk);
 }
 
-const emptyRoot = {};
-
 function retryTask(request, task) {
   if (task.status !== PENDING$1) {
     // We completed this by other means before we had a chance to retry it.
     return;
   }
 
+  switchContext(task.context);
+
   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;
+    let value = task.model;
 
-    if (false) ; // 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.
 
+      const element = value; // When retrying a component, reuse the thenableState from the
+      // previous attempt.
 
-    const resolvedModel = renderModelDestructive(request, task, emptyRoot, '', task.model);
+      const 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 (false) ; // 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;
-    let json;
+        const 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) {
@@ -2257,7 +2215,6 @@ function retryTask(request, task) {
     task.status = ERRORED$1;
     const digest = logRecoverableError(request, x);
     emitErrorChunk(request, task.id, digest);
-  } finally {
   }
 }
 
@@ -2447,6 +2404,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
 const ID = 0;
@@ -3133,7 +3095,7 @@ function decodeFormState(actionResult, body, serverManifest) {
 }
 
 function renderToReadableStream(model, webpackMap, options) {
-  const request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined);
+  const request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined, options ? options.onPostpone : undefined);
 
   if (options && options.signal) {
     const signal = options.signal;