Add non-execution format, runtime, and unit tests

Author: mofeiZ

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

@@ -106,26 +106,33 @@ 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>');
 
 const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
 const scriptIntegirty = stringToPrecomputedChunk('" integrity="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
+// const endAsyncScript = stringToPrecomputedChunk('"></script>');
 
 /**
  * This escaping function is designed to work with bootstrapScriptContent only.
@@ -152,6 +159,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,
@@ -168,6 +177,7 @@ export function createResponseState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const bootstrapChunks = [];
+  let streamingFormat = 'SCRIPT';
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
@@ -177,6 +187,7 @@ export function createResponseState(
   }
   if (enableFizzExternalRuntime) {
     if (externalRuntimeConfig !== undefined) {
+      streamingFormat = 'DATA';
       const src =
         typeof externalRuntimeConfig === 'string'
           ? externalRuntimeConfig
@@ -240,12 +251,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,
@@ -2081,29 +2093,54 @@ const completeSegmentScript1Full = stringToPrecomputedChunk(
 );
 const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
-const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+const completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
+
+const completeSegmentData1 = stringToPrecomputedChunk(
+  '<div hidden data-react-server-instruction="$RS" data-react-server-arg0="',
+);
+const completeSegmentData2 = stringToPrecomputedChunk(
+  '" data-react-server-arg1="',
+);
+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, completeSegmentScript3);
+
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeSegmentScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeSegmentDataEnd);
+  }
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
@@ -2121,9 +2158,25 @@ 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>');
+
+const completeBoundaryData1 = stringToPrecomputedChunk(
+  '<div hidden data-react-server-instruction="$RC" data-react-server-arg0="',
+);
+const completeBoundaryWithStylesData1 = stringToPrecomputedChunk(
+  '<div hidden data-react-server-instruction="$RR" data-react-server-arg0="',
+);
+const completeBoundaryData2 = stringToPrecomputedChunk(
+  '" data-react-server-arg1="',
+);
+const completeBoundaryData3aStart = stringToPrecomputedChunk(
+  '" data-react-server-arg2=\'',
+);
+const completeBoundaryData3aEnd = stringToPrecomputedChunk("'");
+const completeBoundaryData3b = completeBoundaryScript3b;
+const completeBoundaryDataEnd = dataElementUnquotedEnd;
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -2136,24 +2189,34 @@ 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, 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, 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);
     }
   }
 
@@ -2163,27 +2226,56 @@ export function writeCompletedBoundaryInstruction(
     );
   }
 
+  // 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, completeBoundaryScript2a);
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3a);
+    } else {
+      writeChunk(destination, completeBoundaryData3aStart);
+    }
     writeStyleResourceDependencies(destination, boundaryResources);
+    if (!scriptFormat) {
+      writeChunk(destination, completeBoundaryData3aEnd);
+    }
   } else {
-    writeChunk(destination, completeBoundaryScript3);
+    if (scriptFormat) {
+      writeChunk(destination, completeBoundaryScript3b);
+    } else {
+      writeChunk(destination, completeBoundaryData3b);
+    }
+  }
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, completeBoundaryScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, completeBoundaryDataEnd);
   }
-  return writeChunkAndReturn(destination, completeBoundaryScript4);
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
   clientRenderFunction + ';$RX("',
 );
 const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript1A = stringToPrecomputedChunk('"');
-const clientRenderScript2 = stringToPrecomputedChunk(')</script>');
 const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
+const clientRenderScriptEnd = stringToPrecomputedChunk(')</script>');
+
+const clientRenderData1 = stringToPrecomputedChunk(
+  '<div hidden data-react-server-instruction="$RX" data-react-server-arg0="',
+);
+const clientRenderData1A = clientRenderScript1A;
+const clientRenderData2 = stringToPrecomputedChunk(' data-react-server-arg1=');
+const clientRenderData3 = stringToPrecomputedChunk(' data-react-server-arg2=');
+const clientRenderData4 = stringToPrecomputedChunk(' data-react-server-arg3=');
+const clientRenderDataEnd = dataElementUnquotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
@@ -2193,14 +2285,20 @@ 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);
+    writeChunk(destination, clientRenderData1);
   }
 
   if (boundaryID === null) {
@@ -2210,29 +2308,51 @@ export function writeClientRenderBoundaryInstruction(
   }
 
   writeChunk(destination, boundaryID);
-  writeChunk(destination, clientRenderScript1A);
+  if (scriptFormat) {
+    writeChunk(destination, clientRenderScript1A);
+  } else {
+    writeChunk(destination, clientRenderData1A);
+  }
+
   if (errorDigest || errorMessage || errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    } else {
+      writeChunk(destination, clientRenderData2);
+    }
     writeChunk(
       destination,
       stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
     );
   }
   if (errorMessage || errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    } else {
+      writeChunk(destination, clientRenderData3);
+    }
     writeChunk(
       destination,
       stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
     );
   }
   if (errorComponentStack) {
-    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    } else {
+      writeChunk(destination, clientRenderData4);
+    }
     writeChunk(
       destination,
       stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
     );
   }
-  return writeChunkAndReturn(destination, clientRenderScript2);
+
+  if (scriptFormat) {
+    return writeChunkAndReturn(destination, clientRenderScriptEnd);
+  } else {
+    return writeChunkAndReturn(destination, clientRenderDataEnd);
+  }
 }
 
 const regexForJSStringsInInstructionScripts = /[<\u2028\u2029]/g;

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

@@ -31,12 +31,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,
@@ -53,12 +55,13 @@ export function createResponseState(
   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,