0
# File Parsing
1

2
Parse Flow and TypeScript files containing React Native component definitions and convert them to standardized schemas.
3

4
## Capabilities
5

6
### Flow Parser
7

8
Parse Flow-annotated JavaScript files containing React Native component definitions.
9

10
```javascript { .api }
11
/**
12
 * Parser for Flow-annotated React Native component files
13
 */
14
class FlowParser {
15
  /**
16
   * Parse a Flow file and extract React Native component/module schema
17
   * @param filename - Path to the Flow file to parse
18
   * @returns Schema object describing the components and modules
19
   */
20
  parseFile(filename: string): SchemaType;
21
}
22
```
23

24
**Usage Example:**
25

26
```javascript
27
const { FlowParser } = require('@react-native/codegen/lib/parsers/flow/parser');
28

29
const flowParser = new FlowParser();
30
const schema = flowParser.parseFile('./MyComponent.js');
31

32
console.log('Parsed modules:', Object.keys(schema.modules));
33
```
34

35
### TypeScript Parser
36

37
Parse TypeScript files containing React Native component definitions.
38

39
```javascript { .api }
40
/**
41
 * Parser for TypeScript React Native component files
42
 */
43
class TypeScriptParser {
44
  /**
45
   * Parse a TypeScript file and extract React Native component/module schema
46
   * @param filename - Path to the TypeScript file to parse  
47
   * @returns Schema object describing the components and modules
48
   */
49
  parseFile(filename: string): SchemaType;
50
}
51
```
52

53
**Usage Example:**
54

55
```javascript
56
const { TypeScriptParser } = require('@react-native/codegen/lib/parsers/typescript/parser');
57

58
const typescriptParser = new TypeScriptParser();
59
const schema = typescriptParser.parseFile('./MyComponent.tsx');
60

61
console.log('Parsed modules:', Object.keys(schema.modules));
62
```
63

64
### Multi-File Parsing
65

66
Parse multiple files and output their schemas to console (CLI utility).
67

68
```javascript { .api }
69
/**
70
 * Parse multiple files and output JSON schemas to console
71
 * @param files - Array of file paths to parse (supports both .js/.ts/.tsx extensions)
72
 */
73
function parseFiles(files: Array<string>): void;
74
```
75

76
**Usage Example:**
77

78
```javascript
79
const parseFiles = require('@react-native/codegen/lib/cli/parser/parser');
80

81
// Parse multiple files - automatically detects Flow vs TypeScript
82
parseFiles(['./Component1.js', './Component2.tsx', './Module.ts']);
83
// Outputs JSON schema for each file to console
84
```
85

86
## Supported File Types
87

88
The parsers automatically detect file types based on extensions:
89

90
- **Flow files**: `.js` files with Flow annotations (`// @flow`)
91
- **TypeScript files**: `.ts` and `.tsx` files
92
- **Component files**: Files containing `codegenNativeComponent` calls
93
- **Module files**: Files containing `extends TurboModule` definitions
94

95
## Schema Output Format
96

97
All parsers produce schemas in the same standardized format:
98

99
```javascript { .api }
100
interface SchemaType {
101
  /** Optional library name for the schema */
102
  libraryName?: string;
103
  /** Map of module names to their definitions */
104
  modules: {
105
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
106
  };
107
}
108

109
interface ComponentSchema {
110
  type: 'Component';
111
  /** Map of component names to their configurations */
112
  components: {
113
    [componentName: string]: ComponentInfo;
114
  };
115
  /** Platforms where this component should not be generated */
116
  excludedPlatforms?: Array<PlatformType>;
117
}
118

119
interface NativeModuleSchema {
120
  type: 'NativeModule';
121
  /** Type aliases used in the module */
122
  aliasMap: NativeModuleAliasMap;
123
  /** Enums defined in the module */
124
  enumMap: NativeModuleEnumMap;
125
  /** Module specification with methods and properties */
126
  spec: NativeModuleSpec;
127
  /** Platforms where this module should not be generated */
128
  excludedPlatforms?: Array<PlatformType>;
129
}
130

131
type PlatformType = 'iOS' | 'android';
132
```
133

134
## Component Definition Patterns
135

136
The parsers recognize these patterns in source files:
137

138
### Component Export Pattern
139

140
```javascript
141
// Flow
142
export default codegenNativeComponent<Props>('MyComponent');
143

144
// TypeScript  
145
export default codegenNativeComponent<Props>('MyComponent');
146
```
147

148
### TurboModule Pattern
149

150
```javascript
151
// Flow
152
export interface Spec extends TurboModule {
153
  +getConstants: () => {||};
154
  +getString: (arg: string) => string;
155
}
156

157
// TypeScript
158
export interface Spec extends TurboModule {
159
  readonly getConstants: () => {};
160
  getString(arg: string): string;
161
}
162
```
163

164
## Error Handling
165

166
Parsing errors are reported through the error handling system:
167

168
```javascript { .api }
169
/** Error classes for parsing failures */
170
class UnsupportedObjectPropertyTypeAnnotationParserError extends Error {
171
  constructor(message: string, hasteModuleName: string, propertyName: string);
172
}
173

174
/** Utility functions for error handling and reporting */
175
function getErrorMessage(error: ParserError): string;
176
```
177

178
When parsing fails, the parsers throw descriptive errors indicating:
179
- The file being parsed
180
- The specific construct that couldn't be understood
181
- Suggestions for fixing the issue
182

183
## Parser Implementation Details
184

185
Both parsers use the same underlying architecture:
186

187
- **AST Parsing**: Use language-specific parsers (Babel for Flow, TypeScript compiler for TS)
188
- **Schema Building**: Convert AST nodes to standardized schema format
189
- **Type Resolution**: Resolve type references and build complete type definitions
190
- **Validation**: Ensure component/module definitions follow React Native conventions