[Fizz] Track postponed holes in the prerender pass (#27317)

This is basically the implementation for the prerender pass.

Instead of forking basically the whole implementation for prerender, I
just add a conditional field on the request. If it's `null` it behaves
like before. If it's non-`null` then instead of triggering client
rendered boundaries it triggers those into a "postponed" state which is
basically just a variant of "pending". It's supposed to be filled in
later.

It also builds up a serializable tree of which path can be followed to
find the holes. This is basically a reverse `KeyPath` tree.

It is unfortunate that this approach adds more code to the regular Fizz
builds but in practice. It seems like this side is not going to add much
code and we might instead just want to merge the builds so that it's
smaller when you have `prerender` and `resume` in the same bundle -
which I think will be common in practice.

This just implements the prerender side, and not the resume side, which
is why the tests have a TODO. That's in a follow up PR.

DiffTrain build for [b70a0d7](b70a0d7)

Author: sebmarkbage

compiled/facebook-www/REVISION

@@ -1 +1 @@
-2fba484cd095ea79b940364cea5107fa4ca9f0c8
+b70a0d70224ceb4e277bd8ac535a2caafa5c075a

compiled/facebook-www/ReactDOMServer-dev.classic.js

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-b66d17d9";
+var ReactVersion = "18.3.0-www-classic-b794beee";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9789,14 +9789,14 @@ function getStackByComponentStackNode(componentStack) {
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 var ReactCurrentCache = ReactSharedInternals.ReactCurrentCache;
 var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; // Linked list representing the identity of a component given the component/tag name and key.
-// The name might be minified but we assume that it's going to be the same generated name. Typically
-// because it's just the same compiled output in practice.
+var CLIENT_RENDERED = 4; // if it errors or infinitely suspends
 
 var PENDING = 0;
 var COMPLETED = 1;
 var FLUSHED = 2;
 var ABORTED = 3;
 var ERRORED = 4;
+var POSTPONED = 5;
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2; // This is a default heuristic for how to split up the HTML content into progressive
@@ -9846,6 +9846,7 @@ function createRequest(
     flushScheduled: false,
     resumableState: resumableState,
     renderState: renderState,
+    rootFormatContext: rootFormatContext,
     progressiveChunkSize:
       progressiveChunkSize === undefined
         ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
@@ -9861,6 +9862,7 @@ function createRequest(
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
+    trackedPostpones: null,
     onError: onError === undefined ? defaultErrorHandler : onError,
     onPostpone: onPostpone === undefined ? noop : onPostpone,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
@@ -9913,18 +9915,19 @@ function pingTask(request, task) {
   }
 }
 
-function createSuspenseBoundary(request, fallbackAbortableTasks) {
+function createSuspenseBoundary(request, fallbackAbortableTasks, keyPath) {
   return {
+    status: PENDING,
     id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
     rootSegmentID: -1,
     parentFlushed: false,
     pendingTasks: 0,
-    forceClientRender: false,
     completedSegments: [],
     byteSize: 0,
     fallbackAbortableTasks: fallbackAbortableTasks,
     errorDigest: null,
-    resources: createBoundaryResources()
+    resources: createBoundaryResources(),
+    keyPath: keyPath
   };
 }
 
@@ -10117,7 +10120,11 @@ function renderSuspenseBoundary(request, task, props) {
   var fallback = props.fallback;
   var content = props.children;
   var fallbackAbortSet = new Set();
-  var newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
+  var newBoundary = createSuspenseBoundary(
+    request,
+    fallbackAbortSet,
+    task.keyPath
+  );
   var insertionIndex = parentSegment.chunks.length; // The children of the boundary segment is actually the fallback.
 
   var boundarySegment = createPendingSegment(
@@ -10172,16 +10179,17 @@ function renderSuspenseBoundary(request, task, props) {
     contentRootSegment.status = COMPLETED;
     queueCompletedSegment(newBoundary, contentRootSegment);
 
-    if (newBoundary.pendingTasks === 0) {
-      // This must have been the last segment we were waiting on. This boundary is now complete.
+    if (newBoundary.pendingTasks === 0 && newBoundary.status === PENDING) {
+      newBoundary.status = COMPLETED; // This must have been the last segment we were waiting on. This boundary is now complete.
       // Therefore we won't need the fallback. We early return so that we don't have to create
       // the fallback.
+
       popComponentStackInDEV(task);
       return;
     }
   } catch (error) {
     contentRootSegment.status = ERRORED;
-    newBoundary.forceClientRender = true;
+    newBoundary.status = CLIENT_RENDERED;
     var errorDigest;
 
     {
@@ -11134,43 +11142,45 @@ function renderNode(request, task, node, childIndex) {
           // (unstable) API for suspending. This implementation detail can change
           // later, once we deprecate the old API in favor of `use`.
           getSuspendedThenable()
-        : thrownValue; // $FlowFixMe[method-unbinding]
+        : thrownValue;
 
-    if (typeof x === "object" && x !== null && typeof x.then === "function") {
-      var wakeable = x;
-      var thenableState = getThenableStateAfterSuspending();
-      spawnNewSuspendedTask(request, task, thenableState, wakeable); // 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.
+    if (typeof x === "object" && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === "function") {
+        var wakeable = x;
+        var thenableState = getThenableStateAfterSuspending();
+        spawnNewSuspendedTask(request, task, thenableState, wakeable); // 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.blockedSegment.formatContext = previousFormatContext;
-      task.legacyContext = previousLegacyContext;
-      task.context = previousContext;
-      task.keyPath = previousKeyPath; // Restore all active ReactContexts to what they were before.
+        task.blockedSegment.formatContext = previousFormatContext;
+        task.legacyContext = previousLegacyContext;
+        task.context = previousContext;
+        task.keyPath = previousKeyPath; // Restore all active ReactContexts to what they were before.
 
-      switchContext(previousContext);
+        switchContext(previousContext);
 
-      {
-        task.componentStack = previousComponentStack;
+        {
+          task.componentStack = previousComponentStack;
+        }
+
+        return;
       }
+    } // 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.
 
-      return;
-    } else {
-      // 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.blockedSegment.formatContext = previousFormatContext;
-      task.legacyContext = previousLegacyContext;
-      task.context = previousContext;
-      task.keyPath = previousKeyPath; // Restore all active ReactContexts to what they were before.
+    task.blockedSegment.formatContext = previousFormatContext;
+    task.legacyContext = previousLegacyContext;
+    task.context = previousContext;
+    task.keyPath = previousKeyPath; // Restore all active ReactContexts to what they were before.
 
-      switchContext(previousContext);
+    switchContext(previousContext);
 
-      {
-        task.componentStack = previousComponentStack;
-      } // We assume that we don't need the correct context.
-      // Let's terminate the rest of the tree and don't render any siblings.
+    {
+      task.componentStack = previousComponentStack;
+    } // We assume that we don't need the correct context.
+    // Let's terminate the rest of the tree and don't render any siblings.
 
-      throw x;
-    }
+    throw x;
   }
 }
 
@@ -11187,8 +11197,8 @@ function erroredTask(request, boundary, segment, error) {
   } else {
     boundary.pendingTasks--;
 
-    if (!boundary.forceClientRender) {
-      boundary.forceClientRender = true;
+    if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
       boundary.errorDigest = errorDigest;
 
       {
@@ -11243,8 +11253,8 @@ function abortTask(task, request, error) {
   } else {
     boundary.pendingTasks--;
 
-    if (!boundary.forceClientRender) {
-      boundary.forceClientRender = true;
+    if (boundary.status !== CLIENT_RENDERED) {
+      boundary.status = CLIENT_RENDERED;
       boundary.errorDigest = request.onError(error);
 
       {
@@ -11331,9 +11341,12 @@ function finishedTask(request, boundary, segment) {
   } else {
     boundary.pendingTasks--;
 
-    if (boundary.forceClientRender);
+    if (boundary.status === CLIENT_RENDERED);
     else if (boundary.pendingTasks === 0) {
-      // This must have been the last segment we were waiting on. This boundary is now complete.
+      if (boundary.status === PENDING) {
+        boundary.status = COMPLETED;
+      } // This must have been the last segment we were waiting on. This boundary is now complete.
+
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
         // If it is a segment that was aborted, we'll write other content instead so we don't need
@@ -11444,18 +11457,23 @@ function retryTask(request, task) {
           // (unstable) API for suspending. This implementation detail can change
           // later, once we deprecate the old API in favor of `use`.
           getSuspendedThenable()
-        : thrownValue; // $FlowFixMe[method-unbinding]
-
-    if (typeof x === "object" && x !== null && typeof x.then === "function") {
-      // Something suspended again, let's pick it back up later.
-      var ping = task.ping;
-      x.then(ping, ping);
-      task.thenableState = getThenableStateAfterSuspending();
-    } else {
-      task.abortSet.delete(task);
-      segment.status = ERRORED;
-      erroredTask(request, task.blockedBoundary, segment, x);
+        : thrownValue;
+
+    if (typeof x === "object" && x !== null) {
+      // $FlowFixMe[method-unbinding]
+      if (typeof x.then === "function") {
+        // Something suspended again, let's pick it back up later.
+        var ping = task.ping;
+        x.then(ping, ping);
+        task.thenableState = getThenableStateAfterSuspending();
+        return;
+      }
     }
+
+    task.abortSet.delete(task);
+    segment.status = ERRORED;
+    erroredTask(request, task.blockedBoundary, segment, x);
+    return;
   } finally {
     {
       setCurrentlyRenderingBoundaryResourcesTarget(request.renderState, null);
@@ -11545,7 +11563,11 @@ function flushSubtree(request, destination, segment) {
     case PENDING: {
       // We're emitting a placeholder for this segment to be filled in later.
       // Therefore we'll need to assign it an ID - to refer to it by.
-      var segmentID = (segment.id = request.nextSegmentId++); // When this segment finally completes it won't be embedded in text since it will flush separately
+      segment.id = request.nextSegmentId++; // Fallthrough
+    }
+
+    case POSTPONED: {
+      var segmentID = segment.id; // When this segment finally completes it won't be embedded in text since it will flush separately
 
       segment.lastPushedText = false;
       segment.textEmbedded = false;
@@ -11599,7 +11621,7 @@ function flushSegment(request, destination, segment) {
   boundary.parentFlushed = true; // This segment is a Suspense boundary. We need to decide whether to
   // emit the content or the fallback now.
 
-  if (boundary.forceClientRender) {
+  if (boundary.status === CLIENT_RENDERED) {
     // Emit a client rendered suspense boundary wrapper.
     // We never queue the inner boundary so we'll never emit its content or partial segments.
     writeStartClientRenderedSuspenseBoundary(
@@ -11615,20 +11637,23 @@ function flushSegment(request, destination, segment) {
       destination,
       request.renderState
     );
-  } else if (boundary.pendingTasks > 0) {
-    // This boundary is still loading. Emit a pending suspense boundary wrapper.
+  } else if (boundary.status !== COMPLETED) {
+    if (boundary.status === PENDING) {
+      boundary.id = assignSuspenseBoundaryID(
+        request.renderState,
+        request.resumableState
+      );
+    } // This boundary is still loading. Emit a pending suspense boundary wrapper.
     // Assign an ID to refer to the future content by.
+
     boundary.rootSegmentID = request.nextSegmentId++;
 
     if (boundary.completedSegments.length > 0) {
       // If this is at least partially complete, we can queue it to be partially emitted early.
       request.partialBoundaries.push(boundary);
     } /// This is the first time we should have referenced this ID.
 
-    var id = (boundary.id = assignSuspenseBoundaryID(
-      request.renderState,
-      request.resumableState
-    ));
+    var id = boundary.id;
     writeStartPendingSuspenseBoundary(destination, request.renderState, id); // Flush the fallback.
 
     flushSubtree(request, destination, segment);
@@ -11924,7 +11949,11 @@ function flushCompletedQueues(request, destination) {
       request.flushScheduled = false;
 
       {
-        writePostamble(destination, request.resumableState);
+        // We write the trailing tags but only if don't have any data to resume.
+        // If we need to resume we'll write the postamble in the resume instead.
+        {
+          writePostamble(destination, request.resumableState);
+        }
       }
 
       {
@@ -11940,7 +11969,7 @@ function flushCompletedQueues(request, destination) {
   }
 }
 
-function startWork(request) {
+function startRender(request) {
   request.flushScheduled = request.destination !== null;
 
   {
@@ -12019,7 +12048,7 @@ function flushResources(request) {
 }
 function getResumableState(request) {
   return request.resumableState;
-} // Returns the state of a postponed request or null if nothing was postponed.
+}
 
 function onError() {
   // Non-fatal errors are ignored.
@@ -12076,7 +12105,7 @@ function renderToStringImpl(
     undefined,
     undefined
   );
-  startWork(request); // If anything suspended and is still pending, we'll abort it before writing.
+  startRender(request); // If anything suspended and is still pending, we'll abort it before writing.
   // That way we write only client-rendered boundaries from the start.
 
   abort(request, abortReason);