ReScript genType

Status master (v3.*):

The latest genType docs have been migrated to the ReScript website.

genType lets you export ReScript values and types to use in JavaScript, and import JavaScript values and types into ReScript, idiomatically. Converter functions between the two representations are generated based on the type of the value. The converters can be generated in vanilla JavaScript, or in TypeScript / Flow for a type-safe idiomatic interface. In particular, conversion of ReasonReact components both ways is supported, with automatic generation of the wrappers.

Project status.

See Changes.md for a complete list of features, fixes, and changes for each release.

Requirements

bs-platform 9.0.1 or higher: use genType 3.44.0 or higher.

bs-platform 9.0.0 or higher: use genType 3.43.0 or higher.

bs-platform 8.3.0 or higher: use genType 3.36.0 or higher.

bs-platform 8.2.0 or higher: use genType 3.31.0 or higher.

bs-platform 8.1.1 or higher: use genType 3.27.0 or higher.

bs-platform 8.0.0 or higher: use genType 3.26.0 or higher.

bs-platform 7.3.0 or higher: use genType 3.18.0 or higher.

bs-platform 7.2.0 or higher: use genType 3.13.0 or higher.

bs-platform 7.0.2 or higher: use genType 3.8.0 or higher.

bs-platform 7.0.0 or higher: use genType 3.2.0 or higher.

bs-platform 6.2.0 or higher: use genType 3.0.0 or higher.

bs-platform 5.2.0 or higher: use genType 2.40.0 or higher.

bs-platform 5.0.x and 5.1.x: use genType 2.17.0 or higher.

For earlier versions, see the older README.

Installation

Install the binaries via npm:

npm install --save-dev gentype

# Test running gentype
npx gentype --help

Add a gentypeconfig section to your bsconfig.json (See Configuration for details):

"gentypeconfig": {
    "language": "untyped",
    "shims": {},
    "debug": {
      "all": false,
      "basic": false
    }
}

For running gentype with ReScript via npm workflow, add following script in your package.json:

scripts: {
  "build": "bsb -make-world",
  "clean": "bsb -clean-world"
}

Note: With genType < 2.17.0 or ReScript < 5.0.0, one has to set environment variable BS_CMT_POST_PROCESS_CMD. See the older README.

With this configuration, ReScript will call gentype for each newly built file. You might want to clean your build artifacts before usage: npx bsb -clean-world (otherwise there might be cached values and no .gen.js files are generated).

Check out the Examples for detailed setups (TypeScript, Flow and Plain JavaScript).

Adding shims (TypeScript & Flow)

Configure your shim files in your "gentypeconfig" in bsconfig.json, and add relevant .shims.js files in a directory which is visible by ReScript e.g. src/shims/. An example shim to export ReactEvent can be found here.

Testing the whole setup

Open any relevant *.res file and add @genType annotations to any bindings / values / functions to be used from JavaScript. If an annotated value uses a type, the type must be annotated too. See e.g. Hooks.res.

Save the file and rebuild the project with ReScript. You should now see a *.gen.tsx (for TypeScript, or *.gen.js for Flow) file with the same name (e.g. MyComponent.res -> MyComponent.gen.tsx).

Any values exported from MyComponent.res can then be imported from JS. For example:

import MyComponent from "./components/MyComponent.gen";

Examples

We prepared some examples to give you an idea on how to integrate genType in your own project. Check out the READMEs of the listed projects.

Please make sure to build genType before trying to build the examples.

• flow-react-example
• typescript-react-example
• untyped-react-example

Documentation

Full documentation can be found here.

(In case you are looking for the previous version of the docs, here is an older version of this README)

Development/Contributing

Please check out our development instructions.