September 2018 Better ReasonML Integration In Flow & TypeScript Codebases Patrick Stapfer

Thanks to our sponsors!

Why? +

https://twitter.com/CaseSandberg/status/1038626258362327041 8th Sept @ Reactathon 2018 / SF - Laurie Voss (npm)

The Problem MyComponent.re App.ts type color = | Red | Yellow | Green; type person = { firstname: string, }; const person = {firstname: "Patrick"}; ReasonReact.Component !== React.Component Immutable Record Type JS Object Type (Js.t in Reason) Variant type (not JS compatible) React.Component Type ReasonReact Component type

Wrap props for ReasonReact Component MyComponent.re let default = ReasonReact.wrapReasonForJs(~component, jsProps => { let person = { firstname: jsProps##person##firstname, }; let color = switch(jsProps##color) { | "yellow" => Yellow /* ... */ }; make(~person, ~color, jsProps##children); }); Boilerplate & Error prone

Ideal Workflow MyComponent.re App.tsx import MyComponent, {Yellow} from "./MyComponent"; MyComponent.tsx (Black Box for the user) Generate TS compatible Wrapper Consume Wrapper

Solution: genTypes • Tool developed by • Jordan Walke (Facebook / ReactJS / Reason) • Cristiano Calgagno (Facebook / Reason Association / Reason-React) https://github.com/cristianoc/genFlow

Demo

Future • Still experimental (Feedback welcome), but will be improved (supported by the Reason Association) • The project name "genFlow" is a working title and will be renamed at some point • Many possibilities: • Write one library in Reason, automatically generate TypeScript / Flow code (not bindings!) • OCaml is fully typed and it's easier to translate pure Reason code to less safe TypeScript code • Ability to mix OCaml / Reason / TypeScript & JavaScript without writing type mappings by hand!

THANKS Patrick Stapfer / @ryyppy