Implement experimental_useFormStatus

packages/react-art/src/ReactFiberConfigART.js

@@ -479,3 +479,5 @@ export function suspendInstance(type, props) {}
 export function waitForCommitToBeReady() {
   return null;
 }
+
+export const NotPendingTransition = null;

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -18,7 +18,9 @@ import type {
 } from 'react-reconciler/src/ReactTestSelectors';
 import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {AncestorInfoDev} from './validateDOMNesting';
+import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
+import {NotPending} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostContext';
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 // TODO: Remove this deep import when we delete the legacy root API
@@ -164,6 +166,8 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type RendererInspectionConfig = $ReadOnly<{}>;
 
+export type TransitionStatus = FormStatus;
+
 type SelectionInformation = {
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
@@ -3448,3 +3452,5 @@ function insertStylesheetIntoRoot(
   }
   resource.state.loading |= Inserted;
 }
+
+export const NotPendingTransition: TransitionStatus = NotPending;

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

@@ -473,7 +473,7 @@ function replayUnblockedFormActions(formReplayingQueue: FormReplayingQueue) {
       // We're ready to replay this. Let's delete it from the queue.
       formReplayingQueue.splice(i, 3);
       i -= 3;
-      dispatchReplayedFormAction(formInst, submitterOrAction, formData);
+      dispatchReplayedFormAction(formInst, form, submitterOrAction, formData);
       // Continue without incrementing the index.
       continue;
     }

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

@@ -12,6 +12,7 @@ import type {DOMEventName} from '../DOMEventNames';
 import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
 import {getFiberCurrentPropsFromNode} from '../../client/ReactDOMComponentTree';
 import {startHostTransition} from 'react-reconciler/src/ReactFiberReconciler';
@@ -98,7 +99,16 @@ function extractEvents(
       formData = new FormData(form);
     }
 
-    startHostTransition(formInst, action, formData);
+    const pendingState: FormStatus = {
+      pending: true,
+      data: formData,
+      method: form.method,
+      action: action,
+    };
+    if (__DEV__) {
+      Object.freeze(pendingState);
+    }
+    startHostTransition(formInst, pendingState, action, formData);
   }
 
   dispatchQueue.push({
@@ -117,8 +127,18 @@ export {extractEvents};
 
 export function dispatchReplayedFormAction(
   formInst: Fiber,
+  form: HTMLFormElement,
   action: FormData => void | Promise<void>,
   formData: FormData,
 ): void {
-  startHostTransition(formInst, action, formData);
+  const pendingState: FormStatus = {
+    pending: true,
+    data: formData,
+    method: form.method,
+    action: action,
+  };
+  if (__DEV__) {
+    Object.freeze(pendingState);
+  }
+  startHostTransition(formInst, pendingState, action, formData);
 }

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

@@ -31,6 +31,8 @@ import type {
   PrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
+import type {FormStatus} from '../shared/ReactDOMFormActions';
+
 import {
   writeChunk,
   writeChunkAndReturn,
@@ -82,6 +84,8 @@ import {
   describeDifferencesForPreloadOverImplicitPreload,
 } from '../shared/ReactDOMResourceValidation';
 
+import {NotPending} from '../shared/ReactDOMFormActions';
+
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
 const ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher;
 
@@ -5562,3 +5566,6 @@ function getAsResourceDEV(
     );
   }
 }
+
+export type TransitionStatus = FormStatus;
+export const NotPendingTransition: TransitionStatus = NotPending;

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

@@ -31,6 +31,10 @@ import type {
   PrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
+import type {FormStatus} from '../shared/ReactDOMFormActions';
+
+import {NotPending} from '../shared/ReactDOMFormActions';
+
 export const isPrimaryRenderer = false;
 
 export type ResponseState = {
@@ -226,3 +230,6 @@ export function writeEndClientRenderedSuspenseBoundary(
   }
   return writeEndClientRenderedSuspenseBoundaryImpl(destination, responseState);
 }
+
+export type TransitionStatus = FormStatus;
+export const NotPendingTransition: TransitionStatus = NotPending;

packages/react-dom-bindings/src/shared/ReactDOMFormActions.js

@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+
+import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+
+import {enableAsyncActions, enableFormActions} from 'shared/ReactFeatureFlags';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+
+type FormStatusNotPending = {|
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+|};
+
+type FormStatusPending = {|
+  pending: true,
+  data: FormData,
+  method: string,
+  action: string | (FormData => void | Promise<void>),
+|};
+
+export type FormStatus = FormStatusPending | FormStatusNotPending;
+
+// Since the "not pending" value is always the same, we can reuse the
+// same object across all transitions.
+const sharedNotPendingObject = {
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+};
+
+export const NotPending: FormStatus = __DEV__
+  ? Object.freeze(sharedNotPendingObject)
+  : sharedNotPendingObject;
+
+function resolveDispatcher() {
+  // Copied from react/src/ReactHooks.js. It's the same thing but in a
+  // different package.
+  const dispatcher = ReactCurrentDispatcher.current;
+  if (__DEV__) {
+    if (dispatcher === null) {
+      console.error(
+        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+          ' one of the following reasons:\n' +
+          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+          '2. You might be breaking the Rules of Hooks\n' +
+          '3. You might have more than one copy of React in the same app\n' +
+          'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+    }
+  }
+  // Will result in a null access error if accessed outside render phase. We
+  // intentionally don't throw our own error because this is in a hot path.
+  // Also helps ensure this is inlined.
+  return ((dispatcher: any): Dispatcher);
+}
+
+export function useFormStatus(): FormStatus {
+  if (!(enableFormActions && enableAsyncActions)) {
+    throw new Error('Not implemented.');
+  } else {
+    const dispatcher = resolveDispatcher();
+    // $FlowFixMe We know this exists because of the feature check above.
+    return dispatcher.useHostTransitionStatus();
+  }
+}