Update React from d803f519e to b8e47d988 (#57296)

React upstream changes:

- facebook/react#27570
- facebook/react#27569
- facebook/react#27550
- facebook/react#27559
- facebook/react#27552
- facebook/react#27504
- facebook/react#27522




Co-authored-by: Josh Story <[email protected]>

Author: acdlite

package.json

@@ -193,16 +193,16 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:[email protected]",
-    "react-builtin": "npm:[email protected]d803f519e-20231020",
+    "react-builtin": "npm:[email protected]b8e47d988-20231023",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:[email protected]",
-    "react-dom-builtin": "npm:[email protected]d803f519e-20231020",
-    "react-dom-experimental-builtin": "npm:[email protected]d803f519e-20231020",
-    "react-experimental-builtin": "npm:[email protected]d803f519e-20231020",
-    "react-server-dom-turbopack": "18.3.0-canary-d803f519e-20231020",
-    "react-server-dom-turbopack-experimental": "npm:[email protected]d803f519e-20231020",
-    "react-server-dom-webpack": "18.3.0-canary-d803f519e-20231020",
-    "react-server-dom-webpack-experimental": "npm:[email protected]d803f519e-20231020",
+    "react-dom-builtin": "npm:[email protected]b8e47d988-20231023",
+    "react-dom-experimental-builtin": "npm:[email protected]b8e47d988-20231023",
+    "react-experimental-builtin": "npm:[email protected]b8e47d988-20231023",
+    "react-server-dom-turbopack": "18.3.0-canary-b8e47d988-20231023",
+    "react-server-dom-turbopack-experimental": "npm:[email protected]b8e47d988-20231023",
+    "react-server-dom-webpack": "18.3.0-canary-b8e47d988-20231023",
+    "react-server-dom-webpack-experimental": "npm:[email protected]b8e47d988-20231023",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -212,8 +212,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.6",
-    "scheduler-builtin": "npm:[email protected]d803f519e-20231020",
-    "scheduler-experimental-builtin": "npm:[email protected]d803f519e-20231020",
+    "scheduler-builtin": "npm:[email protected]b8e47d988-20231023",
+    "scheduler-experimental-builtin": "npm:[email protected]b8e47d988-20231023",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",

packages/next/src/compiled/react-dom-experimental/cjs/react-dom-server-legacy.browser.development.js

@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") {
 var React = require("next/dist/compiled/react-experimental");
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '18.3.0-experimental-d803f519e-20231020';
+var ReactVersion = '18.3.0-experimental-b8e47d988-20231023';
 
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
@@ -1909,7 +1909,7 @@ function createResumableState(identifierPrefix, externalRuntimeConfig) {
     moduleUnknownResources: {},
     moduleScriptResources: {}
   };
-} // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
+}
 // modes. We only include the variants as they matter for the sake of our purposes.
 // We don't actually provide the namespace therefore we use constants instead of the string.
 
@@ -3538,7 +3538,7 @@ function pushStyleImpl(target, props) {
   }
 
   pushInnerHTML(target, innerHTML, children);
-  target.push(endTag1, stringToChunk('style'), endTag2);
+  target.push(endChunkForTag('style'));
   return null;
 }
 
@@ -3760,7 +3760,7 @@ function pushTitleImpl(target, props) {
   }
 
   pushInnerHTML(target, innerHTML, children);
-  target.push(endTag1, stringToChunk('title'), endTag2);
+  target.push(endChunkForTag('title'));
   return null;
 }
 
@@ -3903,7 +3903,7 @@ function pushScriptImpl(target, props) {
     target.push(stringToChunk(encodeHTMLTextNode(children)));
   }
 
-  target.push(endTag1, stringToChunk('script'), endTag2);
+  target.push(endChunkForTag('script'));
   return null;
 }
 
@@ -4241,8 +4241,19 @@ function pushStartInstance(target, type, props, resumableState, renderState, for
 
   return pushStartGenericElement(target, props, type);
 }
-var endTag1 = stringToPrecomputedChunk('</');
-var endTag2 = stringToPrecomputedChunk('>');
+var endTagCache = new Map();
+
+function endChunkForTag(tag) {
+  var chunk = endTagCache.get(tag);
+
+  if (chunk === undefined) {
+    chunk = stringToPrecomputedChunk('</' + tag + '>');
+    endTagCache.set(tag, chunk);
+  }
+
+  return chunk;
+}
+
 function pushEndInstance(target, type, props, resumableState, formatContext) {
   switch (type) {
     // When float is on we expect title and script tags to always be pushed in
@@ -4299,7 +4310,7 @@ function pushEndInstance(target, type, props, resumableState, formatContext) {
       break;
   }
 
-  target.push(endTag1, stringToChunk(type), endTag2);
+  target.push(endChunkForTag(type));
 }
 
 function writeBootstrap(destination, renderState) {
@@ -5088,9 +5099,7 @@ function writePreamble(destination, resumableState, renderState, willFlushAllSeg
     // if the main content contained the </head> it would also have provided a
     // <head>. This means that all the content inside <html> is either <body> or
     // invalid HTML
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('head'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('head'));
   }
 } // We don't bother reporting backpressure at the moment because we expect to
 // flush the entire preamble in a single pass. This probably should be modified
@@ -5147,15 +5156,11 @@ function writeHoistables(destination, resumableState, renderState) {
 }
 function writePostamble(destination, resumableState) {
   if (resumableState.hasBody) {
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('body'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('body'));
   }
 
   if (resumableState.hasHtml) {
-    writeChunk(destination, endTag1);
-    writeChunk(destination, stringToChunk('html'));
-    writeChunk(destination, endTag2);
+    writeChunk(destination, endChunkForTag('html'));
   }
 }
 var arrayFirstOpenBracket = stringToPrecomputedChunk('[');
@@ -9997,6 +10002,18 @@ function trackPostpone(request, trackedPostpones, task, segment) {
   var keyPath = task.keyPath;
   var boundary = task.blockedBoundary;
 
+  if (boundary === null) {
+    segment.id = request.nextSegmentId++;
+    trackedPostpones.rootSlots = segment.id;
+
+    if (request.completedRootSegment !== null) {
+      // Postpone the root if this was a deeper segment.
+      request.completedRootSegment.status = POSTPONED;
+    }
+
+    return;
+  }
+
   if (boundary !== null && boundary.status === PENDING) {
     boundary.status = POSTPONED; // We need to eagerly assign it an ID because we'll need to refer to
     // it before flushing and we know that we can't inline it.
@@ -10260,7 +10277,7 @@ function renderNode(request, task, node, childIndex) {
           return;
         }
 
-        if (request.trackedPostpones !== null && x.$$typeof === REACT_POSTPONE_TYPE && task.blockedBoundary !== null // TODO: Support holes in the shell
+        if (request.trackedPostpones !== null && x.$$typeof === REACT_POSTPONE_TYPE && task.blockedBoundary !== null // bubble if we're postponing in the shell
         ) {
             // If we're tracking postpones, we inject a hole here and continue rendering
             // sibling. Similar to suspending. If we're not tracking, we treat it more like
@@ -10731,20 +10748,19 @@ function retryRenderTask(request, task, segment) {
         x.then(ping, ping);
         task.thenableState = getThenableStateAfterSuspending();
         return;
-      } else if (request.trackedPostpones !== null && x.$$typeof === REACT_POSTPONE_TYPE && task.blockedBoundary !== null // TODO: Support holes in the shell
-      ) {
-          // If we're tracking postpones, we mark this segment as postponed and finish
-          // the task without filling it in. If we're not tracking, we treat it more like
-          // an error.
-          var trackedPostpones = request.trackedPostpones;
-          task.abortSet.delete(task);
-          var postponeInstance = x;
-          logPostpone(request, postponeInstance.message);
-          trackPostpone(request, trackedPostpones, task, segment);
-          finishedTask(request, task.blockedBoundary, segment);
-          lastBoundaryErrorComponentStackDev = null;
-          return;
-        }
+      } else if (request.trackedPostpones !== null && x.$$typeof === REACT_POSTPONE_TYPE) {
+        // If we're tracking postpones, we mark this segment as postponed and finish
+        // the task without filling it in. If we're not tracking, we treat it more like
+        // an error.
+        var trackedPostpones = request.trackedPostpones;
+        task.abortSet.delete(task);
+        var postponeInstance = x;
+        logPostpone(request, postponeInstance.message);
+        trackPostpone(request, trackedPostpones, task, segment);
+        finishedTask(request, task.blockedBoundary, segment);
+        lastBoundaryErrorComponentStackDev = null;
+        return;
+      }
     }
 
     task.abortSet.delete(task);
@@ -11145,7 +11161,10 @@ function flushCompletedQueues(request, destination) {
     var completedRootSegment = request.completedRootSegment;
 
     if (completedRootSegment !== null) {
-      if (request.pendingRootTasks === 0) {
+      if (completedRootSegment.status === POSTPONED) {
+        // We postponed the root, so we write nothing.
+        return;
+      } else if (request.pendingRootTasks === 0) {
         if (enableFloat) {
           writePreamble(destination, request.resumableState, request.renderState, request.allPendingTasks === 0 && request.trackedPostpones === null);
         }