microsoft/react-native-tscodegen

Generate react-native turbo modules using TypeScript

react-native-tscodegen

All works are ported to react-native, this project has stopped developing.

TypeScript Code Generation for React Native Turbo Module

• Index
  • Contributing
  • Building this repo
  • Packages
  • Deploying
  • Development

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Building this repo

yarn
yarn build
yarn test

Packages

@react-native-ts-codegen/tslint-shared

This is the shared tslint configuration for all other packages.

RN-TSCodegen

This is the TypeScript code generation for TurboModule in react native.

There are two important exported functions:

• typeScriptToCodeSchema function:
  • fileName argument: Full path to a TypeScript source file, a module name.
  • moduleName argument: The module name. It is not reflected in generated files.
  • targetName argument (optional): It will be used in the entry header file, if this TypeScript source file registers a native module.
  • Output: A SchemaType data structure.
• generator.generate function
  • options argument:
    • libraryName property: A string that becomes part of type names in generated files.
    • schema property: Result from typeScriptToCodeSchema
    • outputDirectory property: Full path to a folder to write files. Multiple files will be generated and most of the file names are hard-coded.
    • moduleSpecName property: Name of the entry header file, no file extension.
  • config arguments:
    • generators property: An array that is or a subset of ['descriptors', 'events', 'props', 'tests', 'shadow-nodes', 'modules'] to control what files are generated.

RN-TSCodegen-Test

This package contains all test cases for RN-TSCodegen, with unit test code.

@react-native-ts-codegen/minimum-flow-parser

This is a Flow parser, just enough to convert necessary files to TypeScript for this repo.

update-test-files

Get generated files sync to facebook/react-native

Deploying

• npm install react-native-tscodegen-types
• npm install react-native-tscodegen
  • Follow the description to build your first Turbo Module program!
• Demo project (not ready)

You are welcome to use cli tool react-native-tscodegen instead of calling functions in build scripts by yourself if possible. Basically, just add react-native-tscodegen ./react-native-tscodegen.json to npm scripts, after getting react-native-tscodegen.json prepared. The file name is not important.

{
    "libraryName": "PlaygroundModule",
    "outputDirectory": "./lib/cpp-generated",
    "moduleSpecName": "PlaygroundModuleSpec",
    "generators": [
        "descriptors",
        "events",
        "props",
        "tests",
        "shadow-nodes",
        "modules"
    ],
    "inputFile": "./src/turboModule.ts"
}

libraryName and moduleSpecName control file names and some generated C++ class names. generators controls what files get generated. After the cli tool is successfully executed, files will be created under outputDirectory.

Development

Sync react-native after pull

git submodule update

Sync react-native to a new version

pushd react-native
git fetch
git checkout <VERSION-NAME>
popd
git status

Works to do after updating react-native

yarn
yarn build
pushd packages\update-test-files
npm run start
popd
git status

Fixing test case codegen

cls & pushd packages\update-test-files & npm run build & cd ..\RN-TSCodegen-Test & npm run build & popd

Fixing compiler

cls & pushd packages\RN-TSCodegen & npm run build & cd ..\RN-TSCodegen-Test & npm run build & npm run test & popd

react-native-tscodegen's Issues

@typescript-eslint/no-unnecessary-condition errors in GenerateNM2.ts

There are a number of places in the file with the following pattern:

function translateSpecFunctionParam(
  param: FunctionTypeAnnotationParam,
): string {
  switch (param.typeAnnotation.type) {
   ...
    case 'ReservedFunctionValueTypeAnnotation':
      if (param.typeAnnotation.name !== 'RootTag')
        throw new Error(
          `Unknown reserved function: ${param.typeAnnotation.name} in translateSpecFunctionParam`,
        );
      return 'double';
  ...
  }
}

The TypeScript compiler seems to always evaluate param.typeAnnotation.name to the 'RootTag' literal, so it believes we will always throw an error in this case. Unsure if this is an issue with tscodegen typings or faulty logic in GenerateNM2.

What to do after generating the lib

Hi!

I have been messing around a bit with this library and everything seems to be working fine but I am not too sure on how to continue.

I have created a project with bob, to create a cpp turbomodule library for RN, and generated the lib via the provided example config. Everything works and the cpp code seems to be generated correctly.

However, since the demo application is out yet, I do not see where I would write my cpp implementation of the generated function. It does not help that my cpp is quite lacking, but I just could not figure it out.

tl;dr:

1. How do I use the generated cpp code to add my implementation
2. Is there any ETA on the demo library where tscodegen is used?

cheers!

Error: TurboModuleRegistry.getEnforcing(...) could not be found

After setting everything up, hopefully, properly I try to use the library in an example application.

my react-native-tscodegen.json

{
  "libraryName": "NativeMultiplyModule",
  "outputDirectory": "./lib/cpp-generated",
  "moduleSpecName": "NativeMultiplyModuleSpec",
  "inputFile": "./src/turboModule.ts",
  "generators": ["modulesCxx"]
}

my ./src/turboModule.ts

import { TurboModule, TurboModuleRegistry } from 'react-native-tscodegen-types';

export interface Spec extends TurboModule {
  multiply(a: number, b: number): number;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeMultiplyModule');

my stacktrace

[Tue Nov 23 2021 15:56:12.587]  BUNDLE  ./index.tsx 

[Tue Nov 23 2021 15:56:14.170]  ERROR    Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeModules' could not be found. Verify that a module by this name is registered in the native binary.
[Tue Nov 23 2021 15:56:14.180]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Tue Nov 23 2021 15:56:15.440]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

is there a config key I am missing that says the name?

May need to update readme and version

We should expand the README to include how to install this package as @types/react-native:
I believe this works with many NPM package managers:
"@types/react-native": "npm:[email protected]",

Why were the types published as 0.67.0?  Wouldn't it have been better to align with @types/react-native versioning?

bug: can not parse "export type {xx} from 'xxx'; "

Convert repo to use yarn workspaces + lerna