Fixing schema types for component command params of Arrays (#48476)

Summary:
Pull Request resolved: #48476

Command param array types were generating invalid schemas due to untyped parser code. The invalid schemas occurred for any alias type, including custom objects and basics like Int32. This was also inconsistent between Flow and TypeScript.

We already had one component utilizing this issue, so this just codifies that support into the schema so it reflects reality. This is only a partial solution. The more full solution would be to fully encode the custom types in the schemas like we do for Native Modules.

# More Information:

Tl;dr, DebuggingOverlay is abusing a FlowFixMe in codegen commands.

## The problem:

The [CodegenSchema](https://www.internalfb.com/code/fbsource/[d3ab2f79b377]/xplat/js/react-native-github/packages/react-native-codegen/src/CodegenSchema.js?lines=220) should be the source of truth for anything that can be in the schema. If something is in the schema that isn't allowed by the types, that's a bug. We have a bug. I'm adding compat-check support for components and it's blowing up on prod schemas because DebuggingOverlay causes an invalid schema.

## The details:

Support for Arrays as arguments in commands was added to the Codegen in D51866557. [Code Pointer](https://fburl.com/code/8yy1rm0p)

The intention appears to be to support arrays of primitives. There is a TODO for supporting complex types.

```
interface NativeCommands {
  +addOverlays: (
    viewRef: React.ElementRef<NativeType>,
    overlayColorsReadOnly: $ReadOnlyArray<string>,
  )
}
```

This support was added to TypeScript in D52046165 where it types the allowed Array arguments to be only

```
{
    readonly type: 'ArrayTypeAnnotation';
    readonly elementType:
    | Int32TypeAnnotation
    | DoubleTypeAnnotation
    | FloatTypeAnnotation
    | BooleanTypeAnnotation
    | StringTypeAnnotation
  };
```

However, because the Parsers are treating the input type as `any`, it isn't safe to pass through an input value into the schema as Flow won't catch mismatches.

The Flow parser just passes it through:

```
{
    type: 'ArrayTypeAnnotation',
    elementType: {
    // TODO: T172453752 support complex type annotation for array element
    type: paramValue.typeParameters.params[0].type,
}
```

Whereas the TypeScript parser has the more correct behavior of validating the inputs and returning specific outputs. Unfortunately, the return type is also typed here as $FlowFixMe, losing most of the benefits.

```
function getPrimitiveTypeAnnotation(type: string): $FlowFixMe {
  switch (type) {
    case 'Int32':
      return {
        type: 'Int32TypeAnnotation',
      };
    case 'Double':
      return {
        type: 'DoubleTypeAnnotation',
      };
    case 'Float':
      return {
        type: 'FloatTypeAnnotation',
      };
    case 'TSBooleanKeyword':
      return {
        type: 'BooleanTypeAnnotation',
      };
    case 'Stringish':
    case 'TSStringKeyword':
      return {
        type: 'StringTypeAnnotation',
      };
    default:
      throw new Error(`Unknown primitive type "${type}"`);
  }
}
```

[DebuggingOverlay](https://fburl.com/code/zfe3ipq7) is abusing this gap in the Flow parser by sticking an Array of Objects in.

```
export type ElementRectangle = {
  x: number,
  y: number,
  width: number,
  height: number,
};

...
  +highlightElements: (
    viewRef: React.ElementRef<DebuggingOverlayNativeComponentType>,
    elements: $ReadOnlyArray<ElementRectangle>,
  ) => void;
...
```

This isn't allowed in the schema, but it seems to fall through the holes of the flow parser and generators.

The resulting schema from Flow is this. Note the GenericTypeAnnotation which isn't allowed to be in the schema.

```
{
    "name": "highlightElements",
    "optional": false,
    "typeAnnotation": {
    "type": "FunctionTypeAnnotation",
    "params": [
        {
            "name": "elements",
            "optional": false,
            "typeAnnotation": {
                "type": "ArrayTypeAnnotation",
                "elementType": {
                    "type": "GenericTypeAnnotation"
                }
            }
        }
    ],
    "returnTypeAnnotation": {
        "type": "VoidTypeAnnotation"
    }
},
```

The TypeScript parser fails with `Error: Unsupported type annotation: GenericTypeAnnotation`.

The generators don't seem to check beyond the ArrayTypeAnnotation so they fall through to generating generic arrays.

```
// ios
elements:(const NSArray *)elements

// android
ReadableArray locations
```

## So how do I fix this?

I think there are a couple of different options here. The key problem is that the Schema types need to represent reality of what can be in the schema.

1. We revert DebuggingOverlay to not use features that aren't supported (I assume nobody would be happy with this, but the change shouldn't have been made in the first place)
2. **(This is the approach taken in this diff)** We add MixedTypeAnnotation to the allowed types in Command arrays and have it generate that and add official support for that to the TypeScript parser as well. That is probably the quickest and easiest approach. It leaves the same type unsafety we have today on the native side.
3. NativeModules seem to have a lot more complex type safety here. They persist the alias type in the schema so that the CompatCheck can check them on changes. And then in C++ they generate structs and RCTConvert functions although for Java and ObjC it looks like they just use the same untyped native code. The matching approach here would be to add `aliasMap` and the whole data to the schema for commands, use that for the compat check, and still generate the same unsafe native code.

```
export type ObjectAlias = {|
  x: number,
  y: number,
|};

export interface Spec extends TurboModule {
  +getAlias: (a: ObjectAlias) => string;
}
```

stores the ObjectAlias in the schema

```
{
  "aliasMap": {
    "ObjectAlias": {
      "type": "ObjectTypeAnnotation",
      "properties": [
        {
          "name": "x",
          "optional": false,
          "typeAnnotation": {
            "type": "NumberTypeAnnotation"
          }
        },
        {
          "name": "y",
          "optional": false,
          "typeAnnotation": {
            "type": "NumberTypeAnnotation"
          }
        },
      ]
    }
  },
  "spec": {
    "methods": [
      {
        "name": "getAlias",
        "optional": false,
        "typeAnnotation": {
          "type": "FunctionTypeAnnotation",
          "returnTypeAnnotation": {
            "type": "StringTypeAnnotation"
          },
          "params": [
            {
              "name": "a",
              "optional": false,
              "typeAnnotation": {
                "type": "TypeAliasTypeAnnotation",
                "name": "ObjectAlias"
              }
            }
          ]
        }
      }
    ]
  }
}
```

and then generates the appropriate structs on the native side and generates [this](https://www.internalfb.com/code/fbsource/[d3ab2f79b377]/xplat/js/react-native-github/packages/react-native-codegen/src/generators/modules/__tests__/__snapshots__/GenerateModuleHObjCpp-test.js.snap?lines=818)

```

Reviewed By: hoxyq

Differential Revision: D67806838

fbshipit-source-id: 31f20455c816fdb6b1a86f8f9d0f6f7d0a452754

Author: elicwhite

packages/react-native-codegen/src/CodegenSchema.d.ts

@@ -148,6 +148,11 @@ export type ComponentCommandArrayTypeAnnotation = ArrayTypeAnnotation<
   | DoubleTypeAnnotation
   | FloatTypeAnnotation
   | Int32TypeAnnotation
+  // Mixed is not great. This generally means its a type alias to another type
+  // like an object or union. Ideally we'd encode that type in the schema so the compat-check can
+  // validate those deeper objects for breaking changes and the generators can do something smarter.
+  // As of now, the generators just create ReadableMap or (const NSArray *) which are untyped
+  | MixedTypeAnnotation
 >;
 
 export interface ArrayTypeAnnotation<T> {

packages/react-native-codegen/src/CodegenSchema.js

@@ -163,7 +163,12 @@ export type ComponentCommandArrayTypeAnnotation = ArrayTypeAnnotation<
   | StringTypeAnnotation
   | DoubleTypeAnnotation
   | FloatTypeAnnotation
-  | Int32TypeAnnotation,
+  | Int32TypeAnnotation
+  // Mixed is not great. This generally means its a type alias to another type
+  // like an object or union. Ideally we'd encode that type in the schema so the compat-check can
+  // validate those deeper objects for breaking changes and the generators can do something smarter.
+  // As of now, the generators just create ReadableMap or (const NSArray *) which are untyped
+  | MixedTypeAnnotation,
 >;
 
 export type ArrayTypeAnnotation<+T> = $ReadOnly<{

packages/react-native-codegen/src/generators/components/__test_fixtures__/fixtures.js

@@ -1693,6 +1693,16 @@ const COMMANDS: SchemaType = {
                       type: 'BooleanTypeAnnotation',
                     },
                   },
+                  {
+                    name: 'locations',
+                    optional: false,
+                    typeAnnotation: {
+                      type: 'ArrayTypeAnnotation',
+                      elementType: {
+                        type: 'MixedTypeAnnotation',
+                      },
+                    },
+                  },
                 ],
                 returnTypeAnnotation: {
                   type: 'VoidTypeAnnotation',

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateComponentHObjCpp-test.js.snap

@@ -119,7 +119,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @protocol RCTCommandNativeComponentViewProtocol <NSObject>
 - (void)flashScrollIndicators;
-- (void)allTypes:(NSInteger)x y:(float)y z:(double)z message:(NSString *)message animated:(BOOL)animated;
+- (void)allTypes:(NSInteger)x y:(float)y z:(double)z message:(NSString *)message animated:(BOOL)animated locations:(const NSArray *)locations;
 @end
 
 RCT_EXTERN inline void RCTCommandNativeComponentHandleCommand(
@@ -143,8 +143,8 @@ RCT_EXTERN inline void RCTCommandNativeComponentHandleCommand(
 
 if ([commandName isEqualToString:@\\"allTypes\\"]) {
 #if RCT_DEBUG
-  if ([args count] != 5) {
-    RCTLogError(@\\"%@ command %@ received %d arguments, expected %d.\\", @\\"CommandNativeComponent\\", commandName, (int)[args count], 5);
+  if ([args count] != 6) {
+    RCTLogError(@\\"%@ command %@ received %d arguments, expected %d.\\", @\\"CommandNativeComponent\\", commandName, (int)[args count], 6);
     return;
   }
 #endif
@@ -189,7 +189,15 @@ NSObject *arg4 = args[4];
 #endif
   BOOL animated = [(NSNumber *)arg4 boolValue];
 
-  [componentView allTypes:x y:y z:z message:message animated:animated];
+NSObject *arg5 = args[5];
+#if RCT_DEBUG
+  if (!RCTValidateTypeOfViewCommandArgument(arg5, [NSArray class], @\\"array\\", @\\"CommandNativeComponent\\", commandName, @\\"6th\\")) {
+    return;
+  }
+#endif
+  const NSArray * locations = (NSArray *)arg5;
+
+  [componentView allTypes:x y:y z:z message:message animated:animated locations:locations];
   return;
 }
 

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GeneratePropsJavaDelegate-test.js.snap

@@ -224,7 +224,7 @@ public class CommandNativeComponentManagerDelegate<T extends View, U extends Bas
         mViewManager.flashScrollIndicators(view);
         break;
       case \\"allTypes\\":
-        mViewManager.allTypes(view, args.getInt(0), (float) args.getDouble(1), args.getDouble(2), args.getString(3), args.getBoolean(4));
+        mViewManager.allTypes(view, args.getInt(0), (float) args.getDouble(1), args.getDouble(2), args.getString(3), args.getBoolean(4), args.getArray(5));
         break;
     }
   }

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GeneratePropsJavaInterface-test.js.snap

@@ -118,11 +118,12 @@ Map {
 package com.facebook.react.viewmanagers;
 
 import android.view.View;
+import com.facebook.react.bridge.ReadableArray;
 
 public interface CommandNativeComponentManagerInterface<T extends View> {
   // No props
   void flashScrollIndicators(T view);
-  void allTypes(T view, int x, float y, double z, String message, boolean animated);
+  void allTypes(T view, int x, float y, double z, String message, boolean animated, ReadableArray locations);
 }
 ",
 }

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -187,8 +187,8 @@ export const Commands = {
         dispatchCommand(ref, \\"flashScrollIndicators\\", []);
     },
 
-    allTypes(ref, x, y, z, message, animated) {
-        dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated]);
+    allTypes(ref, x, y, z, message, animated, locations) {
+        dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]);
     }
 };
 ",

packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/fixtures.js

@@ -951,10 +951,18 @@ interface NativeCommands {
     z: Double,
     animated: boolean,
   ): void;
+  +arrayArgs: (
+    viewRef: React.ElementRef<NativeType>,
+    booleanArray: $ReadOnlyArray<boolean>,
+    stringArray: $ReadOnlyArray<string>,
+    floatArray: $ReadOnlyArray<Float>,
+    intArray: $ReadOnlyArray<Int32>,
+    doubleArray: $ReadOnlyArray<Double>,
+  ) => void;
 }
 
 export const Commands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['handleRootTag', 'hotspotUpdate', 'scrollTo'],
+  supportedCommands: ['handleRootTag', 'hotspotUpdate', 'scrollTo', 'arrayArgs'],
 });
 
 export default (codegenNativeComponent<ModuleProps>(
@@ -985,6 +993,10 @@ import type {HostComponent} from 'react-native';
 export type Boolean = boolean;
 export type Int = Int32;
 export type Void = void;
+export type Locations = {
+  x: number,
+  y: number,
+}
 
 export type ModuleProps = $ReadOnly<{|
   ...ViewProps,
@@ -1006,6 +1018,7 @@ interface NativeCommands {
     overlayColorsReadOnly: $ReadOnlyArray<string>,
     overlayColorsArray: Array<string>,
     overlayColorsArrayAnnotation: string[],
+    overlayLocations: $ReadOnlyArray<Locations>,
   ) => void;
 }
 

packages/react-native-codegen/src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap

@@ -1447,6 +1447,68 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_DEFINED_WITH_ALL_T
                   'type': 'VoidTypeAnnotation'
                 }
               }
+            },
+            {
+              'name': 'arrayArgs',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'FunctionTypeAnnotation',
+                'params': [
+                  {
+                    'name': 'booleanArray',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'BooleanTypeAnnotation'
+                      }
+                    }
+                  },
+                  {
+                    'name': 'stringArray',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'StringTypeAnnotation'
+                      }
+                    }
+                  },
+                  {
+                    'name': 'floatArray',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'FloatTypeAnnotation'
+                      }
+                    }
+                  },
+                  {
+                    'name': 'intArray',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'Int32TypeAnnotation'
+                      }
+                    }
+                  },
+                  {
+                    'name': 'doubleArray',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'DoubleTypeAnnotation'
+                      }
+                    }
+                  }
+                ],
+                'returnTypeAnnotation': {
+                  'type': 'VoidTypeAnnotation'
+                }
+              }
             }
           ]
         }
@@ -4826,6 +4888,16 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_WITH_EXTERNAL_TYPE
                         'type': 'StringTypeAnnotation'
                       }
                     }
+                  },
+                  {
+                    'name': 'overlayLocations',
+                    'optional': false,
+                    'typeAnnotation': {
+                      'type': 'ArrayTypeAnnotation',
+                      'elementType': {
+                        'type': 'MixedTypeAnnotation'
+                      }
+                    }
                   }
                 ],
                 'returnTypeAnnotation': {

packages/react-native-codegen/src/parsers/flow/components/commands.js

@@ -13,6 +13,7 @@
 import type {
   CommandParamTypeAnnotation,
   CommandTypeAnnotation,
+  ComponentCommandArrayTypeAnnotation,
   NamedShape,
 } from '../../../CodegenSchema.js';
 import type {TypeDeclarationMap} from '../../utils';
@@ -109,19 +110,15 @@ function buildCommandSchema(
         }
         returnType = {
           type: 'ArrayTypeAnnotation',
-          elementType: {
-            // TODO: T172453752 support complex type annotation for array element
-            type: paramValue.typeParameters.params[0].type,
-          },
+          elementType: getCommandArrayElementTypeType(
+            paramValue.typeParameters.params[0],
+          ),
         };
         break;
       case 'ArrayTypeAnnotation':
         returnType = {
           type: 'ArrayTypeAnnotation',
-          elementType: {
-            // TODO: T172453752 support complex type annotation for array element
-            type: paramValue.elementType.type,
-          },
+          elementType: getCommandArrayElementTypeType(paramValue.elementType),
         };
         break;
       default:
@@ -151,6 +148,66 @@ function buildCommandSchema(
   };
 }
 
+type Allowed = ComponentCommandArrayTypeAnnotation['elementType'];
+
+function getCommandArrayElementTypeType(inputType: mixed): Allowed {
+  // TODO: T172453752 support more complex type annotation for array element
+  if (typeof inputType !== 'object') {
+    throw new Error('Expected an object');
+  }
+
+  const type = inputType?.type;
+
+  if (inputType == null || typeof type !== 'string') {
+    throw new Error('Command array element type must be a string');
+  }
+
+  switch (type) {
+    case 'BooleanTypeAnnotation':
+      return {
+        type: 'BooleanTypeAnnotation',
+      };
+    case 'StringTypeAnnotation':
+      return {
+        type: 'StringTypeAnnotation',
+      };
+    case 'GenericTypeAnnotation':
+      const name = typeof inputType.id === 'object' ? inputType.id?.name : null;
+
+      if (typeof name !== 'string') {
+        throw new Error(
+          'Expected GenericTypeAnnotation AST name to be a string',
+        );
+      }
+
+      switch (name) {
+        case 'Int32':
+          return {
+            type: 'Int32TypeAnnotation',
+          };
+        case 'Float':
+          return {
+            type: 'FloatTypeAnnotation',
+          };
+        case 'Double':
+          return {
+            type: 'DoubleTypeAnnotation',
+          };
+        default:
+          // This is not a great solution. This generally means its a type alias to another type
+          // like an object or union. Ideally we'd encode that in the schema so the compat-check can
+          // validate those deeper objects for breaking changes and the generators can do something smarter.
+          // As of now, the generators just create ReadableMap or (const NSArray *) which are untyped
+          return {
+            type: 'MixedTypeAnnotation',
+          };
+      }
+
+    default:
+      throw new Error(`Unsupported array element type ${type}`);
+  }
+}
+
 function getCommands(
   commandTypeAST: $ReadOnlyArray<EventTypeAST>,
   types: TypeDeclarationMap,