[Devtools] Ensure initial read of useFormStatus returns NotPendingTransition

Author: eps1lon

packages/react-art/src/ReactFiberConfigART.js

@@ -12,6 +12,9 @@ import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
+import type {ReactContext} from 'shared/ReactTypes';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
@@ -475,3 +478,11 @@ export function waitForCommitToBeReady() {
 }
 
 export const NotPendingTransition = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};

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

@@ -10,12 +10,13 @@
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 import type {DOMEventName} from '../events/DOMEventNames';
 import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+
 import type {
   BoundingRect,
   IntersectionObserverOptions,
   ObserveVisibleRectsCallback,
 } from 'react-reconciler/src/ReactTestSelectors';
-import type {ReactScopeInstance} from 'shared/ReactTypes';
+import type {ReactContext, ReactScopeInstance} from 'shared/ReactTypes';
 import type {AncestorInfoDev} from './validateDOMNesting';
 import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 import type {
@@ -33,6 +34,7 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import {
   precacheFiberNode,
@@ -3420,3 +3422,12 @@ function insertStylesheetIntoRoot(
 }
 
 export const NotPendingTransition: TransitionStatus = NotPending;
+
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -48,6 +48,8 @@ const {
 } = nativeFabricUIManager;
 
 import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
@@ -500,6 +502,14 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 
 // -------------------
 //     Microtasks

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -30,6 +30,9 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
+
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 export type Type = string;
@@ -536,3 +539,11 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -174,14 +174,14 @@ import {
   isPrimaryRenderer,
   getResource,
   createHoistableInstance,
+  HostTransitionContext,
 } from './ReactFiberConfig';
 import type {SuspenseInstance} from './ReactFiberConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {
   pushHostContext,
   pushHostContainer,
   getRootHostContainer,
-  HostTransitionContext,
 } from './ReactFiberHostContext';
 import {
   suspenseStackCursor,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -27,7 +27,10 @@ import type {HookFlags} from './ReactHookEffectTags';
 import type {Flags} from './ReactFiberFlags';
 import type {TransitionStatus} from './ReactFiberConfig';
 
-import {NotPendingTransition as NoPendingHostTransition} from './ReactFiberConfig';
+import {
+  HostTransitionContext,
+  NotPendingTransition as NoPendingHostTransition,
+} from './ReactFiberConfig';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   enableDebugTracing,
@@ -148,7 +151,6 @@ import {
   peekEntangledActionThenable,
   chainThenableValue,
 } from './ReactFiberAsyncAction';
-import {HostTransitionContext} from './ReactFiberHostContext';
 import {requestTransitionLane} from './ReactFiberRootScheduler';
 import {isCurrentTreeHidden} from './ReactFiberHiddenContext';
 import {
@@ -3104,8 +3106,7 @@ function useHostTransitionStatus(): TransitionStatus {
   if (!enableAsyncActions) {
     throw new Error('Not implemented.');
   }
-  const status: TransitionStatus | null = readContext(HostTransitionContext);
-  return status !== null ? status : NoPendingHostTransition;
+  return readContext(HostTransitionContext);
 }
 
 function mountId(): string {

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -9,21 +9,17 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack';
-import type {
-  Container,
-  HostContext,
-  TransitionStatus,
-} from './ReactFiberConfig';
+import type {Container, HostContext} from './ReactFiberConfig';
 import type {Hook} from './ReactFiberHooks';
-import type {ReactContext} from 'shared/ReactTypes';
 
 import {
   getChildHostContext,
   getRootHostContext,
+  HostTransitionContext,
+  NotPendingTransition,
   isPrimaryRenderer,
 } from './ReactFiberConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
-import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {enableAsyncActions} from 'shared/ReactFeatureFlags';
 
 const contextStackCursor: StackCursor<HostContext | null> = createCursor(null);
@@ -38,21 +34,6 @@ const rootInstanceStackCursor: StackCursor<Container | null> =
 const hostTransitionProviderCursor: StackCursor<Fiber | null> =
   createCursor(null);
 
-// TODO: This should initialize to NotPendingTransition, a constant
-// imported from the fiber config. However, because of a cycle in the module
-// graph, that value isn't defined during this module's initialization. I can't
-// think of a way to work around this without moving that value out of the
-// fiber config. For now, the "no provider" case is handled when reading,
-// inside useHostTransitionStatus.
-export const HostTransitionContext: ReactContext<TransitionStatus | null> = {
-  $$typeof: REACT_CONTEXT_TYPE,
-  Provider: (null: any),
-  Consumer: (null: any),
-  _currentValue: null,
-  _currentValue2: null,
-  _threadCount: 0,
-};
-
 function requiredContext<Value>(c: Value | null): Value {
   if (__DEV__) {
     if (c === null) {
@@ -150,13 +131,13 @@ function popHostContext(fiber: Fiber): void {
       pop(hostTransitionProviderCursor, fiber);
 
       // When popping the transition provider, we reset the context value back
-      // to `null`. We can do this because you're not allowd to nest forms. If
+      // to `NotPendingTransition`. We can do this because you're not allowd to nest forms. If
       // we allowed for multiple nested host transition providers, then we'd
       // need to reset this to the parent provider's status.
       if (isPrimaryRenderer) {
-        HostTransitionContext._currentValue = null;
+        HostTransitionContext._currentValue = NotPendingTransition;
       } else {
-        HostTransitionContext._currentValue2 = null;
+        HostTransitionContext._currentValue2 = NotPendingTransition;
       }
     }
   }

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -19,7 +19,7 @@ import type {SharedQueue} from './ReactFiberClassUpdateQueue';
 import type {TransitionStatus} from './ReactFiberConfig';
 import type {Hook} from './ReactFiberHooks';
 
-import {isPrimaryRenderer} from './ReactFiberConfig';
+import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 import {
   ContextProvider,
@@ -47,10 +47,7 @@ import {
   enableAsyncActions,
   enableRenderableContext,
 } from 'shared/ReactFeatureFlags';
-import {
-  getHostTransitionProvider,
-  HostTransitionContext,
-} from './ReactFiberHostContext';
+import {getHostTransitionProvider} from './ReactFiberHostContext';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -7,7 +7,10 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import isArray from 'shared/isArray';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {
   DefaultEventPriority,
   type EventPriority,
@@ -336,3 +339,11 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};