From fe5cabacbd2e1faed53866b396bde481c99f60ca Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Mon, 31 Oct 2022 17:01:23 -0400
Subject: [PATCH 01/13] Add renames

---
 .../src/server/ReactDOMServerFormatConfig.js  | 68 ++++++++++---------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 91d241e4e7929..5c4892a48eb89 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -154,6 +154,8 @@ export type BootstrapScriptDescriptor = {
   integrity?: string,
 };
 // Allows us to keep track of what we've already written so we can refer back to it.
+// if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
+// is set, the server will send instructions via data attributes (instead of inline scripts)
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
@@ -2384,7 +2386,7 @@ const completeSegmentScript1Full = stringToPrecomputedChunk(
 );
 const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
-const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
 
 export function writeCompletedSegmentInstruction(
   destination: Destination,
@@ -2400,13 +2402,16 @@ export function writeCompletedSegmentInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeSegmentScript1Partial);
   }
+
+  // Write function arguments, which are string literals
   writeChunk(destination, responseState.segmentPrefix);
   const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
   writeChunk(destination, completeSegmentScript2);
   writeChunk(destination, responseState.placeholderPrefix);
   writeChunk(destination, formattedID);
-  return writeChunkAndReturn(destination, completeSegmentScript3);
+
+  return writeChunkAndReturn(destination, completeSegmentScriptEnd);
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
@@ -2424,9 +2429,9 @@ const completeBoundaryWithStylesScript1Partial = stringToPrecomputedChunk(
   '$RR("',
 );
 const completeBoundaryScript2 = stringToPrecomputedChunk('","');
-const completeBoundaryScript2a = stringToPrecomputedChunk('",');
-const completeBoundaryScript3 = stringToPrecomputedChunk('"');
-const completeBoundaryScript4 = stringToPrecomputedChunk(')</script>');
+const completeBoundaryScript3a = stringToPrecomputedChunk('",');
+const completeBoundaryScript3b = stringToPrecomputedChunk('"');
+const completeBoundaryScriptEnd = stringToPrecomputedChunk(')</script>');
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -2469,18 +2474,20 @@ export function writeCompletedBoundaryInstruction(
     );
   }
 
+  // Write function arguments, which are string literals and array
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
   if (enableFloat && hasStyleDependencies) {
-    writeChunk(destination, completeBoundaryScript2a);
+    writeChunk(destination, completeBoundaryScript3a);
+    // boundaryResources encodes an array literal
     writeStyleResourceDependencies(destination, boundaryResources);
   } else {
-    writeChunk(destination, completeBoundaryScript3);
+    writeChunk(destination, completeBoundaryScript3b);
   }
-  return writeChunkAndReturn(destination, completeBoundaryScript4);
+  return writeChunkAndReturn(destination, completeBoundaryScriptEnd);
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -2488,7 +2495,7 @@ const clientRenderScript1Full = stringToPrecomputedChunk(
 );
 const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript1A = stringToPrecomputedChunk('"');
-const clientRenderScript2 = stringToPrecomputedChunk(')</script>');
+const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
 const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 
 export function writeClientRenderBoundaryInstruction(
@@ -2514,10 +2521,11 @@ export function writeClientRenderBoundaryInstruction(
       'An ID must have been assigned before we can complete the boundary.',
     );
   }
-
+  // Write function arguments, which are string literals
   writeChunk(destination, boundaryID);
   writeChunk(destination, clientRenderScript1A);
   if (errorDigest || errorMessage || errorComponentStack) {
+    // ,"JSONString"
     writeChunk(destination, clientRenderErrorScriptArgInterstitial);
     writeChunk(
       destination,
@@ -2525,6 +2533,7 @@ export function writeClientRenderBoundaryInstruction(
     );
   }
   if (errorMessage || errorComponentStack) {
+    // ,"JSONString"
     writeChunk(destination, clientRenderErrorScriptArgInterstitial);
     writeChunk(
       destination,
@@ -2532,13 +2541,14 @@ export function writeClientRenderBoundaryInstruction(
     );
   }
   if (errorComponentStack) {
+    // ,"JSONString"
     writeChunk(destination, clientRenderErrorScriptArgInterstitial);
     writeChunk(
       destination,
       stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
     );
   }
-  return writeChunkAndReturn(destination, clientRenderScript2);
+  return writeChunkAndReturn(destination, clientRenderScriptEnd);
 }
 
 const regexForJSStringsInInstructionScripts = /[<\u2028\u2029]/g;
@@ -2839,6 +2849,16 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
+function writeStyleResourceObject(destination: Destination, str: string) {
+  // write "script_escaped_string", since this is writing to a script tag
+  // and will be evaluated as a string literal inside an array literal
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(str)),
+  );
+  // TODO(mofeiZ): will add a data writer format here in a later PR
+}
+
 function writeStyleResourceDependencies(
   destination: Destination,
   boundaryResources: BoundaryResources,
@@ -2883,10 +2903,7 @@ function writeStyleResourceDependencyHrefOnly(
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
-  );
+  writeStyleResourceObject(destination, coercedHref);
 }
 
 function writeStyleResourceDependency(
@@ -2900,20 +2917,15 @@ function writeStyleResourceDependency(
   }
   const coercedHref = '' + (href: any);
   sanitizeURL(coercedHref);
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
-  );
+  writeStyleResourceObject(destination, coercedHref);
 
   if (__DEV__) {
     checkAttributeStringCoercion(precedence, 'precedence');
   }
   const coercedPrecedence = '' + (precedence: any);
   writeChunk(destination, arrayInterstitial);
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(coercedPrecedence)),
-  );
+
+  writeStyleResourceObject(destination, coercedPrecedence);
 
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -3012,13 +3024,7 @@ function writeStyleResourceAttribute(
   }
   attributeValue = '' + (value: any);
   writeChunk(destination, arrayInterstitial);
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(attributeName)),
-  );
+  writeStyleResourceObject(destination, attributeName);
   writeChunk(destination, arrayInterstitial);
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(attributeValue)),
-  );
+  writeStyleResourceObject(destination, attributeValue);
 }

From 5e81c7d1f9cb85d06003edea2749a8e9aabd3022 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Tue, 1 Nov 2022 17:37:34 -0400
Subject: [PATCH 02/13] Add non-execution format, runtime, and unit tests

---
 .../server/ReactDOMServerExternalRuntime.js   |  67 +++-
 .../src/server/ReactDOMServerFormatConfig.js  | 315 +++++++++++++-----
 .../ReactDOMServerLegacyFormatConfig.js       |  22 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  |  78 ++++-
 .../src/__tests__/ReactDOMFloat-test.js       |  20 +-
 .../src/server/ReactDOMLegacyServerImpl.js    |   3 +
 .../react-dom/src/test-utils/FizzTestUtils.js |  47 ++-
 .../src/ReactDOMServerFB.js                   |   3 +
 8 files changed, 448 insertions(+), 107 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 01f53697e2e5f..ab3363716eebc 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -13,13 +13,60 @@ import {
   completeSegment,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSet';
 
-// Intentionally does nothing. Implementation will be added in future PR.
-// eslint-disable-next-line no-unused-vars
-const observer = new MutationObserver(mutations => {
-  // These are only called so I can check what the module output looks like. The
-  // code is unreachable.
-  clientRenderBoundary();
-  completeBoundaryWithStyles();
-  completeBoundary();
-  completeSegment();
-});
+// This runtime may be sent to the client multiple times (if FizzServer.render
+//  is called more than once). Here, we check whether the mutation observer
+//  was already created / installed
+if (!window.$REACT_FIZZ_OBSERVER) {
+  // TODO: Eventually remove, we currently need to set these globals for
+  // compatibility with ReactDOMFizzInstructionSet
+  window.$RC = completeBoundary;
+  window.$RM = new Map();
+  window.$REACT_FIZZ_OBSERVER = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      mutation.addedNodes.forEach(handleNode);
+    });
+  });
+  // $FlowFixMe[incompatible-call] document.body should exist at this point
+  window.$REACT_FIZZ_OBSERVER.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  const existingNodes = document.getElementsByTagName('div');
+  for (let i = 0; i < existingNodes.length; i++) {
+    handleNode(existingNodes[i]);
+  }
+}
+
+function handleNode(node /*: Node */) {
+  if (node.nodeType !== 1) {
+    return;
+  }
+  // $FlowFixMe[incompatible-cast]
+  const dataset = (node /*: HTMLElement*/).dataset;
+  const instr = dataset ? dataset[':fi'] : null;
+  switch (instr) {
+    case '$RX':
+      clientRenderBoundary(
+        dataset[':a0'],
+        dataset[':a1'],
+        dataset[':a2'],
+        dataset[':a3'],
+      );
+      break;
+    case '$RR':
+      // Convert arg2 here, since its type is Array<Array<string>>
+      completeBoundaryWithStyles(
+        dataset[':a0'],
+        dataset[':a1'],
+        JSON.parse(dataset[':a2']),
+      );
+      break;
+    case '$RC':
+      completeBoundary(dataset[':a0'], dataset[':a1'], dataset[':a2']);
+      break;
+    case '$RS':
+      completeSegment(dataset[':a0'], dataset[':a1']);
+      break;
+  }
+}
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 5c4892a48eb89..f9d51be2e3dd6 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -108,19 +108,25 @@ export const isPrimaryRenderer = true;
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
-  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
+  streamingFormat: 'SCRIPT' | 'DATA',
+  // state for script streaming format, unused if using external runtime / data
+  startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
-  sentStyleInsertionFunction: boolean, // We allow the legacy renderer to extend this object.
+  sentStyleInsertionFunction: boolean,
+  // We allow the legacy renderer to extend this object.
   ...
 };
 
+const dataElementQuotedEnd = stringToPrecomputedChunk('"></div>');
+const dataElementUnquotedEnd = stringToPrecomputedChunk('></div>');
+
 const startInlineScript = stringToPrecomputedChunk('<script>');
 const endInlineScript = stringToPrecomputedChunk('</script>');
 
@@ -172,6 +178,7 @@ export function createResponseState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const bootstrapChunks = [];
+  let streamingFormat = 'SCRIPT';
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
@@ -181,6 +188,7 @@ export function createResponseState(
   }
   if (enableFizzExternalRuntime) {
     if (externalRuntimeConfig !== undefined) {
+      streamingFormat = 'DATA';
       const src =
         typeof externalRuntimeConfig === 'string'
           ? externalRuntimeConfig
@@ -244,12 +252,13 @@ export function createResponseState(
   }
   return {
     bootstrapChunks: bootstrapChunks,
-    startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
     idPrefix: idPrefix,
     nextSuspenseID: 0,
+    streamingFormat,
+    startInlineScript: inlineScriptWithNonce,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
@@ -2388,30 +2397,50 @@ const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
 
+const completeSegmentData1 = stringToPrecomputedChunk(
+  '<div hidden data-:fi="$RS" data-:a0="',
+);
+const completeSegmentData2 = stringToPrecomputedChunk('" data-:a1="');
+const completeSegmentDataEnd = dataElementQuotedEnd;
+
 export function writeCompletedSegmentInstruction(
   destination: Destination,
   responseState: ResponseState,
   contentSegmentID: number,
 ): boolean {
-  writeChunk(destination, responseState.startInlineScript);
-  if (!responseState.sentCompleteSegmentFunction) {
-    // The first time we write this, we'll need to include the full implementation.
-    responseState.sentCompleteSegmentFunction = true;
-    writeChunk(destination, completeSegmentScript1Full);
+  const scriptFormat =
+    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (!responseState.sentCompleteSegmentFunction) {
+      // The first time we write this, we'll need to include the full implementation.
+      responseState.sentCompleteSegmentFunction = true;
+      writeChunk(destination, completeSegmentScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, completeSegmentScript1Partial);
+    }
   } else {
-    // Future calls can just reuse the same function.
-    writeChunk(destination, completeSegmentScript1Partial);
+    writeChunk(destination, completeSegmentData1);
   }
 
   // Write function arguments, which are string literals
   writeChunk(destination, responseState.segmentPrefix);
   const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
-  writeChunk(destination, completeSegmentScript2);
+  if (scriptFormat) {
+    writeChunk(destination, completeSegmentScript2);
+  } else {
+    writeChunk(destination, completeSegmentData2);
+  }
   writeChunk(destination, responseState.placeholderPrefix);
   writeChunk(destination, formattedID);
 
-  return writeChunkAndReturn(destination, completeSegmentScriptEnd);
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeSegmentScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeSegmentDataEnd);
+  }
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
@@ -2433,6 +2462,18 @@ const completeBoundaryScript3a = stringToPrecomputedChunk('",');
 const completeBoundaryScript3b = stringToPrecomputedChunk('"');
 const completeBoundaryScriptEnd = stringToPrecomputedChunk(')</script>');
 
+const completeBoundaryData1 = stringToPrecomputedChunk(
+  '<div hidden data-:fi="$RC" data-:a0="',
+);
+const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
+  '<div hidden data-:fi="$RR" data-:a0="',
+);
+const completeBoundaryData2 = stringToPrecomputedChunk('" data-:a1="');
+const completeBoundaryData3aStart = stringToPrecomputedChunk('" data-:a2=\'');
+const completeBoundaryData3aEnd = stringToPrecomputedChunk("'");
+const completeBoundaryData3b = completeBoundaryScript3b;
+const completeBoundaryDataEnd = dataElementUnquotedEnd;
+
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
   responseState: ResponseState,
@@ -2444,27 +2485,37 @@ export function writeCompletedBoundaryInstruction(
   if (enableFloat) {
     hasStyleDependencies = hasStyleResourceDependencies(boundaryResources);
   }
-  writeChunk(destination, responseState.startInlineScript);
-  if (enableFloat && hasStyleDependencies) {
-    if (!responseState.sentCompleteBoundaryFunction) {
-      responseState.sentCompleteBoundaryFunction = true;
-      responseState.sentStyleInsertionFunction = true;
-      writeChunk(
-        destination,
-        clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
-      );
-    } else if (!responseState.sentStyleInsertionFunction) {
-      responseState.sentStyleInsertionFunction = true;
-      writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
+  const scriptFormat =
+    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (enableFloat && hasStyleDependencies) {
+      if (!responseState.sentCompleteBoundaryFunction) {
+        responseState.sentCompleteBoundaryFunction = true;
+        responseState.sentStyleInsertionFunction = true;
+        writeChunk(
+          destination,
+          clonePrecomputedChunk(completeBoundaryWithStylesScript1FullBoth),
+        );
+      } else if (!responseState.sentStyleInsertionFunction) {
+        responseState.sentStyleInsertionFunction = true;
+        writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
+      } else {
+        writeChunk(destination, completeBoundaryWithStylesScript1Partial);
+      }
     } else {
-      writeChunk(destination, completeBoundaryWithStylesScript1Partial);
+      if (!responseState.sentCompleteBoundaryFunction) {
+        responseState.sentCompleteBoundaryFunction = true;
+        writeChunk(destination, completeBoundaryScript1Full);
+      } else {
+        writeChunk(destination, completeBoundaryScript1Partial);
+      }
     }
   } else {
-    if (!responseState.sentCompleteBoundaryFunction) {
-      responseState.sentCompleteBoundaryFunction = true;
-      writeChunk(destination, completeBoundaryScript1Full);
+    if (enableFloat && hasStyleDependencies) {
+      writeChunk(destination, completeBoundaryWithStylesData1);
     } else {
-      writeChunk(destination, completeBoundaryScript1Partial);
+      writeChunk(destination, completeBoundaryData1);
     }
   }
 
@@ -2474,20 +2525,46 @@ export function writeCompletedBoundaryInstruction(
     );
   }
 
-  // Write function arguments, which are string literals and array
+  // Write function arguments, which are string and array literals
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
-  writeChunk(destination, completeBoundaryScript2);
+  if (scriptFormat) {
+    writeChunk(destination, completeBoundaryScript2);
+  } else {
+    writeChunk(destination, completeBoundaryData2);
+  }
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
   if (enableFloat && hasStyleDependencies) {
-    writeChunk(destination, completeBoundaryScript3a);
+    // Script and data writers must format this differently:
+    //  - script writer emits an array literal ["1", "2"]
+    //  - data writer emits a string literal ["1", "2"])
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3a);
+    } else {
+      writeChunk(destination, completeBoundaryData3aStart);
+    }
     // boundaryResources encodes an array literal
-    writeStyleResourceDependencies(destination, boundaryResources);
+    writeStyleResourceDependencies(
+      destination,
+      boundaryResources,
+      scriptFormat,
+    );
+    if (!scriptFormat) {
+      writeChunk(destination, completeBoundaryData3aEnd);
+    }
   } else {
-    writeChunk(destination, completeBoundaryScript3b);
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3b);
+    } else {
+      writeChunk(destination, completeBoundaryData3b);
+    }
+  }
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeBoundaryScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeBoundaryDataEnd);
   }
-  return writeChunkAndReturn(destination, completeBoundaryScriptEnd);
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -2495,8 +2572,16 @@ const clientRenderScript1Full = stringToPrecomputedChunk(
 );
 const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript1A = stringToPrecomputedChunk('"');
-const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
 const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
+const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const clientRenderData1 = stringToPrecomputedChunk(
+  '<div hidden data-:fi="$RX" data-:a0="',
+);
+const clientRenderData2 = stringToPrecomputedChunk('" data-:a1="');
+const clientRenderData3 = stringToPrecomputedChunk('" data-:a2="');
+const clientRenderData4 = stringToPrecomputedChunk('" data-:a3="');
+const clientRenderDataEnd = dataElementQuotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
@@ -2506,14 +2591,21 @@ export function writeClientRenderBoundaryInstruction(
   errorMessage?: string,
   errorComponentStack?: string,
 ): boolean {
-  writeChunk(destination, responseState.startInlineScript);
-  if (!responseState.sentClientRenderFunction) {
-    // The first time we write this, we'll need to include the full implementation.
-    responseState.sentClientRenderFunction = true;
-    writeChunk(destination, clientRenderScript1Full);
+  const scriptFormat =
+    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+  if (scriptFormat) {
+    writeChunk(destination, responseState.startInlineScript);
+    if (!responseState.sentClientRenderFunction) {
+      // The first time we write this, we'll need to include the full implementation.
+      responseState.sentClientRenderFunction = true;
+      writeChunk(destination, clientRenderScript1Full);
+    } else {
+      // Future calls can just reuse the same function.
+      writeChunk(destination, clientRenderScript1Partial);
+    }
   } else {
-    // Future calls can just reuse the same function.
-    writeChunk(destination, clientRenderScript1Partial);
+    // <div data-instr="$RX" data-arg0="
+    writeChunk(destination, clientRenderData1);
   }
 
   if (boundaryID === null) {
@@ -2521,34 +2613,75 @@ export function writeClientRenderBoundaryInstruction(
       'An ID must have been assigned before we can complete the boundary.',
     );
   }
-  // Write function arguments, which are string literals
+
   writeChunk(destination, boundaryID);
-  writeChunk(destination, clientRenderScript1A);
+  if (scriptFormat) {
+    // " needs to be inserted for scripts, since ArgInterstitual does not contain
+    // leading or trailing quotes
+    writeChunk(destination, clientRenderScript1A);
+  }
+
   if (errorDigest || errorMessage || errorComponentStack) {
-    // ,"JSONString"
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
-    );
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
+      );
+    } else {
+      // " arg1="EscapedString
+      writeChunk(destination, clientRenderData2);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorDigest || '')),
+      );
+    }
   }
   if (errorMessage || errorComponentStack) {
-    // ,"JSONString"
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
-    );
+    if (scriptFormat) {
+      // ,"JSONString"
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
+      );
+    } else {
+      // " arg2="EscapedString
+      writeChunk(destination, clientRenderData3);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMessage || '')),
+      );
+    }
   }
   if (errorComponentStack) {
     // ,"JSONString"
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
-    );
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(
+          escapeJSStringsForInstructionScripts(errorComponentStack),
+        ),
+      );
+    } else {
+      // " arg3="EscapedString
+      writeChunk(destination, clientRenderData4);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorComponentStack)),
+      );
+    }
+  }
+
+  if (scriptFormat) {
+    // ></script>
+    return writeChunkAndReturn(destination, clientRenderScriptEnd);
+  } else {
+    // "></div>
+    return writeChunkAndReturn(destination, clientRenderDataEnd);
   }
-  return writeChunkAndReturn(destination, clientRenderScriptEnd);
 }
 
 const regexForJSStringsInInstructionScripts = /[<\u2028\u2029]/g;
@@ -2849,19 +2982,32 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
-function writeStyleResourceObject(destination: Destination, str: string) {
-  // write "script_escaped_string", since this is writing to a script tag
-  // and will be evaluated as a string literal inside an array literal
-  writeChunk(
-    destination,
-    stringToChunk(escapeJSObjectForInstructionScripts(str)),
-  );
-  // TODO(mofeiZ): will add a data writer format here in a later PR
+function writeStyleResourceObject(
+  destination: Destination,
+  str: string,
+  isScriptWriter: boolean,
+) {
+  if (isScriptWriter) {
+    // write "script_escaped_string", since this is writing to a script tag
+    // and will be evaluated as a string literal inside an array literal
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSObjectForInstructionScripts(str)),
+    );
+  } else {
+    // write &quot;JSON_escaped_string&quot; here, since this is writing
+    // to an attribute string and will be parsed manually via JSON.parse
+    writeChunk(
+      destination,
+      stringToChunk(escapeTextForBrowser(JSON.stringify(str))),
+    );
+  }
 }
 
 function writeStyleResourceDependencies(
   destination: Destination,
   boundaryResources: BoundaryResources,
+  isScriptWriter: boolean,
 ): void {
   writeChunk(destination, arrayFirstOpenBracket);
 
@@ -2872,7 +3018,11 @@ function writeStyleResourceDependencies(
       // should be ready before content is shown on the client
     } else if (resource.flushed) {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnly(destination, resource.href);
+      writeStyleResourceDependencyHrefOnly(
+        destination,
+        resource.href,
+        isScriptWriter,
+      );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
     } else {
@@ -2882,6 +3032,7 @@ function writeStyleResourceDependencies(
         resource.href,
         resource.precedence,
         resource.props,
+        isScriptWriter,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
@@ -2896,6 +3047,7 @@ function writeStyleResourceDependencies(
 function writeStyleResourceDependencyHrefOnly(
   destination: Destination,
   href: string,
+  isScriptWriter: boolean,
 ) {
   // We should actually enforce this earlier when the resource is created but for
   // now we make sure we are actually dealing with a string here.
@@ -2903,7 +3055,7 @@ function writeStyleResourceDependencyHrefOnly(
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
-  writeStyleResourceObject(destination, coercedHref);
+  writeStyleResourceObject(destination, coercedHref, isScriptWriter);
 }
 
 function writeStyleResourceDependency(
@@ -2911,13 +3063,14 @@ function writeStyleResourceDependency(
   href: string,
   precedence: string,
   props: Object,
+  isScriptWriter: boolean,
 ) {
   if (__DEV__) {
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
   sanitizeURL(coercedHref);
-  writeStyleResourceObject(destination, coercedHref);
+  writeStyleResourceObject(destination, coercedHref, isScriptWriter);
 
   if (__DEV__) {
     checkAttributeStringCoercion(precedence, 'precedence');
@@ -2925,7 +3078,7 @@ function writeStyleResourceDependency(
   const coercedPrecedence = '' + (precedence: any);
   writeChunk(destination, arrayInterstitial);
 
-  writeStyleResourceObject(destination, coercedPrecedence);
+  writeStyleResourceObject(destination, coercedPrecedence, isScriptWriter);
 
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -2948,7 +3101,12 @@ function writeStyleResourceDependency(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          writeStyleResourceAttribute(destination, propKey, propValue);
+          writeStyleResourceAttribute(
+            destination,
+            propKey,
+            propValue,
+            isScriptWriter,
+          );
           break;
       }
     }
@@ -2960,6 +3118,7 @@ function writeStyleResourceAttribute(
   destination: Destination,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
+  isScriptWriter: boolean,
 ): void {
   let attributeName = name.toLowerCase();
   let attributeValue;
@@ -3024,7 +3183,7 @@ function writeStyleResourceAttribute(
   }
   attributeValue = '' + (value: any);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeName);
+  writeStyleResourceObject(destination, attributeName, isScriptWriter);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeValue);
+  writeStyleResourceObject(destination, attributeValue, isScriptWriter);
 }
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index 01e70273a656f..8cb3dc1d6e86a 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import type {FormatContext} from './ReactDOMServerFormatConfig';
+import type {
+  BootstrapScriptDescriptor,
+  FormatContext,
+} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -31,12 +34,14 @@ export const isPrimaryRenderer = false;
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
-  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
+  streamingFormat: 'SCRIPT' | 'DATA',
+  // state for script streaming format, unused if using external runtime / data
+  startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
@@ -48,17 +53,26 @@ export type ResponseState = {
 export function createResponseState(
   generateStaticMarkup: boolean,
   identifierPrefix: string | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
 ): ResponseState {
-  const responseState = createResponseStateImpl(identifierPrefix, undefined);
+  const responseState = createResponseStateImpl(
+    identifierPrefix,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    externalRuntimeConfig,
+  );
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
     bootstrapChunks: responseState.bootstrapChunks,
-    startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
     idPrefix: responseState.idPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
+    streamingFormat: responseState.streamingFormat,
+    startInlineScript: responseState.startInlineScript,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
     sentClientRenderFunction: responseState.sentClientRenderFunction,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 030e5093e52fe..f780fc2cb0bc7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -8,7 +8,12 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+  stripExternalRuntimeInNodes,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -31,7 +36,7 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
-const renderOptions = {};
+let renderOptions;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -89,6 +94,12 @@ describe('ReactDOMFizzServer', () => {
       hasErrored = true;
       fatalError = error;
     });
+
+    renderOptions = {};
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+    }
   });
 
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
@@ -595,7 +606,12 @@ describe('ReactDOMFizzServer', () => {
     // Because there is no content inside the Suspense boundary that could've
     // been written, we expect to not see any additional partial data flushed
     // yet.
-    expect(container.childNodes.length).toBe(1);
+    expect(
+      stripExternalRuntimeInNodes(
+        container.childNodes,
+        renderOptions.unstable_externalRuntimeSrc,
+      ).length,
+    ).toBe(1);
     await act(async () => {
       resolveElement({default: <Text text="Hello" />});
     });
@@ -3490,7 +3506,10 @@ describe('ReactDOMFizzServer', () => {
       </html>,
     );
     expect(
-      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
     ).toEqual([
       '<script src="foo" async=""></script>',
       '<script src="bar" async=""></script>',
@@ -3589,6 +3608,31 @@ describe('ReactDOMFizzServer', () => {
     ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
   });
 
+  // @gate enableFizzExternalRuntime
+  it('supports generating instructions as data attributes', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <div>
+              <AsyncText text="Hello" />
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await act(async () => {
+      resolveText('Hello');
+    });
+
+    // The only script elements sent should be from unstable_externalRuntimeSrc
+    expect(document.getElementsByTagName('script').length).toEqual(1);
+  });
+
   it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -4482,10 +4526,12 @@ describe('ReactDOMFizzServer', () => {
         const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
-
-      expect(container.innerHTML).toEqual(
-        '<div>hello<b>world, <!-- -->Foo</b>!</div>',
-      );
+      expect(
+        stripExternalRuntimeInString(
+          container.innerHTML,
+          renderOptions.unstable_externalRuntimeSrc,
+        ),
+      ).toEqual('<div>hello<b>world, <!-- -->Foo</b>!</div>');
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
         onRecoverableError(error) {
@@ -4531,7 +4577,13 @@ describe('ReactDOMFizzServer', () => {
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
       // there are extra script nodes at the end of container
-      expect(container.childNodes.length).toBe(5);
+      expect(
+        stripExternalRuntimeInNodes(
+          container.childNodes,
+          renderOptions.unstable_externalRuntimeSrc,
+        ).length,
+      ).toBe(5);
+
       const div = container.childNodes[1];
       expect(div.childNodes.length).toBe(3);
       const b = div.childNodes[1];
@@ -4834,8 +4886,12 @@ describe('ReactDOMFizzServer', () => {
         pipe(writable);
       });
 
-      // strip inserted external runtime
-      expect(container.innerHTML).toEqual(
+      expect(
+        stripExternalRuntimeInString(
+          container.innerHTML,
+          renderOptions.unstable_externalRuntimeSrc,
+        ),
+      ).toEqual(
         '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
       );
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 650bb3a32d1a7..fdf7fdec3773e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8,7 +8,11 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -26,7 +30,7 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
-const renderOptions = {};
+let renderOptions;
 
 describe('ReactDOMFloat', () => {
   beforeEach(() => {
@@ -64,6 +68,12 @@ describe('ReactDOMFloat', () => {
       hasErrored = true;
       fatalError = error;
     });
+
+    renderOptions = {};
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        'react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js';
+    }
   });
 
   function normalizeCodeLocInfo(str) {
@@ -583,6 +593,12 @@ describe('ReactDOMFloat', () => {
       );
       pipe(writable);
     });
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      chunks[0] = stripExternalRuntimeInString(
+        chunks[0],
+        renderOptions.unstable_externalRuntimeSrc,
+      );
+    }
     expect(chunks).toEqual([
       '<!DOCTYPE html><html><script async="" src="foo"></script><title>foo</title><body>bar',
       '</body></html>',
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index 1a7e9f633e21c..9563adfeec6bd 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -10,6 +10,7 @@
 import ReactVersion from 'shared/ReactVersion';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
 
 import {
   createRequest,
@@ -36,6 +37,7 @@ function renderToStringImpl(
   options: void | ServerOptions,
   generateStaticMarkup: boolean,
   abortReason: string,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 ): string {
   let didFatal = false;
   let fatalError = null;
@@ -62,6 +64,7 @@ function renderToStringImpl(
     createResponseState(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
+      unstable_externalRuntimeSrc,
     ),
     createRootFormatContext(),
     Infinity,
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index bf4084dc13e59..ff676506ca59d 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -11,7 +11,9 @@
 import * as tmp from 'tmp';
 import * as fs from 'fs';
 import replace from 'rollup-plugin-replace';
+import resolve from 'rollup-plugin-node-resolve';
 import {rollup} from 'rollup';
+import path from 'path';
 
 const rollupCache: Map<string, string | null> = new Map();
 
@@ -27,7 +29,12 @@ async function getRollupResult(scriptSrc: string): Promise<string | null> {
     const rollupConfig = {
       input: require.resolve(scriptSrc),
       onwarn: console.warn,
-      plugins: [replace({__DEV__: 'true'})],
+      plugins: [
+        replace({__DEV__: 'true'}),
+        resolve({
+          rootDir: path.join(__dirname, '..', '..', '..'),
+        }),
+      ],
       output: {
         externalLiveBindings: false,
         freeze: false,
@@ -120,4 +127,40 @@ function mergeOptions(options: Object, defaultOptions: Object): Object {
   };
 }
 
-export {replaceScriptsAndMove, mergeOptions};
+function stripExternalRuntimeInString(
+  source: string,
+  externalRuntimeSrc: string | null,
+): string {
+  if (externalRuntimeSrc == null) {
+    return source;
+  }
+  const matchExternalRuntimeTag = new RegExp(
+    '<script src="' + externalRuntimeSrc + '"[\\s\\S]*/script>',
+    'm',
+  );
+  return source.replace(matchExternalRuntimeTag, '');
+}
+
+function stripExternalRuntimeInNodes(
+  nodes: HTMLElement[] | HTMLCollection<HTMLElement>,
+  externalRuntimeSrc: string | null,
+): HTMLElement[] {
+  if (!Array.isArray(nodes)) {
+    nodes = Array.from(nodes);
+  }
+  if (externalRuntimeSrc == null) {
+    return nodes;
+  }
+  return nodes.filter(
+    n =>
+      (n.tagName !== 'SCRIPT' && n.tagName !== 'script') ||
+      n.getAttribute('src') !== externalRuntimeSrc,
+  );
+}
+
+export {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+  stripExternalRuntimeInNodes,
+};
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 783080f7b1670..34f8862127ce0 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -12,6 +12,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Request} from 'react-server/src/ReactFizzServer';
 
 import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+import type {BootstrapScriptDescriptor} from 'react-dom-bindings/src/server/ReactDOMServerFormatConfig';
 
 import {
   createRequest,
@@ -33,6 +34,7 @@ type Options = {
   bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
+  unstable_externalRuntimeSrc?: string | BootstrapScriptDescriptor,
 };
 
 opaque type Stream = {
@@ -55,6 +57,7 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
       options ? options.bootstrapScriptContent : undefined,
       options ? options.bootstrapScripts : undefined,
       options ? options.bootstrapModules : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
     ),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,

From 575c581382a702c80c0d355ea8d7e0eab30e5140 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Wed, 2 Nov 2022 16:01:18 -0400
Subject: [PATCH 03/13] Add EmbeddingContext enum type

---
 .../src/server/ReactDOMServerFormatConfig.js  | 49 +++++++++----------
 scripts/error-codes/codes.json                |  3 +-
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index f9d51be2e3dd6..32e1321666047 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2548,7 +2548,7 @@ export function writeCompletedBoundaryInstruction(
     writeStyleResourceDependencies(
       destination,
       boundaryResources,
-      scriptFormat,
+      scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
     );
     if (!scriptFormat) {
       writeChunk(destination, completeBoundaryData3aEnd);
@@ -2982,32 +2982,40 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
+type EmbeddingContext = 0 | 1;
+const HTMLAttributeEmbedding: EmbeddingContext = 0;
+const JavascriptEmbedding: EmbeddingContext = 1;
+
 function writeStyleResourceObject(
   destination: Destination,
   str: string,
-  isScriptWriter: boolean,
+  context: EmbeddingContext,
 ) {
-  if (isScriptWriter) {
+  if (context === JavascriptEmbedding) {
     // write "script_escaped_string", since this is writing to a script tag
     // and will be evaluated as a string literal inside an array literal
     writeChunk(
       destination,
       stringToChunk(escapeJSObjectForInstructionScripts(str)),
     );
-  } else {
+  } else if (context === HTMLAttributeEmbedding) {
     // write &quot;JSON_escaped_string&quot; here, since this is writing
     // to an attribute string and will be parsed manually via JSON.parse
     writeChunk(
       destination,
       stringToChunk(escapeTextForBrowser(JSON.stringify(str))),
     );
+  } else {
+    throw new Error(
+      'Unknown embedding context type when writing style resources. This is a bug in React.',
+    );
   }
 }
 
 function writeStyleResourceDependencies(
   destination: Destination,
   boundaryResources: BoundaryResources,
-  isScriptWriter: boolean,
+  context: EmbeddingContext,
 ): void {
   writeChunk(destination, arrayFirstOpenBracket);
 
@@ -3018,11 +3026,7 @@ function writeStyleResourceDependencies(
       // should be ready before content is shown on the client
     } else if (resource.flushed) {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnly(
-        destination,
-        resource.href,
-        isScriptWriter,
-      );
+      writeStyleResourceDependencyHrefOnly(destination, resource.href, context);
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
     } else {
@@ -3032,7 +3036,7 @@ function writeStyleResourceDependencies(
         resource.href,
         resource.precedence,
         resource.props,
-        isScriptWriter,
+        context,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
@@ -3047,7 +3051,7 @@ function writeStyleResourceDependencies(
 function writeStyleResourceDependencyHrefOnly(
   destination: Destination,
   href: string,
-  isScriptWriter: boolean,
+  context: EmbeddingContext,
 ) {
   // We should actually enforce this earlier when the resource is created but for
   // now we make sure we are actually dealing with a string here.
@@ -3055,7 +3059,7 @@ function writeStyleResourceDependencyHrefOnly(
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
-  writeStyleResourceObject(destination, coercedHref, isScriptWriter);
+  writeStyleResourceObject(destination, coercedHref, context);
 }
 
 function writeStyleResourceDependency(
@@ -3063,14 +3067,14 @@ function writeStyleResourceDependency(
   href: string,
   precedence: string,
   props: Object,
-  isScriptWriter: boolean,
+  context: EmbeddingContext,
 ) {
   if (__DEV__) {
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
   sanitizeURL(coercedHref);
-  writeStyleResourceObject(destination, coercedHref, isScriptWriter);
+  writeStyleResourceObject(destination, coercedHref, context);
 
   if (__DEV__) {
     checkAttributeStringCoercion(precedence, 'precedence');
@@ -3078,7 +3082,7 @@ function writeStyleResourceDependency(
   const coercedPrecedence = '' + (precedence: any);
   writeChunk(destination, arrayInterstitial);
 
-  writeStyleResourceObject(destination, coercedPrecedence, isScriptWriter);
+  writeStyleResourceObject(destination, coercedPrecedence, context);
 
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -3101,12 +3105,7 @@ function writeStyleResourceDependency(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          writeStyleResourceAttribute(
-            destination,
-            propKey,
-            propValue,
-            isScriptWriter,
-          );
+          writeStyleResourceAttribute(destination, propKey, propValue, context);
           break;
       }
     }
@@ -3118,7 +3117,7 @@ function writeStyleResourceAttribute(
   destination: Destination,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
-  isScriptWriter: boolean,
+  context: EmbeddingContext,
 ): void {
   let attributeName = name.toLowerCase();
   let attributeValue;
@@ -3183,7 +3182,7 @@ function writeStyleResourceAttribute(
   }
   attributeValue = '' + (value: any);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeName, isScriptWriter);
+  writeStyleResourceObject(destination, attributeName, context);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeValue, isScriptWriter);
+  writeStyleResourceObject(destination, attributeValue, context);
 }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 7b9237da864fe..06075b8ad91e1 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -449,5 +449,6 @@
   "461": "This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue.",
   "462": "Unexpected SuspendedReason. This is a bug in React.",
   "463": "ReactDOMServer.renderToNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
-  "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead."
+  "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
+  "465": "Unknown embedding context type when writing style resources. This is a bug in React."
 }

From 62bf65ff23bc46625da6d735e97b7260e5aa40f0 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 3 Nov 2022 12:55:19 -0400
Subject: [PATCH 04/13] Add external runtime to new tests from rebase

---
 .../src/__tests__/ReactDOMFizzServer-test.js         | 11 ++++++++---
 .../react-dom/src/__tests__/ReactDOMFloat-test.js    | 12 ++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index f780fc2cb0bc7..09cbcb31a2f20 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -5518,7 +5518,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('can render scripts with simple children', async () => {
     await actIntoEmptyDocument(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <body>
             <script>{'try { foo() } catch (e) {} ;'}</script>
@@ -5528,7 +5528,12 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    expect(document.documentElement.outerHTML).toEqual(
+    expect(
+      stripExternalRuntimeInString(
+        document.documentElement.outerHTML,
+        renderOptions.unstable_externalRuntimeSrc,
+      ),
+    ).toEqual(
       '<html><head></head><body><script>try { foo() } catch (e) {} ;</script></body></html>',
     );
   });
@@ -5546,7 +5551,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await actIntoEmptyDocument(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <script>{2}</script>
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index fdf7fdec3773e..a48da738e5e5c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -297,7 +297,7 @@ describe('ReactDOMFloat', () => {
   // @gate enableFloat
   it('can hydrate non Resources in head when Resources are also inserted there', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head>
             <meta property="foo" content="bar" />
@@ -5408,7 +5408,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('allows resources inside foreignobject within an svg context', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5515,7 +5515,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('should support non-title resources in svg context', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5648,7 +5648,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('should not treat title descendants of svg into resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <body>
               <svg>
@@ -5774,7 +5774,7 @@ describe('ReactDOMFloat', () => {
         );
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -5871,7 +5871,7 @@ describe('ReactDOMFloat', () => {
       }
 
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getMeaningfulChildren(container)).toEqual(

From 7daf1097270ba2de04b8e185069d615518424082 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 3 Nov 2022 15:20:33 -0400
Subject: [PATCH 05/13] Remove instruction divs from DOM after processing

---
 .../src/server/ReactDOMServerExternalRuntime.js       | 11 ++++++++---
 .../src/__tests__/ReactDOMFizzServer-test.js          |  8 +++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index ab3363716eebc..0e77e37ebd2f9 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -38,12 +38,13 @@ if (!window.$REACT_FIZZ_OBSERVER) {
   }
 }
 
-function handleNode(node /*: Node */) {
-  if (node.nodeType !== 1) {
+function handleNode(node_ /*: Node */) {
+  if (node_.nodeType !== 1) {
     return;
   }
   // $FlowFixMe[incompatible-cast]
-  const dataset = (node /*: HTMLElement*/).dataset;
+  const node = (node_ /*: HTMLElement*/);
+  const dataset = node.dataset;
   const instr = dataset ? dataset[':fi'] : null;
   switch (instr) {
     case '$RX':
@@ -53,6 +54,7 @@ function handleNode(node /*: Node */) {
         dataset[':a2'],
         dataset[':a3'],
       );
+      node.remove();
       break;
     case '$RR':
       // Convert arg2 here, since its type is Array<Array<string>>
@@ -61,12 +63,15 @@ function handleNode(node /*: Node */) {
         dataset[':a1'],
         JSON.parse(dataset[':a2']),
       );
+      node.remove();
       break;
     case '$RC':
       completeBoundary(dataset[':a0'], dataset[':a1'], dataset[':a2']);
+      node.remove();
       break;
     case '$RS':
       completeSegment(dataset[':a0'], dataset[':a1']);
+      node.remove();
       break;
   }
 }
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 09cbcb31a2f20..b88962da257a7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4576,13 +4576,15 @@ describe('ReactDOMFizzServer', () => {
       expect(container.firstElementChild.outerHTML).toEqual(
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
-      // there are extra script nodes at the end of container
+      // there may be either:
+      //  - an external runtime script and deleted nodes with data attributes
+      //  - extra script nodes containing fizz instructions at the end of container
       expect(
         stripExternalRuntimeInNodes(
           container.childNodes,
           renderOptions.unstable_externalRuntimeSrc,
-        ).length,
-      ).toBe(5);
+        ).filter(e => e.tagName !== 'SCRIPT').length,
+      ).toBe(3);
 
       const div = container.childNodes[1];
       expect(div.childNodes.length).toBe(3);

From 7920bb24032db2e7fd529bc57405629481af27e9 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Mon, 7 Nov 2022 16:34:24 -0500
Subject: [PATCH 06/13] changed data attribute names, div -> template

---
 .../server/ReactDOMServerExternalRuntime.js   | 65 +++++++++----------
 .../src/server/ReactDOMServerFormatConfig.js  | 64 ++++++++++--------
 .../ReactDOMServerLegacyFormatConfig.js       |  3 +-
 3 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 0e77e37ebd2f9..bf89ddb0e2a59 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -3,6 +3,7 @@
  *  clients. Therefore, it should be fast and not have many external dependencies.
  * @flow
  */
+/* eslint-disable dot-notation */
 
 // Imports are resolved statically by the closure compiler in release bundles
 // and by rollup in jest unit tests
@@ -22,9 +23,12 @@ if (!window.$REACT_FIZZ_OBSERVER) {
   window.$RC = completeBoundary;
   window.$RM = new Map();
   window.$REACT_FIZZ_OBSERVER = new MutationObserver(mutations => {
-    mutations.forEach(mutation => {
-      mutation.addedNodes.forEach(handleNode);
-    });
+    for (let i = 0; i < mutations.length; i++) {
+      const addedNodes = mutations[i].addedNodes;
+      for (let j = 0; j < addedNodes.length; j++) {
+        handleNode(addedNodes.item(j));
+      }
+    }
   });
   // $FlowFixMe[incompatible-call] document.body should exist at this point
   window.$REACT_FIZZ_OBSERVER.observe(document.body, {
@@ -32,46 +36,41 @@ if (!window.$REACT_FIZZ_OBSERVER) {
     subtree: true,
   });
 
-  const existingNodes = document.getElementsByTagName('div');
+  const existingNodes = document.getElementsByTagName('template');
   for (let i = 0; i < existingNodes.length; i++) {
     handleNode(existingNodes[i]);
   }
 }
 
 function handleNode(node_ /*: Node */) {
-  if (node_.nodeType !== 1) {
+  // $FlowFixMe[incompatible-cast]
+  if (node_.nodeType !== 1 || !(node_ /*: HTMLElement*/).dataset) {
     return;
   }
   // $FlowFixMe[incompatible-cast]
   const node = (node_ /*: HTMLElement*/);
   const dataset = node.dataset;
-  const instr = dataset ? dataset[':fi'] : null;
-  switch (instr) {
-    case '$RX':
-      clientRenderBoundary(
-        dataset[':a0'],
-        dataset[':a1'],
-        dataset[':a2'],
-        dataset[':a3'],
-      );
-      node.remove();
-      break;
-    case '$RR':
-      // Convert arg2 here, since its type is Array<Array<string>>
-      completeBoundaryWithStyles(
-        dataset[':a0'],
-        dataset[':a1'],
-        JSON.parse(dataset[':a2']),
-      );
-      node.remove();
-      break;
-    case '$RC':
-      completeBoundary(dataset[':a0'], dataset[':a1'], dataset[':a2']);
-      node.remove();
-      break;
-    case '$RS':
-      completeSegment(dataset[':a0'], dataset[':a1']);
-      node.remove();
-      break;
+  if (dataset['rxi'] != null) {
+    clientRenderBoundary(
+      dataset['sid'],
+      dataset['dgst'],
+      dataset['msg'],
+      dataset['stck'],
+    );
+    node.remove();
+  } else if (dataset['rri'] != null) {
+    // Convert styles here, since its type is Array<Array<string>>
+    completeBoundaryWithStyles(
+      dataset['bid'],
+      dataset['sid'],
+      JSON.parse(dataset['sty']),
+    );
+    node.remove();
+  } else if (dataset['rci'] != null) {
+    completeBoundary(dataset['bid'], dataset['sid']);
+    node.remove();
+  } else if (dataset['rsi'] != null) {
+    completeSegment(dataset['sid'], dataset['pid']);
+    node.remove();
   }
 }
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 32e1321666047..7574771f061ad 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -105,6 +105,10 @@ export function cleanupAfterRender(previousDispatcher: mixed) {
 // E.g. this can be used to distinguish legacy renderers from this modern one.
 export const isPrimaryRenderer = true;
 
+export type StreamingFormat = 0 | 1;
+const ScriptStreamingFormat: StreamingFormat = 0;
+const DataStreamingFormat: StreamingFormat = 1;
+
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
@@ -113,7 +117,7 @@ export type ResponseState = {
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
-  streamingFormat: 'SCRIPT' | 'DATA',
+  streamingFormat: StreamingFormat,
   // state for script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
@@ -124,8 +128,8 @@ export type ResponseState = {
   ...
 };
 
-const dataElementQuotedEnd = stringToPrecomputedChunk('"></div>');
-const dataElementUnquotedEnd = stringToPrecomputedChunk('></div>');
+const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
+const dataElementUnquotedEnd = stringToPrecomputedChunk('></template>');
 
 const startInlineScript = stringToPrecomputedChunk('<script>');
 const endInlineScript = stringToPrecomputedChunk('</script>');
@@ -178,7 +182,7 @@ export function createResponseState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const bootstrapChunks = [];
-  let streamingFormat = 'SCRIPT';
+  let streamingFormat = ScriptStreamingFormat;
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
@@ -188,7 +192,7 @@ export function createResponseState(
   }
   if (enableFizzExternalRuntime) {
     if (externalRuntimeConfig !== undefined) {
-      streamingFormat = 'DATA';
+      streamingFormat = DataStreamingFormat;
       const src =
         typeof externalRuntimeConfig === 'string'
           ? externalRuntimeConfig
@@ -2398,9 +2402,9 @@ const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
 
 const completeSegmentData1 = stringToPrecomputedChunk(
-  '<div hidden data-:fi="$RS" data-:a0="',
+  '<template data-rsi="" data-sid="',
 );
-const completeSegmentData2 = stringToPrecomputedChunk('" data-:a1="');
+const completeSegmentData2 = stringToPrecomputedChunk('" data-pid="');
 const completeSegmentDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedSegmentInstruction(
@@ -2409,7 +2413,8 @@ export function writeCompletedSegmentInstruction(
   contentSegmentID: number,
 ): boolean {
   const scriptFormat =
-    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
     if (!responseState.sentCompleteSegmentFunction) {
@@ -2463,13 +2468,13 @@ const completeBoundaryScript3b = stringToPrecomputedChunk('"');
 const completeBoundaryScriptEnd = stringToPrecomputedChunk(')</script>');
 
 const completeBoundaryData1 = stringToPrecomputedChunk(
-  '<div hidden data-:fi="$RC" data-:a0="',
+  '<template data-rci="" data-bid="',
 );
 const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
-  '<div hidden data-:fi="$RR" data-:a0="',
+  '<template data-rri="" data-bid="',
 );
-const completeBoundaryData2 = stringToPrecomputedChunk('" data-:a1="');
-const completeBoundaryData3aStart = stringToPrecomputedChunk('" data-:a2=\'');
+const completeBoundaryData2 = stringToPrecomputedChunk('" data-sid="');
+const completeBoundaryData3aStart = stringToPrecomputedChunk('" data-sty=\'');
 const completeBoundaryData3aEnd = stringToPrecomputedChunk("'");
 const completeBoundaryData3b = completeBoundaryScript3b;
 const completeBoundaryDataEnd = dataElementUnquotedEnd;
@@ -2486,7 +2491,8 @@ export function writeCompletedBoundaryInstruction(
     hasStyleDependencies = hasStyleResourceDependencies(boundaryResources);
   }
   const scriptFormat =
-    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
     if (enableFloat && hasStyleDependencies) {
@@ -2541,16 +2547,19 @@ export function writeCompletedBoundaryInstruction(
     //  - data writer emits a string literal ["1", "2"])
     if (scriptFormat) {
       writeChunk(destination, completeBoundaryScript3a);
+      // boundaryResources encodes an array literal
+      writeStyleResourceDependencies(
+        destination,
+        boundaryResources,
+        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
+      );
     } else {
       writeChunk(destination, completeBoundaryData3aStart);
-    }
-    // boundaryResources encodes an array literal
-    writeStyleResourceDependencies(
-      destination,
-      boundaryResources,
-      scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
-    );
-    if (!scriptFormat) {
+      writeStyleResourceDependencies(
+        destination,
+        boundaryResources,
+        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
+      );
       writeChunk(destination, completeBoundaryData3aEnd);
     }
   } else {
@@ -2576,11 +2585,11 @@ const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
 
 const clientRenderData1 = stringToPrecomputedChunk(
-  '<div hidden data-:fi="$RX" data-:a0="',
+  '<template data-rxi="" data-sid="',
 );
-const clientRenderData2 = stringToPrecomputedChunk('" data-:a1="');
-const clientRenderData3 = stringToPrecomputedChunk('" data-:a2="');
-const clientRenderData4 = stringToPrecomputedChunk('" data-:a3="');
+const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
+const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
+const clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
 const clientRenderDataEnd = dataElementQuotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
@@ -2592,7 +2601,8 @@ export function writeClientRenderBoundaryInstruction(
   errorComponentStack?: string,
 ): boolean {
   const scriptFormat =
-    !enableFizzExternalRuntime || responseState.streamingFormat === 'SCRIPT';
+    !enableFizzExternalRuntime ||
+    responseState.streamingFormat === ScriptStreamingFormat;
   if (scriptFormat) {
     writeChunk(destination, responseState.startInlineScript);
     if (!responseState.sentClientRenderFunction) {
@@ -2604,7 +2614,7 @@ export function writeClientRenderBoundaryInstruction(
       writeChunk(destination, clientRenderScript1Partial);
     }
   } else {
-    // <div data-instr="$RX" data-arg0="
+    // <template data-rxi="" data-arg0="
     writeChunk(destination, clientRenderData1);
   }
 
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index 8cb3dc1d6e86a..770f37403f815 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -10,6 +10,7 @@
 import type {
   BootstrapScriptDescriptor,
   FormatContext,
+  StreamingFormat,
 } from './ReactDOMServerFormatConfig';
 
 import {
@@ -39,7 +40,7 @@ export type ResponseState = {
   boundaryPrefix: string,
   idPrefix: string,
   nextSuspenseID: number,
-  streamingFormat: 'SCRIPT' | 'DATA',
+  streamingFormat: StreamingFormat,
   // state for script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,

From 7e14a269a616bf8099ba85a0cb909f27afbf3566 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 17 Nov 2022 12:05:28 -0500
Subject: [PATCH 07/13] Feedback: renamed data attributes, check readyState,
 make tests explicit

---
 .../src/server/ReactDOMFloatServer.js         |  14 ++-
 .../server/ReactDOMServerExternalRuntime.js   |  35 +++---
 .../src/server/ReactDOMServerFormatConfig.js  |  44 ++++---
 .../ReactDOMServerLegacyFormatConfig.js       |   3 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 116 +++++++++++-------
 .../src/__tests__/ReactDOMFloat-test.js       |  60 +++++++--
 .../react-dom/src/test-utils/FizzTestUtils.js |  49 +++++---
 .../server/ReactNativeServerFormatConfig.js   |   1 +
 packages/react-server/src/ReactFizzServer.js  |   9 +-
 scripts/error-codes/codes.json                |   3 +-
 10 files changed, 228 insertions(+), 106 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
index 4af71458cb6a7..d422b2fbbe084 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
@@ -275,7 +275,7 @@ type PreinitOptions = {
   crossOrigin?: string,
   integrity?: string,
 };
-function preinit(href: string, options: PreinitOptions) {
+function preinit(href: string, options: PreinitOptions): void {
   if (!currentResources) {
     // While we expect that preinit calls are primarily going to be observed
     // during render because effects and events don't run on the server it is
@@ -285,7 +285,17 @@ function preinit(href: string, options: PreinitOptions) {
     // simply return and do not warn.
     return;
   }
-  const resources = currentResources;
+  preinitImpl(href, options, currentResources);
+}
+
+// On the server, preinit may be called outside of render when sending an
+// external SSR runtime as part of the initial resources payload. Since this
+// is an internal React call, we do not need to use the resources stack.
+export function preinitImpl(
+  href: string,
+  options: PreinitOptions,
+  resources: Resources,
+): void {
   if (__DEV__) {
     validatePreinitArguments(href, options);
   }
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index bf89ddb0e2a59..8caac93d7932a 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -14,32 +14,37 @@ import {
   completeSegment,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSet';
 
-// This runtime may be sent to the client multiple times (if FizzServer.render
-//  is called more than once). Here, we check whether the mutation observer
-//  was already created / installed
-if (!window.$REACT_FIZZ_OBSERVER) {
-  // TODO: Eventually remove, we currently need to set these globals for
-  // compatibility with ReactDOMFizzInstructionSet
-  window.$RC = completeBoundary;
-  window.$RM = new Map();
-  window.$REACT_FIZZ_OBSERVER = new MutationObserver(mutations => {
+if (document.readyState === 'loading') {
+  if (!window.$RC) {
+    // TODO: Eventually remove, we currently need to set these globals for
+    // compatibility with ReactDOMFizzInstructionSet
+    window.$RC = completeBoundary;
+    window.$RM = new Map();
+  }
+  const mutationObserver = new MutationObserver(mutations => {
     for (let i = 0; i < mutations.length; i++) {
       const addedNodes = mutations[i].addedNodes;
       for (let j = 0; j < addedNodes.length; j++) {
-        handleNode(addedNodes.item(j));
+        if (addedNodes.item(j).parentNode) {
+          handleNode(addedNodes.item(j));
+        }
       }
     }
   });
+
   // $FlowFixMe[incompatible-call] document.body should exist at this point
-  window.$REACT_FIZZ_OBSERVER.observe(document.body, {
+  mutationObserver.observe(document.body, {
     childList: true,
     subtree: true,
   });
+  window.addEventListener('DOMContentLoaded', () => {
+    mutationObserver.disconnect();
+  });
+}
 
-  const existingNodes = document.getElementsByTagName('template');
-  for (let i = 0; i < existingNodes.length; i++) {
-    handleNode(existingNodes[i]);
-  }
+const existingNodes = document.getElementsByTagName('template');
+for (let i = 0; i < existingNodes.length; i++) {
+  handleNode(existingNodes[i]);
 }
 
 function handleNode(node_ /*: Node */) {
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 7574771f061ad..2ffbe4c25a10e 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -63,6 +63,7 @@ import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
 
 import {
+  preinitImpl,
   prepareToRenderResources,
   finishRenderingResources,
   resourcesFromElement,
@@ -124,6 +125,8 @@ export type ResponseState = {
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
   sentStyleInsertionFunction: boolean,
+  // state for data streaming format
+  externalRuntimeConfig: BootstrapScriptDescriptor | null,
   // We allow the legacy renderer to extend this object.
   ...
 };
@@ -182,6 +185,7 @@ export function createResponseState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const bootstrapChunks = [];
+  let externalRuntimeDesc = null;
   let streamingFormat = ScriptStreamingFormat;
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
@@ -191,27 +195,21 @@ export function createResponseState(
     );
   }
   if (enableFizzExternalRuntime) {
+    if (!enableFloat) {
+      throw new Error(
+        'enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle.',
+      );
+    }
     if (externalRuntimeConfig !== undefined) {
       streamingFormat = DataStreamingFormat;
-      const src =
-        typeof externalRuntimeConfig === 'string'
-          ? externalRuntimeConfig
-          : externalRuntimeConfig.src;
-      const integrity =
-        typeof externalRuntimeConfig === 'string'
-          ? undefined
-          : externalRuntimeConfig.integrity;
-      bootstrapChunks.push(
-        startScriptSrc,
-        stringToChunk(escapeTextForBrowser(src)),
-      );
-      if (integrity) {
-        bootstrapChunks.push(
-          scriptIntegirty,
-          stringToChunk(escapeTextForBrowser(integrity)),
-        );
+      if (typeof externalRuntimeConfig === 'string') {
+        externalRuntimeDesc = {
+          src: externalRuntimeConfig,
+          integrity: undefined,
+        };
+      } else {
+        externalRuntimeDesc = externalRuntimeConfig;
       }
-      bootstrapChunks.push(endAsyncScript);
     }
   }
   if (bootstrapScripts !== undefined) {
@@ -267,6 +265,7 @@ export function createResponseState(
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
     sentStyleInsertionFunction: false,
+    externalRuntimeConfig: externalRuntimeDesc,
   };
 }
 
@@ -2751,7 +2750,16 @@ export function writeInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): boolean {
+  if (
+    enableFizzExternalRuntime &&
+    !willFlushAllSegments &&
+    responseState.externalRuntimeConfig
+  ) {
+    const {src, integrity} = responseState.externalRuntimeConfig;
+    preinitImpl(src, {as: 'script', integrity}, resources);
+  }
   function flushLinkResource(resource) {
     if (!resource.flushed) {
       pushLinkImpl(target, resource.props, responseState);
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
index 770f37403f815..aa11451b1eeea 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -41,12 +41,12 @@ export type ResponseState = {
   idPrefix: string,
   nextSuspenseID: number,
   streamingFormat: StreamingFormat,
-  // state for script streaming format, unused if using external runtime / data
   startInlineScript: PrecomputedChunk,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
   sentStyleInsertionFunction: boolean,
+  externalRuntimeConfig: BootstrapScriptDescriptor | null,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
 };
@@ -78,6 +78,7 @@ export function createResponseState(
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
     sentClientRenderFunction: responseState.sentClientRenderFunction,
     sentStyleInsertionFunction: responseState.sentStyleInsertionFunction,
+    externalRuntimeConfig: responseState.externalRuntimeConfig,
     // This is an extra field for the legacy renderer
     generateStaticMarkup,
   };
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index b88962da257a7..1e1dbdca12ab1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -11,8 +11,8 @@
 import {
   replaceScriptsAndMove,
   mergeOptions,
-  stripExternalRuntimeInString,
   stripExternalRuntimeInNodes,
+  withLoadingReadyState,
 } from '../test-utils/FizzTestUtils';
 
 let JSDOM;
@@ -145,10 +145,13 @@ describe('ReactDOMFizzServer', () => {
     fakeBody.innerHTML = bufferedContent;
     const parent =
       container.nodeName === '#document' ? container.body : container;
-    while (fakeBody.firstChild) {
-      const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(window, CSPnonce, node, parent);
-    }
+
+    await withLoadingReadyState(async () => {
+      while (fakeBody.firstChild) {
+        const node = fakeBody.firstChild;
+        await replaceScriptsAndMove(window, CSPnonce, node, parent);
+      }
+    }, document);
   }
 
   async function actIntoEmptyDocument(callback) {
@@ -173,7 +176,9 @@ describe('ReactDOMFizzServer', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+    await withLoadingReadyState(async () => {
+      await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
+    }, document);
   }
 
   function getVisibleChildren(element) {
@@ -3585,7 +3590,9 @@ describe('ReactDOMFizzServer', () => {
         <html>
           <head />
           <body>
-            <div>hello world</div>
+            <Suspense fallback={'loading...'}>
+              <AsyncText text="Hello" />
+            </Suspense>
           </body>
         </html>,
         {
@@ -3595,21 +3602,25 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
+    // We want the external runtime to be sent in <head> so the script can be
+    // fetched and executed as early as possible. For SSR pages using Suspense,
+    // this script execution would be render blocking.
+    expect(
+      Array.from(document.head.getElementsByTagName('script')).map(
+        n => n.outerHTML,
+      ),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+
     expect(getVisibleChildren(document)).toEqual(
       <html>
         <head />
-        <body>
-          <div>hello world</div>
-        </body>
+        <body>loading...</body>
       </html>,
     );
-    expect(
-      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
-    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
   });
 
   // @gate enableFizzExternalRuntime
-  it('supports generating instructions as data attributes', async () => {
+  it('does not send script tags for SSR instructions when using the external runtime', async () => {
     function App() {
       return (
         <div>
@@ -3633,6 +3644,28 @@ describe('ReactDOMFizzServer', () => {
     expect(document.getElementsByTagName('script').length).toEqual(1);
   });
 
+  it('does not send the external runtime for static pages', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <p>hello world!</p>
+          </body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    // no scripts should be sent
+    expect(document.getElementsByTagName('script').length).toEqual(0);
+
+    // the html should be as-is
+    expect(document.documentElement.innerHTML).toEqual(
+      '<head></head><body><p>hello world!</p></body>',
+    );
+  });
+
   it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -4526,12 +4559,9 @@ describe('ReactDOMFizzServer', () => {
         const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
-      expect(
-        stripExternalRuntimeInString(
-          container.innerHTML,
-          renderOptions.unstable_externalRuntimeSrc,
-        ),
-      ).toEqual('<div>hello<b>world, <!-- -->Foo</b>!</div>');
+      expect(container.innerHTML).toEqual(
+        '<div>hello<b>world, <!-- -->Foo</b>!</div>',
+      );
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
         onRecoverableError(error) {
@@ -4573,7 +4603,11 @@ describe('ReactDOMFizzServer', () => {
 
       await act(() => resolveText('Foo'));
 
-      expect(container.firstElementChild.outerHTML).toEqual(
+      const div = stripExternalRuntimeInNodes(
+        container.children,
+        renderOptions.unstable_externalRuntimeSrc,
+      )[0];
+      expect(div.outerHTML).toEqual(
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
       // there may be either:
@@ -4586,7 +4620,6 @@ describe('ReactDOMFizzServer', () => {
         ).filter(e => e.tagName !== 'SCRIPT').length,
       ).toBe(3);
 
-      const div = container.childNodes[1];
       expect(div.childNodes.length).toBe(3);
       const b = div.childNodes[1];
       expect(b.childNodes.length).toBe(2);
@@ -4636,9 +4669,12 @@ describe('ReactDOMFizzServer', () => {
       );
 
       await act(() => resolveText('ello'));
-      expect(container.firstElementChild.outerHTML).toEqual(
-        '<div id="app-div">helloworld</div>',
-      );
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual('<div id="app-div">helloworld</div>');
 
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
@@ -4678,9 +4714,12 @@ describe('ReactDOMFizzServer', () => {
 
       await act(() => resolveText('orld'));
 
-      expect(container.firstElementChild.outerHTML).toEqual(
-        '<div id="app-div">h<!-- -->ello<!-- -->world</div>',
-      );
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual('<div id="app-div">h<!-- -->ello<!-- -->world</div>');
 
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App />, {
@@ -4838,7 +4877,12 @@ describe('ReactDOMFizzServer', () => {
         resolveText('second suspended');
       });
 
-      expect(container.firstElementChild.outerHTML).toEqual(
+      expect(
+        stripExternalRuntimeInNodes(
+          container.children,
+          renderOptions.unstable_externalRuntimeSrc,
+        )[0].outerHTML,
+      ).toEqual(
         '<div id="app-div">start<!--$-->firststartfirst suspendedfirstend<!--/$--><!--$-->secondstart<b>second suspended</b><!--/$-->end</div>',
       );
 
@@ -4888,12 +4932,7 @@ describe('ReactDOMFizzServer', () => {
         pipe(writable);
       });
 
-      expect(
-        stripExternalRuntimeInString(
-          container.innerHTML,
-          renderOptions.unstable_externalRuntimeSrc,
-        ),
-      ).toEqual(
+      expect(container.innerHTML).toEqual(
         '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
       );
 
@@ -5530,12 +5569,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    expect(
-      stripExternalRuntimeInString(
-        document.documentElement.outerHTML,
-        renderOptions.unstable_externalRuntimeSrc,
-      ),
-    ).toEqual(
+    expect(document.documentElement.outerHTML).toEqual(
       '<html><head></head><body><script>try { foo() } catch (e) {} ;</script></body></html>',
     );
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index a48da738e5e5c..6ce5b6617876d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -11,7 +11,7 @@
 import {
   replaceScriptsAndMove,
   mergeOptions,
-  stripExternalRuntimeInString,
+  withLoadingReadyState,
 } from '../test-utils/FizzTestUtils';
 
 let JSDOM;
@@ -110,10 +110,17 @@ describe('ReactDOMFloat', () => {
     fakeBody.innerHTML = bufferedContent;
     const parent =
       container.nodeName === '#document' ? container.body : container;
-    while (fakeBody.firstChild) {
-      const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(document.defaultView, CSPnonce, node, parent);
-    }
+    await withLoadingReadyState(async () => {
+      while (fakeBody.firstChild) {
+        const node = fakeBody.firstChild;
+        await replaceScriptsAndMove(
+          document.defaultView,
+          CSPnonce,
+          node,
+          parent,
+        );
+      }
+    }, document);
   }
 
   async function actIntoEmptyDocument(callback) {
@@ -137,7 +144,9 @@ describe('ReactDOMFloat', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(jsdom.window, null, document.documentElement);
+    await withLoadingReadyState(async () => {
+      await replaceScriptsAndMove(jsdom.window, null, document.documentElement);
+    }, document);
   }
 
   function getMeaningfulChildren(element) {
@@ -593,18 +602,45 @@ describe('ReactDOMFloat', () => {
       );
       pipe(writable);
     });
-    if (gate(flags => flags.enableFizzExternalRuntime)) {
-      chunks[0] = stripExternalRuntimeInString(
-        chunks[0],
-        renderOptions.unstable_externalRuntimeSrc,
-      );
-    }
     expect(chunks).toEqual([
       '<!DOCTYPE html><html><script async="" src="foo"></script><title>foo</title><body>bar',
       '</body></html>',
     ]);
   });
 
+  it('dedupes if the external runtime is explicitly loaded using preinit', async () => {
+    const unstable_externalRuntimeSrc = 'src-of-external-runtime';
+    function App() {
+      ReactDOM.preinit(unstable_externalRuntimeSrc, {as: 'script'});
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <AsyncText text="Hello" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    await actIntoEmptyDocument(() => {
+      const {pipe} = renderToPipeableStream(
+        <html>
+          <head />
+          <body>
+            <App />
+          </body>
+        </html>,
+        {
+          unstable_externalRuntimeSrc,
+        },
+      );
+      pipe(writable);
+    });
+
+    expect(
+      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+    ).toEqual(['<script src="src-of-external-runtime" async=""></script>']);
+  });
+
   describe('HostResource', () => {
     // @gate enableFloat
     it('warns when you update props to an invalid type', async () => {
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index ff676506ca59d..87ce6e594a2e8 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -127,20 +127,6 @@ function mergeOptions(options: Object, defaultOptions: Object): Object {
   };
 }
 
-function stripExternalRuntimeInString(
-  source: string,
-  externalRuntimeSrc: string | null,
-): string {
-  if (externalRuntimeSrc == null) {
-    return source;
-  }
-  const matchExternalRuntimeTag = new RegExp(
-    '<script src="' + externalRuntimeSrc + '"[\\s\\S]*/script>',
-    'm',
-  );
-  return source.replace(matchExternalRuntimeTag, '');
-}
-
 function stripExternalRuntimeInNodes(
   nodes: HTMLElement[] | HTMLCollection<HTMLElement>,
   externalRuntimeSrc: string | null,
@@ -158,9 +144,42 @@ function stripExternalRuntimeInNodes(
   );
 }
 
+// Since JSDOM doesn't implement a streaming HTML parser, we manually overwrite
+// readyState here (currently read by ReactDOMServerExternalRuntime). This does
+// not trigger event callbacks, but we do not rely on any right now.
+async function withLoadingReadyState<T>(
+  fn: () => T,
+  document: Document,
+): Promise<T> {
+  // JSDOM implements readyState in document's direct prototype, but this may
+  // change in later versions
+  let prevDescriptor = null;
+  let proto: Object = document;
+  while (proto != null) {
+    prevDescriptor = Object.getOwnPropertyDescriptor(proto, 'readyState');
+    if (prevDescriptor != null) {
+      break;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  Object.defineProperty(document, 'readyState', {
+    get() {
+      return 'loading';
+    },
+    configurable: true,
+  });
+  const result = await fn();
+  // $FlowFixMe[incompatible-type]
+  delete document.readyState;
+  if (prevDescriptor) {
+    Object.defineProperty(proto, 'readyState', prevDescriptor);
+  }
+  return result;
+}
+
 export {
   replaceScriptsAndMove,
   mergeOptions,
-  stripExternalRuntimeInString,
   stripExternalRuntimeInNodes,
+  withLoadingReadyState,
 };
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 7a085778a574e..99b09631002fa 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -319,6 +319,7 @@ export function writeInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): boolean {
   return true;
 }
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index b96fce2984e98..236c68dfe8677 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -2126,8 +2126,14 @@ function flushInitialResources(
   destination: Destination,
   resources: Resources,
   responseState: ResponseState,
+  willFlushAllSegments: boolean,
 ): void {
-  writeInitialResources(destination, resources, responseState);
+  writeInitialResources(
+    destination,
+    resources,
+    responseState,
+    willFlushAllSegments,
+  );
 }
 
 function flushImmediateResources(
@@ -2288,6 +2294,7 @@ function flushCompletedQueues(
             destination,
             request.resources,
             request.responseState,
+            request.allPendingTasks === 0,
           );
         }
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 06075b8ad91e1..989f4c9eb2b5f 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -450,5 +450,6 @@
   "462": "Unexpected SuspendedReason. This is a bug in React.",
   "463": "ReactDOMServer.renderToNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
   "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
-  "465": "Unknown embedding context type when writing style resources. This is a bug in React."
+  "465": "Unknown embedding context type when writing style resources. This is a bug in React.",
+  "466": "enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle."
 }

From a3ee1a77a9c68b7f5b6d9a7d6ff4e93e7b4d984e Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 17 Nov 2022 13:22:50 -0500
Subject: [PATCH 08/13] Feedback: only watch direct children of document.body

---
 .../src/server/ReactDOMServerExternalRuntime.js     |  8 +++++---
 packages/react-dom/src/test-utils/FizzTestUtils.js  | 13 +++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 8caac93d7932a..244f7753d8b7d 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -32,10 +32,12 @@ if (document.readyState === 'loading') {
     }
   });
 
-  // $FlowFixMe[incompatible-call] document.body should exist at this point
-  mutationObserver.observe(document.body, {
+  // We assume that instruction data nodes are eventually appended to the
+  // body, even if Fizz is streaming to a shell / subtree.
+
+  // $FlowFixMe[incompatible-cast] document.body should exist at this point
+  mutationObserver.observe((document.body /*: Node */), {
     childList: true,
-    subtree: true,
   });
   window.addEventListener('DOMContentLoaded', () => {
     mutationObserver.disconnect();
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index 87ce6e594a2e8..1df5ca947e7c0 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -75,6 +75,7 @@ async function getRollupResult(scriptSrc: string): Promise<string | null> {
 //  1. Matching nonce attributes and moving node into an existing
 //      parent container (if passed)
 //  2. Resolving scripts with sources
+//  3. Moving data attribute nodes to the body
 async function replaceScriptsAndMove(
   window: any,
   CSPnonce: string | null,
@@ -109,6 +110,18 @@ async function replaceScriptsAndMove(
     } else {
       element.parentNode?.replaceChild(script, element);
     }
+  } else if (
+    node.nodeType === 1 &&
+    // $FlowFixMe[prop-missing]
+    node.dataset != null &&
+    (node.dataset.rxi != null ||
+      node.dataset.rri != null ||
+      node.dataset.rci != null ||
+      node.dataset.rsi != null)
+  ) {
+    // External runtime assumes that instruction data nodes are eventually
+    // appended to the body
+    window.document.body.appendChild(node);
   } else {
     for (let i = 0; i < node.childNodes.length; i++) {
       const inner = node.childNodes[i];

From 4cf4af15859dfd67236740a1c4d4efb736c1504a Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 17 Nov 2022 18:53:39 -0500
Subject: [PATCH 09/13] Feedback: fork writeStyleResource for different
 contexts

---
 .../src/server/ReactDOMServerFormatConfig.js  | 268 ++++++++++++++----
 1 file changed, 216 insertions(+), 52 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 2ffbe4c25a10e..0c69f1f2627b4 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2547,18 +2547,10 @@ export function writeCompletedBoundaryInstruction(
     if (scriptFormat) {
       writeChunk(destination, completeBoundaryScript3a);
       // boundaryResources encodes an array literal
-      writeStyleResourceDependencies(
-        destination,
-        boundaryResources,
-        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
-      );
+      writeStyleResourceDependenciesInJS(destination, boundaryResources);
     } else {
       writeChunk(destination, completeBoundaryData3aStart);
-      writeStyleResourceDependencies(
-        destination,
-        boundaryResources,
-        scriptFormat ? JavascriptEmbedding : HTMLAttributeEmbedding,
-      );
+      writeStyleResourceDependenciesInAttr(destination, boundaryResources);
       writeChunk(destination, completeBoundaryData3aEnd);
     }
   } else {
@@ -3000,40 +2992,201 @@ const arraySubsequentOpenBracket = stringToPrecomputedChunk(',[');
 const arrayInterstitial = stringToPrecomputedChunk(',');
 const arrayCloseBracket = stringToPrecomputedChunk(']');
 
-type EmbeddingContext = 0 | 1;
-const HTMLAttributeEmbedding: EmbeddingContext = 0;
-const JavascriptEmbedding: EmbeddingContext = 1;
+// This function writes a 2D array of strings to be embedded in javascript.
+// E.g.
+//  [["JS_escaped_string1", "JS_escaped_string2"]]
+function writeStyleResourceDependenciesInJS(
+  destination: Destination,
+  boundaryResources: BoundaryResources,
+): void {
+  writeChunk(destination, arrayFirstOpenBracket);
 
-function writeStyleResourceObject(
+  let nextArrayOpenBrackChunk = arrayFirstOpenBracket;
+  boundaryResources.forEach(resource => {
+    if (resource.inShell) {
+      // We can elide this dependency because it was flushed in the shell and
+      // should be ready before content is shown on the client
+    } else if (resource.flushed) {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyHrefOnlyInJS(destination, resource.href);
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+    } else {
+      writeChunk(destination, nextArrayOpenBrackChunk);
+      writeStyleResourceDependencyInJS(
+        destination,
+        resource.href,
+        resource.precedence,
+        resource.props,
+      );
+      writeChunk(destination, arrayCloseBracket);
+      nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
+
+      resource.flushed = true;
+      resource.hint.flushed = true;
+    }
+  });
+  writeChunk(destination, arrayCloseBracket);
+}
+
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInJS(
   destination: Destination,
-  str: string,
-  context: EmbeddingContext,
+  href: string,
 ) {
-  if (context === JavascriptEmbedding) {
-    // write "script_escaped_string", since this is writing to a script tag
-    // and will be evaluated as a string literal inside an array literal
-    writeChunk(
-      destination,
-      stringToChunk(escapeJSObjectForInstructionScripts(str)),
-    );
-  } else if (context === HTMLAttributeEmbedding) {
-    // write &quot;JSON_escaped_string&quot; here, since this is writing
-    // to an attribute string and will be parsed manually via JSON.parse
-    writeChunk(
-      destination,
-      stringToChunk(escapeTextForBrowser(JSON.stringify(str))),
-    );
-  } else {
-    throw new Error(
-      'Unknown embedding context type when writing style resources. This is a bug in React.',
-    );
+  // We should actually enforce this earlier when the resource is created but for
+  // now we make sure we are actually dealing with a string here.
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
   }
+  const coercedHref = '' + (href: any);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
 }
 
-function writeStyleResourceDependencies(
+function writeStyleResourceDependencyInJS(
+  destination: Destination,
+  href: string,
+  precedence: string,
+  props: Object,
+) {
+  if (__DEV__) {
+    checkAttributeStringCoercion(href, 'href');
+  }
+  const coercedHref = '' + (href: any);
+  sanitizeURL(coercedHref);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedHref)),
+  );
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(precedence, 'precedence');
+  }
+  const coercedPrecedence = '' + (precedence: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(coercedPrecedence)),
+  );
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'href':
+        case 'rel':
+        case 'precedence':
+        case 'data-precedence': {
+          break;
+        }
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          throw new Error(
+            `${'link'} is a self-closing tag and must neither have \`children\` nor ` +
+              'use `dangerouslySetInnerHTML`.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          writeStyleResourceAttributeInJS(destination, propKey, propValue);
+          break;
+      }
+    }
+  }
+  return null;
+}
+
+function writeStyleResourceAttributeInJS(
+  destination: Destination,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  let attributeName = name.toLowerCase();
+  let attributeValue;
+  switch (typeof value) {
+    case 'function':
+    case 'symbol':
+      return;
+  }
+
+  switch (name) {
+    // Reserved names
+    case 'innerHTML':
+    case 'dangerouslySetInnerHTML':
+    case 'suppressContentEditableWarning':
+    case 'suppressHydrationWarning':
+    case 'style':
+      // Ignored
+      return;
+
+    // Attribute renames
+    case 'className':
+      attributeName = 'class';
+      break;
+
+    // Booleans
+    case 'hidden':
+      if (value === false) {
+        return;
+      }
+      attributeValue = '';
+      break;
+
+    // Santized URLs
+    case 'src':
+    case 'href': {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, attributeName);
+      }
+      attributeValue = '' + (value: any);
+      sanitizeURL(attributeValue);
+      break;
+    }
+    default: {
+      if (!isAttributeNameSafe(name)) {
+        return;
+      }
+    }
+  }
+
+  if (
+    // shouldIgnoreAttribute
+    // We have already filtered out null/undefined and reserved words.
+    name.length > 2 &&
+    (name[0] === 'o' || name[0] === 'O') &&
+    (name[1] === 'n' || name[1] === 'N')
+  ) {
+    return;
+  }
+
+  if (__DEV__) {
+    checkAttributeStringCoercion(value, attributeName);
+  }
+  attributeValue = '' + (value: any);
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeName)),
+  );
+  writeChunk(destination, arrayInterstitial);
+  writeChunk(
+    destination,
+    stringToChunk(escapeJSObjectForInstructionScripts(attributeValue)),
+  );
+}
+
+// This function writes a 2D array of strings to be embedded in an attribute
+// value and read with JSON.parse in ReactDOMServerExternalRuntime.js
+// E.g.
+//  [[&quot;JSON_escaped_string1&quot;, &quot;JSON_escaped_string2&quot;]]
+function writeStyleResourceDependenciesInAttr(
   destination: Destination,
   boundaryResources: BoundaryResources,
-  context: EmbeddingContext,
 ): void {
   writeChunk(destination, arrayFirstOpenBracket);
 
@@ -3044,17 +3197,16 @@ function writeStyleResourceDependencies(
       // should be ready before content is shown on the client
     } else if (resource.flushed) {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependencyHrefOnly(destination, resource.href, context);
+      writeStyleResourceDependencyHrefOnlyInAttr(destination, resource.href);
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
     } else {
       writeChunk(destination, nextArrayOpenBrackChunk);
-      writeStyleResourceDependency(
+      writeStyleResourceDependencyInAttr(
         destination,
         resource.href,
         resource.precedence,
         resource.props,
-        context,
       );
       writeChunk(destination, arrayCloseBracket);
       nextArrayOpenBrackChunk = arraySubsequentOpenBracket;
@@ -3066,10 +3218,10 @@ function writeStyleResourceDependencies(
   writeChunk(destination, arrayCloseBracket);
 }
 
-function writeStyleResourceDependencyHrefOnly(
+/* Helper functions */
+function writeStyleResourceDependencyHrefOnlyInAttr(
   destination: Destination,
   href: string,
-  context: EmbeddingContext,
 ) {
   // We should actually enforce this earlier when the resource is created but for
   // now we make sure we are actually dealing with a string here.
@@ -3077,30 +3229,37 @@ function writeStyleResourceDependencyHrefOnly(
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
-  writeStyleResourceObject(destination, coercedHref, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
 }
 
-function writeStyleResourceDependency(
+function writeStyleResourceDependencyInAttr(
   destination: Destination,
   href: string,
   precedence: string,
   props: Object,
-  context: EmbeddingContext,
 ) {
   if (__DEV__) {
     checkAttributeStringCoercion(href, 'href');
   }
   const coercedHref = '' + (href: any);
   sanitizeURL(coercedHref);
-  writeStyleResourceObject(destination, coercedHref, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedHref))),
+  );
 
   if (__DEV__) {
     checkAttributeStringCoercion(precedence, 'precedence');
   }
   const coercedPrecedence = '' + (precedence: any);
   writeChunk(destination, arrayInterstitial);
-
-  writeStyleResourceObject(destination, coercedPrecedence, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(coercedPrecedence))),
+  );
 
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -3123,7 +3282,7 @@ function writeStyleResourceDependency(
           );
         // eslint-disable-next-line-no-fallthrough
         default:
-          writeStyleResourceAttribute(destination, propKey, propValue, context);
+          writeStyleResourceAttributeInAttr(destination, propKey, propValue);
           break;
       }
     }
@@ -3131,11 +3290,10 @@ function writeStyleResourceDependency(
   return null;
 }
 
-function writeStyleResourceAttribute(
+function writeStyleResourceAttributeInAttr(
   destination: Destination,
   name: string,
   value: string | boolean | number | Function | Object, // not null or undefined
-  context: EmbeddingContext,
 ): void {
   let attributeName = name.toLowerCase();
   let attributeValue;
@@ -3200,7 +3358,13 @@ function writeStyleResourceAttribute(
   }
   attributeValue = '' + (value: any);
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeName, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeName))),
+  );
   writeChunk(destination, arrayInterstitial);
-  writeStyleResourceObject(destination, attributeValue, context);
+  writeChunk(
+    destination,
+    stringToChunk(escapeTextForBrowser(JSON.stringify(attributeValue))),
+  );
 }

From ea37d857850d41bfbbae4501191d183b17200a5f Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Thu, 17 Nov 2022 19:07:47 -0500
Subject: [PATCH 10/13] syntax

---
 .../react-dom/src/__tests__/ReactDOMFizzServer-test.js     | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 1e1dbdca12ab1..b900f3452b4ee 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4559,6 +4559,7 @@ describe('ReactDOMFizzServer', () => {
         const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
+
       expect(container.innerHTML).toEqual(
         '<div>hello<b>world, <!-- -->Foo</b>!</div>',
       );
@@ -4614,10 +4615,8 @@ describe('ReactDOMFizzServer', () => {
       //  - an external runtime script and deleted nodes with data attributes
       //  - extra script nodes containing fizz instructions at the end of container
       expect(
-        stripExternalRuntimeInNodes(
-          container.childNodes,
-          renderOptions.unstable_externalRuntimeSrc,
-        ).filter(e => e.tagName !== 'SCRIPT').length,
+        Array.from(container.childNodes).filter(e => e.tagName !== 'SCRIPT')
+          .length,
       ).toBe(3);
 
       expect(div.childNodes.length).toBe(3);

From df858fe9c18acea2a2a3f807b2e57e6b46a48b1a Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Tue, 29 Nov 2022 16:57:49 -0500
Subject: [PATCH 11/13] feedback: listen for document.body, style, naming

---
 .../src/server/ReactDOMFloatServer.js         |  4 +-
 .../server/ReactDOMServerExternalRuntime.js   | 55 +++++++++++++------
 .../src/server/ReactDOMServerFormatConfig.js  | 22 ++++----
 scripts/error-codes/codes.json                |  3 +-
 4 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
index d422b2fbbe084..2805b629d4b48 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js
@@ -285,16 +285,16 @@ function preinit(href: string, options: PreinitOptions): void {
     // simply return and do not warn.
     return;
   }
-  preinitImpl(href, options, currentResources);
+  preinitImpl(currentResources, href, options);
 }
 
 // On the server, preinit may be called outside of render when sending an
 // external SSR runtime as part of the initial resources payload. Since this
 // is an internal React call, we do not need to use the resources stack.
 export function preinitImpl(
+  resources: Resources,
   href: string,
   options: PreinitOptions,
-  resources: Resources,
 ): void {
   if (__DEV__) {
     validatePreinitArguments(href, options);
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 244f7753d8b7d..3abf55c0acc3e 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -14,14 +14,43 @@ import {
   completeSegment,
 } from './fizz-instruction-set/ReactDOMFizzInstructionSet';
 
+if (!window.$RC) {
+  // TODO: Eventually remove, we currently need to set these globals for
+  // compatibility with ReactDOMFizzInstructionSet
+  window.$RC = completeBoundary;
+  window.$RM = new Map();
+}
+
 if (document.readyState === 'loading') {
-  if (!window.$RC) {
-    // TODO: Eventually remove, we currently need to set these globals for
-    // compatibility with ReactDOMFizzInstructionSet
-    window.$RC = completeBoundary;
-    window.$RM = new Map();
+  if (document.body != null) {
+    installFizzInstrObserver(document.body);
+  } else {
+    // body may not exist yet if the fizz runtime is sent in <head>
+    // (e.g. as a preinit resource)
+    const domBodyObserver = new MutationObserver(() => {
+      // We expect the body node to be stable once parsed / created
+      if (document.body) {
+        if (document.readyState === 'loading') {
+          installFizzInstrObserver(document.body);
+        }
+        handleExistingNodes();
+        domBodyObserver.disconnect();
+      }
+    });
+  }
+}
+
+handleExistingNodes();
+
+function handleExistingNodes() {
+  const existingNodes = document.getElementsByTagName('template');
+  for (let i = 0; i < existingNodes.length; i++) {
+    handleNode(existingNodes[i]);
   }
-  const mutationObserver = new MutationObserver(mutations => {
+}
+
+function installFizzInstrObserver(target /*: Node */) {
+  const fizzInstrObserver = new MutationObserver(mutations => {
     for (let i = 0; i < mutations.length; i++) {
       const addedNodes = mutations[i].addedNodes;
       for (let j = 0; j < addedNodes.length; j++) {
@@ -31,24 +60,16 @@ if (document.readyState === 'loading') {
       }
     }
   });
-
   // We assume that instruction data nodes are eventually appended to the
   // body, even if Fizz is streaming to a shell / subtree.
-
-  // $FlowFixMe[incompatible-cast] document.body should exist at this point
-  mutationObserver.observe((document.body /*: Node */), {
+  fizzInstrObserver.observe(target, {
     childList: true,
   });
   window.addEventListener('DOMContentLoaded', () => {
-    mutationObserver.disconnect();
+    fizzInstrObserver.disconnect();
   });
 }
 
-const existingNodes = document.getElementsByTagName('template');
-for (let i = 0; i < existingNodes.length; i++) {
-  handleNode(existingNodes[i]);
-}
-
 function handleNode(node_ /*: Node */) {
   // $FlowFixMe[incompatible-cast]
   if (node_.nodeType !== 1 || !(node_ /*: HTMLElement*/).dataset) {
@@ -59,7 +80,7 @@ function handleNode(node_ /*: Node */) {
   const dataset = node.dataset;
   if (dataset['rxi'] != null) {
     clientRenderBoundary(
-      dataset['sid'],
+      dataset['bid'],
       dataset['dgst'],
       dataset['msg'],
       dataset['stck'],
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 0c69f1f2627b4..1bc917783e654 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -132,7 +132,6 @@ export type ResponseState = {
 };
 
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
-const dataElementUnquotedEnd = stringToPrecomputedChunk('></template>');
 
 const startInlineScript = stringToPrecomputedChunk('<script>');
 const endInlineScript = stringToPrecomputedChunk('</script>');
@@ -2473,10 +2472,8 @@ const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
   '<template data-rri="" data-bid="',
 );
 const completeBoundaryData2 = stringToPrecomputedChunk('" data-sid="');
-const completeBoundaryData3aStart = stringToPrecomputedChunk('" data-sty=\'');
-const completeBoundaryData3aEnd = stringToPrecomputedChunk("'");
-const completeBoundaryData3b = completeBoundaryScript3b;
-const completeBoundaryDataEnd = dataElementUnquotedEnd;
+const completeBoundaryData3a = stringToPrecomputedChunk('" data-sty="');
+const completeBoundaryDataEnd = dataElementQuotedEnd;
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -2549,15 +2546,12 @@ export function writeCompletedBoundaryInstruction(
       // boundaryResources encodes an array literal
       writeStyleResourceDependenciesInJS(destination, boundaryResources);
     } else {
-      writeChunk(destination, completeBoundaryData3aStart);
+      writeChunk(destination, completeBoundaryData3a);
       writeStyleResourceDependenciesInAttr(destination, boundaryResources);
-      writeChunk(destination, completeBoundaryData3aEnd);
     }
   } else {
     if (scriptFormat) {
       writeChunk(destination, completeBoundaryScript3b);
-    } else {
-      writeChunk(destination, completeBoundaryData3b);
     }
   }
   if (scriptFormat) {
@@ -2576,7 +2570,7 @@ const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
 
 const clientRenderData1 = stringToPrecomputedChunk(
-  '<template data-rxi="" data-sid="',
+  '<template data-rxi="" data-bid="',
 );
 const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
 const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
@@ -2744,13 +2738,19 @@ export function writeInitialResources(
   responseState: ResponseState,
   willFlushAllSegments: boolean,
 ): boolean {
+  // Write initially discovered resources after the shell completes
   if (
     enableFizzExternalRuntime &&
     !willFlushAllSegments &&
     responseState.externalRuntimeConfig
   ) {
+    // If the root segment is incomplete due to suspended tasks
+    // (e.g. willFlushAllSegments = false) and we are using data
+    // streaming format, ensure the external runtime is sent.
+    // (User code could choose to send this even earlier by calling
+    //  preinit(...), if they know they will suspend).
     const {src, integrity} = responseState.externalRuntimeConfig;
-    preinitImpl(src, {as: 'script', integrity}, resources);
+    preinitImpl(resources, src, {as: 'script', integrity});
   }
   function flushLinkResource(resource) {
     if (!resource.flushed) {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 989f4c9eb2b5f..022d42e724a85 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -450,6 +450,5 @@
   "462": "Unexpected SuspendedReason. This is a bug in React.",
   "463": "ReactDOMServer.renderToNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
   "464": "ReactDOMServer.renderToStaticNodeStream(): The Node Stream API is not available in Bun. Use ReactDOMServer.renderToReadableStream() instead.",
-  "465": "Unknown embedding context type when writing style resources. This is a bug in React.",
-  "466": "enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle."
+  "465": "enableFizzExternalRuntime without enableFloat is not supported. This should never appear in production, since it means you are using a misconfigured React bundle."
 }

From 80a3b3de66b5f2094cab5609fe9c0861a1e0a47b Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Tue, 29 Nov 2022 18:04:58 -0500
Subject: [PATCH 12/13] changed some comments

---
 .../src/server/ReactDOMServerFormatConfig.js     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
index 1bc917783e654..c66292d801835 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js
@@ -2539,8 +2539,10 @@ export function writeCompletedBoundaryInstruction(
   writeChunk(destination, formattedContentID);
   if (enableFloat && hasStyleDependencies) {
     // Script and data writers must format this differently:
-    //  - script writer emits an array literal ["1", "2"]
-    //  - data writer emits a string literal ["1", "2"])
+    //  - script writer emits an array literal, whose string elements are
+    //    escaped for javascript  e.g. ["A", "B"]
+    //  - data writer emits a string literal, which is escaped as html
+    //    e.g. [&#34;A&#34;, &#34;B&#34;]
     if (scriptFormat) {
       writeChunk(destination, completeBoundaryScript3a);
       // boundaryResources encodes an array literal
@@ -2599,7 +2601,7 @@ export function writeClientRenderBoundaryInstruction(
       writeChunk(destination, clientRenderScript1Partial);
     }
   } else {
-    // <template data-rxi="" data-arg0="
+    // <template data-rxi="" data-bid="
     writeChunk(destination, clientRenderData1);
   }
 
@@ -2625,7 +2627,7 @@ export function writeClientRenderBoundaryInstruction(
         stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
       );
     } else {
-      // " arg1="EscapedString
+      // " data-dgst="HTMLString
       writeChunk(destination, clientRenderData2);
       writeChunk(
         destination,
@@ -2642,7 +2644,7 @@ export function writeClientRenderBoundaryInstruction(
         stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
       );
     } else {
-      // " arg2="EscapedString
+      // " data-msg="HTMLString
       writeChunk(destination, clientRenderData3);
       writeChunk(
         destination,
@@ -2661,7 +2663,7 @@ export function writeClientRenderBoundaryInstruction(
         ),
       );
     } else {
-      // " arg3="EscapedString
+      // " data-stck="HTMLString
       writeChunk(destination, clientRenderData4);
       writeChunk(
         destination,
@@ -2674,7 +2676,7 @@ export function writeClientRenderBoundaryInstruction(
     // ></script>
     return writeChunkAndReturn(destination, clientRenderScriptEnd);
   } else {
-    // "></div>
+    // "></template>
     return writeChunkAndReturn(destination, clientRenderDataEnd);
   }
 }

From f35926fdbe4c415467a7622b80b3ea83e03dbd78 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Tue, 29 Nov 2022 22:46:54 -0500
Subject: [PATCH 13/13] feedback: actually call observe

---
 .../src/server/ReactDOMServerExternalRuntime.js                | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
index 3abf55c0acc3e..63f5b64d93c8c 100644
--- a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -37,6 +37,9 @@ if (document.readyState === 'loading') {
         domBodyObserver.disconnect();
       }
     });
+    // documentElement must already exist at this point
+    // $FlowFixMe[incompatible-call]
+    domBodyObserver.observe(document.documentElement, {childList: true});
   }
 }