Remove ReactFabricPublicInstance and used definition from ReactNativePrivateInterface (#26437)

rubennorte · web-flow · commit 9c54b29b44d2 · 2023-03-22T17:54:36.000Z
## Summary Now that React Native owns the definition for public instances in Fabric and ReactNativePrivateInterface provides the methods to create instances and access private fields (see facebook/react-native#36570), we can remove the definitions from React. After this PR, React Native public instances will be opaque types for React and it will only handle their creation but not their definition. This will make RN similar to DOM in how public instances are handled. This is a new version of #26418 which was closed without merging. ## How did you test this change? * Existing tests. * Manually synced the changes in this PR to React Native and tested it end to end in Meta's infra.
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -8,10 +8,6 @@
  */
 
 import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
-import {
-  createPublicInstance,
-  type ReactFabricHostComponent,
-} from './ReactFabricPublicInstance';
 import {create, diff} from './ReactNativeAttributePayload';
 import {dispatchEvent} from './ReactFabricEventEmitter';
 import {
@@ -23,6 +19,8 @@ import {
 import {
   ReactNativeViewConfigRegistry,
   deepFreezeAndThrowOnMutationInDev,
+  createPublicInstance,
+  type PublicInstance as ReactNativePublicInstance,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 const {
@@ -62,12 +60,12 @@ export type Instance = {
     // Reference to the React handle (the fiber)
     internalInstanceHandle: Object,
     // Exposed through refs.
-    publicInstance: ReactFabricHostComponent,
+    publicInstance: PublicInstance,
   },
 };
 export type TextInstance = {node: Node, ...};
 export type HydratableInstance = Instance | TextInstance;
-export type PublicInstance = ReactFabricHostComponent;
+export type PublicInstance = ReactNativePublicInstance;
 export type Container = number;
 export type ChildSet = Object;
 export type HostContext = $ReadOnly<{
diff --git a/packages/react-native-renderer/src/ReactFabricPublicInstance.js b/packages/react-native-renderer/src/ReactFabricPublicInstance.js
diff --git a/packages/react-native-renderer/src/ReactFabricPublicInstanceUtils.js b/packages/react-native-renderer/src/ReactFabricPublicInstanceUtils.js
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -17,10 +17,12 @@ import {
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
 // Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {
+  UIManager,
+  getNodeFromPublicInstance,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
-import {getNodeFromPublicInstance} from './ReactFabricPublicInstanceUtils';
 import {getNodeFromInternalInstanceHandle} from './ReactNativePublicCompat';
 
 const emptyObject = {};
diff --git a/packages/react-native-renderer/src/ReactNativePublicCompat.js b/packages/react-native-renderer/src/ReactNativePublicCompat.js
@@ -14,6 +14,8 @@ import type {ElementRef, ElementType} from 'react';
 import {
   UIManager,
   legacySendAccessibilityEvent,
+  getNodeFromPublicInstance,
+  getNativeTagFromPublicInstance,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {
@@ -23,11 +25,6 @@ import {
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 
-import {
-  getNodeFromPublicInstance,
-  getNativeTagFromPublicInstance,
-} from './ReactFabricPublicInstanceUtils';
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 export function findHostInstance_DEPRECATED<TElementType: ElementType>(
@@ -83,6 +80,7 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(
 
   // findHostInstance handles legacy vs. Fabric differences correctly
   // $FlowFixMe[incompatible-exact] we need to fix the definition of `HostComponent` to use NativeMethods as an interface, not as a type.
+  // $FlowFixMe[incompatible-return]
   return hostInstance;
 }
 
@@ -147,9 +145,8 @@ export function findNodeHandle(componentOrHandle: any): ?number {
     return hostInstance;
   }
 
-  // $FlowFixMe[prop-missing] For compatibility with legacy renderer instances
+  // $FlowFixMe[incompatible-type] For compatibility with legacy renderer instances
   if (hostInstance._nativeTag != null) {
-    // $FlowFixMe[incompatible-return]
     return hostInstance._nativeTag;
   }
 
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -7,6 +7,8 @@
  * @flow strict-local
  */
 
+export opaque type PublicInstance = mixed;
+
 module.exports = {
   get BatchedBridge() {
     return require('./BatchedBridge.js');
@@ -44,4 +46,13 @@ module.exports = {
   get RawEventEmitter() {
     return require('./RawEventEmitter').default;
   },
+  get getNativeTagFromPublicInstance() {
+    return require('./getNativeTagFromPublicInstance').default;
+  },
+  get getNodeFromPublicInstance() {
+    return require('./getNodeFromPublicInstance').default;
+  },
+  get createPublicInstance() {
+    return require('./createPublicInstance').default;
+  },
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/createPublicInstance.js
@@ -0,0 +1,21 @@
+/**
+ * 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 strict
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+export default function createPublicInstance(
+  tag: number,
+  viewConfig: mixed,
+  internalInstanceHandle: mixed,
+): PublicInstance {
+  return {
+    __nativeTag: tag,
+    __internalInstanceHandle: internalInstanceHandle,
+  };
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNativeTagFromPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNativeTagFromPublicInstance.js
@@ -0,0 +1,16 @@
+/**
+ * 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 strict
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+export default function getNativeTagFromPublicInstance(
+  publicInstance: PublicInstance,
+) {
+  return publicInstance.__nativeTag;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNodeFromPublicInstance.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/getNodeFromPublicInstance.js
@@ -0,0 +1,20 @@
+/**
+ * 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 strict
+ */
+
+import type {PublicInstance} from './ReactNativePrivateInterface';
+
+import {getNodeFromInternalInstanceHandle} from '../../../../ReactNativePublicCompat';
+
+export default function getNodeFromPublicInstance(
+  publicInstance: PublicInstance,
+) {
+  return getNodeFromInternalInstanceHandle(
+    publicInstance.__internalInstanceHandle,
+  );
+}
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -43,9 +43,9 @@ describe('ReactFabric', () => {
       require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
         .ReactNativeViewConfigRegistry.register;
     getNativeTagFromPublicInstance =
-      require('../ReactFabricPublicInstanceUtils').getNativeTagFromPublicInstance;
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNativeTagFromPublicInstance;
     getNodeFromPublicInstance =
-      require('../ReactFabricPublicInstanceUtils').getNodeFromPublicInstance;
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNodeFromPublicInstance;
 
     act = require('internal-test-utils').act;
   });
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
@@ -37,7 +37,7 @@ describe('created with ReactFabric called with ReactNative', () => {
       require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
         .ReactNativeViewConfigRegistry.register;
     getNativeTagFromPublicInstance =
-      require('../ReactFabricPublicInstanceUtils').getNativeTagFromPublicInstance;
+      require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface').getNativeTagFromPublicInstance;
   });
 
   it('find Fabric instances with the RN renderer', () => {
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
