☂️ Improving Codegen

[cipolleschi]

Description

Note: The items in this list are eligible for Hacktoberfest (https://hacktoberfest.com/). All the accepted PRs under this umbrella task will be tagged with the hacktoberfest-accepted label, to count toward your score.:tada:

Hi everyone!
This is an umbrella issue to collect a set of tasks aimed to improve the code in the react-native-codegen package.
Codegen is a pillar for the New Architecture and is part of the core developer experience. We believe that everyone would benefit from a clear and maintainable codebase, hence this umbrella issue to help us cleanup and restructure some of its components.

The codegen internals

Codegen work with a 2-steps process:

1. It parses a set of JS-based specifications and it creates a JSON Schema.
2. Starting from the Schema, it generates a set of Native files in various languages: Java, Objective-C++ and C++.

Codegen package is divided in three high-level folders:

1. cli => it contains a set of scripts to use the Codegen from a Command Line Interface.
2. generators => it contains a set of file which generate the final code.
3. parsers => it contains a set of files to parse Flow and TypeScript specifications.

The first step of this imrpovement effort will focus on the Parsers.

Parsers

The parsers folders contains subfolders to parse Flow and TypeScript specs. The two folders have a very similar structure:

• a components folder, where there is the logic to parse Native Components specs
• a modules folder, where there is the logic to parse the Native Modules specs
• some extra files: index.js, errors.js and utils.js

There are different levels of code duplication we want to reduce.

• In some case, we can put together some concepts between TS and Flow.
• In some other cases, we can share some code between Components and Modules.
• Finally, we will extract and refactor code within the same file to improve its maintainability and readability.

How to Test

It’s crucial that you test the changes you submit. The proper way of doing this is:

1. If it doesn’t exists, create a new folders called __tests__ at the same level of the file you added/modified.
2. Add some unit tests to verify the behavior of your function, by creating a <your-file>-tests.js file (if it doesn't exists). An example test is this one. Make sure to:
   1. Add the license lines (otherwise the Meta internal linter will complain)
   2. Use the strict mode
   3. Import your file (if it hasn't been imported yet)
   4. Follow the what-when-result pattern when describing the test ("What are we testing, in which context, what is the expected result")

Once you implemented your changes, you can run the tests locally by following these steps:

1. Navigate to react-native root folder
2. yarn install to set up the dependencies
3. yarn jest react-native-codegen to test your changes against the existing test suite.

You can find more documentation on Jest, our testing framework, here (https://jestjs.io/).

The Tasks

The following is a list of tasks we need to execute to improve the code quality of this tool. The list is a living one: the more we improve with the situation, the more patterns we can discover. Whenever we found some pattern that we can add, we will attach this to the list.

If you want to tackle some specific task which is not listed, feel free to post a comment with a brief description of the task and I'll make sure to add it to the list of tasks so it is tracked.

Please comment below if you're willing to take the stance on any of those task and wait for a confirmation before start working on it. Please note that if you claim a task, but don't submit a PR within 2 week, we're going to free up that task for someone else.

• Extract the error.js file from the flow and typescript folders into an error.js file in their parent folder. Then, have the two parsers use the same ParserError
  Assigned to @gabrieldonadel Commit 7227bde
• Extract the modules/schema.js from the flow and typescript folders in a shared parsers-commons.js file. Then, have the two parsers use the same wrapModuleSchema function for modules.
  Assigned to @tarunrajput Commit 35556db
• Extract the modules/utils.js from the flow and typescript folders in a shared parsers-commons.js file. Then, have the two parsers use the same wrapModuleSchema function for modules.
  assigned to @AntoineDoubovetzky Commit 24efebf
• [Assigned to @matiassalles99] Extract the UnsupportedArrayElementTypeAnnotationParserError in its own throwing function and reuse that function passing a proper type. The error is thrown at lines 132, 141 and 150 in both Flow and TypeScript parsers.
  • Refactor the code using a dictionary and avoiding the three different ifs in the Flow parser
  • Refactor the code using a dictionary and avoiding the three different ifs in the TS parser Commit cc311ff
• [Assigned to @dhruvtailor7]Extract the UnsupportedObjectPropertyValueTypeAnnotationParserError in its own throwing function and reuse that function passing a proper type. The error is thrown at lines 281, 290 and 299 in both Flow and TypeScript parsers.
  • Refactor the code using a dictionary and avoiding the three different ifs in the Flow parser
  • Refactor the code using a dictionary and avoiding the three different ifs in the TS parser Commit aba6be6
• Extract all the errors in the flow/module/errors.js and in the typescript/module/errors.js into a single parser/errors.js file. All the errors must drop the corresponding Flow or Typescript token in the name and take an extra language parameter in the constructor. Also, rename the hasteModuleName parameter to nativeModuleName.
  Assigned to @tarunrajput Commit 7b345bc
• Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:
  • [Assigned to @gabrieldonadel ] InterfaceNotFound Commit c9338c4
  • [Assigned to @Marcoo09 ]MoreThanOneModule Commit f628edc
  • [Assigned to @mohitcharkha]MisnamedModuleFlowInterfaceParserError Commit 9fb3700
  • [Assigned to @vinayharwani13]UnusedModuleFlowInterfaceParserError Commit a33f672
  • [Assigned to @mohitcharkha] MoreThanOneModuleRegistryCallsParserError Commit ab22e3a
  • [Assigned to @dakshbhardwaj]IncorrectModuleRegistryCallArityParserError Commit 76c5b6f
  • [Assigned to @mdaj06]IncorrectModuleRegistryCallArgumentTypeParserError Commit bb519ec
  • [Assigned to @dhruvtailor7]UntypedModuleRegistryCallParserError Commit 1e15e21
  • [Assigned to @harshsiri110]IncorrectModuleRegistryCallTypeParameterParserError Commit bb519ec
• [Assigned to @ZihanChen-MSFT] Support intersection of object types, {...a, ...b, ...} in Flow is equivalent to a & b & {...} in TypeScript, the order and the form is not important. Commit 813fd04
• [Assigned to @ZihanChen-MSFT] Refactor the code using flattenProperties and its implementation is duplicated, it will become obvious after adding intersection type.
• [Assigned to @ZihanChen-MSFT] Automatically converting CodegenSchema.js to CodegenSchema.d.ts, and add type descriptions for exposed functions.
• [Assigned to @ZihanChen-MSFT] In CodegenSchema.js component property types are better to be defined in recursion, not to repeat everything in Array again.
• [Assigned to @AntoineDoubovetzky] Extract the function assertGenericTypeAnnotationHasExactlyOneTypeParameter (Flow TypeScript) into a single function in the parsers-common.js file and replace its invocation with this new function. Commit 790f40c
• Extract the content of the case 'RootTag' (Flow, TypeScript) into a single emitRootTag function in the parsers-primitives.js file. Use the new function in the parsers.
  Assigned to @MaeIg Commit 5f05b07
• Extract the content of the case 'Promise' (Flow, TypeScript) into a single emitPromise function in the parsers-primitives.js file. Use the new function in the parsers.
  Assigned to @AntoineDoubovetzky Commit 966f3cd
• [Assigned to @gabrieldonadel] Extract the content of the case 'Stringish' (Flow, TypeScript) into a single emitStringish function in the parsers-primitives.js file. Use the new function in the parsers. Commit 305f7c3
• Extract the content of the case 'Int32' (Flow, TypeScript) into a single emitInt32 function in the parsers-primitives.js file. Use the new function in the parsers.
  Assigned to @Naturalclar Commit db8c11d
• [Assigned to @AntoineDoubovetzky]Extract the content of the case 'Double' (Flow, TypeScript) into a single emitDouble function in the parsers-primitives.js file. Use the new function in the parsers. Commit 3ab7ef2
• [Assigned to @gabrieldonadel]Extract the content of the case 'Float' (Flow, TypeScript) into a single emitFloat function in the parsers-primitives.js file. Use the new function in the parsers. Commit: 87d6580
• [Assigned to @Marcoo09] Extract the content of the case 'Object' (Flow, TypeScript) into a single emitObject function in the parsers-primitives.js file. Use the new function in the parsers. Commit fd4451e
• [Assigned to @MaeIg] Wrap the TypeAlias resolution lines (Flow, TypeScript) in a proper typeAliasResolution function in the parsers-primitives.js files and replace those lines with the new function.
• [Assigned to @tarunrajput] Extract the content of the case 'BooleanTypeAnnotation' (Flow, TypeScript) into a single emitBoolean function in the parsers-primitives.js file. Use the new function in the parsers. Commit 7a2e346
• [Assigned to @youedd] Extract the content of the case 'NumberTypeAnnotation' (Flow, TypeScript) into a single emitNumber function in the parsers-primitives.js file. Use the new function in the parsers. Commit 54fc62c
• [Assigned to @youedd] Extract the content of the case 'VoidTypeAnnotation' (Flow, TypeScript) into a single emitVoid function in the parsers-primitives.js file. Use the new function in the parsers. Commit b3219fe
• [Assigned to @ken0nek]Extract the content of the case 'StringTypeAnnotation' (Flow, TypeScript) into a single emitString function in the parsers-primitives.js file. Use the new function in the parsers. Commit eda90e5
• [Assigned to @mohitcharkha] Extract the content of the case 'FunctionTypeAnnotation' (Flow, TypeScript) into a single emitFunction function in the parsers-primitives.js file. Use the new function in the parsers. Commit c403cd4
• [Assigned to @MaeIg] Extract the function createParserErrorCapturer (Flow TypeScript) into a single function in the parsers/utils.js file and replace its invocation with this new function. Commit 38fcafe
• [Assigned to @AntoineDoubovetzky] Extract the function visit (Flow TypeScript) into a single function in the parsers/utils.js file and replace its invocation with this new function. Commit 3c8d678
• [Assigned to @AntoineDoubovetzky] Extract the function isModuleRegistryCall (Flow TypeScript) into a single function in the parsers/utils.js file and replace its invocation with this new function. Commit: 83e2126
• [Assigned to @dhruvtailor7] This task is more advanced than the others and a 2-steps tasks. First, extract the visitor object into a separate dictionary in the same file (Flow, TypeScript. The signature of the visit method is in these links: Flow, TypeScript). Then, factor out the the getConfigType function (Flow, TypeScript) into the parsers/utils.js file.
• [Assigned to @MaeIg] This task is more advanced than the others. Extract the switch(configType) block (Flow, TypeScript) from the buildSchema function into a new function in the parsers/utils.js file and use it in the two functions. Note that the new function must accept some callbacks to wrapModule/ComponentSchema and to buildModule/ComponentSchema. Commit 8f484c3
• [Assigned to @gabrieldonadel] Export parseFile (Flow, TypeScript) in to a parseFile function in parsers/utils.js. Note that the function should accept a callback to buildSchema properly. Commit 376ffac
• [Assigned to @vinayharwani13] This task is much simple than the others, it just moves a type and there is no logic. Export the TypeDeclarationMap type (Flow, TypeScript) into a single type in the parsers/utils.js file. Commit 2934399
• [Assigned to @dakshbhardwaj] Extract the nullGuard function (Flow, TypeScript) into a function in the parsers-utils.js file and use it in the other parsers. Commit 1eaa092
• [Assigned to @MaeIg] Wrap the content of the case Array: and case ReadOnlyArray in Flow into a separate function, as it is for the TypeScript parser. This will enable us to unify the two parsers in a later step. Commit c388e6c
• [Assigned to @gabrieldonadel] This task is more advanced than the others Create a function to unify the default: case (Flow, TypeScript) into the parser-commons.js file and use it in the two parsers. For the if (CxxOnly statement, we may accept an OR between EnumDeclaration and TSEnumDeclaration. The function should accept a ParserType parameter to implement the proper logic to extract the memberType variable. Ideally, we should create a couple of supporting functions to implement those logics. Commit ea55e3b
• [Assigned to @youedd] This task is more advanced than the others Create a function to unify the unionType and the TSUnionType. This task may share some logic from the previous task. The function should accept a ParserType parameter to implement the proper logic to extract the memberType variable. Ideally, we should create a couple of supporting functions to implement those logics. Commit 0627cd6
• [Assigned to @tarunrajput] Create a function emitMixedTypeAnnotation into the parsers-commons.js file to put together this code from Flow and TypeScript. Commit b87d371
• [Assigned to @harshsiri110] Extract the logic that throw the UnsupportedFunctionReturnTypeAnnotationParserError (Flow, TypeScript) into a new function in the the parsers/error-utils.js file. The function should encapsulate the logic that decide whether to throw the error or not. Please reuse the UnsupportedFunctionReturnTypeAnnotationParserError that has already been exported in the parsers/errors.js file. Commit 3247436
• [Assigned to @mohitcharkha] Extract the logic that throws the UnsupportedModulePropertyParserError (Flow, TypeScript) into a new function in the parsers/error-utils.js file. It should take a parameter ParserType to discriminate the logic of the two. Please reuse the UnsupportedModulePropertyParserError that has already been exported in the parsers/errors.js file. Commit f645404
• [Assigned to @youedd] Extract the nameToValidate logic (Flow, TypeScript) into a shared function into the parser/utils.js file. Notice that you may need a callback to update the cxx boolean. Commit 633498f
• [Assigned to @ZihanChen-MSFT] Support function signature along with function type properties in commands. Commit ae1d54b
• [Assigned to @MaeIg] Extract the parseFile function in the parsers-commons.js file to a top level buildSchema function which takes additional parameters to properly parse the content, get the config type and to build the schema, based on the language used. Commit 3f2691c
• [Assigned to @MaeIg] Extract the buildSchema function (Flow, TypeScript) in the parsers-commons.js file to a top level buildSchema function which takes additional parameters to properly parse the content, get the config type and to build the schema, based on the language used. Commit 4628150
• [Assigned to @Pranav-yadav ] Note: this task depends on "Extract the UnsupportedArrayElementTypeAnnotationParserError" Extract the function translateArrayTypeAnnotation (Flow, TypeScript) into a funtion in the parsers-primitives.js file. Commit 5a20bd5
• [Assigned to @gabrieldonadel] Note: This task depends on Extract the function translateArrayTypeAnnotation Extract the content of the case Array and case ReadOnlyArray (Flow, Typescript) into an emitArrayType function in the parsers-primitives.js file. Commit ea9e78d
• [Assigned to @Pranav-yadav] Extract the content of the tryParse (Flow, TypeScript)lambda into a proper parseObjectProperty function into the parsers-commons.js file. Commit 5744b21
• [Assigned to @AntoineDoubovetzky] Extract the UnsupportedFunctionParamTypeAnnotationParserError (Flow, Typescript) in its own throwing function (if it does not exists already) and reuse that function passing a proper type. Then, refactor the code using a dictionary and avoiding the three different ifs in both parsers. Commit 8c69b6c
• [Assigned to @gabrieldonadel] This task is more complex than the others and it depends on Extract the UnsupportedFunctionParamTypeAnnotationParserError Extract the translateFunctionTypeAnnotation (Flow, TypeScript)into a common function in the parsers-primitives.js file. This function extracts some information from the ASTs that have different structures for Flow and Typescript. Whenever there is such difference, create an helper function that takes the typeAnnotation and the language to make the decision. For example: in the for loop at the beginning of the function, the flow parser gets the list of parameters from flowFunctionTypeAnnotation.params while the typescript parser uses typescriptFunctionTypeAnnotation.parameters. In this case, you'll have to create a function getTypeAnnotationParameters(typeAnnotation, language) with a simple switch over the languages to return the array of parameters. Commit 62244d4
• [Assigned to @Marcoo09] This task depends on Extract the translateFunctionTypeAnnotation Move the translateFunctionTypeAnnotation invocation (Flow, TypeScript) into the emitFunction call so that the case FuntionTypeAnnotation results in a one-liner. Commit 64ea7ce
• [Assigned to @Pranav-yadav] This task depends on Extract the translateFunctionTypeAnnotation Extract the buildPropertySchema (Flow TypeScript) into the parsers-commons.js file. It has to take the language parameter to extract the value and an additional callback for the resolveTypeAnnotation function. Commit fb37dea
• [Codegen_buildModuleSchema - assign to @tarunrajput] Extract the buildModuleSchema function (Flow, TypeScript)in the parsers-commons.js function. The two functions are almost identical except for the filter(property =>) at the end of the function, which is different based on the language. Commit 3cd97e4
• [Assigned to @Pranav-yadav] Move the emitMixedTypeAnnotation function to the parser-primitives.js file. Commit 95e685a
• [Assigned to @AntoineDoubovetzky] Create a new function typeParameterInstantiation in the parsers.js file and add documentation to it. Implement it properly in the FlowParser.js and in the TypeScriptParser.js. Update the signature of assertGenericTypeAnnotationHasExactlyOneTypeParameter function to take the Parser instead of the language and use the new function in place of the ternary operator ?:. Commit 8a847a3
• [Assigned to @youedd] Create a new function remapUnionTypeAnnotationMemberNames in the parser.js file and add documentation to it. Implement it properly in the FlowParser.js and in the TypeScriptParser.js. Remove the function remapUnionTypeAnnotationMemberNames and update the emitUnionTypeAnnotation signature to accept a Parser parameter instead of a language one. Use the new Parser function instead of the old one here. Commit a7ae988
• [Assigned to @gabrieldonadel] Create a getKeyName function in the parser.js file and document it. Implement it properly in the FlowParser.js and in the TypeScriptParser.js: it should contain the ObjectTypeProperty and the ObjectTypeIndexer for Flow and the TSObjectTypeProperty and the TSObjectTypeIndexer. Remove the old getKeyName function and use the new one in the parser object wherever the other was used. Commit f849f49
• [Assigned to @AntoineDoubovetzky] Update the IncorrectlyParameterizedGenericParserError error in the error.js file to accept a Parser instead of a ParserType parameter. Use the nameForGenericTypeAnnotation method of the parser to extract the genericName and delete the ternary operator. Commit edc4ea0
• [Assigned to @tarunrajput] Create a checkIfInvalidModule function in the parser.js file and document it. Implement this logic in the FlowParser.js and this logic in the TypeScriptParser.js. Refactor the throwIfIncorrectModuleRegistryCallTypeParameterParserError function to accept a Parser instead of a ParserType and use the newly created function instead of the if (language) logic. Commit e97fb46
• [Codegen_functionTypeAnnotation - assigned to @gabrieldonadel] Define a functionTypeAnnotation in the parser.js file and document it. Implement this logic in the FlowParser.js and this logic in the TypeScriptParser.js. Refactor the throwIfModuleTypeIsUnsupported function to accept a Parser instead of a ParserType and use the newly created function instead of the if (language) logic. Commit 43986e8
• [Codegen 74 assigned to @AntoineDoubovetzky] Move getTypes functions from utils.js to specific Parsers. Right now we have two Parser classes that takes care of the language specific details and two utils files that contains similar logic. We would like to move everything under the Parsers classes for better OOP architecture and to encourage code-reuse. Commit f23f7f4
• [Codegen 75 assigned to @gabrieldonadel] Create a throwIfPartialWithMoreParameter function in the error-utils.js and extract the error-emitting code from Flow and Typescript index files. Commit 5ff8895
• [Codegen 76 - assigned to @tarunrajput ] Create a throwIfPartialNotAnnotatingTypeParameter function in the error-utils.js file and extract the error-emitting code from Flow and Typescript index files. Notice that the way in which the annotatedElement is computed is different, therefore we should add an extractAnnotatedElement function to the Flow and TypeScript parsers. Commit 371e263
• [Codegen 77 - assigned to @MaeIg] Extract the functions to compute partial properties from the index.js file (Flow and TypeScript)in the Flow and TypeScript parsers. Commit a448c6d
• [Codegen 78 - Assigned to @Pranav-yadav] It depends on [Codegen 75][Codegen 76][Codegen 77] Extract the logic that emits Partial values in an emitPartial function, which takes the Parsers as parameter. Commit 2f25261
• [Codegen 79 - Assigned to @Pranav-yadav] It depends on [Codegen 78] Extract the basic cases logics (case Stringish, case Int32, case Double, ..., case Partial. Flow lines and TypeScript lines) into a function emitCommonTypes in parsers-primitives.js. Make sure that the default case returns null. Call this function in the default: case (Flow, TypeScript) of the index.js file: if the function return something, return that from the default case; otherwise if the emitCommonTypes returns null, keep the current default implementation (throw the error). Commit 2f25261
• [Codegen 80 - assigned to @kyawthura-gg] It depends on [Codegen 79] Convert the emitCommonTypes implementation from a switch based implementation to a dictionary based one. Commit 4a15f90
• [Codegen 81 - Assigned to @gabrieldonadel] It depends on [Codegen 80] Expand the emitcCommonTypes function adding the remaining basic types: lines for Flow and lines for Typescript: the way to do it is by using the flow keys in the dictionary and by implementing a convertKeywordToTypeannotation function in the two parsers. The flow parser will return the same parameter it receives as input, the TypeScript parser will convert the TypeAnnotation to Keywords. For example, TSBooleanKeyword will become BooleanTypeAnnotation. Call the emitCommonTypes in the default: case: if it return something, use that as returned type. Otherwise, keep the current implementation which throws an error. Commit 66ae98e
• [Codegen 82 - assigned to @kyawthura-gg] Move isModuleInterface function (Flow, TypeScript) to the Flow and TypeScript parsers. Commit 85245af
• [Codegen 83 - assigned to @Pranav-yadav] Create a function throwIfIncorrectModuleRegistryCallArgumnent function in the error-utils.js file and factor together the code from Flow and TypeScript. Update the Parsers to return the right Literl type Commit 1362820
• [Codegen 84 - assigned to @Pranav-yadav] It depends on [Codegen 83] export the parseModuleName anonymous function (Flow, TypeScript) in a common parseModuleName function in the parsers-commons.js file. Commit 05454fa
• [Codegen 85 - assigned to @tarunrajput] The parses/flow/components/schema.js and parses/typescript/components/schema.js are the same. Move the schema.js from the one of the two folders to the parsers common root. Delete the other. Update the references to use the shared file. Commit 8be9dbf
• [Codegen 86 - Assigned to @ken0nek] The buildPropSchema function in parsers/typescript/components/props.js and parsers/flow/components/props.js is the same. move it in parser-commons and use it in the origina files. Commit 0212179
• [Codegen 87 - Assigned to @siddarthkay] Depends on [Codegen 86] Add the getProps function to the Parsers abstract class and implement it in the Flow and TypeScript parsers: this is the reference implementation for Flow and TypeScript. Remove the props.js files afterward. Commit fc927d1
• [Codegen 88 - assigned to @tarunrajput] Move the Visitor.js file from parsers/flow/Visitor.js to parser-promitives.js. Copy the TSInterfaceDeclaration(node: $FlowFixMe) function and add it to the Visitor.js just copied. Remove the parsers/typescript/Visitor.js. Make sure we use the same Visitor in both parsers. (We will end up with a Visitor that is the union of the two, being able to handle both Flow and TS. In this specific case, this trade-off make sense as it allows us to remove one file, several duplicated lines for a small price.) Commit d9f2cbe
• [Codegen 89 - Assigned to @MaeIg] Remove the const language variable from flow/modules/index.js and replace its usage with parser.language() Commit 26b22a6
• [Codegen 90 - Assigned to @MaeIg] Remove the const language variable from typescript/modules/index.js and replace its usage with parser.language() Commit 26b22a6
• [Codegen 91 - Assigned to @yux-m] Extract the inner switch in typescript/modules/index.js at line to parse the case TSTypereference (lines)into a function translateTypeReferenceAnnotation() (the goal is to try and get a simpler switch statement and to spot structural similiarities between the flow and typescript index.js files) Commit 94f505b
• [Codegen 92 - assigned to @kyawthura-gg] The getCommandOptions function in parsers/typescript/components/options.js and parsers/flow/components/options.js is the same. move it in parser-commons and use it in the original files. If the file two options.js files are empty, delete them. Commit 221aacd
• [Codegen 93 - assigned to @tarunrajput] The getOptions function in parsers/typescript/components/options.js and parsers/flow/components/options.js is the same. move it in parser-commons and use it in the original files. If the file two options.js files are empty, delete them. 221aacd
• [Codegen 94 - assigned to @siddarthkay] The extendsForProp function in parsers/typescript/components/extends.js and parsers/flow/components/extend.js is the same. Move it in parser-commons and use it in the origina files. Commit c937162
• [Codegen 95 - assigned to @Pranav-yadav] Extract the defaultExports.forEach(statement => (Flow, TS) function in parser-commons, so that it accept a Parser parameter to unify the behaviors between flow and typescript. The Parser object needs to be enriched with all the methods to extract the required information from the Node, if they are not there yet. Commit c0a46c696b7365a0b74fc4dbf41e83de24305d7f
• [Codegen 96 - assigned to @AntoineDoubovetzky] Create a throwIfConfigNotfound in the error-utils.js file and extract the error code from Flow and TS Commit 8fbcfce
• [Codegen 97 - assigned to @AntoineDoubovetzky] Create a throwIfMoreThanOneConfig in the error-utils.js file and extract the error code from Flow and TS Commit 8fbcfce
• [Codegen 98 - assigned to @MaeIg] Extract the namedExports.map(statement => (Flow, TS) function in parser-commons, so that it accept a Parser parameter to unify the behaviors between flow and typescript. The Parser object needs to be enriched with all the methods to extract the required information from the Node, if they are not there yet. Commit 5ff01bc
• [Codegen 99 - assigned to @tarunrajput] Extract the throwIfMoreThanOneCodegenNativecommands error in the error-utils.js file and extract the error code from Flow and TS Commit (347d6f8)[https://github.com/facebook/react-native/commit/347d6f8d899d7a8f5c901611923c9c09039acbdb]
• [Codegen 100 - assigned to @marcocaldera] Create a createComponentConfig function in the parser-commons.js file. It takes the foundConfig and the commandTypeNames as parameters and returns the component config object. Extract the return statements (Flow TS) and use those implementations in that function. Commit 320e51f
• [Codegen 101 - assigned to @kyawthura-gg] The code of getCommandProperties is almost identical in Flow and TS. There are small differences between flow/ts, so we need for it to accept a Parser object. Enrich the parser object with the required methods if necessary. Commit 969a8d0
• [Codegen 102 - assigned to @Pranav-yadav] Extract the code to compute the extendsProps and the props properties in Flow in a getProps() -> {extendsProps, props} function into the same index.js file. This will help unifying the buildComponentSchema functions between Flow and TS so we can factor it out in a later step. Commit efc6e14
• [Codegen 103 - assigned to @gabrieldonadel] Extract the code to compute the extendsProps and the props properties in TypeScript in a getProps() -> {extendsProps, props} function into the same index.js file. This will help unifying the buildComponentSchema functions between Flow and TS so we can factor it out in a later step Commit e962d43

• [Codegen 104 - Assigned to @siddarthkay] Add a getResolvedTypeAnnotation function to the Parser class. Implement that function in the FlowParser and TypeScriptParser, using the implementation found in the parsers/flow/utils.js and parsers/typescript/utils.js. Then, replace those lines using the new function. Commit e09d585
• [Codegen 105 - Assigned to @tarunrajput] Add a typeAlias: string property to the Parser class. Implement it in the Flow parser so that it returns TypeAlias and in
  the TypeScriptParser so that it returns TSTypeAliasDeclaration. Replace the case in the switch in the parsers/flow/utils.js and parsers/typescript/utils.js with this prop. Commit 0de4768
• [Codegen 106 - Assigned to @tarunrajput] Add a enumDeclaration: string property to the Parser class. Implement it in the Flow parser so that it returns EnumDeclaration and in the TypeScriptParser so that it returns TSEnumDeclaration. Replace the case in the switch in the parsers/flow/utils.js and parsers/typescript/utils.js with this prop. Commit 91c60cb
• [Codegen 107 - @Shubham1429] Add a interfaceDeclaration: string property to the Parser class. Implement it in the Flow parser so that it returns InterfaceDeclaration and in the TypeScriptParser so that it returns TSInterfaceDeclaration. Replace the case in the switch in the parsers/typescript/utils.js with this prop. Commit 9301c8f
• [Codegen 108 - Depends on 105, 106, 107 - Assigned to @tarunrajput] Move the switch construct from parsers/typescript/utils.js and parsers/flow/utils.js to the parsers-commons.js file, in a handleGenericTypeAnnotation function. Use that function in place of the switch. Commit (8ffaede)[https://github.com/facebook/react-native/commit/8ffaede05a72973805f668e1dda41060ee054dc4]
• [Codegen 109 - assigned to @tarunrajput] Extract the typeAnnotation doesn't have a name error (Flow; TypeScript) in throwIfEventHasNoName function which takes a typeAnnotation and a parser as parameters. Use it in place of the if in the above call sites. Commit c65ab4d
• [Codegen 110 - Assigned to @kyawthura-gg ] Add a nullLiteralTypeAnnotation: string property into the Parser object and implement it in the FlowParser (returning
  NullLiteralTypeAnnotation) and in the TypeScriptParser(returning TSNullKeyword). Replace them in the parsers/flow/components/events.js and parsers/typescript/components/events.js. Commit b5c01ee
• [Codegen 111 - assigned to @Shubham1429] Add an undefinedLiteralTypeAnnotation: string property into the Parser object and implement it in the FlowParser (returning VoidLiteralTypeAnnotation) and in the TypeScriptPArser(returning TSUndefinedKeyword). Replace them in and parsers/typescript/components/events.js. Commit cf8184d
• [Codegen 112 - Depends on 110 and 111 - assigned to @kyawthura-gg] - Extract the content of the if branches that handle the EventHandlers (Flow, TypeScript) into a handleEventHandler function in parsers-commons.js. This will take a name, a typeAnnotation, a parser and a findEventArgumentsAndType function as parameters. Use the switch based approach from TypeScript. Commit ccd191d79
• [Codegen 113 - assigned to @Shubham1429] Add a function isOptionalProperty(property) in the Parser object and implement it in FlowParser and TypeScriptParser, using the implementation you can find in the parsers/flow/components/events.js and parsers/typescript/components/events.js. Use the parsers in the buildPropertiesForEvent. Commit ec66f2e
• [Codegen 114 - Assigned to @MaeIg] Add a function getTypeAnnotationFromProperty(property) in the Parser object and implement it in FlowParser and TypeScriptParser, using the implementation you can find in the parsers/flow/components/events.js and parsers/typescript/components/events.js. Use the parsers in the buildPropertiesForEvent. Commit (663a018)[https://github.com/facebook/react-native/commit/663a0187094b12d423742e65523c20e778925973]
• [Codegen 116 - assigned to @siddarthkay] Extract the getEventArgument function from Flow and TypeScript in a getEventArgument function in parsers-commons.js. Commit d46f92c
• [Codegen 117 - assigned to @AntoineDoubovetzky] Extract the code that throws if argumentProps are null in a throwIfArgumentPropsAreNull function in the error-utils.js file. Use it in the flow/components/events.js and in the typescript/components/event.js files Commit f05252a
• [Codegen 118 - Assigned to @tarunrajput] Extract the code that throws if argumentProps are null in a throwIfBubblingTypeisNull function in the error-utils.js file. Use it in the flow/components/events.js and in the typescript/components/event.js files Commit 8494707
• [Codegen 119 - Depends on 117, 118 - Assigned to @siddarthkay] Extract the content of the if (bubblingType && argumentProps) { from Flow and the content of the else branch from TypeScript in a 'emitBuildEventSchema' function in parsers-commons. Use the new function in the call site. Refactor the callsite so that there are no if-else as, at this point, we know that bubblingType and argumentProps are not null. Commit 1d87279
• [Codegen 120 - Assigned to @Pranav-yadav] Extract the findComponentConfig from Flow and TypeScript from the index.js's files to the parser-commons.js file. Commit e240879
• [Codegen 121 - Depends on Codegen 107 - Assigned to @Shubham1429] Extract the code that checks whether typeAlias.type is an InterfaceDeclaration (Flow, TypeScript) into a throwIfTypeAliasIsNotInteface error. Create this new function in the error-utils.js file. Commit 66f4a91
• [Codegen 122 - Depends on 121 - Assigned to @Shubham1429] Extract the buildCommandProperties function (Flow, TypeScript) from the index.js's files to the parsers-commons.js file. Commit (34c1923)[https://github.com/facebook/react-native/commit/34c19232d36190650a7d2d1596ac4f9d4a725777]
• [Codegen 123 - Assigned to @frankcalise] Create a function emitBoolProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit 66f4a91
• [Codegen 124 - Assigned to @cloudpresser] Create a function emitStringProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit 7062398
• [Codegen 125 - Assigend to @ahmadao2214] Create a function emitInt32Prop(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit (52154e5)[https://github.com/facebook/react-native/commit/52154e54a29f0fc0e5dd73102bd384298a3ce460]
• [Codegen 126 - Assigned to @rota-rossi] Create a function emitDoubleProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit 8ca085c
• [Codegen 127 - Assigned to @foestauf] Create a function emitFloatProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit 1a1e399
• [Codegen 128 - Assigned to @gabrieldonadel] Create a getObjectProperties(typeAnnotation) function in Parser.js which returns the properties of an object represented by a type annotation. Use this code for Flow and this code for TypeScript. Use parser.getObjectProperties(typeAnnotation) instead of the language specific to map the object properties Commit b5f5221
• [Codegen 129 - Depends on 128 - Assigned to @tarunrajput] Create a function emitObjectProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit 202b965
• [Codegen 130 - assigned to @Zwem ] Create a getLiteralValue(option) function in Parser.js which returns the literal value of an union represented, given an option. Use this code for Flow and this code for TypeScript. Use parser.getObjectProperties(typeAnnotation) instead of the language specific to map the object properties Commit 6d5be26
• [Codegen 131 - Depends on 130 - assigned to @Zwem] Create a function emitUnionProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. 5eaf28b
• [Codegen 132 - Assigned to @siddarthkay] Create a function emitMixedProp(name: string, optional: boolean) in parser-primitives.js. Factor out the code from Flow and TypeScript into that function. Use that function in the original call site. Commit (a497882)[https://github.com/facebook/react-native/commit/a4978823841177ff70959e28ed8343b78fb14c20]
• [Codegen 133 - Assigned to @Randall71] Create an extractTypeFromTypeAnnotation(typeAnnotation) function in the Parser base class. Implement it using this code for Flow and this code for TypeScript. Replace the invocation of that function with the one from the parser Commit 67eb494
• [Codegen 134 - Assigned to @cloudpresser] Create a function getTypeAnnotationName(typeAnnotation) in the Parser base class. Implement it using this code for Flow and this code for Typescript. Replace the callsites with the new function. Commit e22d1a1
• [Codegen 135 - assigned to @siddarthkay] Create a function getPaperTopLevelNameDeprecated(typeAnnotation) in the Parser base class. Implement it using this code for Flow and this code for Typescript. Replace the callsites with the new function. 8bcfc49
• [Codegen 137 - Assigned to @tarunrajput] Extract buildPropertiesForEvent into parsers-commons.js file. Use the code from either Flow or TypeScript which now should be equal. Delete the original ones and use the newly created method instead of those. Commit 942bd61
• [Codegen 138 - Assigned to @siddarthkay] Add a getProperties function to the Parser base class. Move the Flow code to the FlowParser and the TypeScript code to the TypeScriptParser. Use the parser.getProperties function in place of the original one. Commit e73c00f576
• [Codegen 139 - Assigned to @branaust] Move the verifyProprsNotAlreadyDefined functions from Flow and [from TypeScript(https://github.com/facebook/react-native/blob/d8ced6f8953cd896471983714e722caf50783960/packages/react-native-codegen/src/parsers/typescript/components/componentsUtils.js#LL486-L495)] to the parsers-commons.js file. Use the new function in place of the others. Commit a108dcb

[gabrieldonadel]

Hi @cipolleschi I would like to help with the Extract the error.js file from the flow and typescript folders into an error.js file in their parent folder. Then, have the two parsers use the same ParserError task

[tarunrajput]

Hey @cipolleschi I'd like to work on following task:
Extract the modules/schema.js from the flow and typescript folders in a shared parsers-commons.js file. Then, have the two parsers use the same wrapModuleSchema function for modules.

[AntoineDoubovetzky]

Hey @cipolleschi, thank you for this umbrella issue!
I'd like to pick the third one:

Extract the modules/utils.js from the flow and typescript folders in a shared parsers-commons.js file. Then, have the two parsers use the same wrapModuleSchema function for modules.

[dmahajan980]

Hi @cipolleschi, I would like to try helping with this task:

Extract the UnsupportedArrayElementTypeAnnotationParserError in its own throwing function and reuse that function passing a proper type. The error is thrown at lines 132, 141 and 150 in both Flow and TypeScript parsers.

[ZihanChen-MSFT]

Sounds like a good place to log what I am going to do next for the TypeScript part:

ToDo

• Automatically converting CodegenSchema.js to CodegenSchema.d.ts, and add type descriptions for exposed functions.

Done

• Refactor: In component, props and events pick properties from the component interface by themselves independently, I would like to reverse the direction, to have a function dispatching properties to props and events, to reduce duplicated code.
  • Refactor codegen: Dispatch props and events from a central place. #34975
• Support intersection of object types, {...a, ...b, ...} in Flow is equivalent to a & b & {...} in TypeScript, the order and the form is not important.
  • Add intersection types in react-native-codegen for TypeScript #35247
• Refactor: the code using flattenProperties and its implementation is duplicated, it will become obvious after adding intersection type.
  • N/A
• Support function signature along with function type properties in commands
  • Add TSMethodSignature to react-native-codegen #35311
• Add T in Promise<T> in CodegenSchema.js
  • Fix codegen to add T of Promise<T> in CodegenSchema.js #35345
• Fix output from {[key:T]:U}
  • Fix codegen output for object with indexer #35344
• Add interface supports in TypeScript module.
  • Turbo module codegen support interface like alias in module #35812 (not fully addressed)
  • Turbo module codegen support interface with inheritance in module #36011 (addressed)
• Add intersection type supports in TypeScript module.
  • Turbo Module supports intersection type for TypeScript #36037
• Add generated CodegenSchema.d.ts and other files to the package.
  • Add minimum necessary .d.ts files to react-native-codegen #36102

And eventually, since codegen parses TypeScript and Flow using babel, it is no reason to implement them separately. In order to do that, I will try to refactor the TypeScript part and make it more generalized, to be ready to accept Flow AST in a low effort.

[dhruvtailor7]

Hi @cipolleschi. I would like to work on the following task.

Extract the UnsupportedObjectPropertyValueTypeAnnotationParserError in its own throwing function and reuse that function passing a proper type. The error is thrown at lines 281, 290 and 299 in both Flow and TypeScript parsers.

[tarunrajput]

Hi @cipolleschi. I would like to pick this one too: Extract all the errors in the flow/module/errors.js and in the typescript/module/errors.js into a single parser/errors.js file. All the errors must drop the corresponding Flow or Typescript token in the name and take an extra language parameter in the constructor. Also, rename the hasteModuleName parameter to nativeModuleName

[gabrieldonadel]

Hi @cipolleschi I would like to help with the task below as well

Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

• InterfaceNotFound

[cipolleschi]

@gabrieldonadel these are supposed to be a different task for each error. The logic to decide whether to throw each error is slightly different from each other. Is it ok if we start with the first one?

[gabrieldonadel]

@gabrieldonadel these are supposed to be a different task for each error. The logic to decide whether to throw each error is slightly different from each other. Is it ok if we start with the first one?

Ohh sorry @cipolleschi , I didn't notice that each of these was one task, can I have the InterfaceNotFound task then?

[Marcoo09]

Hi @cipolleschi I would like to help with the following task:

• Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

  • MoreThanOneModule

[mohitcharkha]

Hi @cipolleschi, I would like to work on the following task

Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

• MisnamedModuleFlowInterfaceParserError

[vinayharwani13]

Hi @cipolleschi, I would like to take this up

Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

• UnusedModuleFlowInterfaceParserError

[mohitcharkha]

Hi @cipolleschi, I would like to work on the following task

Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

• MoreThanOneModuleRegistryCallsParserError

[dakshbhardwaj]

Hi @cipolleschi, I would like to work on the following task

Extract each individual exception to a separate function inside an error-utils.js file. Each function should accept an extra parser parameter, throw the proper error based on the parser and use it in the Flow parser and in the TypeScript one. All these errors can be found in the buildModuleSchema function (Flow, Typescript) The list of exceptions to handle is:

• IncorrectModuleRegistryCallArityParserError

[mdaj06]

Hi @cipolleschi I would like to take the following issue:

IncorrectModuleRegistryCallArgumentTypeParserError

[cipolleschi]

Hi @mohitcharkha! before taking another task, please open a PR on the one already assigned. You are currently assigned to fixing the MisnamedModuleFlowInterfaceParserError. Thanks a lot!

[cipolleschi]

Small update: given the interest the initiative is having, I added some more tasks for people to pick up. 🎉 🎉

Thank you to every one of you for the amazing work! 😄

[Naturalclar]

Hello @cipolleschi! I'd like to work on the following issue:

Extract the function assertGenericTypeAnnotationHasExactlyOneTypeParameter (Flow TypeScript) into a single function in the parsers-common.js file and replace its invocation with this new function.

edit: seems like this pr needs to be merged first: #34896

[MaeIg]

Hello @cipolleschi, this umbrella issue is awesome !

I would like to work on the following task:

Extract the content of the case 'RootTag' (Flow TypeScript) into a single emitRootTag function in the parsers-primitives.js file. Use the new function in the parsers.

[siddarthkay]

@cipolleschi : codegen-135 is merged.
can you now assign codegen-119 to me ?

[cipolleschi]

Only 2 more tasks to complete, guys!
You really are amazing! 🙌

[cipolleschi]

Hey everyone! Thank you so much for contributing to react native and to work on these tasks with so much passion and love.
I'm about to close this issue now, but stay tuned: an Improving Codegen, Vol. II will arrive soon.

There is so much more to do, to simplify the parsing of Components and then to work on the Generators!

Thank you so much to: @gabrieldonadel, @tarunrajput, @AntoineDoubovetzky, @matiassalles99, @dhruvtailor7, @Marcoo09, @mohitcharkha, @vinayharwani13, @mdaj06, @youedd, @harshsiri110, @ZihanChen-MSFT, @ken0nek, @MaeIg, @Naturalclar, @dakshbhardwaj, @Pranav-yadav, @kyawthura-gg, @siddarthkay, @yux-m, @marcocaldera, @Shubham1429, @cloudpresser, @ahmadao2214, @foestauf, @Zwem, @Randall71, @branaust, @frankcalise, @rota-rossi

I hope I haven't forget anyone!