[react-native] Use path-based imports instead of Haste for the RN ren…

…derer (#15604)

* [react-native] Use path-based imports instead of Haste for the RN renderer

To move React Native to standard path-based imports instead of Haste, the RN renderer that is generated from the code in this repo needs to use path-based imports as well since the generated code is vendored by RN. This commit makes it so the interface between the generated renderers and RN does not rely on Haste and instead uses a private interface explicitly defined by RN. This inverts control of the abstraction so that RN decides the internals to export rather than React deciding what to import.

On RN's side, a new module named `react-native/Libraries/ReactPrivate/ReactNativePrivateInterface` explicitly exports the modules used by the renderers in this repo. (There is also a private module for InitializeCore so that we can import it just for the side effects.) On React's side, the various renderer modules access RN internals through the explicit private interface.

The Rollup configuration becomes slimmer since the only external package is now `react-native`, and the individual modules are instead listed out in `ReactNativePrivateInterface`.

Task description: facebook/react-native#24770
Sister RN PR (needs to land before this one): facebook/react-native#24782

Test Plan: Ran unit tests and Flow in this repo. Generated the renderers and manually copied them over to the RN repo. Ran the RN tests and launched the RNTester app.

* Access natively defined "nativeFabricUIManager" instead of importing it

Some places in the Fabric renderers access `nativeFabricUIManager` (a natively defined global) instead of importing UIManager. While this is coupling across repos that depends on the timing of events, it is necessary until we have a way to defer top-level imports to run after `nativeFabricUIManager` is defined. So for consistency we use `nativeFabricUIManager` everywhere (see the comment in #15604 (review) for more context).

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

@@ -17,8 +17,10 @@ import type {
 
 import invariant from 'shared/invariant';
 // Modules provided by RN:
-import TextInputState from 'TextInputState';
-import UIManager from 'UIManager';
+import {
+  TextInputState,
+  UIManager,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {create} from './ReactNativeAttributePayload';
 import {

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

@@ -8,7 +8,7 @@
  */
 
 // Module provided by RN:
-import UIManager from 'UIManager';
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 const ReactFabricGlobalResponderHandler = {
   onChange: function(from: any, to: any, blockNativeResponder: boolean) {

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

@@ -18,31 +18,36 @@ import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
-import {get as getViewConfigForType} from 'ReactNativeViewConfigRegistry';
 
-import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
 // Modules provided by RN:
-import TextInputState from 'TextInputState';
 import {
+  ReactNativeViewConfigRegistry,
+  TextInputState,
+  deepFreezeAndThrowOnMutationInDev,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+const {
   createNode,
   cloneNode,
   cloneNodeWithNewChildren,
   cloneNodeWithNewChildrenAndProps,
   cloneNodeWithNewProps,
-  createChildSet as createChildNodeSet,
-  appendChild as appendChildNode,
-  appendChildToSet as appendChildNodeToSet,
+  createChildSet: createChildNodeSet,
+  appendChild: appendChildNode,
+  appendChildToSet: appendChildNodeToSet,
   completeRoot,
   registerEventHandler,
-  measure as fabricMeasure,
-  measureInWindow as fabricMeasureInWindow,
-  measureLayout as fabricMeasureLayout,
-} from 'FabricUIManager';
+  measure: fabricMeasure,
+  measureInWindow: fabricMeasureInWindow,
+  measureLayout: fabricMeasureLayout,
+} = nativeFabricUIManager;
+
+const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 // Counter for uniquely identifying views.
 // % 10 === 1 means it is a rootTag.

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

@@ -8,8 +8,10 @@
  */
 
 // Modules provided by RN:
-import deepDiffer from 'deepDiffer';
-import flattenStyle from 'flattenStyle';
+import {
+  deepDiffer,
+  flattenStyle,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import type {AttributeConfiguration} from './ReactNativeTypes';
 

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

@@ -13,13 +13,17 @@ import {
   accumulateDirectDispatches,
 } from 'events/EventPropagators';
 import type {TopLevelType} from 'events/TopLevelEventTypes';
-import {
+import SyntheticEvent from 'events/SyntheticEvent';
+import invariant from 'shared/invariant';
+
+// Module provided by RN:
+import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+const {
   customBubblingEventTypes,
   customDirectEventTypes,
   eventTypes,
-} from 'ReactNativeViewConfigRegistry';
-import SyntheticEvent from 'events/SyntheticEvent';
-import invariant from 'shared/invariant';
+} = ReactNativeViewConfigRegistry;
 
 const ReactNativeBridgeEventPlugin = {
   eventTypes: eventTypes,

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

@@ -18,8 +18,10 @@ import type {
 
 import React from 'react';
 // Modules provided by RN:
-import TextInputState from 'TextInputState';
-import UIManager from 'UIManager';
+import {
+  TextInputState,
+  UIManager,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {create} from './ReactNativeAttributePayload';
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';

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

@@ -17,8 +17,10 @@ import type {
 import type {Instance} from './ReactNativeHostConfig';
 
 // Modules provided by RN:
-import TextInputState from 'TextInputState';
-import UIManager from 'UIManager';
+import {
+  TextInputState,
+  UIManager,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {create} from './ReactNativeAttributePayload';
 import {

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

@@ -17,7 +17,7 @@ import getComponentName from 'shared/getComponentName';
 import {HostComponent} from 'shared/ReactWorkTags';
 import invariant from 'shared/invariant';
 // Module provided by RN:
-import UIManager from 'UIManager';
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 

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

@@ -8,7 +8,7 @@
  */
 
 // Module provided by RN:
-import UIManager from 'UIManager';
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 const ReactNativeGlobalResponderHandler = {
   onChange: function(from: any, to: any, blockNativeResponder: boolean) {

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

@@ -13,10 +13,12 @@ import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 import invariant from 'shared/invariant';
 
 // Modules provided by RN:
-import UIManager from 'UIManager';
-import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
+import {
+  ReactNativeViewConfigRegistry,
+  UIManager,
+  deepFreezeAndThrowOnMutationInDev,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-import {get as getViewConfigForType} from 'ReactNativeViewConfigRegistry';
 import {create, diff} from './ReactNativeAttributePayload';
 import {
   precacheFiberNode,
@@ -25,6 +27,8 @@ import {
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
+const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
+
 export type Type = string;
 export type Props = Object;
 export type Container = number;

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

@@ -20,7 +20,7 @@ import ReactNativeGlobalResponderHandler from './ReactNativeGlobalResponderHandl
 import ResponderEventPlugin from 'events/ResponderEventPlugin';
 
 // Module provided by RN:
-import RCTEventEmitter from 'RCTEventEmitter';
+import {RCTEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 /**
  * Register the event emitter with the native bridge

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

@@ -14,7 +14,7 @@
  * TODO: require this in packager, not in React #10932517
  */
 // Module provided by RN:
-import 'InitializeCore';
+import 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore';
 
 import {injection as EventPluginHubInjection} from 'events/EventPluginHub';
 import ResponderEventPlugin from 'events/ResponderEventPlugin';

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

@@ -33,7 +33,7 @@ import {
 } from 'events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 // Module provided by RN:
-import UIManager from 'UIManager';
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import NativeMethodsMixin from './NativeMethodsMixin';
 import ReactNativeComponent from './ReactNativeComponent';

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

@@ -13,7 +13,7 @@ import {warnForStyleProps} from './NativeMethodsMixinUtils';
 import warningWithoutStack from 'shared/warningWithoutStack';
 
 // Module provided by RN:
-import UIManager from 'UIManager';
+import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 export function setNativeProps(handle: any, nativeProps: Object): void {
   if (handle._nativeTag == null) {

packages/react-native-renderer/src/__mocks__/FabricUIManager.js → packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js

@@ -172,4 +172,4 @@ const RCTFabricUIManager = {
   }),
 };
 
-module.exports = RCTFabricUIManager;
+global.nativeFabricUIManager = RCTFabricUIManager;

packages/react-native-renderer/src/__mocks__/InitializeCore.js → packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore.js

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
  */
 
 'use strict';

packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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-local
+ */
+
+module.exports = {
+  get BatchedBridge() {
+    return require('./BatchedBridge.js');
+  },
+  get ExceptionsManager() {
+    return require('./ExceptionsManager');
+  },
+  get Platform() {
+    return require('./Platform');
+  },
+  get RCTEventEmitter() {
+    return require('./RCTEventEmitter');
+  },
+  get ReactNativeViewConfigRegistry() {
+    return require('./ReactNativeViewConfigRegistry');
+  },
+  get TextInputState() {
+    return require('./TextInputState');
+  },
+  get UIManager() {
+    return require('./UIManager');
+  },
+  get deepDiffer() {
+    return require('./deepDiffer');
+  },
+  get deepFreezeAndThrowOnMutationInDev() {
+    return require('./deepFreezeAndThrowOnMutationInDev');
+  },
+  get flattenStyle() {
+    return require('./flattenStyle');
+  },
+};