RN: Cleanup ViewConfig Types

Summary:
Cleans up the Flow types for React Native ViewConfig. After this diff, we will have two new canonical types:

- `ViewConfig` which is what we get from native and what is registered in the `ReactNativeViewConfigRegistry`.
- `PartialViewConfig` which is what we generate statically and augment at runtime before registering with the `ReactNativeViewConfigRegistry`.

Changelog:
[Internal]

Reviewed By: JoshuaGross

Differential Revision: D25075299

fbshipit-source-id: 4b53927b2db437b615447b711e83db355d0cfa55

Libraries/Components/Picker/AndroidDialogPickerViewConfig.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {GeneratedViewConfig} from '../../Utilities/registerGeneratedViewConfig';
+import type {PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 
 const AndroidDialogPickerViewConfig = {
   uiViewClassName: 'AndroidDialogPicker',
@@ -27,4 +27,4 @@ const AndroidDialogPickerViewConfig = {
   },
 };
 
-module.exports = (AndroidDialogPickerViewConfig: GeneratedViewConfig);
+module.exports = (AndroidDialogPickerViewConfig: PartialViewConfig);

Libraries/Components/Picker/RCTPickerViewConfig.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import type {ReactNativeBaseComponentViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 
 const RCTPickerViewConfig = {
   uiViewClassName: 'RCTPicker',
@@ -38,4 +38,4 @@ const RCTPickerViewConfig = {
   },
 };
 
-module.exports = (RCTPickerViewConfig: ReactNativeBaseComponentViewConfig<>);
+module.exports = (RCTPickerViewConfig: ViewConfig);

Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {GeneratedViewConfig} from '../../Utilities/registerGeneratedViewConfig';
+import type {PartialViewConfig} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 
 const ScrollViewViewConfig = {
   uiViewClassName: 'RCTScrollView',
@@ -72,4 +72,4 @@ const ScrollViewViewConfig = {
   },
 };
 
-module.exports = (ScrollViewViewConfig: GeneratedViewConfig);
+module.exports = (ScrollViewViewConfig: PartialViewConfig);

Libraries/Components/TextInput/AndroidTextInputViewConfig.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import type {ReactNativeBaseComponentViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 
 const AndroidTextInputViewConfig = {
   uiViewClassName: 'AndroidTextInput',
@@ -111,4 +111,4 @@ const AndroidTextInputViewConfig = {
   },
 };
 
-module.exports = (AndroidTextInputViewConfig: ReactNativeBaseComponentViewConfig<>);
+module.exports = (AndroidTextInputViewConfig: ViewConfig);

Libraries/Components/TextInput/RCTSinglelineTextInputViewConfig.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
-import type {ReactNativeBaseComponentViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 
 const RCTSinglelineTextInputViewConfig = {
   uiViewClassName: 'RCTSinglelineTextInputView',
@@ -131,4 +131,4 @@ const RCTSinglelineTextInputViewConfig = {
   },
 };
 
-module.exports = (RCTSinglelineTextInputViewConfig: ReactNativeBaseComponentViewConfig<>);
+module.exports = (RCTSinglelineTextInputViewConfig: ViewConfig);

Libraries/Image/ImageViewViewConfig.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
-import type {ReactNativeBaseComponentViewConfig} from '../Renderer/shims/ReactNativeTypes';
+import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
 
 const ImageViewViewConfig = {
   uiViewClassName: 'RCTImageView',
@@ -65,4 +65,4 @@ const ImageViewViewConfig = {
   },
 };
 
-module.exports = (ImageViewViewConfig: ReactNativeBaseComponentViewConfig<>);
+module.exports = (ImageViewViewConfig: ViewConfig);

Libraries/Renderer/shims/ReactNativeTypes.js

@@ -33,10 +33,10 @@ export type MeasureLayoutOnSuccessCallback = (
   height: number,
 ) => void;
 
-type AttributeType =
+type AttributeType<T> =
   | true
   | $ReadOnly<{|
-      diff?: <T>(arg1: T, arg2: T) => boolean,
+      diff?: (arg1: T, arg2: T) => boolean,
       process?: (arg1: any) => any,
     |}>;
 
@@ -44,38 +44,40 @@ export type AttributeConfiguration<
   TProps = string,
   TStyleProps = string,
 > = $ReadOnly<{
-  [propName: TProps]: AttributeType,
-  style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>,
+  [propName: TProps]: AttributeType<any>,
+  style: $ReadOnly<{[propName: TStyleProps]: AttributeType<any>, ...}>,
   ...
 }>;
 
-export type ReactNativeBaseComponentViewConfig<
-  TProps = string,
-  TStyleProps = string,
-> = $ReadOnly<{|
+export type ViewConfig = $ReadOnly<{
+  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
+  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
   baseModuleName?: string,
   bubblingEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
-      phasedRegistrationNames: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
+      phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
-      |}>,
-    |}>,
+      }>,
+    }>,
     ...,
   }>,
-  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
   directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
       registrationName: string,
-    |}>,
+    }>,
     ...,
   }>,
-  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
   uiViewClassName: string,
-  validAttributes: AttributeConfiguration<TProps, TStyleProps>,
-|}>;
+  validAttributes: AttributeConfiguration<string, string>,
+}>;
 
-export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>;
+export type PartialViewConfig = $ReadOnly<{
+  bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
+  directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
+  uiViewClassName: string,
+  validAttributes?: $ReadOnly<{[propName: string]: AttributeType<any>}>,
+}>;
 
 export type NativeMethods = {
   blur(): void,
@@ -182,7 +184,7 @@ export type ReactNativeEventTarget = {
   node: Object,
   canonical: {
     _nativeTag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    viewConfig: ViewConfig,
     currentProps: Object,
     _internalInstanceHandle: Object,
     ...

Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -8,16 +8,10 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
-import type {
-  ReactNativeBaseComponentViewConfig,
-  ViewConfigGetter,
-} from './ReactNativeTypes';
-
-const invariant = require('invariant');
+import {type ViewConfig} from './ReactNativeTypes';
+import invariant from 'invariant';
 
 // Event configs
 const customBubblingEventTypes: {
@@ -42,9 +36,7 @@ exports.customDirectEventTypes = customDirectEventTypes;
 const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
 
-function processEventTypes(
-  viewConfig: ReactNativeBaseComponentViewConfig<>,
-): void {
+function processEventTypes(viewConfig: ViewConfig): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
 
   if (__DEV__) {
@@ -82,7 +74,7 @@ function processEventTypes(
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
  */
-exports.register = function(name: string, callback: ViewConfigGetter): string {
+exports.register = function(name: string, callback: () => ViewConfig): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
@@ -103,7 +95,7 @@ exports.register = function(name: string, callback: ViewConfigGetter): string {
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
+exports.get = function(name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);

Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -11,8 +11,7 @@
 'use strict';
 
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
-import type {ViewConfigGetter} from './ReactNativeTypes';
+import {type ViewConfig} from './ReactNativeTypes';
 
 const {register} = ReactNativeViewConfigRegistry;
 
@@ -26,7 +25,7 @@ const {register} = ReactNativeViewConfigRegistry;
  */
 const createReactNativeComponentClass = function(
   name: string,
-  callback: ViewConfigGetter,
+  callback: () => ViewConfig,
 ): string {
   return register(name, callback);
 };

Libraries/Utilities/registerGeneratedViewConfig.js

@@ -10,43 +10,15 @@
 
 'use strict';
 
+import {type PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
 import ReactNativeViewConfigRegistry from '../Renderer/shims/ReactNativeViewConfigRegistry';
 import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
 import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
 import verifyComponentAttributeEquivalence from './verifyComponentAttributeEquivalence';
 
-export type GeneratedViewConfig = {
-  uiViewClassName: string,
-  bubblingEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
-      phasedRegistrationNames: $ReadOnly<{|
-        captured: string,
-        bubbled: string,
-      |}>,
-    |}>,
-    ...,
-  }>,
-  directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
-      registrationName: string,
-    |}>,
-    ...,
-  }>,
-  validAttributes?: {
-    [propName: string]:
-      | true
-      | $ReadOnly<{|
-          diff?: <T>(arg1: any, arg2: any) => boolean,
-          process?: (arg1: any) => any,
-        |}>,
-    ...,
-  },
-  ...
-};
-
 function registerGeneratedViewConfig(
   componentName: string,
-  viewConfig: GeneratedViewConfig,
+  viewConfig: PartialViewConfig,
 ) {
   const staticViewConfig = {
     uiViewClassName: componentName,

Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import ReactNativeViewViewConfig from '../Components/View/ReactNativeViewViewConfig';
-import type {ReactNativeBaseComponentViewConfig} from '../Renderer/shims/ReactNativeTypes';
+import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
 
 const IGNORED_KEYS = ['transform', 'hitSlop'];
 
@@ -39,8 +39,8 @@ const IGNORED_KEYS = ['transform', 'hitSlop'];
  * years from now...
  */
 export default function verifyComponentAttributeEquivalence(
-  nativeViewConfig: ReactNativeBaseComponentViewConfig<>,
-  staticViewConfig: ReactNativeBaseComponentViewConfig<>,
+  nativeViewConfig: ViewConfig,
+  staticViewConfig: ViewConfig,
 ) {
   for (const prop of [
     'validAttributes',
@@ -101,7 +101,7 @@ export function lefthandObjectDiff(leftObj: Object, rightObj: Object): Object {
 }
 
 export function getConfigWithoutViewProps(
-  viewConfig: ReactNativeBaseComponentViewConfig<>,
+  viewConfig: ViewConfig,
   propName: string,
 ): {...} {
   if (!viewConfig[propName]) {