[FlightReply] Type hardening and performance improvements

Co-authored-by: Hendrik Liebau <mail@hendrik-liebau.de>

Author: eps1lon

.eslintrc.js

@@ -570,6 +570,8 @@ module.exports = {
     CopyInspectedElementPath: 'readonly',
     DOMHighResTimeStamp: 'readonly',
     EventListener: 'readonly',
+    // Flow type
+    FormDataEntryValue: 'readonly',
     Iterable: 'readonly',
     AsyncIterable: 'readonly',
     $AsyncIterable: 'readonly',
@@ -609,6 +611,7 @@ module.exports = {
     TimeoutID: 'readonly',
     WheelEventHandler: 'readonly',
     FinalizationRegistry: 'readonly',
+    Exclude: 'readonly',
     Omit: 'readonly',
     Keyframe: 'readonly',
     PropertyIndexedKeyframes: 'readonly',

packages/react-client/src/ReactFlightReplyClient.js

@@ -582,7 +582,9 @@ export function processReply(
         // Copy all the form fields with a prefix for this reference.
         // These must come first in the form order because we assume that all the
         // fields are available before this is referenced.
-        const prefix = formFieldPrefix + refId + '_';
+        // We include a special marker so that the Server can detect FormData entries
+        // that are values in referenced FormData objects.
+        const prefix = formFieldPrefix + '_' + refId + '_';
         // $FlowFixMe[prop-missing]: FormData has forEach.
         value.forEach((originalValue: string | File, originalKey: string) => {
           // $FlowFixMe[incompatible-call]

packages/react-server/src/ReactFlightReplyBackingFormData.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Backing FormData is a wrapper around FormData that allows iterating over the
+ * keys while allowing to evict values from the FormData without affecting the iteration.
+ * Native FormData.keys() will skip keys if entries with Blob are deleted e.g.
+ * ```js
+ * const formData = new FormData();
+ * formData.append('a', new Blob());
+ * formData.append('b', 2);
+ * const keys = formData.keys();
+ * keys.next().value; // 'a'
+ * formData.delete('a');
+ * keys.next().value; // undefined, but we expect 'b'
+ * ```
+ */
+export opaque type BackingFormData = {
+  data: FormData,
+  keyPointer: number,
+  // Lazily initialized array of keys. We only need this at the moment
+  // for referenced FormData.
+  keys: null | Array<string>,
+};
+
+export function peekBackingEntry(backingStore: BackingFormData): string | void {
+  let keys = backingStore.keys;
+  if (keys === null) {
+    keys = backingStore.keys = Array.from(backingStore.data.keys());
+    backingStore.keyPointer = 0;
+  }
+
+  return keys[backingStore.keyPointer];
+}
+
+export function advanceBackingEntryIterator(
+  backingStore: BackingFormData,
+): void {
+  backingStore.keyPointer++;
+}
+
+export function consumeBackingEntry(
+  backingStore: BackingFormData,
+  key: string,
+): void {
+  backingStore.data.delete(key);
+  backingStore.keyPointer++;
+}
+
+export function appendBackingEntry(
+  backingStore: BackingFormData,
+  key: string,
+  value: FormDataEntryValue,
+): void {
+  // $FlowFixMe[incompatible-call] Older versions of Flow don't know about the overloaded append() method that accepts FormDataEntryValue without `filename`.
+  backingStore.data.append(key, value);
+  let keys = backingStore.keys;
+  if (keys === null) {
+    keys = backingStore.keys = Array.from(backingStore.data.keys());
+    backingStore.keyPointer = 0;
+  } else {
+    keys.push(key);
+  }
+}
+
+export function appendBackingFile(
+  backingStore: BackingFormData,
+  key: string,
+  value: Blob,
+  filename: string,
+): void {
+  backingStore.data.append(key, value, filename);
+  let keys = backingStore.keys;
+  if (keys === null) {
+    keys = backingStore.keys = Array.from(backingStore.data.keys());
+    backingStore.keyPointer = 0;
+  } else {
+    keys.push(key);
+  }
+}
+
+export function getBackingEntry(
+  backingStore: BackingFormData,
+  key: string,
+): ?FormDataEntryValue {
+  return backingStore.data.get(key);
+}
+
+export function getAllBackingEntries(
+  backingStore: BackingFormData,
+  key: string,
+): Array<FormDataEntryValue> {
+  return backingStore.data.getAll(key);
+}
+
+export function createBackingFormData(formData: FormData): BackingFormData {
+  return {
+    data: formData,
+    keyPointer: -1,
+    keys: null,
+  };
+}