Transform all Flow legacy utility types ($NonMaybeType) to TypeScript-style types in xplat/js (#54935)

Summary:
Pull Request resolved: #54935

We are transforming the following utility types to be more consistent with typescript and better AI integration:

* `$NonMaybeType` -> `NonNullable`
* `$ReadOnly` -> `Readonly`
* `$ReadOnlyArray` -> `ReadonlyArray`
* `$ReadOnlyMap` -> `ReadonlyMap`
* `$ReadOnlySet` -> `ReadonlySet`
* `$Keys` -> `keyof`
* `$Values` -> `Values`
* `mixed` -> `unknown`

See details in https://fb.workplace.com/groups/flowlang/permalink/1837907750148213/.

drop-conflicts

Reviewed By: gkz

Differential Revision: D89494075

fbshipit-source-id: 1bc3e0039dfb5bf04f1860d5098e024fb8491647

Author: marcoww6

packages/dev-middleware/src/inspector-proxy/types.js

@@ -56,7 +56,7 @@ export type PageFromDevice = $ReadOnly<{
 
 export type Page = $ReadOnly<{
   ...PageFromDevice,
-  capabilities: $NonMaybeType<PageFromDevice['capabilities']>,
+  capabilities: NonNullable<PageFromDevice['capabilities']>,
 }>;
 
 // Chrome Debugger Protocol message/event passed between device and debugger.

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -149,7 +149,7 @@ type TextInputStateType = $ReadOnly<{
   blurTextInput: (textField: ?HostInstance) => void,
 }>;
 
-type ViewCommands = $NonMaybeType<
+type ViewCommands = NonNullable<
   | typeof AndroidTextInputCommands
   | typeof RCTMultilineTextInputNativeCommands
   | typeof RCTSinglelineTextInputNativeCommands,
@@ -188,8 +188,8 @@ function useTextInputStateSynchronization({
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] =
     useState<LastNativeSelection>({
-      selection: {start: -1, end: -1},
-      mostRecentEventCount: mostRecentEventCount,
+      mostRecentEventCount,
+      selection: {end: -1, start: -1},
     });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
@@ -212,7 +212,7 @@ function useTextInputStateSynchronization({
         lastNativeSelection.end !== selection.end)
     ) {
       nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
+      setLastNativeSelection({mostRecentEventCount, selection});
     }
 
     if (Object.keys(nativeUpdate).length === 0) {
@@ -240,7 +240,7 @@ function useTextInputStateSynchronization({
     viewCommands,
   ]);
 
-  return {setLastNativeText, setLastNativeSelection};
+  return {setLastNativeSelection, setLastNativeText};
 }
 
 /**
@@ -377,8 +377,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     propsSelection == null
       ? null
       : {
-          start: propsSelection.start,
           end: propsSelection.end ?? propsSelection.start,
+          start: propsSelection.start,
         };
 
   const text =
@@ -397,9 +397,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
   const {setLastNativeText, setLastNativeSelection} =
     useTextInputStateSynchronization({
-      props,
       inputRef,
       mostRecentEventCount,
+      props,
       selection,
       text,
       viewCommands,
@@ -469,13 +469,13 @@ function InternalTextInput(props: TextInputProps): React.Node {
               );
             }
           },
+          getNativeRef(): ?TextInputInstance {
+            return inputRef.current;
+          },
           // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
             return TextInputState.currentlyFocusedInput() === inputRef.current;
           },
-          getNativeRef(): ?TextInputInstance {
-            return inputRef.current;
-          },
           setSelection(start: number, end: number): void {
             if (inputRef.current != null) {
               viewCommands.setTextAndSelection(
@@ -525,8 +525,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
 
     setLastNativeSelection({
-      selection: event.nativeEvent.selection,
       mostRecentEventCount,
+      selection: event.nativeEvent.selection,
     });
   };
 
@@ -590,6 +590,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
 
   const config = useMemo(
     () => ({
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
@@ -599,9 +600,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
           }
         }
       },
-      onPressIn: onPressIn,
-      onPressOut: onPressOut,
-      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
+      onPressIn,
+      onPressOut,
     }),
     [
       editable,
@@ -740,12 +740,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
     }
     // For consistency with iOS set cursor/selectionHandle color as selectionColor
     const colorProps = {
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
       selectionColor,
       selectionHandleColor:
         selectionHandleColor === undefined
           ? selectionColor
           : selectionHandleColor,
-      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
     };
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
@@ -799,8 +799,8 @@ function InternalTextInput(props: TextInputProps): React.Node {
 }
 
 const enterKeyHintToReturnTypeMap = {
-  enter: 'default',
   done: 'done',
+  enter: 'default',
   go: 'go',
   next: 'next',
   previous: 'previous',
@@ -809,19 +809,20 @@ const enterKeyHintToReturnTypeMap = {
 } as const;
 
 const inputModeToKeyboardTypeMap = {
-  none: 'default',
-  text: 'default',
   decimal: 'decimal-pad',
+  email: 'email-address',
+  none: 'default',
   numeric: 'number-pad',
-  tel: 'phone-pad',
   search:
     Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
-  email: 'email-address',
+  tel: 'phone-pad',
+  text: 'default',
   url: 'url',
 } as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
+  'additional-name': 'name-middle',
   'address-line1': 'postal-address-region',
   'address-line2': 'postal-address-locality',
   bday: 'birthdate-full',
@@ -836,12 +837,11 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   country: 'postal-address-country',
   'current-password': 'password',
   email: 'email',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
   'honorific-prefix': 'name-prefix',
   'honorific-suffix': 'name-suffix',
   name: 'name',
-  'additional-name': 'name-middle',
-  'family-name': 'name-family',
-  'given-name': 'name-given',
   'new-password': 'password-new',
   off: 'off',
   'one-time-code': 'sms-otp',
@@ -856,33 +856,33 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
+  'additional-name': 'middleName',
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
   bday: 'birthdate',
   'bday-day': 'birthdateDay',
   'bday-month': 'birthdateMonth',
   'bday-year': 'birthdateYear',
+  'cc-additional-name': 'creditCardMiddleName',
   'cc-csc': 'creditCardSecurityCode',
+  'cc-exp': 'creditCardExpiration',
   'cc-exp-month': 'creditCardExpirationMonth',
   'cc-exp-year': 'creditCardExpirationYear',
-  'cc-exp': 'creditCardExpiration',
-  'cc-given-name': 'creditCardGivenName',
-  'cc-additional-name': 'creditCardMiddleName',
   'cc-family-name': 'creditCardFamilyName',
+  'cc-given-name': 'creditCardGivenName',
   'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
   'cc-type': 'creditCardType',
-  'current-password': 'password',
   country: 'countryName',
+  'current-password': 'password',
   email: 'emailAddress',
-  name: 'name',
-  'additional-name': 'middleName',
   'family-name': 'familyName',
   'given-name': 'givenName',
-  nickname: 'nickname',
   'honorific-prefix': 'namePrefix',
   'honorific-suffix': 'nameSuffix',
+  name: 'name',
   'new-password': 'newPassword',
+  nickname: 'nickname',
   off: 'none',
   'one-time-code': 'oneTimeCode',
   organization: 'organizationName',
@@ -959,11 +959,10 @@ TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
 TextInput.State = {
-  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
-
+  blurTextInput: TextInputState.blurTextInput,
   currentlyFocusedField: TextInputState.currentlyFocusedField,
+  currentlyFocusedInput: TextInputState.currentlyFocusedInput,
   focusTextInput: TextInputState.focusTextInput,
-  blurTextInput: TextInputState.blurTextInput,
 };
 
 export type TextInputComponentStatics = $ReadOnly<{
@@ -981,9 +980,9 @@ const styles = StyleSheet.create({
 
 const verticalAlignToTextAlignVerticalMap = {
   auto: 'auto',
-  top: 'top',
   bottom: 'bottom',
   middle: 'center',
+  top: 'top',
 } as const;
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.

packages/react-native/Libraries/Utilities/Appearance.js

@@ -35,7 +35,7 @@ let lazyState: ?{
 /**
  * Ensures that all state and listeners are lazily initialized correctly.
  */
-function getState(): $NonMaybeType<typeof lazyState> {
+function getState(): NonNullable<typeof lazyState> {
   if (lazyState != null) {
     return lazyState;
   }
@@ -50,7 +50,7 @@ function getState(): $NonMaybeType<typeof lazyState> {
       eventEmitter,
     };
   } else {
-    const state: $NonMaybeType<typeof lazyState> = {
+    const state: NonNullable<typeof lazyState> = {
       NativeAppearance,
       appearance: null,
       eventEmitter,

packages/react-native/Libraries/promiseRejectionTrackingOptions.js

@@ -12,8 +12,15 @@ import typeof {enable} from 'promise/setimmediate/rejection-tracking';
 
 import ExceptionsManager from './Core/ExceptionsManager';
 
-let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
+const rejectionTrackingOptions: NonNullable<Parameters<enable>[0]> = {
   allRejections: true,
+  onHandled: id => {
+    const warning =
+      `Promise rejection handled (id: ${id})\n` +
+      'This means you can ignore any previous messages of the form ' +
+      `"Uncaught (in promise, id: ${id})"`;
+    console.warn(warning);
+  },
   onUnhandled: (id, rejection) => {
     let message: string;
 
@@ -46,13 +53,6 @@ let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
       false /* isFatal */,
     );
   },
-  onHandled: id => {
-    const warning =
-      `Promise rejection handled (id: ${id})\n` +
-      'This means you can ignore any previous messages of the form ' +
-      `"Uncaught (in promise, id: ${id})"`;
-    console.warn(warning);
-  },
 };
 
 export default rejectionTrackingOptions;