From e83564ae448640ab0d1dceb2ff6f3a4b8476b480 Mon Sep 17 00:00:00 2001
From: sebmarkbage <sebmarkbage@users.noreply.github.com>
Date: Wed, 8 May 2024 01:58:38 +0000
Subject: [PATCH] [Flight Reply] Encode binary streams as a single collapsed
 Blob (#28986)

Based on #28893.

For other streams we encode each chunk as a separate form field which is
a bit bloated. Especially for binary chunks since they also have an
indirection. We need some way to encode the chunks as separate anyway.
This way the streaming using busboy actually allows each chunk to stream
in over the network one at a time.

For binary streams the actual chunking is not important. The chunks can
be split and recombined in whatever size chunk makes sense.

Since we buffer the entire content anyway we can combine the chunks to
be consecutive. This PR does that with binary streams and also combine
them into a single Blob. That way there's no extra overhead when passing
through a binary stream.

Ideally, we'd be able to just use the stream from that one Blob but
Node.js doesn't return byob streams from Blob. Additionally, we don't
actually stream the content of Blobs due to the layering with busboy
atm. We could do that for binary streams in particular by replacing the
File layering with a stream and resolving each chunk as it comes in.
That could be a follow up.

If we stop buffering in the future, this set up still allows us to split
them and send other form fields in between while blocked since the
protocol is still the same.

DiffTrain build for [826bf4e51ecf14904e936ed043392084553ebbaa](https://github.com/facebook/react/commit/826bf4e51ecf14904e936ed043392084553ebbaa)
---
 compiled/facebook-www/REVISION                |  2 +-
 .../ReactDOMServer-dev.classic.js             | 31 +++--------
 .../facebook-www/ReactDOMServer-dev.modern.js | 31 +++--------
 .../ReactDOMServer-prod.classic.js            | 54 ++++++++-----------
 .../ReactDOMServer-prod.modern.js             | 54 ++++++++-----------
 .../ReactDOMServerStreaming-dev.modern.js     | 29 +++-------
 .../ReactDOMServerStreaming-prod.modern.js    | 18 ++-----
 7 files changed, 72 insertions(+), 147 deletions(-)

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 272b4a9a4fd96..e11f9c7839bc9 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-6bac4f2f31378cd58dffe6181e00639366a6081a
+826bf4e51ecf14904e936ed043392084553ebbaa
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
index 2775b030c1368..f4e58b2ca311a 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-www-classic-b547cfd9';
+var ReactVersion = '19.0.0-www-classic-f3d84129';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');
@@ -2572,7 +2572,11 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-  validateAdditionalFormField(value);
+
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
+  }
+
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2585,21 +2589,6 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
-function validateAdditionalFormField(value, key) {
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
-  }
-}
-
-function validateAdditionalFormFields(formData) {
-  if (formData != null) {
-    // $FlowFixMe[prop-missing]: FormData has forEach.
-    formData.forEach(validateAdditionalFormField);
-  }
-
-  return formData;
-}
-
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2607,13 +2596,7 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      var customFields = formAction.$$FORM_ACTION(prefix);
-
-      if (customFields) {
-        validateAdditionalFormFields(customFields.data);
-      }
-
-      return customFields;
+      return formAction.$$FORM_ACTION(prefix);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
index b3b1077ebf4bf..1488583b352a2 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var ReactVersion = '19.0.0-www-modern-ce28692a';
+var ReactVersion = '19.0.0-www-modern-f9bdfca0';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');
@@ -2572,7 +2572,11 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-  validateAdditionalFormField(value);
+
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
+  }
+
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2585,21 +2589,6 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
-function validateAdditionalFormField(value, key) {
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
-  }
-}
-
-function validateAdditionalFormFields(formData) {
-  if (formData != null) {
-    // $FlowFixMe[prop-missing]: FormData has forEach.
-    formData.forEach(validateAdditionalFormField);
-  }
-
-  return formData;
-}
-
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2607,13 +2596,7 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      var customFields = formAction.$$FORM_ACTION(prefix);
-
-      if (customFields) {
-        validateAdditionalFormFields(customFields.data);
-      }
-
-      return customFields;
+      return formAction.$$FORM_ACTION(prefix);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
index c921771d5a510..6bb3aed38155d 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -445,25 +445,17 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  validateAdditionalFormField(value);
+  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push("/>");
 }
-function validateAdditionalFormField(value) {
-  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
-}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      var customFields = formAction.$$FORM_ACTION(resumableState);
-      if (customFields) {
-        var formData = customFields.data;
-        null != formData && formData.forEach(validateAdditionalFormField);
-      }
-      return customFields;
+      return formAction.$$FORM_ACTION(resumableState);
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -2635,16 +2627,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1633 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1631 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1647 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1648 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1649 = new Set(),
-    JSCompiler_object_inline_styles_1650 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1651 = new Set(),
-    JSCompiler_object_inline_scripts_1652 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1653 = new Set(),
-    JSCompiler_object_inline_preloads_1654 = {
+  var JSCompiler_object_inline_preconnects_1645 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1646 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1647 = new Set(),
+    JSCompiler_object_inline_styles_1648 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1649 = new Set(),
+    JSCompiler_object_inline_scripts_1650 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1651 = new Set(),
+    JSCompiler_object_inline_preloads_1652 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2681,7 +2673,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1651.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1649.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2722,7 +2714,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1651.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1649.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2737,7 +2729,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1633,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1631,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2757,14 +2749,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1647,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1648,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1649,
-    styles: JSCompiler_object_inline_styles_1650,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1651,
-    scripts: JSCompiler_object_inline_scripts_1652,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1653,
-    preloads: JSCompiler_object_inline_preloads_1654,
+    preconnects: JSCompiler_object_inline_preconnects_1645,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1646,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1647,
+    styles: JSCompiler_object_inline_styles_1648,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1649,
+    scripts: JSCompiler_object_inline_scripts_1650,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1651,
+    preloads: JSCompiler_object_inline_preloads_1652,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -5699,4 +5691,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-www-classic-444074d7";
+exports.version = "19.0.0-www-classic-a976e819";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
index c0707f8cd7291..255e6c1ec8376 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -445,25 +445,17 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  validateAdditionalFormField(value);
+  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
   pushStringAttribute(this, "name", key);
   pushStringAttribute(this, "value", value);
   this.push("/>");
 }
-function validateAdditionalFormField(value) {
-  if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
-}
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      var customFields = formAction.$$FORM_ACTION(resumableState);
-      if (customFields) {
-        var formData = customFields.data;
-        null != formData && formData.forEach(validateAdditionalFormField);
-      }
-      return customFields;
+      return formAction.$$FORM_ACTION(resumableState);
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;
@@ -2635,16 +2627,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1620 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1618 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1634 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1635 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1636 = new Set(),
-    JSCompiler_object_inline_styles_1637 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1638 = new Set(),
-    JSCompiler_object_inline_scripts_1639 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1640 = new Set(),
-    JSCompiler_object_inline_preloads_1641 = {
+  var JSCompiler_object_inline_preconnects_1632 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1633 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1634 = new Set(),
+    JSCompiler_object_inline_styles_1635 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1636 = new Set(),
+    JSCompiler_object_inline_scripts_1637 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1638 = new Set(),
+    JSCompiler_object_inline_preloads_1639 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2681,7 +2673,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1638.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1636.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2722,7 +2714,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1638.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1636.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2737,7 +2729,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1620,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1618,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2757,14 +2749,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1634,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1635,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1636,
-    styles: JSCompiler_object_inline_styles_1637,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1638,
-    scripts: JSCompiler_object_inline_scripts_1639,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1640,
-    preloads: JSCompiler_object_inline_preloads_1641,
+    preconnects: JSCompiler_object_inline_preconnects_1632,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1633,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1634,
+    styles: JSCompiler_object_inline_styles_1635,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1636,
+    scripts: JSCompiler_object_inline_scripts_1637,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1638,
+    preloads: JSCompiler_object_inline_preloads_1639,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -5677,4 +5669,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "19.0.0-www-modern-df91acfc";
+exports.version = "19.0.0-www-modern-54e820e3";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
index 2b44cdb8ae5d1..d3625a388c3db 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -2569,7 +2569,11 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
   var target = this;
   target.push(startHiddenInputChunk);
-  validateAdditionalFormField(value);
+
+  if (typeof value !== 'string') {
+    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
+  }
+
   pushStringAttribute(target, 'name', key);
   pushStringAttribute(target, 'value', value);
   target.push(endOfStartTagSelfClosing);
@@ -2582,21 +2586,6 @@ function pushAdditionalFormFields(target, formData) {
   }
 }
 
-function validateAdditionalFormField(value, key) {
-  if (typeof value !== 'string') {
-    throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
-  }
-}
-
-function validateAdditionalFormFields(formData) {
-  if (formData != null) {
-    // $FlowFixMe[prop-missing]: FormData has forEach.
-    formData.forEach(validateAdditionalFormField);
-  }
-
-  return formData;
-}
-
 function getCustomFormFields(resumableState, formAction) {
   var customAction = formAction.$$FORM_ACTION;
 
@@ -2604,13 +2593,7 @@ function getCustomFormFields(resumableState, formAction) {
     var prefix = makeFormFieldPrefix(resumableState);
 
     try {
-      var customFields = formAction.$$FORM_ACTION(prefix);
-
-      if (customFields) {
-        validateAdditionalFormFields(customFields.data);
-      }
-
-      return customFields;
+      return formAction.$$FORM_ACTION(prefix);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Rethrow suspense.
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
index 1eb87eb8c4c87..45f03e90bddf8 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -417,28 +417,20 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
   this.push('<input type="hidden"');
-  validateAdditionalFormField(value);
-  pushStringAttribute(this, "name", key);
-  pushStringAttribute(this, "value", value);
-  this.push("/>");
-}
-function validateAdditionalFormField(value) {
   if ("string" !== typeof value)
     throw Error(
-      "File/Blob fields are not yet supported in progressive forms. Will fallback to client hydration."
+      "File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
     );
+  pushStringAttribute(this, "name", key);
+  pushStringAttribute(this, "value", value);
+  this.push("/>");
 }
 function getCustomFormFields(resumableState, formAction) {
   if ("function" === typeof formAction.$$FORM_ACTION) {
     var id = resumableState.nextFormID++;
     resumableState = resumableState.idPrefix + id;
     try {
-      var customFields = formAction.$$FORM_ACTION(resumableState);
-      if (customFields) {
-        var formData = customFields.data;
-        null != formData && formData.forEach(validateAdditionalFormField);
-      }
-      return customFields;
+      return formAction.$$FORM_ACTION(resumableState);
     } catch (x) {
       if ("object" === typeof x && null !== x && "function" === typeof x.then)
         throw x;