[Fizz] hoistables should never flush before the preamble (#28802)

Hoistables should never flush before the preamble however there is a
surprisingly easy way to trigger this to happen by suspending in the
shell of the app. This change modifies the flushing behavior to not emit
any hoistables before the preamble has written. It accomplishes this by
aborting the flush early if there are any pending root tasks remaining.
It's unfortunate we need this extra condition but it's essential that we
don't emit anything before the preamble and at the moment I don't see a
way to do that without introducing a new condition.

There is a test that began to fail with this update. It turns out that
in node the root can be blocked during a resume even for a component
inside a Suspense boundary if that boundary was part of the prerender.
This means that with the current heuristic in this PR boundaries cannot
be flushed during resume until the root is unblocked. This is not ideal
but this is already how Edge works because the root blocks the stream in
that case. This just makes Node deopt in a similar way to edge. We
should improve this but we ought to do so in a way that works for edge
too and it needs to be more comprehensive.

DiffTrain build for [c8a0350](c8a0350)

Author: kassens

compiled/facebook-www/REVISION

@@ -1 +1 @@
-4f5c812a3c4e52d9ea5d908a27a317ac0f26590a
+c8a035036d0f257c514b3628e927dd9dd26e5a09

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

@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "19.0.0-www-classic-bad327f1";
+    var ReactVersion = "19.0.0-www-classic-bf1258d7";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -14369,22 +14369,24 @@ if (__DEV__) {
         // until the sink tells us to stop. When we should stop, we still finish writing
         // that item fully and then yield. At that point we remove the already completed
         // items up until the point we completed them.
+        if (request.pendingRootTasks > 0) {
+          // When there are pending root tasks we don't want to flush anything
+          return;
+        }
+
         var i;
         var completedRootSegment = request.completedRootSegment;
 
         if (completedRootSegment !== null) {
           if (completedRootSegment.status === POSTPONED) {
             // We postponed the root, so we write nothing.
             return;
-          } else if (request.pendingRootTasks === 0) {
-            flushPreamble(request, destination, completedRootSegment);
-            flushSegment(request, destination, completedRootSegment, null);
-            request.completedRootSegment = null;
-            writeCompletedRoot(destination, request.renderState);
-          } else {
-            // We haven't flushed the root yet so we don't need to check any other branches further down
-            return;
           }
+
+          flushPreamble(request, destination, completedRootSegment);
+          flushSegment(request, destination, completedRootSegment, null);
+          request.completedRootSegment = null;
+          writeCompletedRoot(destination, request.renderState);
         }
 
         writeHoistables(

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

@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "19.0.0-www-modern-d8e2224b";
+    var ReactVersion = "19.0.0-www-modern-d9b30156";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -14274,22 +14274,24 @@ if (__DEV__) {
         // until the sink tells us to stop. When we should stop, we still finish writing
         // that item fully and then yield. At that point we remove the already completed
         // items up until the point we completed them.
+        if (request.pendingRootTasks > 0) {
+          // When there are pending root tasks we don't want to flush anything
+          return;
+        }
+
         var i;
         var completedRootSegment = request.completedRootSegment;
 
         if (completedRootSegment !== null) {
           if (completedRootSegment.status === POSTPONED) {
             // We postponed the root, so we write nothing.
             return;
-          } else if (request.pendingRootTasks === 0) {
-            flushPreamble(request, destination, completedRootSegment);
-            flushSegment(request, destination, completedRootSegment, null);
-            request.completedRootSegment = null;
-            writeCompletedRoot(destination, request.renderState);
-          } else {
-            // We haven't flushed the root yet so we don't need to check any other branches further down
-            return;
           }
+
+          flushPreamble(request, destination, completedRootSegment);
+          flushSegment(request, destination, completedRootSegment, null);
+          request.completedRootSegment = null;
+          writeCompletedRoot(destination, request.renderState);
         }
 
         writeHoistables(

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

@@ -5346,10 +5346,11 @@ function flushPartiallyCompletedSegment(
 }
 function flushCompletedQueues(request, destination) {
   try {
-    var i,
-      completedRootSegment = request.completedRootSegment;
-    if (null !== completedRootSegment)
-      if (5 !== completedRootSegment.status && 0 === request.pendingRootTasks) {
+    if (!(0 < request.pendingRootTasks)) {
+      var i,
+        completedRootSegment = request.completedRootSegment;
+      if (null !== completedRootSegment) {
+        if (5 === completedRootSegment.status) return;
         var renderState = request.renderState;
         if (
           (0 !== request.allPendingTasks ||
@@ -5416,141 +5417,145 @@ function flushCompletedQueues(request, destination) {
         flushSegment(request, destination, completedRootSegment, null);
         request.completedRootSegment = null;
         writeBootstrap(destination, request.renderState);
-      } else return;
-    var renderState$jscomp$0 = request.renderState;
-    completedRootSegment = 0;
-    var viewportChunks$jscomp$0 = renderState$jscomp$0.viewportChunks;
-    for (
-      completedRootSegment = 0;
-      completedRootSegment < viewportChunks$jscomp$0.length;
-      completedRootSegment++
-    )
-      destination.push(viewportChunks$jscomp$0[completedRootSegment]);
-    viewportChunks$jscomp$0.length = 0;
-    renderState$jscomp$0.preconnects.forEach(flushResource, destination);
-    renderState$jscomp$0.preconnects.clear();
-    renderState$jscomp$0.fontPreloads.forEach(flushResource, destination);
-    renderState$jscomp$0.fontPreloads.clear();
-    renderState$jscomp$0.highImagePreloads.forEach(flushResource, destination);
-    renderState$jscomp$0.highImagePreloads.clear();
-    renderState$jscomp$0.styles.forEach(preloadLateStyles, destination);
-    renderState$jscomp$0.scripts.forEach(flushResource, destination);
-    renderState$jscomp$0.scripts.clear();
-    renderState$jscomp$0.bulkPreloads.forEach(flushResource, destination);
-    renderState$jscomp$0.bulkPreloads.clear();
-    var hoistableChunks$jscomp$0 = renderState$jscomp$0.hoistableChunks;
-    for (
-      completedRootSegment = 0;
-      completedRootSegment < hoistableChunks$jscomp$0.length;
-      completedRootSegment++
-    )
-      destination.push(hoistableChunks$jscomp$0[completedRootSegment]);
-    hoistableChunks$jscomp$0.length = 0;
-    var clientRenderedBoundaries = request.clientRenderedBoundaries;
-    for (i = 0; i < clientRenderedBoundaries.length; i++) {
-      var boundary = clientRenderedBoundaries[i];
-      renderState$jscomp$0 = destination;
-      var resumableState$jscomp$0 = request.resumableState,
-        renderState$jscomp$1 = request.renderState,
-        id = boundary.rootSegmentID,
-        errorDigest = boundary.errorDigest,
-        scriptFormat = 0 === resumableState$jscomp$0.streamingFormat;
-      scriptFormat
-        ? (renderState$jscomp$0.push(renderState$jscomp$1.startInlineScript),
-          0 === (resumableState$jscomp$0.instructions & 4)
-            ? ((resumableState$jscomp$0.instructions |= 4),
-              renderState$jscomp$0.push(
-                '$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};;$RX("'
-              ))
-            : renderState$jscomp$0.push('$RX("'))
-        : renderState$jscomp$0.push('<template data-rxi="" data-bid="');
-      renderState$jscomp$0.push(renderState$jscomp$1.boundaryPrefix);
-      var chunk$jscomp$1 = id.toString(16);
-      renderState$jscomp$0.push(chunk$jscomp$1);
-      scriptFormat && renderState$jscomp$0.push('"');
-      if (errorDigest)
-        if (scriptFormat) {
-          renderState$jscomp$0.push(",");
-          var chunk$jscomp$2 = escapeJSStringsForInstructionScripts(
-            errorDigest || ""
-          );
-          renderState$jscomp$0.push(chunk$jscomp$2);
-        } else {
-          renderState$jscomp$0.push('" data-dgst="');
-          var chunk$jscomp$3 = escapeTextForBrowser(errorDigest || "");
-          renderState$jscomp$0.push(chunk$jscomp$3);
-        }
-      var JSCompiler_inline_result = scriptFormat
-        ? renderState$jscomp$0.push(")\x3c/script>")
-        : renderState$jscomp$0.push('"></template>');
-      if (!JSCompiler_inline_result) {
-        request.destination = null;
-        i++;
-        clientRenderedBoundaries.splice(0, i);
-        return;
-      }
-    }
-    clientRenderedBoundaries.splice(0, i);
-    var completedBoundaries = request.completedBoundaries;
-    for (i = 0; i < completedBoundaries.length; i++)
-      if (
-        !flushCompletedBoundary(request, destination, completedBoundaries[i])
-      ) {
-        request.destination = null;
-        i++;
-        completedBoundaries.splice(0, i);
-        return;
       }
-    completedBoundaries.splice(0, i);
-    var partialBoundaries = request.partialBoundaries;
-    for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$47 = partialBoundaries[i];
-      a: {
-        clientRenderedBoundaries = request;
-        boundary = destination;
-        var completedSegments = boundary$47.completedSegments;
-        for (
-          JSCompiler_inline_result = 0;
-          JSCompiler_inline_result < completedSegments.length;
-          JSCompiler_inline_result++
-        )
-          if (
-            !flushPartiallyCompletedSegment(
-              clientRenderedBoundaries,
-              boundary,
-              boundary$47,
-              completedSegments[JSCompiler_inline_result]
-            )
-          ) {
-            JSCompiler_inline_result++;
-            completedSegments.splice(0, JSCompiler_inline_result);
-            var JSCompiler_inline_result$jscomp$0 = !1;
-            break a;
+      var renderState$jscomp$0 = request.renderState;
+      completedRootSegment = 0;
+      var viewportChunks$jscomp$0 = renderState$jscomp$0.viewportChunks;
+      for (
+        completedRootSegment = 0;
+        completedRootSegment < viewportChunks$jscomp$0.length;
+        completedRootSegment++
+      )
+        destination.push(viewportChunks$jscomp$0[completedRootSegment]);
+      viewportChunks$jscomp$0.length = 0;
+      renderState$jscomp$0.preconnects.forEach(flushResource, destination);
+      renderState$jscomp$0.preconnects.clear();
+      renderState$jscomp$0.fontPreloads.forEach(flushResource, destination);
+      renderState$jscomp$0.fontPreloads.clear();
+      renderState$jscomp$0.highImagePreloads.forEach(
+        flushResource,
+        destination
+      );
+      renderState$jscomp$0.highImagePreloads.clear();
+      renderState$jscomp$0.styles.forEach(preloadLateStyles, destination);
+      renderState$jscomp$0.scripts.forEach(flushResource, destination);
+      renderState$jscomp$0.scripts.clear();
+      renderState$jscomp$0.bulkPreloads.forEach(flushResource, destination);
+      renderState$jscomp$0.bulkPreloads.clear();
+      var hoistableChunks$jscomp$0 = renderState$jscomp$0.hoistableChunks;
+      for (
+        completedRootSegment = 0;
+        completedRootSegment < hoistableChunks$jscomp$0.length;
+        completedRootSegment++
+      )
+        destination.push(hoistableChunks$jscomp$0[completedRootSegment]);
+      hoistableChunks$jscomp$0.length = 0;
+      var clientRenderedBoundaries = request.clientRenderedBoundaries;
+      for (i = 0; i < clientRenderedBoundaries.length; i++) {
+        var boundary = clientRenderedBoundaries[i];
+        renderState$jscomp$0 = destination;
+        var resumableState$jscomp$0 = request.resumableState,
+          renderState$jscomp$1 = request.renderState,
+          id = boundary.rootSegmentID,
+          errorDigest = boundary.errorDigest,
+          scriptFormat = 0 === resumableState$jscomp$0.streamingFormat;
+        scriptFormat
+          ? (renderState$jscomp$0.push(renderState$jscomp$1.startInlineScript),
+            0 === (resumableState$jscomp$0.instructions & 4)
+              ? ((resumableState$jscomp$0.instructions |= 4),
+                renderState$jscomp$0.push(
+                  '$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};;$RX("'
+                ))
+              : renderState$jscomp$0.push('$RX("'))
+          : renderState$jscomp$0.push('<template data-rxi="" data-bid="');
+        renderState$jscomp$0.push(renderState$jscomp$1.boundaryPrefix);
+        var chunk$jscomp$1 = id.toString(16);
+        renderState$jscomp$0.push(chunk$jscomp$1);
+        scriptFormat && renderState$jscomp$0.push('"');
+        if (errorDigest)
+          if (scriptFormat) {
+            renderState$jscomp$0.push(",");
+            var chunk$jscomp$2 = escapeJSStringsForInstructionScripts(
+              errorDigest || ""
+            );
+            renderState$jscomp$0.push(chunk$jscomp$2);
+          } else {
+            renderState$jscomp$0.push('" data-dgst="');
+            var chunk$jscomp$3 = escapeTextForBrowser(errorDigest || "");
+            renderState$jscomp$0.push(chunk$jscomp$3);
           }
-        completedSegments.splice(0, JSCompiler_inline_result);
-        JSCompiler_inline_result$jscomp$0 = writeHoistablesForBoundary(
-          boundary,
-          boundary$47.contentState,
-          clientRenderedBoundaries.renderState
-        );
+        var JSCompiler_inline_result = scriptFormat
+          ? renderState$jscomp$0.push(")\x3c/script>")
+          : renderState$jscomp$0.push('"></template>');
+        if (!JSCompiler_inline_result) {
+          request.destination = null;
+          i++;
+          clientRenderedBoundaries.splice(0, i);
+          return;
+        }
       }
-      if (!JSCompiler_inline_result$jscomp$0) {
-        request.destination = null;
-        i++;
-        partialBoundaries.splice(0, i);
-        return;
+      clientRenderedBoundaries.splice(0, i);
+      var completedBoundaries = request.completedBoundaries;
+      for (i = 0; i < completedBoundaries.length; i++)
+        if (
+          !flushCompletedBoundary(request, destination, completedBoundaries[i])
+        ) {
+          request.destination = null;
+          i++;
+          completedBoundaries.splice(0, i);
+          return;
+        }
+      completedBoundaries.splice(0, i);
+      var partialBoundaries = request.partialBoundaries;
+      for (i = 0; i < partialBoundaries.length; i++) {
+        var boundary$47 = partialBoundaries[i];
+        a: {
+          clientRenderedBoundaries = request;
+          boundary = destination;
+          var completedSegments = boundary$47.completedSegments;
+          for (
+            JSCompiler_inline_result = 0;
+            JSCompiler_inline_result < completedSegments.length;
+            JSCompiler_inline_result++
+          )
+            if (
+              !flushPartiallyCompletedSegment(
+                clientRenderedBoundaries,
+                boundary,
+                boundary$47,
+                completedSegments[JSCompiler_inline_result]
+              )
+            ) {
+              JSCompiler_inline_result++;
+              completedSegments.splice(0, JSCompiler_inline_result);
+              var JSCompiler_inline_result$jscomp$0 = !1;
+              break a;
+            }
+          completedSegments.splice(0, JSCompiler_inline_result);
+          JSCompiler_inline_result$jscomp$0 = writeHoistablesForBoundary(
+            boundary,
+            boundary$47.contentState,
+            clientRenderedBoundaries.renderState
+          );
+        }
+        if (!JSCompiler_inline_result$jscomp$0) {
+          request.destination = null;
+          i++;
+          partialBoundaries.splice(0, i);
+          return;
+        }
       }
+      partialBoundaries.splice(0, i);
+      var largeBoundaries = request.completedBoundaries;
+      for (i = 0; i < largeBoundaries.length; i++)
+        if (!flushCompletedBoundary(request, destination, largeBoundaries[i])) {
+          request.destination = null;
+          i++;
+          largeBoundaries.splice(0, i);
+          return;
+        }
+      largeBoundaries.splice(0, i);
     }
-    partialBoundaries.splice(0, i);
-    var largeBoundaries = request.completedBoundaries;
-    for (i = 0; i < largeBoundaries.length; i++)
-      if (!flushCompletedBoundary(request, destination, largeBoundaries[i])) {
-        request.destination = null;
-        i++;
-        largeBoundaries.splice(0, i);
-        return;
-      }
-    largeBoundaries.splice(0, i);
   } finally {
     0 === request.allPendingTasks &&
       0 === request.pingedTasks.length &&
@@ -5676,4 +5681,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 = "19.0.0-www-classic-b2292b3c";
+exports.version = "19.0.0-www-classic-c54d680a";