diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js index 575cd3860a68..f3434a5eeff5 100644 --- a/packages/react-dom/src/client/ReactDOMComponentTree.js +++ b/packages/react-dom/src/client/ReactDOMComponentTree.js @@ -3,8 +3,19 @@ * * 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 {Fiber} from 'react-reconciler/src/ReactFiber'; +import type { + Container, + TextInstance, + Instance, + SuspenseInstance, + Props, +} from './ReactDOMHostConfig'; + import { HostComponent, HostText, @@ -22,19 +33,22 @@ const internalInstanceKey = '__reactInternalInstance$' + randomKey; const internalEventHandlersKey = '__reactEventHandlers$' + randomKey; const internalContainerInstanceKey = '__reactContainere$' + randomKey; -export function precacheFiberNode(hostInst, node) { - node[internalInstanceKey] = hostInst; +export function precacheFiberNode( + hostInst: Fiber, + node: Instance | TextInstance | SuspenseInstance, +): void { + (node: any)[internalInstanceKey] = hostInst; } -export function markContainerAsRoot(hostRoot, node) { +export function markContainerAsRoot(hostRoot: Fiber, node: Container): void { node[internalContainerInstanceKey] = hostRoot; } -export function unmarkContainerAsRoot(node) { +export function unmarkContainerAsRoot(node: Container): void { node[internalContainerInstanceKey] = null; } -export function isContainerMarkedAsRoot(node) { +export function isContainerMarkedAsRoot(node: Container): boolean { return !!node[internalContainerInstanceKey]; } @@ -45,8 +59,8 @@ export function isContainerMarkedAsRoot(node) { // pass the Container node as the targetNode, you will not actually get the // HostRoot back. To get to the HostRoot, you need to pass a child of it. // The same thing applies to Suspense boundaries. -export function getClosestInstanceFromNode(targetNode) { - let targetInst = targetNode[internalInstanceKey]; +export function getClosestInstanceFromNode(targetNode: Node): null | Fiber { + let targetInst = (targetNode: any)[internalInstanceKey]; if (targetInst) { // Don't return HostRoot or SuspenseComponent here. return targetInst; @@ -64,8 +78,8 @@ export function getClosestInstanceFromNode(targetNode) { // node and the first child. It isn't surrounding the container node. // If it's not a container, we check if it's an instance. targetInst = - parentNode[internalContainerInstanceKey] || - parentNode[internalInstanceKey]; + (parentNode: any)[internalContainerInstanceKey] || + (parentNode: any)[internalInstanceKey]; if (targetInst) { // Since this wasn't the direct target of the event, we might have // stepped past dehydrated DOM nodes to get here. However they could @@ -124,8 +138,10 @@ export function getClosestInstanceFromNode(targetNode) { * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent * instance, or null if the node was not rendered by this React. */ -export function getInstanceFromNode(node) { - const inst = node[internalInstanceKey] || node[internalContainerInstanceKey]; +export function getInstanceFromNode(node: Node): Fiber | null { + const inst = + (node: any)[internalInstanceKey] || + (node: any)[internalContainerInstanceKey]; if (inst) { if ( inst.tag === HostComponent || @@ -145,7 +161,7 @@ export function getInstanceFromNode(node) { * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding * DOM node. */ -export function getNodeFromInstance(inst) { +export function getNodeFromInstance(inst: Fiber): Instance | TextInstance { if (inst.tag === HostComponent || inst.tag === HostText) { // In Fiber this, is just the state node right now. We assume it will be // a host component or host text. @@ -157,10 +173,15 @@ export function getNodeFromInstance(inst) { invariant(false, 'getNodeFromInstance: Invalid argument.'); } -export function getFiberCurrentPropsFromNode(node) { - return node[internalEventHandlersKey] || null; +export function getFiberCurrentPropsFromNode( + node: Instance | TextInstance | SuspenseInstance, +): Props { + return (node: any)[internalEventHandlersKey] || null; } -export function updateFiberProps(node, props) { - node[internalEventHandlersKey] = props; +export function updateFiberProps( + node: Instance | TextInstance | SuspenseInstance, + props: Props, +): void { + (node: any)[internalEventHandlersKey] = props; } diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index c115cd5a07b5..aac3d1f37bf1 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -824,7 +824,7 @@ export function getNextHydratableInstanceAfterSuspenseInstance( // SuspenseInstance. I.e. if its previous sibling is a Comment with // SUSPENSE_x_START_DATA. Otherwise, null. export function getParentSuspenseInstance( - targetInstance: Instance, + targetInstance: Node, ): null | SuspenseInstance { let node = targetInstance.previousSibling; // Skip past all nodes within this suspense boundary. diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js index 48a57fdb7585..5ff2964fcea8 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.js @@ -104,7 +104,7 @@ type DevToolsConfig = {| rendererPackageName: string, // Note: this actually *does* depend on Fiber internal fields. // Used by "inspect clicked DOM element" in React DevTools. - findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber, + findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null, // Used by RN in-app inspector. // This API is unfortunately RN-specific. // TODO: Change it to accept Fiber instead and type it properly. diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 0789c286ed4a..91abe7602d45 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -124,7 +124,7 @@ export const UserBlockingEvent: EventPriority = 1; export const ContinuousEvent: EventPriority = 2; export type ReactFundamentalComponentInstance = {| - currentFiber: mixed, + currentFiber: Object, instance: mixed, prevProps: null | Object, props: Object,