From 8336f19aa80c6646d6969fa61e34420776d884be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Thu, 25 Feb 2021 21:10:17 +0000 Subject: [PATCH] Update React Native types (#20883) --- .../react-native-renderer/src/ReactFabric.js | 19 ++- .../src/ReactFabricHostConfig.js | 6 +- .../src/ReactNativeAttributePayload.js | 26 ++-- .../src/ReactNativeFiberHostComponent.js | 6 +- .../src/ReactNativeRenderer.js | 10 +- .../src/ReactNativeTypes.js | 132 ++++++++++-------- 6 files changed, 114 insertions(+), 85 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 03ad183c37df4..9761124e7da65 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -9,7 +9,7 @@ import type {HostComponent} from './ReactNativeTypes'; import type {ReactNodeList} from 'shared/ReactTypes'; -import type {ElementRef} from 'react'; +import type {ElementRef, Element, ElementType} from 'react'; import './ReactFabricInjection'; @@ -47,8 +47,8 @@ import getComponentName from 'shared/getComponentName'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -function findHostInstance_DEPRECATED( - componentOrHandle: any, +function findHostInstance_DEPRECATED( + componentOrHandle: ?(ElementRef | number), ): ?ElementRef> { if (__DEV__) { const owner = ReactCurrentOwner.current; @@ -70,10 +70,14 @@ function findHostInstance_DEPRECATED( if (componentOrHandle == null) { return null; } + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN if (componentOrHandle._nativeTag) { + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN return componentOrHandle; } + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) { + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN return componentOrHandle.canonical; } let hostInstance; @@ -194,10 +198,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) { } function render( - element: React$Element, - containerTag: any, - callback: ?Function, -) { + element: Element, + containerTag: number, + callback: ?() => void, +): ?ElementRef { let root = roots.get(containerTag); if (!root) { @@ -208,6 +212,7 @@ function render( } updateContainer(element, root, null, callback); + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN return getPublicRootInstance(root); } diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index e06652048e3da..85eb2a741ffac 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -14,7 +14,7 @@ import type { MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, NativeMethods, - ReactNativeBaseComponentViewConfig, + ViewConfig, TouchedViewDataAtPoint, } from './ReactNativeTypes'; @@ -111,13 +111,13 @@ if (registerEventHandler) { */ class ReactFabricHostComponent { _nativeTag: number; - viewConfig: ReactNativeBaseComponentViewConfig<>; + viewConfig: ViewConfig; currentProps: Props; _internalInstanceHandle: Object; constructor( tag: number, - viewConfig: ReactNativeBaseComponentViewConfig<>, + viewConfig: ViewConfig, props: Props, internalInstanceHandle: Object, ) { diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js index 5804d83b5dc59..fa1187bc339bc 100644 --- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js +++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js @@ -49,7 +49,7 @@ function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean { function restoreDeletedValuesInNestedArray( updatePayload: Object, node: NestedNode, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ) { if (Array.isArray(node)) { let i = node.length; @@ -107,7 +107,7 @@ function diffNestedArrayProperty( updatePayload: null | Object, prevArray: Array, nextArray: Array, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { const minLength = prevArray.length < nextArray.length ? prevArray.length : nextArray.length; @@ -145,7 +145,7 @@ function diffNestedProperty( updatePayload: null | Object, prevProp: NestedNode, nextProp: NestedNode, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { if (!updatePayload && prevProp === nextProp) { // If no properties have been added, then we can bail out quickly on object @@ -206,7 +206,7 @@ function diffNestedProperty( function addNestedProperty( updatePayload: null | Object, nextProp: NestedNode, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ) { if (!nextProp) { return updatePayload; @@ -236,7 +236,7 @@ function addNestedProperty( function clearNestedProperty( updatePayload: null | Object, prevProp: NestedNode, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { if (!prevProp) { return updatePayload; @@ -268,7 +268,7 @@ function diffProperties( updatePayload: null | Object, prevProps: Object, nextProps: Object, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { let attributeConfig; let nextProp; @@ -369,13 +369,13 @@ function diffProperties( updatePayload, prevProp, nextProp, - ((attributeConfig: any): AttributeConfiguration<>), + ((attributeConfig: any): AttributeConfiguration), ); if (removedKeyCount > 0 && updatePayload) { restoreDeletedValuesInNestedArray( updatePayload, nextProp, - ((attributeConfig: any): AttributeConfiguration<>), + ((attributeConfig: any): AttributeConfiguration), ); removedKeys = null; } @@ -426,7 +426,7 @@ function diffProperties( updatePayload = clearNestedProperty( updatePayload, prevProp, - ((attributeConfig: any): AttributeConfiguration<>), + ((attributeConfig: any): AttributeConfiguration), ); } } @@ -439,7 +439,7 @@ function diffProperties( function addProperties( updatePayload: null | Object, props: Object, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { // TODO: Fast path return diffProperties(updatePayload, emptyObject, props, validAttributes); @@ -452,7 +452,7 @@ function addProperties( function clearProperties( updatePayload: null | Object, prevProps: Object, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { // TODO: Fast path return diffProperties(updatePayload, prevProps, emptyObject, validAttributes); @@ -460,7 +460,7 @@ function clearProperties( export function create( props: Object, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { return addProperties( null, // updatePayload @@ -472,7 +472,7 @@ export function create( export function diff( prevProps: Object, nextProps: Object, - validAttributes: AttributeConfiguration<>, + validAttributes: AttributeConfiguration, ): null | Object { return diffProperties( null, // updatePayload diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js index a4c90fa3f7be1..8048144431826 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js +++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js @@ -14,7 +14,7 @@ import type { MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, NativeMethods, - ReactNativeBaseComponentViewConfig, + ViewConfig, } from './ReactNativeTypes'; import type {Instance} from './ReactNativeHostConfig'; @@ -34,11 +34,11 @@ class ReactNativeFiberHostComponent { _children: Array; _nativeTag: number; _internalFiberInstanceHandleDEV: Object; - viewConfig: ReactNativeBaseComponentViewConfig<>; + viewConfig: ViewConfig; constructor( tag: number, - viewConfig: ReactNativeBaseComponentViewConfig<>, + viewConfig: ViewConfig, internalInstanceHandleDEV: Object, ) { this._nativeTag = tag; diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index 673482d0175cd..547fdd2de5c52 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -9,6 +9,7 @@ import type {HostComponent} from './ReactNativeTypes'; import type {ReactNodeList} from 'shared/ReactTypes'; +import type {ElementRef, Element, ElementType} from 'react'; import './ReactNativeInjection'; @@ -193,10 +194,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) { } function render( - element: React$Element, - containerTag: any, - callback: ?Function, -) { + element: Element, + containerTag: number, + callback: ?() => void, +): ?ElementRef { let root = roots.get(containerTag); if (!root) { @@ -207,6 +208,7 @@ function render( } updateContainer(element, root, null, callback); + // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN return getPublicRootInstance(root); } diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index 8b4ab311bff79..462abeac94bee 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. * * @format - * @flow + * @flow strict */ -import type {ElementRef, AbstractComponent} from 'react'; +import type {ElementRef, ElementType, Element, AbstractComponent} from 'react'; export type MeasureOnSuccessCallback = ( x: number, @@ -33,49 +33,66 @@ export type MeasureLayoutOnSuccessCallback = ( height: number, ) => void; -type AttributeType = +type AttributeType = | true | $ReadOnly<{| - diff?: (arg1: T, arg2: T) => boolean, - process?: (arg1: any) => any, + diff?: (arg1: T, arg2: T) => boolean, + process?: (arg1: V) => T, |}>; -export type AttributeConfiguration< - TProps = string, - TStyleProps = string, -> = $ReadOnly<{ - [propName: TProps]: AttributeType, - style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>, +// We either force that `diff` and `process` always use mixed, +// or we allow them to define specific types and use this hack +type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>; + +export type AttributeConfiguration = $ReadOnly<{ + [propName: string]: AnyAttributeType, + style: $ReadOnly<{ + [propName: string]: AnyAttributeType, + ..., + }>, + ... +}>; + +type PartialAttributeConfiguration = $ReadOnly<{ + [propName: string]: AnyAttributeType, + style?: $ReadOnly<{ + [propName: string]: AnyAttributeType, + ..., + }>, ... }>; -export type ReactNativeBaseComponentViewConfig< - TProps = string, - TStyleProps = string, -> = $ReadOnly<{| - baseModuleName?: string, +export type ViewConfig = $ReadOnly<{ + Commands?: $ReadOnly<{[commandName: string]: number, ...}>, + Constants?: $ReadOnly<{[name: string]: mixed, ...}>, + Manager?: string, + 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, -|}>; + validAttributes: AttributeConfiguration, +}>; -export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>; +export type PartialViewConfig = $ReadOnly<{ + bubblingEventTypes?: $PropertyType, + directEventTypes?: $PropertyType, + uiViewClassName: string, + validAttributes?: PartialAttributeConfiguration, +}>; export type NativeMethods = { blur(): void, @@ -87,7 +104,7 @@ export type NativeMethods = { onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void, ): void, - setNativeProps(nativeProps: Object): void, + setNativeProps(nativeProps: {...}): void, ... }; @@ -111,9 +128,11 @@ type InspectorDataSource = $ReadOnly<{| |}>; type InspectorDataGetter = ( - (componentOrHandle: any) => ?number, + ( + componentOrHandle: ElementRef | number, + ) => ?number, ) => $ReadOnly<{| - measure: Function, + measure: (callback: MeasureOnSuccessCallback) => void, props: InspectorDataProps, source: InspectorDataSource, |}>; @@ -145,62 +164,65 @@ export type TouchedViewDataAtPoint = $ReadOnly<{| * Provide minimal Flow typing for the high-level RN API and call it a day. */ export type ReactNativeType = { - findHostInstance_DEPRECATED( - componentOrHandle: any, + findHostInstance_DEPRECATED( + componentOrHandle: ?(ElementRef | number), ): ?ElementRef>, - findNodeHandle(componentOrHandle: any): ?number, + findNodeHandle( + componentOrHandle: ?(ElementRef | number), + ): ?number, dispatchCommand( handle: ElementRef>, command: string, - args: Array, + args: Array, ): void, sendAccessibilityEvent( handle: ElementRef>, eventType: string, ): void, render( - element: React$Element, - containerTag: any, - callback: ?Function, - ): any, - unmountComponentAtNode(containerTag: number): any, - unmountComponentAtNodeAndRemoveContainer(containerTag: number): any, - // TODO (bvaughn) Add types - unstable_batchedUpdates: any, + element: Element, + containerTag: number, + callback: ?() => void, + ): ?ElementRef, + unmountComponentAtNode(containerTag: number): void, + unmountComponentAtNodeAndRemoveContainer(containerTag: number): void, + unstable_batchedUpdates: (fn: (T) => void, bookkeeping: T) => void, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType, ... }; export type ReactFabricType = { - findHostInstance_DEPRECATED( - componentOrHandle: any, + findHostInstance_DEPRECATED( + componentOrHandle: ?(ElementRef | number), ): ?ElementRef>, - findNodeHandle(componentOrHandle: any): ?number, + findNodeHandle( + componentOrHandle: ?(ElementRef | number), + ): ?number, dispatchCommand( handle: ElementRef>, command: string, - args: Array, + args: Array, ): void, sendAccessibilityEvent( handle: ElementRef>, eventType: string, ): void, render( - element: React$Element, - containerTag: any, - callback: ?Function, - ): any, - unmountComponentAtNode(containerTag: number): any, + element: Element, + containerTag: number, + callback: ?() => void, + ): ?ElementRef, + unmountComponentAtNode(containerTag: number): void, ... }; export type ReactNativeEventTarget = { - node: Object, + node: {...}, canonical: { _nativeTag: number, - viewConfig: ReactNativeBaseComponentViewConfig<>, - currentProps: Object, - _internalInstanceHandle: Object, + viewConfig: ViewConfig, + currentProps: {...}, + _internalInstanceHandle: {...}, ... }, ...