Implement experimental_useFormStatus (facebook#26722)

This hook reads the status of its ancestor form component, if it exists.

```js
const {pending, data, action, method} = useFormStatus();
```

It can be used to implement a loading indicator, for example. You can
think of it as a shortcut for implementing a loading state with the
useTransition hook.

For now, it's only available in the experimental channel. We'll share
docs once its closer to being stable. There are additional APIs that
will ship alongside it.

Internally it's implemented using startTransition + a context object.
That's a good way to think about its behavior, but the actual
implementation details may change in the future.

Because form elements cannot be nested, the implementation in the
reconciler does not bother to keep track of multiple nested "transition
providers". So although it's implemented using generic Fiber config
methods, it does currently make some assumptions based on React DOM's
requirements.

Author: acdlite

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();
+  }
+}