Encode lazy Node slots properly in key path and resumable paths (#27359)

It's possible to postpone a specific node and not using a wrapper component. Therefore we encode the resumable slot as the index slot. When it's a plain client component that postpones, it's encoded as the child slot inside that component which is the one that's postponed rather than the component itself. Since it's possible for a child slot to suspend (e.g. React.lazy's microtask in this case) retryTask might need to keep its index around when it resolves. DiffTrain build for [bb1d8d1](bb1d8d1)
facebook · Sep 11, 2023 · afe6905 · afe6905
1 parent 88778ab
commit afe6905
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 75 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-8b26f07a883bb341c20283c0099bf5ee6f87bd1f
+bb1d8d166799eb97892be6c7826179270ba283d0
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/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-de28fc21";
+var ReactVersion = "18.3.0-www-classic-ae77ec0b";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -10959,7 +10959,8 @@ function renderNodeDestructiveImpl(
 ) {
   // Stash the node we're working on. We'll pick up from this task in case
   // something suspends.
-  task.node = node; // Handle object types
+  task.node = node;
+  task.childIndex = childIndex; // Handle object types
 
   if (typeof node === "object" && node !== null) {
     switch (node.$$typeof) {
@@ -11138,20 +11139,50 @@ function renderChildrenArray(request, task, children, childIndex) {
 
   for (var i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // Nested arrays behave like a "fragment node" which is keyed.
+    // Therefore we need to add the current index as a parent key.
+    // We first check if the nested nodes are arrays or iterables.
 
-    if (isArray(node) || getIteratorFn(node)) {
-      // Nested arrays behave like a "fragment node" which is keyed.
-      // Therefore we need to add the current index as a parent key.
+    if (isArray(node)) {
       var prevKeyPath = task.keyPath;
       task.keyPath = [task.keyPath, "", childIndex];
-      renderNode(request, task, node, i);
+      renderChildrenArray(request, task, node, i);
       task.keyPath = prevKeyPath;
-    } else {
-      // We need to use the non-destructive form so that we can safely pop back
-      // up and render the sibling if something suspends.
-      renderNode(request, task, node, i);
+      continue;
     }
+
+    var iteratorFn = getIteratorFn(node);
+
+    if (iteratorFn) {
+      {
+        validateIterable(node, iteratorFn);
+      }
+
+      var iterator = iteratorFn.call(node);
+
+      if (iterator) {
+        var step = iterator.next();
+
+        if (!step.done) {
+          var _prevKeyPath = task.keyPath;
+          task.keyPath = [task.keyPath, "", childIndex];
+          var nestedChildren = [];
+
+          do {
+            nestedChildren.push(step.value);
+            step = iterator.next();
+          } while (!step.done);
+
+          renderChildrenArray(request, task, nestedChildren, i);
+          task.keyPath = _prevKeyPath;
+        }
+
+        continue;
+      }
+    } // We need to use the non-destructive form so that we can safely pop back
+    // up and render the sibling if something suspends.
+
+    renderNode(request, task, node, i);
   } // Because this context is always set right before rendering every child, we
   // only need to reset it to the previous value at the very end.
 
@@ -11186,6 +11217,7 @@ function spawnNewSuspendedTask(request, task, thenableState, x) {
     task.context,
     task.treeContext
   );
+  newTask.childIndex = task.childIndex;
 
   {
     if (task.componentStack !== null) {
@@ -11528,7 +11560,13 @@ function retryTask(request, task) {
     // component suspends again, the thenable state will be restored.
     var prevThenableState = task.thenableState;
     task.thenableState = null;
-    renderNodeDestructive(request, task, prevThenableState, task.node, 0);
+    renderNodeDestructive(
+      request,
+      task,
+      prevThenableState,
+      task.node,
+      task.childIndex
+    );
     pushSegmentFinale(
       segment.chunks,
       request.renderState,

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/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-d8aac565";
+var ReactVersion = "18.3.0-www-modern-868baebb";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -10707,7 +10707,8 @@ function renderNodeDestructiveImpl(
 ) {
   // Stash the node we're working on. We'll pick up from this task in case
   // something suspends.
-  task.node = node; // Handle object types
+  task.node = node;
+  task.childIndex = childIndex; // Handle object types
 
   if (typeof node === "object" && node !== null) {
     switch (node.$$typeof) {
@@ -10886,20 +10887,50 @@ function renderChildrenArray(request, task, children, childIndex) {
 
   for (var i = 0; i < totalChildren; i++) {
     var node = children[i];
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i); // Nested arrays behave like a "fragment node" which is keyed.
+    // Therefore we need to add the current index as a parent key.
+    // We first check if the nested nodes are arrays or iterables.
 
-    if (isArray(node) || getIteratorFn(node)) {
-      // Nested arrays behave like a "fragment node" which is keyed.
-      // Therefore we need to add the current index as a parent key.
+    if (isArray(node)) {
       var prevKeyPath = task.keyPath;
       task.keyPath = [task.keyPath, "", childIndex];
-      renderNode(request, task, node, i);
+      renderChildrenArray(request, task, node, i);
       task.keyPath = prevKeyPath;
-    } else {
-      // We need to use the non-destructive form so that we can safely pop back
-      // up and render the sibling if something suspends.
-      renderNode(request, task, node, i);
+      continue;
     }
+
+    var iteratorFn = getIteratorFn(node);
+
+    if (iteratorFn) {
+      {
+        validateIterable(node, iteratorFn);
+      }
+
+      var iterator = iteratorFn.call(node);
+
+      if (iterator) {
+        var step = iterator.next();
+
+        if (!step.done) {
+          var _prevKeyPath = task.keyPath;
+          task.keyPath = [task.keyPath, "", childIndex];
+          var nestedChildren = [];
+
+          do {
+            nestedChildren.push(step.value);
+            step = iterator.next();
+          } while (!step.done);
+
+          renderChildrenArray(request, task, nestedChildren, i);
+          task.keyPath = _prevKeyPath;
+        }
+
+        continue;
+      }
+    } // We need to use the non-destructive form so that we can safely pop back
+    // up and render the sibling if something suspends.
+
+    renderNode(request, task, node, i);
   } // Because this context is always set right before rendering every child, we
   // only need to reset it to the previous value at the very end.
 
@@ -10934,6 +10965,7 @@ function spawnNewSuspendedTask(request, task, thenableState, x) {
     task.context,
     task.treeContext
   );
+  newTask.childIndex = task.childIndex;
 
   {
     if (task.componentStack !== null) {
@@ -11276,7 +11308,13 @@ function retryTask(request, task) {
     // component suspends again, the thenable state will be restored.
     var prevThenableState = task.thenableState;
     task.thenableState = null;
-    renderNodeDestructive(request, task, prevThenableState, task.node, 0);
+    renderNodeDestructive(
+      request,
+      task,
+      prevThenableState,
+      task.node,
+      task.childIndex
+    );
     pushSegmentFinale(
       segment.chunks,
       request.renderState,

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -3474,6 +3474,7 @@ function renderNodeDestructiveImpl(
   childIndex
 ) {
   task.node = node;
+  task.childIndex = childIndex;
   if ("object" === typeof node && null !== node) {
     switch (node.$$typeof) {
       case REACT_ELEMENT_TYPE:
@@ -3566,12 +3567,28 @@ function renderChildrenArray(request, task, children, childIndex) {
   ) {
     var node = children[i];
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
-    if (isArrayImpl(node) || getIteratorFn(node)) {
+    if (isArrayImpl(node)) {
       var prevKeyPath = task.keyPath;
       task.keyPath = [task.keyPath, "", childIndex];
-      renderNode(request, task, node, i);
+      renderChildrenArray(request, task, node, i);
       task.keyPath = prevKeyPath;
-    } else renderNode(request, task, node, i);
+    } else {
+      if ((prevKeyPath = getIteratorFn(node)))
+        if ((prevKeyPath = prevKeyPath.call(node))) {
+          node = prevKeyPath.next();
+          if (!node.done) {
+            var prevKeyPath$13 = task.keyPath;
+            task.keyPath = [task.keyPath, "", childIndex];
+            var nestedChildren = [];
+            do nestedChildren.push(node.value), (node = prevKeyPath.next());
+            while (!node.done);
+            renderChildrenArray(request, task, nestedChildren, i);
+            task.keyPath = prevKeyPath$13;
+          }
+          continue;
+        }
+      renderNode(request, task, node, i);
+    }
   }
   task.treeContext = prevTreeContext;
 }
@@ -3623,7 +3640,9 @@ function renderNode(request, task, node, childIndex) {
           task.legacyContext,
           task.context,
           task.treeContext
-        ).ping),
+        )),
+        (request.childIndex = task.childIndex),
+        (request = request.ping),
         node.then(request, request),
         (task.formatContext = previousFormatContext),
         (task.legacyContext = previousLegacyContext),
@@ -3749,7 +3768,7 @@ function performWork(request$jscomp$1) {
               task,
               prevThenableState,
               task.node,
-              0
+              task.childIndex
             );
             request.renderState.generateStaticMarkup ||
               (segment.lastPushedText &&
@@ -4299,13 +4318,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$15 = partialBoundaries[i];
+      var boundary$16 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$15.resources;
-        var completedSegments = boundary$15.completedSegments;
+          boundary$16.resources;
+        var completedSegments = boundary$16.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4315,7 +4334,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$15,
+              boundary$16,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4327,7 +4346,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$15.resources,
+          boundary$16.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4390,8 +4409,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$17) {
-    logRecoverableError(request, error$17), fatalError(request, error$17);
+  } catch (error$18) {
+    logRecoverableError(request, error$18), fatalError(request, error$18);
   }
 }
 function onError() {}
@@ -4478,4 +4497,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-9c45eb83";
+exports.version = "18.3.0-www-classic-c0d5e385";