Giter VIP home page Giter VIP logo

gentype's Introduction

ReScript genType

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

rescript 9.1.0 or higher: use genType 3.45.0 or higher.

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": "rescript",
  "clean": "rescript clean"
}

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.

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.

gentype's People

Contributors

0xflotus avatar benadamstyles avatar bobzhang avatar btmills avatar cometkim avatar coobaha avatar cristianoc avatar dependabot[bot] avatar evxn avatar haroenv avatar idkjs avatar jchavarri avatar nhducit avatar nikgraf avatar nirvdrum avatar rickyvetter avatar ryyppy avatar sync avatar wokalski avatar xtian avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.