Pick up the FormReplayingQueue from the root when a new boundary hydrates

Then try to replay any action that got unblocked.

The hard part comes from the it might be more than one React instance that
shares this queue.

Author: sebmarkbage

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

@@ -225,19 +225,25 @@ export function dispatchEvent(
   );
 }
 
+export function findInstanceBlockingEvent(
+  nativeEvent: AnyNativeEvent,
+): null | Container | SuspenseInstance {
+  const nativeEventTarget = getEventTarget(nativeEvent);
+  return findInstanceBlockingTarget(nativeEventTarget);
+}
+
 export let return_targetInst: null | Fiber = null;
 
 // Returns a SuspenseInstance or Container if it's blocked.
 // The return_targetInst field above is conceptually part of the return value.
-export function findInstanceBlockingEvent(
-  nativeEvent: AnyNativeEvent,
+export function findInstanceBlockingTarget(
+  targetNode: Node,
 ): null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
   return_targetInst = null;
 
-  const nativeEventTarget = getEventTarget(nativeEvent);
-  let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+  let targetInst = getClosestInstanceFromNode(targetNode);
 
   if (targetInst !== null) {
     const nearestMounted = getNearestMountedFiber(targetInst);

packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js

@@ -23,15 +23,20 @@ import {
   getContainerFromFiber,
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import {findInstanceBlockingEvent} from './ReactDOMEventListener';
+import {
+  findInstanceBlockingEvent,
+  findInstanceBlockingTarget,
+} from './ReactDOMEventListener';
 import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
+  getFiberCurrentPropsFromNode,
 } from '../client/ReactDOMComponentTree';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
+import {dispatchReplayedFormAction} from './plugins/FormActionEventPlugin';
 
 import {
   attemptContinuousHydration,
@@ -41,6 +46,7 @@ import {
   runWithPriority as attemptHydrationAtPriority,
   getCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
+import {enableFormActions} from 'shared/ReactFeatureFlags';
 
 // TODO: Upgrade this definition once we're on a newer version of Flow that
 // has this definition built-in.
@@ -430,6 +436,67 @@ function scheduleCallbackIfUnblocked(
   }
 }
 
+type FormAction = FormData => void | Promise<void>;
+
+type FormReplayingQueue = Array<any>; // [form, submitter or action, formData...]
+
+let lastScheduledReplayQueue: null | FormReplayingQueue = null;
+
+function replayUnblockedFormActions(formReplayingQueue: FormReplayingQueue) {
+  if (lastScheduledReplayQueue === formReplayingQueue) {
+    lastScheduledReplayQueue = null;
+  }
+  for (let i = 0; i < formReplayingQueue.length; i += 3) {
+    const form: HTMLFormElement = formReplayingQueue[i];
+    const submitterOrAction:
+      | null
+      | HTMLInputElement
+      | HTMLButtonElement
+      | FormAction = formReplayingQueue[i + 1];
+    const formData: FormData = formReplayingQueue[i + 2];
+    if (typeof submitterOrAction !== 'function') {
+      // This action is not hydrated yet. This might be because it's blocked on
+      // a different React instance or higher up our tree.
+      const blockedOn = findInstanceBlockingTarget(submitterOrAction || form);
+      if (blockedOn === null) {
+        // We're not blocked but we don't have an action. This must mean that
+        // this is in another React instance. We'll just skip past it.
+        continue;
+      } else {
+        // We're blocked on something in this React instance. We'll retry later.
+        break;
+      }
+    }
+    const formInst = getInstanceFromNode(form);
+    if (formInst !== null) {
+      // This is part of our instance.
+      // We're ready to replay this. Let's delete it from the queue.
+      formReplayingQueue.splice(i, 3);
+      i -= 3;
+      dispatchReplayedFormAction(formInst, submitterOrAction, formData);
+      // Continue without incrementing the index.
+      continue;
+    }
+    // This form must've been part of a different React instance.
+    // If we want to preserve ordering between React instances on the same root
+    // we'd need some way for the other instance to ping us when it's done.
+    // We'll just skip this and let the other instance execute it.
+  }
+}
+
+function scheduleReplayQueueIfNeeded(formReplayingQueue: FormReplayingQueue) {
+  // Schedule a callback to execute any unblocked form actions in.
+  // We only keep track of the last queue which means that if multiple React oscillate
+  // commits, we could schedule more callbacks than necessary but it's not a big deal
+  // and we only really except one instance.
+  if (lastScheduledReplayQueue !== formReplayingQueue) {
+    lastScheduledReplayQueue = formReplayingQueue;
+    scheduleCallback(NormalPriority, () =>
+      replayUnblockedFormActions(formReplayingQueue),
+    );
+  }
+}
+
 export function retryIfBlockedOn(
   unblocked: Container | SuspenseInstance,
 ): void {
@@ -467,4 +534,72 @@ export function retryIfBlockedOn(
       }
     }
   }
+
+  if (enableFormActions) {
+    // Check the document if there are any queued form actions.
+    const root = unblocked.getRootNode();
+    const formReplayingQueue: void | FormReplayingQueue = (root: any)
+      .$$reactFormReplay;
+    if (formReplayingQueue != null) {
+      for (let i = 0; i < formReplayingQueue.length; i += 3) {
+        const form: HTMLFormElement = formReplayingQueue[i];
+        const submitterOrAction:
+          | null
+          | HTMLInputElement
+          | HTMLButtonElement
+          | FormAction = formReplayingQueue[i + 1];
+        const formProps = getFiberCurrentPropsFromNode(form);
+        if (typeof submitterOrAction === 'function') {
+          // This action has already resolved. We're just waiting to dispatch it.
+          if (!formProps) {
+            // This was not part of this React instance. It might have been recently
+            // unblocking us from dispatching our events. So let's make sure we schedule
+            // a retry.
+            scheduleReplayQueueIfNeeded(formReplayingQueue);
+          }
+          continue;
+        }
+        let target: Node = form;
+        if (formProps) {
+          // This form belongs to this React instance but the submitter might
+          // not be done yet.
+          let action: null | FormAction = null;
+          const submitter = submitterOrAction;
+          if (submitter && submitter.hasAttribute('formAction')) {
+            // The submitter is the one that is responsible for the action.
+            target = submitter;
+            const submitterProps = getFiberCurrentPropsFromNode(submitter);
+            if (submitterProps) {
+              // The submitter is part of this instance.
+              action = (submitterProps: any).formAction;
+            } else {
+              const blockedOn = findInstanceBlockingTarget(target);
+              if (blockedOn !== null) {
+                // The submitter is not hydrated yet. We'll wait for it.
+                continue;
+              }
+              // The submitter must have been a part of a different React instance.
+              // Except the form isn't. We don't dispatch actions in this scenario.
+            }
+          } else {
+            action = (formProps: any).action;
+          }
+          if (typeof action === 'function') {
+            formReplayingQueue[i + 1] = action;
+          } else {
+            // Something went wrong so let's just delete this action.
+            formReplayingQueue.splice(i, 3);
+            i -= 3;
+          }
+          // Schedule a replay in case this unblocked something.
+          scheduleReplayQueueIfNeeded(formReplayingQueue);
+          continue;
+        }
+        // Something above this target is still blocked so we can't continue yet.
+        // We're not sure if this target is actually part of this React instance
+        // yet. It could be a different React as a child but at least some parent is.
+        // We must continue for any further queued actions.
+      }
+    }
+  }
 }

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -116,3 +116,11 @@ function extractEvents(
 }
 
 export {extractEvents};
+
+export function dispatchReplayedFormAction(
+  formInst: Fiber,
+  action: FormData => void | Promise<void>,
+  formData: FormData,
+): void {
+  startHostTransition(formInst, action, formData);
+}