[RN] Move view config registry to shims (#12569)

* Move view config registry to shims

This ensures that both Fabric and RN renderers share the same view config
registry since it is stateful.

I had to duplicate in the mocks for testing.

* Move createReactNativeComponentClass to shims and delete internal usage

Since createReactNativeComponentClass is just an alias for the register
there's no need to bundle it. This file should probably just move back
to RN too.

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

@@ -21,7 +21,6 @@ import ReactNativeComponent from './ReactNativeComponent';
 import * as ReactNativeComponentTree from './ReactNativeComponentTree';
 import ReactFabricRenderer from './ReactFabricRenderer';
 import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
-import createReactNativeComponentClass from './createReactNativeComponentClass';
 import {injectFindHostInstance} from './findNodeHandle';
 import findNumericNodeHandle from './findNumericNodeHandle';
 
@@ -73,7 +72,6 @@ const ReactFabric: ReactFabricType = {
     NativeMethodsMixin,
     // Used by react-native-github/Libraries/ components
     ReactNativeComponentTree, // ScrollResponder
-    createReactNativeComponentClass, // RCTText, RCTView, ReactNativeART
   },
 };
 

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

@@ -18,7 +18,7 @@ import type {
 import {mountSafeCallback, warnForStyleProps} from './NativeMethodsMixinUtils';
 import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';
 import * as ReactNativeFrameScheduling from './ReactNativeFrameScheduling';
-import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';
+import * as ReactNativeViewConfigRegistry from 'ReactNativeViewConfigRegistry';
 import ReactFiberReconciler from 'react-reconciler';
 
 import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';

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

@@ -12,7 +12,7 @@ import {
   accumulateTwoPhaseDispatches,
   accumulateDirectDispatches,
 } from 'events/EventPropagators';
-import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';
+import * as ReactNativeViewConfigRegistry from 'ReactNativeViewConfigRegistry';
 import SyntheticEvent from 'events/SyntheticEvent';
 import invariant from 'fbjs/lib/invariant';
 

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

@@ -16,7 +16,7 @@ import invariant from 'fbjs/lib/invariant';
 import UIManager from 'UIManager';
 import deepFreezeAndThrowOnMutationInDev from 'deepFreezeAndThrowOnMutationInDev';
 
-import * as ReactNativeViewConfigRegistry from './ReactNativeViewConfigRegistry';
+import * as ReactNativeViewConfigRegistry from 'ReactNativeViewConfigRegistry';
 import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';
 import {
   precacheFiberNode,

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

@@ -25,7 +25,6 @@ import ReactNativeComponent from './ReactNativeComponent';
 import * as ReactNativeComponentTree from './ReactNativeComponentTree';
 import ReactNativeFiberRenderer from './ReactNativeFiberRenderer';
 import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';
-import createReactNativeComponentClass from './createReactNativeComponentClass';
 import {injectFindHostInstance} from './findNodeHandle';
 import findNumericNodeHandle from './findNumericNodeHandle';
 
@@ -98,7 +97,6 @@ const ReactNativeRenderer: ReactNativeType = {
     NativeMethodsMixin,
     // Used by react-native-github/Libraries/ components
     ReactNativeComponentTree, // ScrollResponder
-    createReactNativeComponentClass, // RCTText, RCTView, ReactNativeART
     computeComponentStackForErrorReporting,
   },
 };

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

@@ -71,10 +71,6 @@ export type NativeMethodsMixinType = {
 
 type SecretInternalsType = {
   NativeMethodsMixin: NativeMethodsMixinType,
-  createReactNativeComponentClass(
-    name: string,
-    callback: ViewConfigGetter,
-  ): any,
   ReactNativeComponentTree: any,
   // TODO (bvaughn) Decide which additional types to expose here?
   // And how much information to fill in for the above types.

packages/react-native-renderer/src/ReactNativeViewConfigRegistry.js → packages/react-native-renderer/src/__mocks__/ReactNativeViewConfigRegistry.js

@@ -6,18 +6,23 @@
  *
  * @flow
  */
+'use strict';
 
 import type {
   ReactNativeBaseComponentViewConfig,
   ViewConfigGetter,
 } from './ReactNativeTypes';
 
-import invariant from 'fbjs/lib/invariant';
+const invariant = require('fbjs/lib/invariant');
 
 // Event configs
-export const customBubblingEventTypes = {};
-export const customDirectEventTypes = {};
-export const eventTypes = {};
+const customBubblingEventTypes = {};
+const customDirectEventTypes = {};
+const eventTypes = {};
+
+exports.customBubblingEventTypes = customBubblingEventTypes;
+exports.customDirectEventTypes = customDirectEventTypes;
+exports.eventTypes = eventTypes;
 
 const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
@@ -64,22 +69,22 @@ function processEventTypes(
  * The callback is deferred until the view is actually rendered.
  * This is done to avoid causing Prepack deopts.
  */
-export function register(name: string, callback: ViewConfigGetter): string {
+exports.register = function(name: string, callback: ViewConfigGetter): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
     name,
   );
   viewConfigCallbacks.set(name, callback);
   return name;
-}
+};
 
 /**
  * Retrieves a config for the specified view.
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-export function get(name: string): ReactNativeBaseComponentViewConfig {
+exports.get = function(name: string): ReactNativeBaseComponentViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
@@ -97,4 +102,4 @@ export function get(name: string): ReactNativeBaseComponentViewConfig {
   }
   invariant(viewConfig, 'View config not found for name %s', name);
   return viewConfig;
-}
+};

packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js

@@ -28,8 +28,8 @@ describe('ReactFabric', () => {
     ReactFabric = require('react-native-renderer/fabric');
     FabricUIManager = require('FabricUIManager');
     UIManager = require('UIManager');
-    createReactNativeComponentClass = require('../createReactNativeComponentClass')
-      .default;
+    createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+      .register;
   });
 
   it('should be able to create and render a native component', () => {

packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js

@@ -26,8 +26,8 @@ describe('ReactFabric', () => {
 
     React = require('react');
     ReactFabric = require('react-native-renderer/fabric');
-    createReactNativeComponentClass = require('../createReactNativeComponentClass')
-      .default;
+    createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+      .register;
   });
 
   it('find Fabric nodes with the RN renderer', () => {

packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js

@@ -25,8 +25,8 @@ describe('ReactNativeError', () => {
 
     React = require('react');
     ReactNative = require('react-native-renderer');
-    createReactNativeComponentClass = require('../createReactNativeComponentClass')
-      .default;
+    createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+      .register;
     computeComponentStackForErrorReporting =
       ReactNative.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .computeComponentStackForErrorReporting;

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.internal.js

@@ -69,8 +69,8 @@ beforeEach(() => {
   ReactNative = require('react-native-renderer');
   ResponderEventPlugin = require('events/ResponderEventPlugin').default;
   UIManager = require('UIManager');
-  createReactNativeComponentClass = require('../createReactNativeComponentClass')
-    .default;
+  createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+    .register;
 });
 
 it('fails if unknown/unsupported event types are dispatched', () => {

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

@@ -22,8 +22,8 @@ describe('ReactNative', () => {
     React = require('react');
     ReactNative = require('react-native-renderer');
     UIManager = require('UIManager');
-    createReactNativeComponentClass = require('../createReactNativeComponentClass')
-      .default;
+    createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+      .register;
   });
 
   it('should be able to create and render a native component', () => {

packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.internal.js

@@ -18,8 +18,8 @@ describe('createReactNativeComponentClass', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    createReactNativeComponentClass = require('../createReactNativeComponentClass')
-      .default;
+    createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
+      .register;
     React = require('react');
     ReactNative = require('react-native-renderer');
   });

scripts/flow/react-native-host-hooks.js

@@ -9,6 +9,11 @@
 
 /* eslint-disable */
 
+import type {
+  ReactNativeBaseComponentViewConfig,
+  ViewConfigGetter,
+} from 'react-native-renderer/src/ReactNativeTypes';
+
 declare module 'deepDiffer' {
   declare module.exports: (one: any, two: any) => boolean;
 }
@@ -142,11 +147,11 @@ declare module 'BatchedBridge' {
   declare function registerCallableModule(name: string, module: Object): void;
 }
 
-declare module 'CSComponent' {
-  declare type Element = any;
-  declare type Options<Instance> = any;
-}
+declare module 'ReactNativeViewConfigRegistry' {
+  declare var customBubblingEventTypes: Object;
+  declare var customDirectEventTypes: Object;
+  declare var eventTypes: Object;
 
-declare module 'CSStatefulComponent' {
-  declare function CSStatefulComponent(spec: any): any;
+  declare function register(name: string, callback: ViewConfigGetter): string;
+  declare function get(name: string): ReactNativeBaseComponentViewConfig;
 }

scripts/rollup/bundles.js

@@ -124,10 +124,10 @@ const bundles = [
       'RCTEventEmitter',
       'TextInputState',
       'UIManager',
-      'View',
       'deepDiffer',
       'deepFreezeAndThrowOnMutationInDev',
       'flattenStyle',
+      'ReactNativeViewConfigRegistry',
     ],
   },
 
@@ -146,10 +146,10 @@ const bundles = [
       'TextInputState',
       'UIManager',
       'FabricUIManager',
-      'View',
       'deepDiffer',
       'deepFreezeAndThrowOnMutationInDev',
       'flattenStyle',
+      'ReactNativeViewConfigRegistry',
     ],
   },