{"body":"","commit":{"subject":"[Devtools] Ensure initial read of `useFormStatus` returns `NotPendingTransition` (#28728)","shortRevision":"88ee14ffa5","authorEmail":"sebastian.silbermann@vercel.com","revision":"88ee14ffa57beb0689f26f0c52c357e3ac446af8","authorName":"Sebastian Silbermann","authoredAt":"2024-08-01T10:55:53+02:00"},"parents":["56dbd58feb1a75f075c67067ce0d20d7cee7f482"],"files":[{"status":"M","path":"packages\/react-art\/src\/ReactFiberConfigART.js"},{"status":"M","path":"packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegrationDOM-test.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFiberConfigFabric.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFiberConfigNative.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHostContext.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberNewContext.js"},{"status":"M","path":"packages\/react-reconciler\/src\/forks\/ReactFiberConfig.custom.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactFiberConfigTestHost.js"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactFiberConfigART.js b\/packages\/react-art\/src\/ReactFiberConfigART.js\nindex e80e6100ec..816353e0ce 100644\n--- a\/packages\/react-art\/src\/ReactFiberConfigART.js\n+++ b\/packages\/react-art\/src\/ReactFiberConfigART.js\n@@ -16,6 +16,8 @@ import {\n DefaultEventPriority,\n NoEventPriority,\n } from 'react-reconciler\/src\/ReactEventPriorities';\n+import type {ReactContext} from 'shared\/ReactTypes';\n+import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n \n export {default as rendererVersion} from 'shared\/ReactVersion';\n export const rendererPackageName = 'react-art';\n@@ -28,6 +30,8 @@ if (__DEV__) {\n Object.freeze(NO_CONTEXT);\n }\n \n+export type TransitionStatus = mixed;\n+\n \/** Helper Methods *\/\n \n function addEventListeners(instance, type, listener) {\n@@ -488,4 +492,12 @@ export function waitForCommitToBeReady() {\n }\n \n export const NotPendingTransition = null;\n+export const HostTransitionContext: ReactContext = {\n+ $$typeof: REACT_CONTEXT_TYPE,\n+ Provider: (null: any),\n+ Consumer: (null: any),\n+ _currentValue: NotPendingTransition,\n+ _currentValue2: NotPendingTransition,\n+ _threadCount: 0,\n+};\n export function resetFormInstance() {}\ndiff --git a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegrationDOM-test.js b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegrationDOM-test.js\nindex 752d93fa30..3ef3c2f3a7 100644\n--- a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegrationDOM-test.js\n+++ b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegrationDOM-test.js\n@@ -119,7 +119,12 @@ describe('ReactHooksInspectionIntegration', () => {\n isStateEditable: false,\n name: 'FormStatus',\n subHooks: [],\n- value: null,\n+ value: {\n+ action: null,\n+ data: null,\n+ method: null,\n+ pending: false,\n+ },\n },\n {\n debugInfo: null,\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js b\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\nindex 28d4cf73aa..d70d1fdbb3 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\n@@ -14,7 +14,7 @@ import type {\n IntersectionObserverOptions,\n ObserveVisibleRectsCallback,\n } from 'react-reconciler\/src\/ReactTestSelectors';\n-import type {ReactScopeInstance} from 'shared\/ReactTypes';\n+import type {ReactContext, ReactScopeInstance} from 'shared\/ReactTypes';\n import type {AncestorInfoDev} from '.\/validateDOMNesting';\n import type {FormStatus} from 'react-dom-bindings\/src\/shared\/ReactDOMFormActions';\n import type {\n@@ -32,6 +32,7 @@ import {getCurrentRootHostContainer} from 'react-reconciler\/src\/ReactFiberHostCo\n \n import hasOwnProperty from 'shared\/hasOwnProperty';\n import {checkAttributeStringCoercion} from 'shared\/CheckStringCoercion';\n+import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n \n export {\n setCurrentUpdatePriority,\n@@ -3564,6 +3565,14 @@ function insertStylesheetIntoRoot(\n }\n \n export const NotPendingTransition: TransitionStatus = NotPending;\n+export const HostTransitionContext: ReactContext = {\n+ $$typeof: REACT_CONTEXT_TYPE,\n+ Provider: (null: any),\n+ Consumer: (null: any),\n+ _currentValue: NotPendingTransition,\n+ _currentValue2: NotPendingTransition,\n+ _threadCount: 0,\n+};\n \n export type FormInstance = HTMLFormElement;\n export function resetFormInstance(form: FormInstance): void {\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFiberConfigFabric.js b\/packages\/react-native-renderer\/src\/ReactFiberConfigFabric.js\nindex 8e04289fb1..80215d11ec 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFiberConfigFabric.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFiberConfigFabric.js\n@@ -60,6 +60,8 @@ import {\n enableFabricCompleteRootInCommitPhase,\n passChildrenWhenCloningPersistedNodes,\n } from 'shared\/ReactFeatureFlags';\n+import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n+import type {ReactContext} from 'shared\/ReactTypes';\n \n export {default as rendererVersion} from 'shared\/ReactVersion'; \/\/ TODO: Consider exporting the react-native version.\n export const rendererPackageName = 'react-native-renderer';\n@@ -544,6 +546,14 @@ export function waitForCommitToBeReady(): null {\n }\n \n export const NotPendingTransition: TransitionStatus = null;\n+export const HostTransitionContext: ReactContext = {\n+ $$typeof: REACT_CONTEXT_TYPE,\n+ Provider: (null: any),\n+ Consumer: (null: any),\n+ _currentValue: NotPendingTransition,\n+ _currentValue2: NotPendingTransition,\n+ _threadCount: 0,\n+};\n \n export type FormInstance = Instance;\n export function resetFormInstance(form: Instance): void {}\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFiberConfigNative.js b\/packages\/react-native-renderer\/src\/ReactFiberConfigNative.js\nindex c9c6aadcf9..0a95e0f818 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFiberConfigNative.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFiberConfigNative.js\n@@ -32,6 +32,9 @@ import {\n } from 'react-reconciler\/src\/ReactEventPriorities';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n \n+import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n+import type {ReactContext} from 'shared\/ReactTypes';\n+\n import {\n getInspectorDataForViewTag,\n getInspectorDataForViewAtPoint,\n@@ -561,6 +564,14 @@ export function waitForCommitToBeReady(): null {\n }\n \n export const NotPendingTransition: TransitionStatus = null;\n+export const HostTransitionContext: ReactContext = {\n+ $$typeof: REACT_CONTEXT_TYPE,\n+ Provider: (null: any),\n+ Consumer: (null: any),\n+ _currentValue: NotPendingTransition,\n+ _currentValue2: NotPendingTransition,\n+ _threadCount: 0,\n+};\n \n export type FormInstance = Instance;\n export function resetFormInstance(form: Instance): void {}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex eae5dc5a96..34176bb83b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -178,6 +178,7 @@ import {\n isPrimaryRenderer,\n getResource,\n createHoistableInstance,\n+ HostTransitionContext,\n } from '.\/ReactFiberConfig';\n import type {SuspenseInstance} from '.\/ReactFiberConfig';\n import {shouldError, shouldSuspend} from '.\/ReactFiberReconciler';\n@@ -185,7 +186,6 @@ import {\n pushHostContext,\n pushHostContainer,\n getRootHostContainer,\n- HostTransitionContext,\n } from '.\/ReactFiberHostContext';\n import {\n suspenseStackCursor,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 78c9c8a9e0..363646eb7d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -28,6 +28,7 @@ import type {Flags} from '.\/ReactFiberFlags';\n import type {TransitionStatus} from '.\/ReactFiberConfig';\n \n import {\n+ HostTransitionContext,\n NotPendingTransition as NoPendingHostTransition,\n setCurrentUpdatePriority,\n getCurrentUpdatePriority,\n@@ -156,7 +157,6 @@ import {\n peekEntangledActionThenable,\n chainThenableValue,\n } from '.\/ReactFiberAsyncAction';\n-import {HostTransitionContext} from '.\/ReactFiberHostContext';\n import {requestTransitionLane} from '.\/ReactFiberRootScheduler';\n import {isCurrentTreeHidden} from '.\/ReactFiberHiddenContext';\n import {requestCurrentTransition} from '.\/ReactFiberTransition';\n@@ -3276,8 +3276,7 @@ function useHostTransitionStatus(): TransitionStatus {\n if (!enableAsyncActions) {\n throw new Error('Not implemented.');\n }\n- const status: TransitionStatus | null = readContext(HostTransitionContext);\n- return status !== null ? status : NoPendingHostTransition;\n+ return readContext(HostTransitionContext);\n }\n \n function mountId(): string {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHostContext.js b\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\nindex f930799f56..a3b525b1a0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHostContext.js\n@@ -9,21 +9,17 @@\n \n import type {Fiber} from '.\/ReactInternalTypes';\n import type {StackCursor} from '.\/ReactFiberStack';\n-import type {\n- Container,\n- HostContext,\n- TransitionStatus,\n-} from '.\/ReactFiberConfig';\n+import type {Container, HostContext} from '.\/ReactFiberConfig';\n import type {Hook} from '.\/ReactFiberHooks';\n-import type {ReactContext} from 'shared\/ReactTypes';\n \n import {\n getChildHostContext,\n getRootHostContext,\n+ HostTransitionContext,\n+ NotPendingTransition,\n isPrimaryRenderer,\n } from '.\/ReactFiberConfig';\n import {createCursor, push, pop} from '.\/ReactFiberStack';\n-import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n import {enableAsyncActions} from 'shared\/ReactFeatureFlags';\n \n const contextStackCursor: StackCursor = createCursor(null);\n@@ -38,21 +34,6 @@ const rootInstanceStackCursor: StackCursor =\n const hostTransitionProviderCursor: StackCursor =\n createCursor(null);\n \n-\/\/ TODO: This should initialize to NotPendingTransition, a constant\n-\/\/ imported from the fiber config. However, because of a cycle in the module\n-\/\/ graph, that value isn't defined during this module's initialization. I can't\n-\/\/ think of a way to work around this without moving that value out of the\n-\/\/ fiber config. For now, the \"no provider\" case is handled when reading,\n-\/\/ inside useHostTransitionStatus.\n-export const HostTransitionContext: ReactContext = {\n- $$typeof: REACT_CONTEXT_TYPE,\n- Provider: (null: any),\n- Consumer: (null: any),\n- _currentValue: null,\n- _currentValue2: null,\n- _threadCount: 0,\n-};\n-\n function requiredContext(c: Value | null): Value {\n if (__DEV__) {\n if (c === null) {\n@@ -150,13 +131,13 @@ function popHostContext(fiber: Fiber): void {\n pop(hostTransitionProviderCursor, fiber);\n \n \/\/ When popping the transition provider, we reset the context value back\n- \/\/ to `null`. We can do this because you're not allowd to nest forms. If\n+ \/\/ to `NotPendingTransition`. We can do this because you're not allowed to nest forms. If\n \/\/ we allowed for multiple nested host transition providers, then we'd\n \/\/ need to reset this to the parent provider's status.\n if (isPrimaryRenderer) {\n- HostTransitionContext._currentValue = null;\n+ HostTransitionContext._currentValue = NotPendingTransition;\n } else {\n- HostTransitionContext._currentValue2 = null;\n+ HostTransitionContext._currentValue2 = NotPendingTransition;\n }\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberNewContext.js b\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\nindex cc908167e1..57004e499b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberNewContext.js\n@@ -20,7 +20,7 @@ import type {SharedQueue} from '.\/ReactFiberClassUpdateQueue';\n import type {TransitionStatus} from '.\/ReactFiberConfig';\n import type {Hook} from '.\/ReactFiberHooks';\n \n-import {isPrimaryRenderer} from '.\/ReactFiberConfig';\n+import {isPrimaryRenderer, HostTransitionContext} from '.\/ReactFiberConfig';\n import {createCursor, push, pop} from '.\/ReactFiberStack';\n import {\n ContextProvider,\n@@ -48,10 +48,7 @@ import {\n enableAsyncActions,\n enableRenderableContext,\n } from 'shared\/ReactFeatureFlags';\n-import {\n- getHostTransitionProvider,\n- HostTransitionContext,\n-} from '.\/ReactFiberHostContext';\n+import {getHostTransitionProvider} from '.\/ReactFiberHostContext';\n import isArray from '..\/..\/shared\/isArray';\n import {enableContextProfiling} from '..\/..\/shared\/ReactFeatureFlags';\n \ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberConfig.custom.js\nindex faafe7159e..0826f9d95e 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberConfig.custom.js\n@@ -83,6 +83,7 @@ export const startSuspendingCommit = $$$config.startSuspendingCommit;\n export const suspendInstance = $$$config.suspendInstance;\n export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;\n export const NotPendingTransition = $$$config.NotPendingTransition;\n+export const HostTransitionContext = $$$config.HostTransitionContext;\n export const resetFormInstance = $$$config.resetFormInstance;\n export const bindToConsole = $$$config.bindToConsole;\n \ndiff --git a\/packages\/react-test-renderer\/src\/ReactFiberConfigTestHost.js b\/packages\/react-test-renderer\/src\/ReactFiberConfigTestHost.js\nindex 1bb04e8d32..9d62e8a19c 100644\n--- a\/packages\/react-test-renderer\/src\/ReactFiberConfigTestHost.js\n+++ b\/packages\/react-test-renderer\/src\/ReactFiberConfigTestHost.js\n@@ -7,7 +7,10 @@\n * @flow\n *\/\n \n+import type {ReactContext} from 'shared\/ReactTypes';\n+\n import isArray from 'shared\/isArray';\n+import {REACT_CONTEXT_TYPE} from 'shared\/ReactSymbols';\n import {\n DefaultEventPriority,\n NoEventPriority,\n@@ -352,6 +355,14 @@ export function waitForCommitToBeReady(): null {\n }\n \n export const NotPendingTransition: TransitionStatus = null;\n+export const HostTransitionContext: ReactContext = {\n+ $$typeof: REACT_CONTEXT_TYPE,\n+ Provider: (null: any),\n+ Consumer: (null: any),\n+ _currentValue: NotPendingTransition,\n+ _currentValue2: NotPendingTransition,\n+ _threadCount: 0,\n+};\n \n export type FormInstance = Instance;\n export function resetFormInstance(form: Instance): void {}\n"}

dillon1000/react

Files changed