Skip to content

Commit 06c4c4f

Browse files
committed
Last adaptions for introduction / getting-started
1 parent 8eb10f6 commit 06c4c4f

File tree

2 files changed

+21
-11
lines changed

2 files changed

+21
-11
lines changed

pages/docs/gentype/latest/getting-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
`bs-platform` 8.0.0 or higher: use `genType` 3.26.0 or higher.
1818

19-
For earlier versions, check the [genType repository README](https://github.com/reason-association/genType).
19+
For earlier versions, check the [genType README requirements section](https://github.com/reason-association/genType#requirements).
2020

2121
</Warn>
2222

pages/docs/gentype/latest/introduction.mdx

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
# GenType
22

3-
`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](https://www.typescriptlang.org/) / [Flow](https://flow.org/en/) for a type-safe idiomatic interface.
3+
`genType` is a code generation tool that lets you export ReScript values and types to use in JavaScript, and import JavaScript values and types into ReScript.
4+
5+
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](https://www.typescriptlang.org/) / [Flow](https://flow.org/en/) for a type-safe idiomatic interface.
46
In particular, conversion of [ReasonReact](https://reasonml.github.io/reason-react/) components both ways is supported, with automatic generation of the wrappers.
57

68
Here's an article describing how to use `genType` as part of a migration strategy where a tree of components is gradually converted to ReScript bottom-up (old article containing Reason / BuckleScript): [Adopting Reason: strategies, dual sources of truth, and why genType is a big deal](https://medium.com/p/c514265b466d).
79

8-
The implementation of @genType performs a type-directed transformation of ReScript programs after [bucklescript](https://github.com/BuckleScript/bucklescript) compilation. The transformed programs operate on data types idiomatic to JS. For example, a ReScript function operating on a ReScript variant `type t = | A(int) | B(string)` (which is represented as custom blocks at runtime) is exported to a JS function operating on the corresponding JS object of type `{ tag: "A"; value: number }
10+
The implementation of genType performs a type-directed transformation of ReScript programs after ReScript source code compilation. The transformed programs operate on data types idiomatic to JS.
11+
12+
For example, a ReScript function operating on a ReScript variant `type t = | A(int) | B(string)` (which is represented as custom blocks at runtime) is exported to a JS function operating on the corresponding JS object of type `{ tag: "A"; value: number }
913
| { tag: "B"; value: string }`.
1014

11-
The output of `genType` can be configured by using one of 3 back-ends: `untyped` to generate wrappers in vanilla JS, `typescript` to generate [TypeScript](https://www.typescriptlang.org/), and `flow` to generate JS with [Flow](https://flow.org/en/) type annotations.
15+
The output of genType can be configured by using one of 3 back-ends: `untyped` to generate wrappers in vanilla JS, `typescript` to generate [TypeScript](https://www.typescriptlang.org/), and `flow` to generate JS with [Flow](https://flow.org/en/) type annotations.
1216

13-
## A More Concrete Example
17+
## A Quick Example
1418

1519
Let's assume we are working on a TypeScript (TS) codebase and we want to integrate a single ReasonReact component.
1620

17-
Firstly we want to be able to import the ReasonReact component like any other React component, secondly we also want to preserve all the ReScript types in the TS type system (and convert incompatible values if necessary). **That's exactly what `genType` was made for!**
21+
We want to be able to import the ReasonReact component like any other React component in our existing TS code, but we also want to preserve all the ReScript types in the TS type system (and convert incompatible values if necessary).
22+
23+
**That's exactly what genType was made for!**
1824

19-
First we'll set up a ReasonReact component just like this (we will assume that `genType` and `bs-platform` is already configured correctly):
25+
First we'll set up a ReasonReact component:
2026

2127
```res
2228
/* src/MyComp.res */
@@ -68,9 +74,11 @@ export const make: React.ComponentType<{ readonly color: color; readonly name: s
6874
};
6975
```
7076

71-
Note how `genType` automatically maps the `color` variant to TS via a string union type `color = "Red" | "Blue"`. We can seamlessly use ReScript specific data structures within TS without doing any manual transformations!
77+
genType automatically maps the `color` variant to TS via a string union type `color = "Red" | "Blue"`, and also provides all the converters to convert between the ReScript & TS representation as well.
7278

73-
Now, within our TypeScript application, we can now import and use the React component in following manner:
79+
Therefore way we can seamlessly use ReScript specific data structures within TS without writing the converter code by hand!
80+
81+
Within our TypeScript application, we can now import and use the React component in the following manner:
7482

7583
```ts
7684
// src/App.ts
@@ -84,8 +92,10 @@ const App = () => {
8492
};
8593
```
8694
87-
We are only scratching the surface on what `genType` can actually do. For more information, head to the [Getting Started](getting-started) section, or find relevant topics from the sidebar !
95+
That's it for our quick example.
96+
97+
For detailed information, head to the [Getting Started](getting-started) or [Usage](usage) section.
8898
8999
## Development
90100
91-
For contributions, issues or questions, please refer to the [`genType` Github repository](https://github.com/reason-association/genType) or our [forum](https://forum.rescript-lang.org).
101+
For contributions, issues or questions, please refer to the [Github repository](https://github.com/reason-association/genType) or our [ReScript forum](https://forum.rescript-lang.org).

0 commit comments

Comments
 (0)