From c940eb0c49518b82a3999dcac3027aa70018c763 Mon Sep 17 00:00:00 2001 From: Pieter Vanderwerff Date: Wed, 22 Jun 2022 23:01:55 -0700 Subject: [PATCH] Add LTI annotations to function params in xplat/js [manually-modified] Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predicatable. Reviewed By: bradzacher Differential Revision: D37363351 fbshipit-source-id: a9d3df7db6f9d094ac2ce81aae1f3ab4f62b243a --- IntegrationTests/LayoutEventsTest.js | 5 +++- Libraries/Animated/__tests__/bezier-test.js | 23 +++++++++++-------- Libraries/Lists/FlatList.js | 5 ++-- .../LogBox/Data/__tests__/LogBoxData-test.js | 14 +++++++---- .../LogBoxInspectorStackFrames-test.js | 4 ++-- Libraries/LogBox/__tests__/LogBox-test.js | 2 +- .../src/parsers/flow/components/events.js | 14 +++++------ .../parsers/typescript/components/events.js | 12 +++++----- .../Accessibility/AccessibilityExample.js | 11 ++++++++- .../examples/Appearance/AppearanceExample.js | 6 ++--- 10 files changed, 60 insertions(+), 36 deletions(-) diff --git a/IntegrationTests/LayoutEventsTest.js b/IntegrationTests/LayoutEventsTest.js index 609d786fc81047..46efb579d825c7 100644 --- a/IntegrationTests/LayoutEventsTest.js +++ b/IntegrationTests/LayoutEventsTest.js @@ -19,7 +19,7 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer'); -function debug(...args) { +function debug(...args: Array) { // console.log.apply(null, arguments); } @@ -119,16 +119,19 @@ class LayoutEventsTest extends React.Component { } onViewLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + // $FlowFixMe[incompatible-call] debug('received view layout event\n', e.nativeEvent); this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout); }; onTextLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + // $FlowFixMe[incompatible-call] debug('received text layout event\n', e.nativeEvent); this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout); }; onImageLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + // $FlowFixMe[incompatible-call] debug('received image layout event\n', e.nativeEvent); this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout); }; diff --git a/Libraries/Animated/__tests__/bezier-test.js b/Libraries/Animated/__tests__/bezier-test.js index 1a02d7ad62ba10..48bfdef0f2d605 100644 --- a/Libraries/Animated/__tests__/bezier-test.js +++ b/Libraries/Animated/__tests__/bezier-test.js @@ -19,21 +19,26 @@ const bezier = require('../bezier'); -const identity = function (x) { +const identity = function (x: number) { return x; }; -function assertClose(a, b, precision = 3) { +function assertClose(a: number, b: number, precision: number = 3) { expect(a).toBeCloseTo(b, precision); } -function makeAssertCloseWithPrecision(precision) { - return function (a, b) { +function makeAssertCloseWithPrecision(precision: number) { + return function (a: number, b: number) { assertClose(a, b, precision); }; } -function allEquals(be1, be2, samples, assertion) { +function allEquals( + be1: (x: number) => number, + be2: (x: number) => number, + samples: number, + assertion: $FlowFixMe, +) { if (!assertion) { assertion = assertClose; } @@ -43,8 +48,8 @@ function allEquals(be1, be2, samples, assertion) { } } -function repeat(n) { - return function (f) { +function repeat(n: number) { + return function (f: () => void) { for (let i = 0; i < n; ++i) { f(); } @@ -99,7 +104,7 @@ describe('bezier', function () { d = Math.random(); const easing = bezier(a, b, c, d); const projected = bezier(b, a, d, c); - const composed = function (x) { + const composed = function (x: number) { return projected(easing(x)); }; allEquals(identity, composed, 100, makeAssertCloseWithPrecision(2)); @@ -135,7 +140,7 @@ describe('bezier', function () { c = 1 - a, d = 1 - b; const easing = bezier(a, b, c, d); - const sym = function (x) { + const sym = function (x: number) { return 1 - easing(1 - x); }; allEquals(easing, sym, 100, makeAssertCloseWithPrecision(2)); diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 8e810372bd74d7..a56962691c09c9 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -459,7 +459,7 @@ class FlatList extends React.PureComponent, void> { _listRef: ?React.ElementRef; _virtualizedListPairs: Array = []; - _captureRef = ref => { + _captureRef = (ref: ?React.ElementRef) => { this._listRef = ref; }; @@ -596,7 +596,7 @@ class FlatList extends React.PureComponent, void> { ? 'ListItemComponent' : 'renderItem'; - const renderer = (props): React.Node => { + const renderer = (props: RenderItemProps): React.Node => { if (ListItemComponent) { // $FlowFixMe[not-a-component] Component isn't valid // $FlowFixMe[incompatible-type-arg] Component isn't valid @@ -625,6 +625,7 @@ class FlatList extends React.PureComponent, void> { {item.map((it, kk) => { const element = renderer({ + // $FlowFixMe[incompatible-call] item: it, index: index * cols + kk, separators: info.separators, diff --git a/Libraries/LogBox/Data/__tests__/LogBoxData-test.js b/Libraries/LogBox/Data/__tests__/LogBoxData-test.js index 0856f951017847..7b135b8d873900 100644 --- a/Libraries/LogBox/Data/__tests__/LogBoxData-test.js +++ b/Libraries/LogBox/Data/__tests__/LogBoxData-test.js @@ -51,7 +51,7 @@ const observe = () => { }; }; -const addLogs = (logs, options) => { +const addLogs = (logs: Array, options: void | {flush: boolean}) => { logs.forEach(message => { LogBoxData.addLog({ level: 'warn', @@ -68,7 +68,10 @@ const addLogs = (logs, options) => { }); }; -const addSoftErrors = (errors, options) => { +const addSoftErrors = ( + errors: Array, + options: void | {flush: boolean}, +) => { errors.forEach(error => { LogBoxData.addException({ message: '', @@ -89,7 +92,10 @@ const addSoftErrors = (errors, options) => { }); }; -const addFatalErrors = (errors, options) => { +const addFatalErrors = ( + errors: Array<$FlowFixMe>, + options: void | {flush: boolean}, +) => { errors.forEach(error => { LogBoxData.addException({ message: '', @@ -112,7 +118,7 @@ const addFatalErrors = (errors, options) => { }); }; -const addSyntaxError = options => { +const addSyntaxError = (options: $FlowFixMe) => { addFatalErrors( [ { diff --git a/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js b/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js index d9ff74d8355129..8e247e699d82f1 100644 --- a/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js +++ b/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js @@ -18,7 +18,7 @@ const {} = require('../LogBoxInspectorStackFrames'); const LogBoxLog = require('../../Data/LogBoxLog').default; const render = require('../../../../jest/renderer'); -const createLogWithFrames = collapsedOptions => { +const createLogWithFrames = (collapsedOptions: Array) => { return new LogBoxLog({ level: 'warn', isComponentError: false, @@ -32,7 +32,7 @@ const createLogWithFrames = collapsedOptions => { }); }; -const createCollapsedFrames = collapsedOptions => { +const createCollapsedFrames = (collapsedOptions: Array) => { return collapsedOptions.map(option => ({ column: 1, file: 'dependency.js', diff --git a/Libraries/LogBox/__tests__/LogBox-test.js b/Libraries/LogBox/__tests__/LogBox-test.js index bc793a56b2a164..d86bd3b12b3d50 100644 --- a/Libraries/LogBox/__tests__/LogBox-test.js +++ b/Libraries/LogBox/__tests__/LogBox-test.js @@ -16,7 +16,7 @@ const LogBoxData = require('../Data/LogBoxData'); declare var console: any; -function mockFilterResult(returnValues) { +function mockFilterResult(returnValues: $FlowFixMe) { (LogBoxData.checkWarningFilter: any).mockReturnValue({ finalFormat: 'Warning: ...', forceDialogImmediately: false, diff --git a/packages/react-native-codegen/src/parsers/flow/components/events.js b/packages/react-native-codegen/src/parsers/flow/components/events.js index acb98d0c889040..b6a3db01f522c6 100644 --- a/packages/react-native-codegen/src/parsers/flow/components/events.js +++ b/packages/react-native-codegen/src/parsers/flow/components/events.js @@ -18,8 +18,8 @@ import type { function getPropertyType( name, - optional, - typeAnnotation, + optional: boolean, + typeAnnotation: $FlowFixMe, ): NamedShape { const type = typeAnnotation.type === 'GenericTypeAnnotation' @@ -98,10 +98,10 @@ function getPropertyType( } function findEventArgumentsAndType( - typeAnnotation, - types, - bubblingType, - paperName, + typeAnnotation: $FlowFixMe, + types: TypeMap, + bubblingType: void | 'direct' | 'bubble', + paperName: ?$FlowFixMe, ) { if (!typeAnnotation.id) { throw new Error("typeAnnotation of event doesn't have a name"); @@ -163,7 +163,7 @@ function buildPropertiesForEvent(property): NamedShape { return getPropertyType(name, optional, typeAnnotation); } -function getEventArgument(argumentProps, name) { +function getEventArgument(argumentProps, name: $FlowFixMe) { return { type: 'ObjectTypeAnnotation', properties: argumentProps.map(buildPropertiesForEvent), diff --git a/packages/react-native-codegen/src/parsers/typescript/components/events.js b/packages/react-native-codegen/src/parsers/typescript/components/events.js index e5c1fa68722512..cd94fa00596535 100644 --- a/packages/react-native-codegen/src/parsers/typescript/components/events.js +++ b/packages/react-native-codegen/src/parsers/typescript/components/events.js @@ -18,7 +18,7 @@ import type { function getPropertyType( name, - optional, + optional: boolean, typeAnnotation, ): NamedShape { const type = @@ -118,10 +118,10 @@ function getPropertyType( } function findEventArgumentsAndType( - typeAnnotation, - types, - bubblingType, - paperName, + typeAnnotation: $FlowFixMe, + types: TypeMap, + bubblingType: void | 'direct' | 'bubble', + paperName: ?$FlowFixMe, ) { if (!typeAnnotation.typeName) { throw new Error("typeAnnotation of event doesn't have a name"); @@ -177,7 +177,7 @@ function buildPropertiesForEvent(property): NamedShape { return getPropertyType(name, optional, typeAnnotation); } -function getEventArgument(argumentProps, name) { +function getEventArgument(argumentProps, name: $FlowFixMe) { return { type: 'ObjectTypeAnnotation', properties: argumentProps.map(buildPropertiesForEvent), diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index ce8151ce8f76bd..fb917d19dc3285 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -1148,10 +1148,19 @@ class DisplayOptionsStatusExample extends React.Component<{}> { } } -function DisplayOptionStatusExample({optionName, optionChecker, notification}) { +function DisplayOptionStatusExample({ + optionName, + optionChecker, + notification, +}: { + notification: string, + optionChecker: () => Promise, + optionName: string, +}) { const [statusEnabled, setStatusEnabled] = React.useState(false); React.useEffect(() => { const listener = AccessibilityInfo.addEventListener( + // $FlowFixMe[prop-missing] notification, setStatusEnabled, ); diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js index d19d8a5832ffd0..601bcdf7fbf1b4 100644 --- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js +++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js @@ -52,7 +52,7 @@ class ColorSchemeSubscription extends React.Component< } } -const ThemedContainer = props => ( +const ThemedContainer = (props: {children: React.Node}) => ( {theme => { return ( @@ -69,7 +69,7 @@ const ThemedContainer = props => ( ); -const ThemedText = props => ( +const ThemedText = (props: {children: React.Node}) => ( {theme => { return {props.children}; @@ -89,7 +89,7 @@ const AppearanceViaHook = () => { ); }; -const ColorShowcase = props => ( +const ColorShowcase = (props: {themeName: string}) => ( {theme => { return (