Flow type ReactDOMComponentTree (#18280)

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;
 }

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.

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.

packages/shared/ReactTypes.js

@@ -124,7 +124,7 @@ export const UserBlockingEvent: EventPriority = 1;
 export const ContinuousEvent: EventPriority = 2;
 
 export type ReactFundamentalComponentInstance<C, H> = {|
-  currentFiber: mixed,
+  currentFiber: Object,
   instance: mixed,
   prevProps: null | Object,
   props: Object,