Skip to content

Commit db89174

Browse files
authored
Merge pull request #396 from rescript-association/update-gentype-docs
Update to gentype v4 docs
2 parents 41390f8 + 718b820 commit db89174

File tree

5 files changed

+10
-60
lines changed

5 files changed

+10
-60
lines changed

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Add a `gentypeconfig` section to your `bsconfig.json` (See [Configuration](#conf
2626

2727
```
2828
"gentypeconfig": {
29-
"language": "untyped",
29+
"language": "typescript",
3030
"shims": {},
3131
"debug": {
3232
"all": false,
@@ -35,22 +35,14 @@ Add a `gentypeconfig` section to your `bsconfig.json` (See [Configuration](#conf
3535
}
3636
```
3737

38-
For running `gentype` with ReScript via `npm` workflow, add following script in your `package.json`:
39-
40-
```
41-
scripts: {
42-
"build": "rescript",
43-
"clean": "rescript clean"
44-
}
45-
```
38+
For running `genType` with ReScript via `npm` workflow, no special setup is required in `package.json`.
4639

4740
> **Note:** `rescript` will automatically detect your installed `genType` version.
4841
4942
## Configuration
5043

5144
Every `genType` powered project requires a configuration item `"gentypeconfig"`
52-
at top level in the project's `bsconfig.json`. (The use of a separate file
53-
`gentypeconfig.json` is being deprecated). The configuration has following
45+
at top level in the project's `bsconfig.json`. The configuration has following
5446
structure:
5547

5648
```js
@@ -70,12 +62,12 @@ structure:
7062
- `"untyped"`: Generate `*.gen.js` files in vanilla JavaScript.
7163

7264
- **shims**
73-
- e.g. `Array<string>` with format: `"RescriptModule=JavaScriptModule"`
74-
- Required to export certain basic ReScript data types to JS when one cannot modify the sources to add annotations (e.g. exporting ReScript lists)
65+
- Required only if one needs to export certain basic ReScript data types to JS when one cannot modify the sources to add annotations (e.g. exporting ReScript lists), and if the types are not first-classed in genType.
66+
- Example: `Array<string>` with format: `"RescriptModule=JavaScriptModule"`
7567

7668
## Adding Shims (TS & Flow)
7769

78-
A shim is a TS / Flow file that provides user-defined definitions for library types.
70+
A shim is a TS / Flow file that provides user-provided definitions for library types.
7971

8072
Configure your shim files within `"gentypeconfig"` in your [`bsconfig.json`](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/bsconfig.json), and add relevant `.shims.js` files in a directory which is visible by ReScript e.g. [`src/shims/`](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/src/shims). An example shim to export ReactEvent can be found [here](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/src/shims/ReactEvent.shim.ts).
8173

@@ -97,8 +89,8 @@ We prepared some examples to give you an idea on how to integrate `genType` in y
9789

9890
**Please make sure to build genType before trying to build the examples.**
9991

100-
- [flow-react-example](https://github.com/reason-association/genType/tree/master/examples/flow-react-example)
10192
- [typescript-react-example](https://github.com/reason-association/genType/tree/master/examples/typescript-react-example)
93+
- [flow-react-example](https://github.com/reason-association/genType/tree/master/examples/flow-react-example)
10294
- [untyped-react-example](https://github.com/reason-association/genType/tree/master/examples/untyped-react-example)
10395

10496
## Experimental features

pages/docs/gentype/latest/supported-types.mdx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,6 @@ For example:
137137
let exampleFunction = (~_type) => "type: " ++ _type
138138
```
139139

140-
## Record Components
141-
142-
ReasonReact record components with props of ReScript types `t1`, `t2`, `t3` are exported as reactjs components with props of the JS types corresponding to `t1`, `t2`, `t3`. The annotation is on the `make` function: `[@genType] let make ...`.
143-
144-
A file can export many components by defining them in sub-modules. The toplevel component is also exported as default.
145-
146140
## Imported Types
147141

148142
It's possible to import an existing TS/Flow type as an opaque type in ReScript. For example,

pages/docs/gentype/latest/usage.mdx

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -71,45 +71,9 @@ Similarly, to import a value with a different JS name, use e.g. `@genType.import
7171

7272
To import nested values, e.g. `Some.Nested.value`, use e.g. `@genType.import(("./MyMath", "Some.Nested.value"))`.
7373

74-
## Export and Import React Components Using Deprecated Record API
75-
76-
**Important:** This section is only relevant for legacy [reason-react](https://github.com/reasonml/reason-react) codebases.
77-
78-
To export a ReasonReact component to JS, and automatically generate a wrapper for it, simply annotate the `make` function:
79-
80-
```res
81-
@genType
82-
let make = (~onClick: callback, _children) => {
83-
...component,
84-
render: _ => <div onClick> {ReasonReact.string("Click me")} </div>,
85-
};
86-
```
87-
88-
**NOTE:** the value `component` must also be defined, above `make` in the same module (also in the case of components defined in nested modules).
89-
90-
91-
To import and wrap a ReactJS component for use by ReasonReact, the type of the `make` function is the only information required:
92-
93-
```res
94-
@genType.import("./MyBanner") /* Module with the JS component to be wrapped. */
95-
/* The make function will be automatically generated from the types below. */
96-
external make:
97-
(~show: bool, ~message: option<message>=?, 'a) =>
98-
ReasonReact.component<
99-
ReasonReact.stateless,
100-
ReasonReact.noRetainedProps,
101-
ReasonReact.actionless,
102-
> =
103-
"make";
104-
```
105-
106-
The type of `make` must have a named argument for each prop in the JS component. Optional props have option type. The `make` function will be generated by `genType`.
107-
108-
This assumes that the JS component was exported with a default export. In case of named export, use e.g. `@genType.import(("./MyBanner", "componentName"))`. To import a nested component, use e.g. `@genType.import(("./MyBanner", "Some.Nested.component"))`.
109-
11074
## Interface (.resi) and Implementation (.res) files
11175

112-
If both `Foo.resi` and `Foo.res` exist, the annotations are taken from `Foo.resi`.
76+
If both `Foo.resi` and `Foo.res` exist, the annotations are taken from `Foo.resi`. The same happens with local modules: if present, the module type gets precedence.
11377

11478
The behaviour can be overridden by adding annotation `@genType.ignoreInterface` at the top of `Foo.resi`. Use case: expose implementation details to JS but not to ReScript.
11579

src/layouts/GenTypeDocsLayout.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function GenTypeDocsLayout(Props) {
4242
breadcrumbs: breadcrumbs,
4343
title: "GenType",
4444
metaTitleCategory: "ReScript GenType",
45-
version: "v3",
45+
version: "v4",
4646
components: components,
4747
theme: "Reason",
4848
children: children

src/layouts/GenTypeDocsLayout.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ let make = (~frontmatter=?, ~components=Markdown.default, ~children) => {
3131
}
3232

3333
let title = "GenType"
34-
let version = "v3"
34+
let version = "v4"
3535

3636
<LatestLayout
3737
theme=#Reason

0 commit comments

Comments
 (0)