Add TSMethodSignature to react-native-codegen (#35311)

Summary: Refering to "Support function signature along with function type properties in commands" in #34872 Many TypeScript programmers prefer `{ name(arg:string):void; }` to `{ readonly name:(arg:string)=>void; }`. In this pull request, I updated test cases in both commands and modules to cover it, with missing implementation. Command arguments are `NamedShape<T>` but the `optional` field is missing, it is also fixed. ## Changelog [General] [Changed] - Add `TSMethodSignature` to react-native-codegen Pull Request resolved: #35311 Test Plan: `yarn jest react-native-codegen` passed Reviewed By: rshest Differential Revision: D41217482 Pulled By: cipolleschi fbshipit-source-id: 480af118d09b022bae919c5391547fd82c1a7cc9
facebook · Nov 14, 2022 · ae1d54b · ae1d54b
1 parent c0f06e8
commit ae1d54b
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 19 deletions.
diff --git a/packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/fixtures.js b/packages/react-native-codegen/src/parsers/flow/components/__test_fixtures__/fixtures.js
@@ -871,13 +871,13 @@ type NativeType = HostComponent<ModuleProps>;
 interface NativeCommands {
   +handleRootTag: (viewRef: React.ElementRef<NativeType>, rootTag: RootTag) => void;
   +hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void;
-  +scrollTo: (
+  scrollTo(
     viewRef: React.ElementRef<NativeType>,
     x: Float,
     y: Int32,
     z: Double,
     animated: boolean,
-  ) => void;
+  ): void;
 }
 
 export const Commands = codegenNativeCommands<NativeCommands>({

diff --git a/...codegen/src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap b/...codegen/src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap
@@ -1280,6 +1280,7 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_DEFINED_WITH_ALL_T
                 'params': [
                   {
                     'name': 'rootTag',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'ReservedTypeAnnotation',
                       'name': 'RootTag'
@@ -1299,12 +1300,14 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_DEFINED_WITH_ALL_T
                 'params': [
                   {
                     'name': 'x',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
@@ -1323,24 +1326,28 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_DEFINED_WITH_ALL_T
                 'params': [
                   {
                     'name': 'x',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'FloatTypeAnnotation'
                     }
                   },
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'z',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'DoubleTypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }
@@ -2898,12 +2905,14 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_EVENTS_TYPES_EXPOR
                 'params': [
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }
@@ -2946,12 +2955,14 @@ exports[`RN Codegen Flow Parser can generate fixture COMMANDS_WITH_EXTERNAL_TYPE
                 'params': [
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }

diff --git a/packages/react-native-codegen/src/parsers/flow/components/commands.js b/packages/react-native-codegen/src/parsers/flow/components/commands.js
@@ -90,6 +90,7 @@ function buildCommandSchema(property: EventTypeAST, types: TypeDeclarationMap) {
 
     return {
       name: paramName,
+      optional: false,
       typeAnnotation: returnType,
     };
   });

diff --git a/packages/react-native-codegen/src/parsers/flow/modules/__test_fixtures__/fixtures.js b/packages/react-native-codegen/src/parsers/flow/modules/__test_fixtures__/fixtures.js
@@ -591,7 +591,7 @@ export enum StringOptions {
 }
 
 export interface Spec extends TurboModule {
-  +getEnums: (quality: Quality, resolution?: Resolution, floppy: Floppy, stringOptions: StringOptions) => string;
+  getEnums(quality: Quality, resolution?: Resolution, floppy: Floppy, stringOptions: StringOptions): string;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('SampleTurboModuleIOS');

diff --git a/...ages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js b/...ages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js
@@ -981,13 +981,13 @@ type NativeType = HostComponent<ModuleProps>;
  interface NativeCommands {
    readonly handleRootTag: (viewRef: React.ElementRef<NativeType>, rootTag: RootTag) => void;
    readonly hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void;
-   readonly scrollTo: (
+   scrollTo(
      viewRef: React.ElementRef<NativeType>,
      x: Float,
      y: Int32,
      z: Double,
      animated: boolean,
-   ) => void;
+   ): void;
  }
 
  export const Commands = codegenNativeCommands<NativeCommands>({

diff --git a/...rs/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap b/...rs/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap
@@ -1985,6 +1985,7 @@ exports[`RN Codegen TypeScript Parser can generate fixture COMMANDS_DEFINED_WITH
                 'params': [
                   {
                     'name': 'rootTag',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'ReservedTypeAnnotation',
                       'name': 'RootTag'
@@ -2004,12 +2005,14 @@ exports[`RN Codegen TypeScript Parser can generate fixture COMMANDS_DEFINED_WITH
                 'params': [
                   {
                     'name': 'x',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
@@ -2028,24 +2031,28 @@ exports[`RN Codegen TypeScript Parser can generate fixture COMMANDS_DEFINED_WITH
                 'params': [
                   {
                     'name': 'x',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'FloatTypeAnnotation'
                     }
                   },
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'z',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'DoubleTypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }
@@ -3603,12 +3610,14 @@ exports[`RN Codegen TypeScript Parser can generate fixture COMMANDS_EVENTS_TYPES
                 'params': [
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }
@@ -3651,12 +3660,14 @@ exports[`RN Codegen TypeScript Parser can generate fixture COMMANDS_WITH_EXTERNA
                 'params': [
                   {
                     'name': 'y',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'Int32TypeAnnotation'
                     }
                   },
                   {
                     'name': 'animated',
+                    'optional': false,
                     'typeAnnotation': {
                       'type': 'BooleanTypeAnnotation'
                     }

diff --git a/packages/react-native-codegen/src/parsers/typescript/components/commands.js b/packages/react-native-codegen/src/parsers/typescript/components/commands.js
@@ -19,16 +19,13 @@ const {parseTopLevelType} = require('../parseTopLevelType');
 
 type EventTypeAST = Object;
 
-function buildCommandSchema(property: EventTypeAST, types: TypeDeclarationMap) {
-  const topLevelType = parseTopLevelType(
-    property.typeAnnotation.typeAnnotation,
-    types,
-  );
-  const name = property.key.name;
-  const optional = property.optional || topLevelType.optional;
-  const value = topLevelType.type;
-  const firstParam = value.parameters[0].typeAnnotation;
-
+function buildCommandSchemaInternal(
+  name: string,
+  optional: boolean,
+  parameters: Array<$FlowFixMe>,
+  types: TypeDeclarationMap,
+): NamedShape<CommandTypeAnnotation> {
+  const firstParam = parameters[0].typeAnnotation;
   if (
     !(
       firstParam.typeAnnotation != null &&
@@ -42,7 +39,7 @@ function buildCommandSchema(property: EventTypeAST, types: TypeDeclarationMap) {
     );
   }
 
-  const params = value.parameters.slice(1).map(param => {
+  const params = parameters.slice(1).map(param => {
     const paramName = param.name;
     const paramValue = parseTopLevelType(
       param.typeAnnotation.typeAnnotation,
@@ -96,6 +93,7 @@ function buildCommandSchema(property: EventTypeAST, types: TypeDeclarationMap) {
 
     return {
       name: paramName,
+      optional: false,
       typeAnnotation: returnType,
     };
   });
@@ -113,12 +111,37 @@ function buildCommandSchema(property: EventTypeAST, types: TypeDeclarationMap) {
   };
 }
 
+function buildCommandSchema(
+  property: EventTypeAST,
+  types: TypeDeclarationMap,
+): NamedShape<CommandTypeAnnotation> {
+  if (property.type === 'TSPropertySignature') {
+    const topLevelType = parseTopLevelType(
+      property.typeAnnotation.typeAnnotation,
+      types,
+    );
+    const name = property.key.name;
+    const optional = property.optional || topLevelType.optional;
+    const parameters = topLevelType.type.parameters || topLevelType.type.params;
+    return buildCommandSchemaInternal(name, optional, parameters, types);
+  } else {
+    const name = property.key.name;
+    const optional = property.optional || false;
+    const parameters = property.parameters || property.params;
+    return buildCommandSchemaInternal(name, optional, parameters, types);
+  }
+}
+
 function getCommands(
   commandTypeAST: $ReadOnlyArray<EventTypeAST>,
   types: TypeDeclarationMap,
 ): $ReadOnlyArray<NamedShape<CommandTypeAnnotation>> {
   return commandTypeAST
-    .filter(property => property.type === 'TSPropertySignature')
+    .filter(
+      property =>
+        property.type === 'TSPropertySignature' ||
+        property.type === 'TSMethodSignature',
+    )
     .map(property => buildCommandSchema(property, types))
     .filter(Boolean);
 }

diff --git a/packages/react-native-codegen/src/parsers/typescript/modules/__test_fixtures__/fixtures.js b/packages/react-native-codegen/src/parsers/typescript/modules/__test_fixtures__/fixtures.js
@@ -412,9 +412,9 @@ import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
 import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {
-  readonly getArray: (
+  getArray(
     arg: [string, string][],
-  ) => (string | number | boolean)[];
+  ): (string | number | boolean)[];
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('SampleTurboModule');