From d2c27f5bff750dbb3d04abf6b26a9d2f1ac7d0b5 Mon Sep 17 00:00:00 2001 From: Eli White Date: Fri, 24 Aug 2018 14:01:57 -0700 Subject: [PATCH] Remove view configs from JS Summary: Apparently different apps have different implementations of view managers that support different props. This is a problem that we will need to address. Unfortunately, this means we can't have a static config defined in JS. We will need to find another approach to this problem. Reviewed By: sahrens Differential Revision: D9500178 fbshipit-source-id: b591559164fcf29f5fd43e13a0f2da15011491c6 --- .../Components/View/ViewNativeComponent.js | 17 +- .../View/ViewNativeComponentAndroidConfig.js | 287 ------------------ Libraries/Image/ImageViewNativeComponent.js | 19 +- .../ImageViewNativeComponentAndroidConfig.js | 212 ------------- .../Image/TextInlineImageNativeComponent.js | 133 +------- .../verifyComponentAttributeEquivalence.js | 52 ---- jest/setup.js | 3 +- 7 files changed, 5 insertions(+), 718 deletions(-) delete mode 100644 Libraries/Components/View/ViewNativeComponentAndroidConfig.js delete mode 100644 Libraries/Image/ImageViewNativeComponentAndroidConfig.js delete mode 100644 Libraries/Utilities/verifyComponentAttributeEquivalence.js diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index 677b253be..67e556379 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/Libraries/Components/View/ViewNativeComponent.js @@ -10,29 +10,14 @@ 'use strict'; -const AndroidConfig = require('ViewNativeComponentAndroidConfig'); -const Platform = require('Platform'); const ReactNative = require('ReactNative'); -const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence'); const requireNativeComponent = require('requireNativeComponent'); -const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry'); import type {ViewProps} from 'ViewPropTypes'; type ViewNativeComponentType = Class>; -let NativeViewComponent; -if (Platform.OS === 'android') { - if (__DEV__) { - verifyComponentAttributeEquivalence('RCTView', AndroidConfig); - } - - NativeViewComponent = ReactNativeViewConfigRegistry.register('RCTView', () => - require('ViewNativeComponentAndroidConfig'), - ); -} else { - NativeViewComponent = requireNativeComponent('RCTView'); -} +const NativeViewComponent = requireNativeComponent('RCTView'); module.exports = ((NativeViewComponent: any): ViewNativeComponentType); diff --git a/Libraries/Components/View/ViewNativeComponentAndroidConfig.js b/Libraries/Components/View/ViewNativeComponentAndroidConfig.js deleted file mode 100644 index b0fdf87f9..000000000 --- a/Libraries/Components/View/ViewNativeComponentAndroidConfig.js +++ /dev/null @@ -1,287 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); - -const processColor = require('processColor'); - -import type {ViewProps} from 'ViewPropTypes'; -import type {____ViewStyle_Internal} from 'StyleSheetTypes'; -import type {ReactNativeBaseComponentViewConfig} from 'ReactNativeTypes'; - -const colorHandler = {diff: null, process: processColor}; - -type Config = ReactNativeBaseComponentViewConfig< - $Keys | $Keys<____ViewStyle_Internal>, - $Keys<____ViewStyle_Internal>, ->; - -const ViewNativeComponentAndroidConfig: Config = { - bubblingEventTypes: { - topChange: { - phasedRegistrationNames: { - captured: 'onChangeCapture', - bubbled: 'onChange', - }, - }, - topTouchCancel: { - phasedRegistrationNames: { - captured: 'onTouchCancelCapture', - bubbled: 'onTouchCancel', - }, - }, - topTouchMove: { - phasedRegistrationNames: { - captured: 'onTouchMoveCapture', - bubbled: 'onTouchMove', - }, - }, - topTouchStart: { - phasedRegistrationNames: { - captured: 'onTouchStartCapture', - bubbled: 'onTouchStart', - }, - }, - topTouchEnd: { - phasedRegistrationNames: { - captured: 'onTouchEndCapture', - bubbled: 'onTouchEnd', - }, - }, - topSelect: { - phasedRegistrationNames: { - captured: 'onSelectCapture', - bubbled: 'onSelect', - }, - }, - }, - Commands: {setPressed: 2, hotspotUpdate: 1}, - directEventTypes: { - topLoadingError: {registrationName: 'onLoadingError'}, - topLayout: {registrationName: 'onLayout'}, - topScrollBeginDrag: {registrationName: 'onScrollBeginDrag'}, - topContentSizeChange: {registrationName: 'onContentSizeChange'}, - topMomentumScrollBegin: {registrationName: 'onMomentumScrollBegin'}, - topScrollEndDrag: {registrationName: 'onScrollEndDrag'}, - topMomentumScrollEnd: {registrationName: 'onMomentumScrollEnd'}, - topLoadingStart: {registrationName: 'onLoadingStart'}, - topSelectionChange: {registrationName: 'onSelectionChange'}, - topLoadingFinish: {registrationName: 'onLoadingFinish'}, - topMessage: {registrationName: 'onMessage'}, - topScroll: {registrationName: 'onScroll'}, - }, - NativeProps: { - accessibilityComponentType: 'String', - accessibilityHint: 'String', - accessibilityLabel: 'String', - accessibilityLiveRegion: 'String', - accessibilityRole: 'String', - accessibilityStates: 'Array', - accessible: 'boolean', - alignContent: 'String', - alignItems: 'String', - alignSelf: 'String', - aspectRatio: 'number', - backgroundColor: 'Color', - borderBottomColor: 'Color', - borderBottomEndRadius: 'number', - borderBottomLeftRadius: 'number', - borderBottomRightRadius: 'number', - borderBottomStartRadius: 'number', - borderBottomWidth: 'number', - borderColor: 'Color', - borderEndColor: 'Color', - borderEndWidth: 'number', - borderLeftColor: 'Color', - borderLeftWidth: 'number', - borderRadius: 'number', - borderRightColor: 'Color', - borderRightWidth: 'number', - borderStartColor: 'Color', - borderStartWidth: 'number', - borderStyle: 'String', - borderTopColor: 'Color', - borderTopEndRadius: 'number', - borderTopLeftRadius: 'number', - borderTopRightRadius: 'number', - borderTopStartRadius: 'number', - borderTopWidth: 'number', - borderWidth: 'number', - bottom: 'Dynamic', - collapsable: 'boolean', - display: 'String', - elevation: 'number', - end: 'Dynamic', - flex: 'number', - flexBasis: 'Dynamic', - flexDirection: 'String', - flexGrow: 'number', - flexShrink: 'number', - flexWrap: 'String', - hasTVPreferredFocus: 'boolean', - height: 'Dynamic', - hitSlop: 'Map', - importantForAccessibility: 'String', - justifyContent: 'String', - left: 'Dynamic', - margin: 'Dynamic', - marginBottom: 'Dynamic', - marginEnd: 'Dynamic', - marginHorizontal: 'Dynamic', - marginLeft: 'Dynamic', - marginRight: 'Dynamic', - marginStart: 'Dynamic', - marginTop: 'Dynamic', - marginVertical: 'Dynamic', - maxHeight: 'Dynamic', - maxWidth: 'Dynamic', - minHeight: 'Dynamic', - minWidth: 'Dynamic', - nativeBackgroundAndroid: 'Map', - nativeForegroundAndroid: 'Map', - nativeID: 'String', - needsOffscreenAlphaCompositing: 'boolean', - onLayout: 'boolean', - opacity: 'number', - overflow: 'String', - padding: 'Dynamic', - paddingBottom: 'Dynamic', - paddingEnd: 'Dynamic', - paddingHorizontal: 'Dynamic', - paddingLeft: 'Dynamic', - paddingRight: 'Dynamic', - paddingStart: 'Dynamic', - paddingTop: 'Dynamic', - paddingVertical: 'Dynamic', - pointerEvents: 'String', - position: 'String', - removeClippedSubviews: 'boolean', - renderToHardwareTextureAndroid: 'boolean', - right: 'Dynamic', - rotation: 'number', - scaleX: 'number', - scaleY: 'number', - start: 'Dynamic', - testID: 'String', - top: 'Dynamic', - transform: 'Array', - translateX: 'number', - translateY: 'number', - width: 'Dynamic', - zIndex: 'number', - }, - - uiViewClassName: 'RCTView', - validAttributes: { - accessibilityComponentType: true, - accessibilityHint: true, - accessibilityLabel: true, - accessibilityLiveRegion: true, - accessibilityRole: true, - accessibilityStates: true, - accessible: true, - alignContent: true, - alignItems: true, - alignSelf: true, - aspectRatio: true, - backgroundColor: colorHandler, - borderBottomColor: colorHandler, - borderBottomEndRadius: true, - borderBottomLeftRadius: true, - borderBottomRightRadius: true, - borderBottomStartRadius: true, - borderBottomWidth: true, - borderColor: colorHandler, - borderEndColor: colorHandler, - borderEndWidth: true, - borderLeftColor: colorHandler, - borderLeftWidth: true, - borderRadius: true, - borderRightColor: colorHandler, - borderRightWidth: true, - borderStartColor: colorHandler, - borderStartWidth: true, - borderStyle: true, - borderTopColor: colorHandler, - borderTopEndRadius: true, - borderTopLeftRadius: true, - borderTopRightRadius: true, - borderTopStartRadius: true, - borderTopWidth: true, - borderWidth: true, - bottom: true, - collapsable: true, - display: true, - elevation: true, - end: true, - flex: true, - flexBasis: true, - flexDirection: true, - flexGrow: true, - flexShrink: true, - flexWrap: true, - hasTVPreferredFocus: true, - height: true, - hitSlop: true, - importantForAccessibility: true, - justifyContent: true, - left: true, - margin: true, - marginBottom: true, - marginEnd: true, - marginHorizontal: true, - marginLeft: true, - marginRight: true, - marginStart: true, - marginTop: true, - marginVertical: true, - maxHeight: true, - maxWidth: true, - minHeight: true, - minWidth: true, - nativeBackgroundAndroid: true, - nativeForegroundAndroid: true, - nativeID: true, - needsOffscreenAlphaCompositing: true, - onLayout: true, - opacity: true, - overflow: true, - padding: true, - paddingBottom: true, - paddingEnd: true, - paddingHorizontal: true, - paddingLeft: true, - paddingRight: true, - paddingStart: true, - paddingTop: true, - paddingVertical: true, - pointerEvents: true, - position: true, - removeClippedSubviews: true, - renderToHardwareTextureAndroid: true, - right: true, - rotation: true, - scaleX: true, - scaleY: true, - start: true, - testID: true, - top: true, - transform: true, - translateX: true, - translateY: true, - width: true, - zIndex: true, - style: ReactNativeStyleAttributes, - }, -}; - -module.exports = ViewNativeComponentAndroidConfig; diff --git a/Libraries/Image/ImageViewNativeComponent.js b/Libraries/Image/ImageViewNativeComponent.js index eb7e30506..36943321e 100644 --- a/Libraries/Image/ImageViewNativeComponent.js +++ b/Libraries/Image/ImageViewNativeComponent.js @@ -10,25 +10,8 @@ 'use strict'; -const AndroidConfig = require('ImageViewNativeComponentAndroidConfig'); -const Platform = require('Platform'); - -const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence'); const requireNativeComponent = require('requireNativeComponent'); -const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry'); -let ImageViewNativeComponent; -if (Platform.OS === 'android') { - if (__DEV__) { - verifyComponentAttributeEquivalence('RCTImageView', AndroidConfig); - } - - ImageViewNativeComponent = ReactNativeViewConfigRegistry.register( - 'RCTImageView', - () => AndroidConfig, - ); -} else { - ImageViewNativeComponent = requireNativeComponent('RCTImageView'); -} +const ImageViewNativeComponent = requireNativeComponent('RCTImageView'); module.exports = ImageViewNativeComponent; diff --git a/Libraries/Image/ImageViewNativeComponentAndroidConfig.js b/Libraries/Image/ImageViewNativeComponentAndroidConfig.js deleted file mode 100644 index b50042740..000000000 --- a/Libraries/Image/ImageViewNativeComponentAndroidConfig.js +++ /dev/null @@ -1,212 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); - -const processColor = require('processColor'); - -const colorHandler = {diff: null, process: processColor}; - -const viewConfig = { - directEventTypes: { - topError: {registrationName: 'onError'}, - topLoad: {registrationName: 'onLoad'}, - topLoadEnd: {registrationName: 'onLoadEnd'}, - topLoadStart: {registrationName: 'onLoadStart'}, - }, - NativeProps: { - accessibilityComponentType: 'String', - accessibilityHint: 'String', - accessibilityLabel: 'String', - accessibilityLiveRegion: 'String', - accessibilityRole: 'String', - accessibilityStates: 'Array', - alignContent: 'String', - alignItems: 'String', - alignSelf: 'String', - aspectRatio: 'number', - backgroundColor: 'Color', - blurRadius: 'number', - borderBottomLeftRadius: 'number', - borderBottomRightRadius: 'number', - borderBottomWidth: 'number', - borderColor: 'Color', - borderEndWidth: 'number', - borderLeftWidth: 'number', - borderRadius: 'number', - borderRightWidth: 'number', - borderStartWidth: 'number', - borderTopLeftRadius: 'number', - borderTopRightRadius: 'number', - borderTopWidth: 'number', - borderWidth: 'number', - bottom: 'Dynamic', - defaultSrc: 'String', - display: 'String', - elevation: 'number', - end: 'Dynamic', - fadeDuration: 'number', - flex: 'number', - flexBasis: 'Dynamic', - flexDirection: 'String', - flexGrow: 'number', - flexShrink: 'number', - flexWrap: 'String', - headers: 'Map', - height: 'Dynamic', - importantForAccessibility: 'String', - justifyContent: 'String', - left: 'Dynamic', - loadingIndicatorSrc: 'String', - margin: 'Dynamic', - marginBottom: 'Dynamic', - marginEnd: 'Dynamic', - marginHorizontal: 'Dynamic', - marginLeft: 'Dynamic', - marginRight: 'Dynamic', - marginStart: 'Dynamic', - marginTop: 'Dynamic', - marginVertical: 'Dynamic', - maxHeight: 'Dynamic', - maxWidth: 'Dynamic', - minHeight: 'Dynamic', - minWidth: 'Dynamic', - nativeID: 'String', - onLayout: 'boolean', - opacity: 'number', - overflow: 'String', - overlayColor: 'number', - padding: 'Dynamic', - paddingBottom: 'Dynamic', - paddingEnd: 'Dynamic', - paddingHorizontal: 'Dynamic', - paddingLeft: 'Dynamic', - paddingRight: 'Dynamic', - paddingStart: 'Dynamic', - paddingTop: 'Dynamic', - paddingVertical: 'Dynamic', - position: 'String', - progressiveRenderingEnabled: 'boolean', - renderToHardwareTextureAndroid: 'boolean', - resizeMethod: 'String', - resizeMode: 'String', - right: 'Dynamic', - rotation: 'number', - scaleX: 'number', - scaleY: 'number', - shouldNotifyLoadEvents: 'boolean', - src: 'Array', - start: 'Dynamic', - testID: 'String', - tintColor: 'Color', - top: 'Dynamic', - transform: 'Array', - translateX: 'number', - translateY: 'number', - width: 'Dynamic', - zIndex: 'number', - }, - uiViewClassName: 'RCTImageView', - validAttributes: { - accessibilityComponentType: true, - accessibilityHint: true, - accessibilityLabel: true, - accessibilityLiveRegion: true, - accessibilityRole: true, - accessibilityStates: true, - alignContent: true, - alignItems: true, - alignSelf: true, - aspectRatio: true, - backgroundColor: colorHandler, - blurRadius: true, - borderBottomLeftRadius: true, - borderBottomRightRadius: true, - borderBottomWidth: true, - borderColor: colorHandler, - borderEndWidth: true, - borderLeftWidth: true, - borderRadius: true, - borderRightWidth: true, - borderStartWidth: true, - borderTopLeftRadius: true, - borderTopRightRadius: true, - borderTopWidth: true, - borderWidth: true, - bottom: true, - defaultSrc: true, - display: true, - elevation: true, - end: true, - fadeDuration: true, - flex: true, - flexBasis: true, - flexDirection: true, - flexGrow: true, - flexShrink: true, - flexWrap: true, - headers: true, - height: true, - importantForAccessibility: true, - justifyContent: true, - left: true, - loadingIndicatorSrc: true, - margin: true, - marginBottom: true, - marginEnd: true, - marginHorizontal: true, - marginLeft: true, - marginRight: true, - marginStart: true, - marginTop: true, - marginVertical: true, - maxHeight: true, - maxWidth: true, - minHeight: true, - minWidth: true, - nativeID: true, - onLayout: true, - opacity: true, - overflow: true, - overlayColor: true, - padding: true, - paddingBottom: true, - paddingEnd: true, - paddingHorizontal: true, - paddingLeft: true, - paddingRight: true, - paddingStart: true, - paddingTop: true, - paddingVertical: true, - position: true, - progressiveRenderingEnabled: true, - renderToHardwareTextureAndroid: true, - resizeMethod: true, - resizeMode: true, - right: true, - rotation: true, - scaleX: true, - scaleY: true, - shouldNotifyLoadEvents: true, - src: true, - start: true, - testID: true, - tintColor: colorHandler, - top: true, - transform: true, - translateX: true, - translateY: true, - width: true, - zIndex: true, - style: ReactNativeStyleAttributes, - }, -}; - -module.exports = viewConfig; diff --git a/Libraries/Image/TextInlineImageNativeComponent.js b/Libraries/Image/TextInlineImageNativeComponent.js index 4bca09389..65964f177 100644 --- a/Libraries/Image/TextInlineImageNativeComponent.js +++ b/Libraries/Image/TextInlineImageNativeComponent.js @@ -10,137 +10,8 @@ 'use strict'; -const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); -const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry'); +const requireNativeComponent = require('requireNativeComponent'); -const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence'); - -const viewConfig = { - NativeProps: { - alignContent: 'String', - alignItems: 'String', - alignSelf: 'String', - aspectRatio: 'number', - borderBottomWidth: 'number', - borderEndWidth: 'number', - borderLeftWidth: 'number', - borderRightWidth: 'number', - borderStartWidth: 'number', - borderTopWidth: 'number', - borderWidth: 'number', - bottom: 'Dynamic', - display: 'String', - end: 'Dynamic', - flex: 'number', - flexBasis: 'Dynamic', - flexDirection: 'String', - flexGrow: 'number', - flexShrink: 'number', - flexWrap: 'String', - headers: 'Map', - height: 'Dynamic', - justifyContent: 'String', - left: 'Dynamic', - margin: 'Dynamic', - marginBottom: 'Dynamic', - marginEnd: 'Dynamic', - marginHorizontal: 'Dynamic', - marginLeft: 'Dynamic', - marginRight: 'Dynamic', - marginStart: 'Dynamic', - marginTop: 'Dynamic', - marginVertical: 'Dynamic', - maxHeight: 'Dynamic', - maxWidth: 'Dynamic', - minHeight: 'Dynamic', - minWidth: 'Dynamic', - onLayout: 'boolean', - overflow: 'String', - padding: 'Dynamic', - paddingBottom: 'Dynamic', - paddingEnd: 'Dynamic', - paddingHorizontal: 'Dynamic', - paddingLeft: 'Dynamic', - paddingRight: 'Dynamic', - paddingStart: 'Dynamic', - paddingTop: 'Dynamic', - paddingVertical: 'Dynamic', - position: 'String', - right: 'Dynamic', - src: 'Array', - start: 'Dynamic', - tintColor: 'number', - top: 'Dynamic', - width: 'Dynamic', - }, - uiViewClassName: 'RCTTextInlineImage', - validAttributes: { - alignContent: true, - alignItems: true, - alignSelf: true, - aspectRatio: true, - borderBottomWidth: true, - borderEndWidth: true, - borderLeftWidth: true, - borderRightWidth: true, - borderStartWidth: true, - borderTopWidth: true, - borderWidth: true, - bottom: true, - display: true, - end: true, - flex: true, - flexBasis: true, - flexDirection: true, - flexGrow: true, - flexShrink: true, - flexWrap: true, - headers: true, - height: true, - justifyContent: true, - left: true, - margin: true, - marginBottom: true, - marginEnd: true, - marginHorizontal: true, - marginLeft: true, - marginRight: true, - marginStart: true, - marginTop: true, - marginVertical: true, - maxHeight: true, - maxWidth: true, - minHeight: true, - minWidth: true, - onLayout: true, - overflow: true, - padding: true, - paddingBottom: true, - paddingEnd: true, - paddingHorizontal: true, - paddingLeft: true, - paddingRight: true, - paddingStart: true, - paddingTop: true, - paddingVertical: true, - position: true, - right: true, - src: true, - start: true, - tintColor: true, - top: true, - width: true, - style: ReactNativeStyleAttributes, - }, -}; - -if (__DEV__) { - verifyComponentAttributeEquivalence('RCTTextInlineImage', viewConfig); -} - -const TextInlineImage = ReactNativeViewConfigRegistry.register( - 'RCTTextInlineImage', - () => viewConfig, -); +const TextInlineImage = requireNativeComponent('RCTTextInlineImage'); module.exports = TextInlineImage; diff --git a/Libraries/Utilities/verifyComponentAttributeEquivalence.js b/Libraries/Utilities/verifyComponentAttributeEquivalence.js deleted file mode 100644 index da3c78422..000000000 --- a/Libraries/Utilities/verifyComponentAttributeEquivalence.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const deepDiffer = require('deepDiffer'); -const getNativeComponentAttributes = require('getNativeComponentAttributes'); - -import type {ReactNativeBaseComponentViewConfig} from 'ReactNativeTypes'; - -/** - * The purpose of this function is to validate that the view config that - * native exposes for a given view manager is the same as the view config - * that is specified for that view manager in JS. - * - * In order to improve perf, we want to avoid calling into native to get - * the view config when each view manager is used. To do this, we are moving - * the configs to JS. In the future we will use these JS based view configs - * to codegen the view manager on native to ensure they stay in sync without - * this runtime check. - * - * If this function fails, that likely means a change was made to the native - * view manager without updating the JS config as well. Ideally you can make - * that direct change to the JS config. If you don't know what the differences - * are, the best approach I've found is to create a view that prints - * the return value of getNativeComponentAttributes, and then copying that - * text and pasting it back into JS: - * {JSON.stringify(getNativeComponentAttributes('RCTView'))} - * - * This is meant to be a stopgap until the time comes when we only have a - * single source of truth. I wonder if this message will still be here two - * years from now... - */ -function verifyComponentAttributeEquivalence( - componentName: string, - config: ReactNativeBaseComponentViewConfig<>, -) { - if (deepDiffer(getNativeComponentAttributes(componentName), config)) { - console.error( - `${componentName} config in JS does not match config specified by Native`, - ); - } -} - -module.exports = verifyComponentAttributeEquivalence; diff --git a/jest/setup.js b/jest/setup.js index 4d5b67749..491260d93 100644 --- a/jest/setup.js +++ b/jest/setup.js @@ -90,8 +90,7 @@ jest return ReactNative; }) - .mock('ensureComponentIsNative', () => () => true) - .mock('verifyComponentAttributeEquivalence', () => () => {}); + .mock('ensureComponentIsNative', () => () => true); const mockEmptyObject = {}; const mockNativeModules = {