[Fizz] Fix root segment IDs (#27371)

Typically we assign IDs lazily when flushing to minimize the ids we have
to assign and we try to maximize inlining.

When we prerender we could always flush into a buffer before returning
but that's not actually what we do right now. We complete rendering
before returning but we don't actually run the flush path until someone
reads the resulting stream. We assign IDs eagerly when something
postpone so that we can refer to those ids in the holes without flushing
first.

This leads to some interesting conditions that needs to consider this.

This PR also deals with rootSegmentId which is the ID of the segment
that contains the body of a Suspense boundary. The boundary needs to
know this in addition to the Suspense Boundary's ID to know how to
inject the root segment into the boundary.

Why is the suspense boundary ID and the rootSegmentID just not the same
ID? Why don't segments and suspense boundary not share ID namespace?
That's a good question and I don't really remember. It might not be a
good reason and maybe they should just be the same.

DiffTrain build for [a6e4791](a6e4791)

Author: sebmarkbage

compiled/facebook-www/REVISION

@@ -1 +1 @@
-95c9554bc72813b0ee2b028774bb7cf0482887ba
+a6e4791b11816374d015eb4531a82e6cf209c7f2

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-62f810e0";
+var ReactVersion = "18.3.0-www-classic-f2b91051";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -11337,7 +11337,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     segment.chunks.length === 0 &&
     segment.children.length === 1 &&
-    segment.children[0].boundary === null
+    segment.children[0].boundary === null && // Typically the id would not be assigned yet but if it's a postponed segment it might be.
+    segment.children[0].id === -1
   ) {
     // This is an empty segment. There's nothing to write, so we can instead transfer the ID
     // to the child. That way any existing references point to the child.
@@ -11681,19 +11682,20 @@ function flushSegment(request, destination, segment) {
     );
   } else if (boundary.status !== COMPLETED) {
     if (boundary.status === PENDING) {
+      // For pending boundaries we lazily assign an ID to the boundary
+      // and root segment.
       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++;
+      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.
+    } // This boundary is still loading. Emit a pending suspense boundary wrapper.
+    /// This is the first time we should have referenced this ID.
 
     var id = boundary.id;
     writeStartPendingSuspenseBoundary(destination, request.renderState, id); // Flush the fallback.
@@ -11861,6 +11863,10 @@ function flushPartiallyCompletedSegment(
       );
     }
 
+    return flushSegmentContainer(request, destination, segment);
+  } else if (segmentID === boundary.rootSegmentID) {
+    // When we emit postponed boundaries, we might have assigned the ID already
+    // but it's still the root segment so we can't inject it into the parent yet.
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);

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

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-9f6e7af7";
+var ReactVersion = "18.3.0-www-modern-82925a4c";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -11085,7 +11085,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     segment.chunks.length === 0 &&
     segment.children.length === 1 &&
-    segment.children[0].boundary === null
+    segment.children[0].boundary === null && // Typically the id would not be assigned yet but if it's a postponed segment it might be.
+    segment.children[0].id === -1
   ) {
     // This is an empty segment. There's nothing to write, so we can instead transfer the ID
     // to the child. That way any existing references point to the child.
@@ -11429,19 +11430,20 @@ function flushSegment(request, destination, segment) {
     );
   } else if (boundary.status !== COMPLETED) {
     if (boundary.status === PENDING) {
+      // For pending boundaries we lazily assign an ID to the boundary
+      // and root segment.
       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++;
+      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.
+    } // This boundary is still loading. Emit a pending suspense boundary wrapper.
+    /// This is the first time we should have referenced this ID.
 
     var id = boundary.id;
     writeStartPendingSuspenseBoundary(destination, request.renderState, id); // Flush the fallback.
@@ -11609,6 +11611,10 @@ function flushPartiallyCompletedSegment(
       );
     }
 
+    return flushSegmentContainer(request, destination, segment);
+  } else if (segmentID === boundary.rootSegmentID) {
+    // When we emit postponed boundaries, we might have assigned the ID already
+    // but it's still the root segment so we can't inject it into the parent yet.
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);

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

@@ -3744,7 +3744,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     0 === segment.chunks.length &&
     1 === segment.children.length &&
-    null === segment.children[0].boundary
+    null === segment.children[0].boundary &&
+    -1 === segment.children[0].id
   ) {
     var childSegment = segment.children[0];
     childSegment.id = segment.id;
@@ -3955,8 +3956,8 @@ function flushSegment(request, destination, segment) {
       JSCompiler_inline_result =
         JSCompiler_inline_result.boundaryPrefix + generatedID.toString(16);
       boundary.id = JSCompiler_inline_result;
+      boundary.rootSegmentID = request.nextSegmentId++;
     }
-    boundary.rootSegmentID = request.nextSegmentId++;
     0 < boundary.completedSegments.length &&
       request.partialBoundaries.push(boundary);
     writeStartPendingSuspenseBoundary(
@@ -4082,6 +4083,8 @@ function flushPartiallyCompletedSegment(
       throw Error(formatProdErrorMessage(392));
     return flushSegmentContainer(request, destination, segment);
   }
+  if (segmentID === boundary.rootSegmentID)
+    return flushSegmentContainer(request, destination, segment);
   flushSegmentContainer(request, destination, segment);
   boundary = request.resumableState;
   request = request.renderState;
@@ -4548,4 +4551,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-aa5cc76a";
+exports.version = "18.3.0-www-classic-f7fe51fc";

compiled/facebook-www/ReactDOMServer-prod.modern.js

@@ -3711,7 +3711,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     0 === segment.chunks.length &&
     1 === segment.children.length &&
-    null === segment.children[0].boundary
+    null === segment.children[0].boundary &&
+    -1 === segment.children[0].id
   ) {
     var childSegment = segment.children[0];
     childSegment.id = segment.id;
@@ -3922,8 +3923,8 @@ function flushSegment(request, destination, segment) {
       JSCompiler_inline_result =
         JSCompiler_inline_result.boundaryPrefix + generatedID.toString(16);
       boundary.id = JSCompiler_inline_result;
+      boundary.rootSegmentID = request.nextSegmentId++;
     }
-    boundary.rootSegmentID = request.nextSegmentId++;
     0 < boundary.completedSegments.length &&
       request.partialBoundaries.push(boundary);
     writeStartPendingSuspenseBoundary(
@@ -4049,6 +4050,8 @@ function flushPartiallyCompletedSegment(
       throw Error(formatProdErrorMessage(392));
     return flushSegmentContainer(request, destination, segment);
   }
+  if (segmentID === boundary.rootSegmentID)
+    return flushSegmentContainer(request, destination, segment);
   flushSegmentContainer(request, destination, segment);
   boundary = request.resumableState;
   request = request.renderState;
@@ -4515,4 +4518,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-ffdd98cf";
+exports.version = "18.3.0-www-modern-8898fe0f";

compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js

@@ -10988,7 +10988,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     segment.chunks.length === 0 &&
     segment.children.length === 1 &&
-    segment.children[0].boundary === null
+    segment.children[0].boundary === null && // Typically the id would not be assigned yet but if it's a postponed segment it might be.
+    segment.children[0].id === -1
   ) {
     // This is an empty segment. There's nothing to write, so we can instead transfer the ID
     // to the child. That way any existing references point to the child.
@@ -11329,19 +11330,20 @@ function flushSegment(request, destination, segment) {
     return writeEndClientRenderedSuspenseBoundary(destination);
   } else if (boundary.status !== COMPLETED) {
     if (boundary.status === PENDING) {
+      // For pending boundaries we lazily assign an ID to the boundary
+      // and root segment.
       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++;
+      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.
+    } // This boundary is still loading. Emit a pending suspense boundary wrapper.
+    /// This is the first time we should have referenced this ID.
 
     var id = boundary.id;
     writeStartPendingSuspenseBoundary(destination, request.renderState, id); // Flush the fallback.
@@ -11509,6 +11511,10 @@ function flushPartiallyCompletedSegment(
       );
     }
 
+    return flushSegmentContainer(request, destination, segment);
+  } else if (segmentID === boundary.rootSegmentID) {
+    // When we emit postponed boundaries, we might have assigned the ID already
+    // but it's still the root segment so we can't inject it into the parent yet.
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);

compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js

@@ -3509,7 +3509,8 @@ function queueCompletedSegment(boundary, segment) {
   if (
     0 === segment.chunks.length &&
     1 === segment.children.length &&
-    null === segment.children[0].boundary
+    null === segment.children[0].boundary &&
+    -1 === segment.children[0].id
   ) {
     var childSegment = segment.children[0];
     childSegment.id = segment.id;
@@ -3610,8 +3611,8 @@ function flushSegment(request, destination, segment) {
       JSCompiler_inline_result =
         JSCompiler_inline_result.boundaryPrefix + generatedID.toString(16);
       boundary.id = JSCompiler_inline_result;
+      boundary.rootSegmentID = request.nextSegmentId++;
     }
-    boundary.rootSegmentID = request.nextSegmentId++;
     0 < boundary.completedSegments.length &&
       request.partialBoundaries.push(boundary);
     writeStartPendingSuspenseBoundary(
@@ -3743,6 +3744,8 @@ function flushPartiallyCompletedSegment(
       );
     return flushSegmentContainer(request, destination, segment);
   }
+  if (segmentID === boundary.rootSegmentID)
+    return flushSegmentContainer(request, destination, segment);
   flushSegmentContainer(request, destination, segment);
   boundary = request.resumableState;
   request = request.renderState;

compiled/facebook-www/ReactTestRenderer-dev.modern.js

@@ -24360,7 +24360,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-1f53bcad";
+var ReactVersion = "18.3.0-www-modern-0976aca4";
 
 // Might add PROFILE later.