switch to embeddign bootstrap scripts in templates to delay hydration

Author: gnoff

packages/react-dom-bindings/src/client/ReactDOMHostConfig.js

@@ -15,7 +15,7 @@ import type {
   IntersectionObserverOptions,
   ObserveVisibleRectsCallback,
 } from 'react-reconciler/src/ReactTestSelectors';
-import type {ReactScopeInstance, Thenable} from 'shared/ReactTypes';
+import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {AncestorInfoDev} from './validateDOMNesting';
 
 import {
@@ -1409,24 +1409,6 @@ export function errorHydratingContainer(parentContainer: Container): void {
   }
 }
 
-export function getHydrationReadySignal(
-  container: Container,
-): null | Thenable<mixed> {
-  const signal = (container: any)._r;
-  if (
-    signal !== null &&
-    typeof signal === 'object' &&
-    typeof signal.then === 'function'
-  ) {
-    return signal;
-  }
-  return null;
-}
-
-export function clearHydrationReadySignal(container: Container) {
-  (container: any)._r = null;
-}
-
 // -------------------
 //     Test Selectors
 // -------------------

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

@@ -2563,6 +2563,12 @@ const completeBoundaryOrContainerScriptEnd = stringToPrecomputedChunk(
   ')</script>',
 );
 
+const bootstrapContainerOpenStart = stringToPrecomputedChunk(
+  '<template id="bs:',
+);
+const bootstrapContainerOpenEnd = stringToPrecomputedChunk('">');
+const bootstrapContainerClose = stringToPrecomputedChunk('</template>');
+
 const completeContainerData1 = stringToPrecomputedChunk(
   '<template data-rci="c" data-bid="',
 );
@@ -2581,7 +2587,11 @@ const completeBoundaryOrContainerData2 = stringToPrecomputedChunk(
 const completeBoundaryOrContainerData3 = stringToPrecomputedChunk(
   '" data-sty="',
 );
-const completeBoundaryOrContainerDataEnd = dataElementQuotedEnd;
+const completeBoundaryOrContainerDataOpenEnd = stringToPrecomputedChunk('">');
+const completeBoundaryOrContainerDataClose = stringToPrecomputedChunk(
+  '</template>',
+);
+const completeBoundaryOrContainerDataEmptyEnd = dataElementQuotedEnd;
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -2605,97 +2615,184 @@ export function writeCompletedBoundaryInstruction(
     responseState.streamingFormat === ScriptStreamingFormat;
   let r = true;
   if (scriptFormat) {
-    writeChunk(destination, responseState.startInlineScript);
     if (enableFloat && hasStyleDependencies) {
-      if (!responseState.sentStyleInsertionFunction) {
-        responseState.sentStyleInsertionFunction = true;
-        writeChunk(destination, clonePrecomputedChunk(styleInsertionFunction));
-      }
       if (boundaryID === responseState.containerBoundaryID) {
+        // We emit the bootstrap chunks unto a template container with an id
+        // formed from the root segment ID. The insertion script will inject
+        // the bootstrap scripts into the DOM after revealing the content.
+        // We don't do this for cases where there are no style dependencies because
+        // the content swap is synchronous and will therefore always complete before
+        // the bootstrap scripts run
+        const bootstrapChunks = responseState.bootstrapChunks;
+        if (bootstrapChunks.length) {
+          writeChunk(destination, bootstrapContainerOpenStart);
+          writeChunk(destination, responseState.segmentPrefix);
+          writeChunk(destination, formattedContentID);
+          writeChunk(destination, bootstrapContainerOpenEnd);
+          for (let i = 0; i < bootstrapChunks.length; i++) {
+            writeChunk(destination, bootstrapChunks[i]);
+          }
+          writeChunk(destination, bootstrapContainerClose);
+        }
+
+        writeChunk(destination, responseState.startInlineScript);
+        if (!responseState.sentStyleInsertionFunction) {
+          responseState.sentStyleInsertionFunction = true;
+          writeChunk(
+            destination,
+            clonePrecomputedChunk(styleInsertionFunction),
+          );
+        }
         if (!responseState.sentCompleteContainerFunction) {
           responseState.sentCompleteContainerFunction = true;
           writeChunk(destination, completeContainerFunction);
         }
         writeChunk(destination, completeContainerWithStylesScript1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerScript2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerScript2a);
+        writeStyleResourceDependenciesInJS(destination, boundaryResources);
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerScriptEnd,
+        );
       } else {
+        writeChunk(destination, responseState.startInlineScript);
+        if (!responseState.sentStyleInsertionFunction) {
+          responseState.sentStyleInsertionFunction = true;
+          writeChunk(
+            destination,
+            clonePrecomputedChunk(styleInsertionFunction),
+          );
+        }
         if (!responseState.sentCompleteBoundaryFunction) {
           responseState.sentCompleteBoundaryFunction = true;
           writeChunk(destination, completeBoundaryFunction);
         }
         writeChunk(destination, completeBoundaryWithStylesScript1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerScript2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerScript2a);
+        writeStyleResourceDependenciesInJS(destination, boundaryResources);
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerScriptEnd,
+        );
       }
-      writeChunk(destination, boundaryID);
-      writeChunk(destination, completeBoundaryOrContainerScript2);
-      writeChunk(destination, responseState.segmentPrefix);
-      writeChunk(destination, formattedContentID);
-      writeChunk(destination, completeBoundaryOrContainerScript2a);
-      writeStyleResourceDependenciesInJS(destination, boundaryResources);
-      r = writeChunkAndReturn(
-        destination,
-        completeBoundaryOrContainerScriptEnd,
-      );
     } else {
       if (boundaryID === responseState.containerBoundaryID) {
+        writeChunk(destination, responseState.startInlineScript);
         if (!responseState.sentCompleteContainerFunction) {
           responseState.sentCompleteContainerFunction = true;
           writeChunk(destination, completeContainerFunction);
         }
         writeChunk(destination, completeContainerScript1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerScript2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerScript3);
+        r = writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerScriptEnd,
+        );
+
+        // We emit bootstrap scripts after the completeContainer instruction
+        // because we want to ensure the reveal ocurrs before the bootstrap
+        // scripts execute. Notice that unlike with the styles case the scripts
+        // are not embedded in a template
+        const bootstrapChunks = responseState.bootstrapChunks;
+        let i = 0;
+        for (; i < bootstrapChunks.length - 1; i++) {
+          writeChunk(destination, bootstrapChunks[i]);
+        }
+        if (i < bootstrapChunks.length) {
+          r = writeChunkAndReturn(destination, bootstrapChunks[i]);
+        }
+        return r;
       } else {
+        writeChunk(destination, responseState.startInlineScript);
         if (!responseState.sentCompleteBoundaryFunction) {
           responseState.sentCompleteBoundaryFunction = true;
           writeChunk(destination, completeBoundaryFunction);
         }
         writeChunk(destination, completeBoundaryScript1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerScript2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerScript3);
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerScriptEnd,
+        );
       }
-      writeChunk(destination, boundaryID);
-      writeChunk(destination, completeBoundaryOrContainerScript2);
-      writeChunk(destination, responseState.segmentPrefix);
-      writeChunk(destination, formattedContentID);
-      writeChunk(destination, completeBoundaryOrContainerScript3);
-      r = writeChunkAndReturn(
-        destination,
-        completeBoundaryOrContainerScriptEnd,
-      );
     }
   } else {
     if (enableFloat && hasStyleDependencies) {
       if (boundaryID === responseState.containerBoundaryID) {
         writeChunk(destination, completeContainerWithStylesData1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerData2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerData3);
+        writeStyleResourceDependenciesInAttr(destination, boundaryResources);
+        writeChunk(destination, completeBoundaryOrContainerDataOpenEnd);
+        const bootstrapChunks = responseState.bootstrapChunks;
+        for (let i = 0; i < bootstrapChunks.length; i++) {
+          writeChunk(destination, bootstrapChunks[i]);
+        }
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerDataClose,
+        );
       } else {
         writeChunk(destination, completeBoundaryWithStylesData1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerData2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerData3);
+        writeStyleResourceDependenciesInAttr(destination, boundaryResources);
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerDataEmptyEnd,
+        );
       }
-      writeChunk(destination, boundaryID);
-      writeChunk(destination, completeBoundaryOrContainerData2);
-      writeChunk(destination, responseState.segmentPrefix);
-      writeChunk(destination, formattedContentID);
-      writeChunk(destination, completeBoundaryOrContainerData3);
-      writeStyleResourceDependenciesInAttr(destination, boundaryResources);
-      r = writeChunkAndReturn(destination, completeBoundaryOrContainerDataEnd);
     } else {
       if (boundaryID === responseState.containerBoundaryID) {
         writeChunk(destination, completeContainerData1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerData2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        writeChunk(destination, completeBoundaryOrContainerDataOpenEnd);
+        const bootstrapChunks = responseState.bootstrapChunks;
+        for (let i = 0; i < bootstrapChunks.length; i++) {
+          writeChunk(destination, bootstrapChunks[i]);
+        }
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerDataOpenEnd,
+        );
       } else {
         writeChunk(destination, completeBoundaryData1);
+        writeChunk(destination, boundaryID);
+        writeChunk(destination, completeBoundaryOrContainerData2);
+        writeChunk(destination, responseState.segmentPrefix);
+        writeChunk(destination, formattedContentID);
+        return writeChunkAndReturn(
+          destination,
+          completeBoundaryOrContainerDataEmptyEnd,
+        );
       }
-      writeChunk(destination, boundaryID);
-      writeChunk(destination, completeBoundaryOrContainerData2);
-      writeChunk(destination, responseState.segmentPrefix);
-      writeChunk(destination, formattedContentID);
-      r = writeChunkAndReturn(destination, completeBoundaryOrContainerDataEnd);
     }
   }
-  if (boundaryID === responseState.containerBoundaryID) {
-    const bootstrapChunks = responseState.bootstrapChunks;
-    let i = 0;
-    for (; i < bootstrapChunks.length - 1; i++) {
-      writeChunk(destination, bootstrapChunks[i]);
-    }
-    if (i < bootstrapChunks.length) {
-      return writeChunkAndReturn(destination, bootstrapChunks[i]);
-    }
-  }
-  return r;
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(

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

@@ -132,7 +132,7 @@ export function completeBoundaryWithStyles(
     }
   }
 
-  const allInsertions = Promise.all(dependencies).then(
+  Promise.all(dependencies).then(
     completeBoundaryImpl.bind(null, suspenseBoundaryID, contentID, ''),
     completeBoundaryImpl.bind(
       null,
@@ -141,13 +141,6 @@ export function completeBoundaryWithStyles(
       'Stylesheet failed to load',
     ),
   );
-
-  if (isContainer) {
-    const containerNode = document.getElementById(suspenseBoundaryID);
-    if (containerNode) {
-      containerNode['_r'] = allInsertions;
-    }
-  }
 }
 
 export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
@@ -217,47 +210,36 @@ export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
   }
 }
 
-export function completeContainer(
-  containerID,
-  contentID,
-  optionalErrorMessage,
-) {
-  const contentNode = document.getElementById(contentID);
-  // 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);
-
-  // Find the container node.
-  const containerNode = document.getElementById(containerID);
-  if (!containerNode) {
-    // 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;
-  }
-  // This container may have a stashed promise from the style insertions.
-  // We assume this and clear it now that the root is unblocked and hydration
-  // can continue. If there is an error message put it in this slot. The client
-  // will fall back to client rendering the root and use this message in the
-  // logging
-  if (optionalErrorMessage) {
-    throw optionalErrorMessage;
-  }
+export function completeContainer(containerID, contentID) {
+  const thisDocument = document;
+  try {
+    const contentNode = thisDocument.getElementById(contentID);
+    // 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);
 
-  // If the container node has already been passed to createRoot we assume
-  // the client will render the root and we never swap the content in.
-  // Additionally if there was an error in loading styles we leave the fallback
-  // content in place and expect the client will fall back to client rendering
-  if (containerNode['_c']) {
-    return;
-  }
+    // Find the container node.
+    const containerNode = thisDocument.getElementById(containerID);
+    if (!containerNode) {
+      // 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;
+    }
 
-  // This is a container insertion. we clear simply clear the container
-  containerNode.textContent = '';
+    // This is a container insertion. we clear simply clear the container
+    containerNode.textContent = '';
 
-  // Insert all the children from the contentNode between the start and end of suspense boundary.
-  while (contentNode.firstChild) {
-    containerNode.appendChild(contentNode.firstChild);
+    // Insert all the children from the contentNode between the start and end of suspense boundary.
+    while (contentNode.firstChild) {
+      containerNode.appendChild(contentNode.firstChild);
+    }
+  } finally {
+    const bootstrapNode = thisDocument.getElementById('bs:' + contentID);
+    if (bootstrapNode) {
+      thisDocument.body.appendChild(bootstrapNode.content);
+      bootstrapNode.parentNode.removeChild(bootstrapNode);
+    }
   }
 }