CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native--codegen

Code generation tools for parsing React Native component definitions and generating native platform code.

—

Pending
Overview
Eval results
Files

file-parsing.mddocs/

File Parsing

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

Capabilities

Flow Parser

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

/**
 * Parser for Flow-annotated React Native component files
 */
class FlowParser {
  /**
   * Parse a Flow file and extract React Native component/module schema
   * @param filename - Path to the Flow file to parse
   * @returns Schema object describing the components and modules
   */
  parseFile(filename: string): SchemaType;
}

Usage Example:

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

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

console.log('Parsed modules:', Object.keys(schema.modules));

TypeScript Parser

Parse TypeScript files containing React Native component definitions.

/**
 * Parser for TypeScript React Native component files
 */
class TypeScriptParser {
  /**
   * Parse a TypeScript file and extract React Native component/module schema
   * @param filename - Path to the TypeScript file to parse  
   * @returns Schema object describing the components and modules
   */
  parseFile(filename: string): SchemaType;
}

Usage Example:

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

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

console.log('Parsed modules:', Object.keys(schema.modules));

Multi-File Parsing

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

/**
 * Parse multiple files and output JSON schemas to console
 * @param files - Array of file paths to parse (supports both .js/.ts/.tsx extensions)
 */
function parseFiles(files: Array<string>): void;

Usage Example:

const parseFiles = require('@react-native/codegen/lib/cli/parser/parser');

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

Supported File Types

The parsers automatically detect file types based on extensions:

  • Flow files: .js files with Flow annotations (// @flow)
  • TypeScript files: .ts and .tsx files
  • Component files: Files containing codegenNativeComponent calls
  • Module files: Files containing extends TurboModule definitions

Schema Output Format

All parsers produce schemas in the same standardized format:

interface SchemaType {
  /** Optional library name for the schema */
  libraryName?: string;
  /** Map of module names to their definitions */
  modules: {
    [hasteModuleName: string]: ComponentSchema | NativeModuleSchema;
  };
}

interface ComponentSchema {
  type: 'Component';
  /** Map of component names to their configurations */
  components: {
    [componentName: string]: ComponentInfo;
  };
  /** Platforms where this component should not be generated */
  excludedPlatforms?: Array<PlatformType>;
}

interface NativeModuleSchema {
  type: 'NativeModule';
  /** Type aliases used in the module */
  aliasMap: NativeModuleAliasMap;
  /** Enums defined in the module */
  enumMap: NativeModuleEnumMap;
  /** Module specification with methods and properties */
  spec: NativeModuleSpec;
  /** Platforms where this module should not be generated */
  excludedPlatforms?: Array<PlatformType>;
}

type PlatformType = 'iOS' | 'android';

Component Definition Patterns

The parsers recognize these patterns in source files:

Component Export Pattern

// Flow
export default codegenNativeComponent<Props>('MyComponent');

// TypeScript  
export default codegenNativeComponent<Props>('MyComponent');

TurboModule Pattern

// Flow
export interface Spec extends TurboModule {
  +getConstants: () => {||};
  +getString: (arg: string) => string;
}

// TypeScript
export interface Spec extends TurboModule {
  readonly getConstants: () => {};
  getString(arg: string): string;
}

Error Handling

Parsing errors are reported through the error handling system:

/** Error classes for parsing failures */
class UnsupportedObjectPropertyTypeAnnotationParserError extends Error {
  constructor(message: string, hasteModuleName: string, propertyName: string);
}

/** Utility functions for error handling and reporting */
function getErrorMessage(error: ParserError): string;

When parsing fails, the parsers throw descriptive errors indicating:

  • The file being parsed
  • The specific construct that couldn't be understood
  • Suggestions for fixing the issue

Parser Implementation Details

Both parsers use the same underlying architecture:

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

Install with Tessl CLI

npx tessl i tessl/npm-react-native--codegen

docs

cli-tools.md

code-generation.md

file-parsing.md

index.md

schema-management.md

tile.json