Express completeBoundary in terms of a batch

Author: sebmarkbage

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInlineCompleteBoundary.js

@@ -2,4 +2,6 @@ import {completeBoundary} from './ReactDOMFizzInstructionSetShared';
 
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // eslint-disable-next-line dot-notation
+window['$RB'] = [];
+// eslint-disable-next-line dot-notation
 window['$RC'] = completeBoundary;

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime.js

@@ -13,6 +13,7 @@ import {
 // This is a string so Closure's advanced compilation mode doesn't mangle it.
 // These will be renamed to local references by the external-runtime-plugin.
 window['$RM'] = new Map();
+window['$RB'] = [];
 window['$RX'] = clientRenderBoundary;
 window['$RC'] = completeBoundary;
 window['$RR'] = completeBoundaryWithStyles;

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -48,72 +48,91 @@ export function clientRenderBoundary(
 }
 
 export function completeBoundary(suspenseBoundaryID, contentID) {
-  const contentNode = document.getElementById(contentID);
-  if (!contentNode) {
+  const contentNodeOuter = document.getElementById(contentID);
+  if (!contentNodeOuter) {
     // If the client has failed hydration we may have already deleted the streaming
     // segments. The server may also have emitted a complete instruction but cancelled
     // the segment. Regardless we can ignore this case.
     return;
   }
   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
   // This might also help by not causing recalcing each time we move a child from here to the target.
-  contentNode.parentNode.removeChild(contentNode);
+  contentNodeOuter.parentNode.removeChild(contentNodeOuter);
 
   // Find the fallback's first element.
-  const suspenseIdNode = document.getElementById(suspenseBoundaryID);
-  if (!suspenseIdNode) {
+  const suspenseIdNodeOuter = document.getElementById(suspenseBoundaryID);
+  if (!suspenseIdNodeOuter) {
     // The user must have already navigated away from this tree.
     // E.g. because the parent was hydrated. That's fine there's nothing to do
     // but we have to make sure that we already deleted the container node.
     return;
   }
-  // Find the boundary around the fallback. This is always the previous node.
-  const suspenseNode = suspenseIdNode.previousSibling;
 
-  // Clear all the existing children. This is complicated because
-  // there can be embedded Suspense boundaries in the fallback.
-  // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
-  // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
-  // They never hydrate anyway. However, currently we support incrementally loading the fallback.
-  const parentInstance = suspenseNode.parentNode;
-  let node = suspenseNode.nextSibling;
-  let depth = 0;
-  do {
-    if (node && node.nodeType === COMMENT_NODE) {
-      const data = node.data;
-      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
-        if (depth === 0) {
-          break;
-        } else {
-          depth--;
-        }
-      } else if (
-        data === SUSPENSE_START_DATA ||
-        data === SUSPENSE_PENDING_START_DATA ||
-        data === SUSPENSE_FALLBACK_START_DATA ||
-        data === ACTIVITY_START_DATA
-      ) {
-        depth++;
+  function revealCompletedBoundaries() {
+    const batch = window['$RB'];
+    window['$RB'] = [];
+    for (let i = 0; i < batch.length; i += 2) {
+      const suspenseIdNode = batch[i];
+      const contentNode = batch[i + 1];
+
+      // Clear all the existing children. This is complicated because
+      // there can be embedded Suspense boundaries in the fallback.
+      // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
+      // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+      // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+      const parentInstance = suspenseIdNode.parentNode;
+      if (!parentInstance) {
+        // We may have client-rendered this boundary already. Skip it.
+        continue;
       }
-    }
 
-    const nextNode = node.nextSibling;
-    parentInstance.removeChild(node);
-    node = nextNode;
-  } while (node);
+      // Find the boundary around the fallback. This is always the previous node.
+      const suspenseNode = suspenseIdNode.previousSibling;
+
+      let node = suspenseIdNode;
+      let depth = 0;
+      do {
+        if (node && node.nodeType === COMMENT_NODE) {
+          const data = node.data;
+          if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+            if (depth === 0) {
+              break;
+            } else {
+              depth--;
+            }
+          } else if (
+            data === SUSPENSE_START_DATA ||
+            data === SUSPENSE_PENDING_START_DATA ||
+            data === SUSPENSE_FALLBACK_START_DATA ||
+            data === ACTIVITY_START_DATA
+          ) {
+            depth++;
+          }
+        }
 
-  const endOfBoundary = node;
+        const nextNode = node.nextSibling;
+        parentInstance.removeChild(node);
+        node = nextNode;
+      } while (node);
 
-  // Insert all the children from the contentNode between the start and end of suspense boundary.
-  while (contentNode.firstChild) {
-    parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
-  }
+      const endOfBoundary = node;
 
-  suspenseNode.data = SUSPENSE_START_DATA;
+      // Insert all the children from the contentNode between the start and end of suspense boundary.
+      while (contentNode.firstChild) {
+        parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+      }
 
-  if (suspenseNode['_reactRetry']) {
-    suspenseNode['_reactRetry']();
+      suspenseNode.data = SUSPENSE_START_DATA;
+      if (suspenseNode['_reactRetry']) {
+        suspenseNode['_reactRetry']();
+      }
+    }
   }
+
+  // Queue this boundary for the next batch
+  window['$RB'].push(suspenseIdNodeOuter, contentNodeOuter);
+
+  revealCompletedBoundaries();
 }
 
 export function completeBoundaryWithStyles(