Skip to content

Commit e5ff130

Browse files
fhammerschmidtfhammerschmidt
committed
Integrate genType as 'TypeScript Interop' chapter into main docs
1 parent b28de11 commit e5ff130

18 files changed

+74
-163
lines changed

Diff for: ‎data/sidebar_manual_latest.json

+6
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@
5454
"browser-support-polyfills",
5555
"libraries"
5656
],
57+
"TypeScript Interop": [
58+
"gentype-introduction",
59+
"gentype-getting-started",
60+
"gentype-usage",
61+
"gentype-supported-types"
62+
],
5763
"Build System": [
5864
"build-overview",
5965
"build-configuration",

Diff for: ‎misc_docs/syntax/decorator_gentype.mdx

+5-44
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
---
22
id: "gentype-decorator"
3-
keywords: ["gentype", "decorator", "typescript", "flow"]
3+
keywords: ["gentype", "decorator", "typescript"]
44
name: "@genType"
55
summary: "This is the `@genType` decorator."
66
category: "decorators"
77
---
88

9-
The `@genType` decorator may be used to export ReScript values and types to JavaScript, and import JavaScript values and types into ReScript. It allows seamless integration of compiled ReScript modules in existing TypeScript, Flow, or plain JavaScript codebases, without loosing type information across different type systems.
9+
The `@genType` decorator may be used to export ReScript values and types to JavaScript, and import JavaScript values and types into ReScript. It allows seamless integration of compiled ReScript modules in existing TypeScript, or plain JavaScript codebases, without losing type information across different type systems.
1010

11-
[GenType](/docs/gentype/latest/introduction) is a code generation tool for automatically generating [TypeScript](https://www.typescriptlang.org/) / [Flow](https://flow.org/) type definitions, and JS runtime converters for non-shared ReScript values. It also features first-class support for [ReasonReact](https://reasonml.github.io/reason-react/) components.
12-
13-
**Note:** This decorator requires the `gentype` npm package to be installed and configured correctly. Please refer to genType's [Getting Started](/docs/gentype/latest/getting-started) section for more details.
11+
[GenType](/docs/manual/latest/gentype-introduction) is a code generation tool for automatically generating [TypeScript](https://www.typescriptlang.org/) type definitions, and JS runtime converters for non-shared ReScript values. It also features first-class support for [rescript-react](/docs/react/latest/introduction) components.
1412

1513
### Example
1614

17-
<CodeTab labels={["ReScript", "TypeScript Output", "Flow Output"]}>
15+
<CodeTab labels={["ReScript", "TypeScript Output"]}>
1816

1917
```res
2018
@genType
@@ -59,45 +57,8 @@ export const make: React.ComponentType<{
5957
};
6058
```
6159

62-
```js
63-
/**
64-
* @flow strict
65-
* @generated from MyComponent.res
66-
* @nolint
67-
*/
68-
/* eslint-disable */
69-
// $FlowExpectedError: Reason checked type sufficiently
70-
type $any = any;
71-
72-
// $FlowExpectedError: Reason checked type sufficiently
73-
import * as React from "react";
74-
75-
const $$toRE818596289 = { Red: 0, Blue: 1 };
76-
77-
// $FlowExpectedError: Reason checked type sufficiently
78-
import * as MyComponentBS from "./MyComponent.bs";
79-
80-
export type color = "Red" | "Blue";
81-
82-
// Type annotated function components are not checked by Flow, but typeof() works.
83-
const make$$forTypeof = function (_: {|
84-
+color: color,
85-
+name: string,
86-
|}): React$Node {
87-
return null;
88-
};
89-
90-
export type Props = {| +color: color, +name: string |};
91-
92-
export const make: typeof make$$forTypeof = function MyComponent(Arg1: $any) {
93-
const $props = { color: $$toRE818596289[Arg1.color], name: Arg1.name };
94-
const result = React.createElement(MyComponentBS.make, $props);
95-
return result;
96-
};
97-
```
98-
9960
</CodeTab>
10061

10162
### References
10263

103-
* [GenType](/docs/gentype/latest/introduction)
64+
* [GenType](/docs/manual/latest/gentype-introduction)

Diff for: ‎next.config.mjs

+43-19
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import fs from "fs";
22
import webpack from "webpack";
3-
import rehypeSlug from 'rehype-slug';
4-
import remarkGfm from 'remark-gfm';
5-
import remarkComment from 'remark-comment';
6-
import remarkFrontmatter from 'remark-frontmatter'
3+
import rehypeSlug from "rehype-slug";
4+
import remarkGfm from "remark-gfm";
5+
import remarkComment from "remark-comment";
6+
import remarkFrontmatter from "remark-frontmatter";
77
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
8-
import { createLoader } from 'simple-functional-loader'
8+
import { createLoader } from "simple-functional-loader";
99

10-
const bsconfig = JSON.parse(fs.readFileSync("./bsconfig.json"))
10+
const bsconfig = JSON.parse(fs.readFileSync("./bsconfig.json"));
1111

1212
const { ProvidePlugin } = webpack;
1313

@@ -46,10 +46,10 @@ const config = {
4646
function mainMdxLoader(plugins) {
4747
return [
4848
createLoader(function(source) {
49-
const result = `${source}\n\nMDXContent.frontmatter = frontmatter`
50-
return result
49+
const result = `${source}\n\nMDXContent.frontmatter = frontmatter`;
50+
return result;
5151
}),
52-
]
52+
];
5353
}
5454

5555
config.module.rules.push({
@@ -61,18 +61,22 @@ const config = {
6161
test: /\.mdx?$/,
6262
use: [
6363
{
64-
loader: '@mdx-js/loader',
64+
loader: "@mdx-js/loader",
6565
/** @type {import('@mdx-js/loader').Options} */
6666
options: {
67-
remarkPlugins: [remarkComment, remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
68-
providerImportSource: '@mdx-js/react',
69-
rehypePlugins: [rehypeSlug]
70-
}
71-
}
72-
]
67+
remarkPlugins: [
68+
remarkComment,
69+
remarkGfm,
70+
remarkFrontmatter,
71+
remarkMdxFrontmatter,
72+
],
73+
providerImportSource: "@mdx-js/react",
74+
rehypePlugins: [rehypeSlug],
75+
},
76+
},
77+
],
7378
});
7479

75-
7680
config.plugins.push(new ProvidePlugin({ React: "react" }));
7781
return config;
7882
},
@@ -93,11 +97,31 @@ const config = {
9397
destination: "/docs/manual/v10.0.0/migrate-from-bucklescript-reason",
9498
permanent: true,
9599
},
100+
{
101+
source: "/docs/gentype/latest/introduction",
102+
destination: "/docs/manual/latest/gentype-introduction",
103+
permanent: true,
104+
},
105+
{
106+
source: "/docs/gentype/latest/getting-started",
107+
destination: "/docs/manual/latest/gentype-getting-started",
108+
permanent: true,
109+
},
110+
{
111+
source: "/docs/gentype/latest/usage",
112+
destination: "/docs/manual/latest/gentype-usage",
113+
permanent: true,
114+
},
115+
{
116+
source: "/docs/gentype/latest/supported-types",
117+
destination: "/docs/manual/latest/gentype-supported-types",
118+
permanent: true,
119+
},
96120
];
97121
},
98122
};
99123

100124
export default {
101125
transpilePackages: transpileModules,
102-
...config
103-
}
126+
...config,
127+
};

Diff for: ‎pages/docs/manual/latest/build-configuration.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ Generating JS files with the `.bs.js` suffix means that, on the JS side, you can
161161
- It's immediately clear that we're dealing with a generated JS file here.
162162
- It avoids clashes with a potential `theFile.js` file in the same folder.
163163
- It avoids the need of using a build system loader for ReScript files. This + in-source build means integrating a ReScript project into your pure JS codebase **basically doesn't touch anything in your build pipeline at all**.
164-
- [genType](/docs/gentype/latest/introduction) requires `bs.js` for compiled JS artifacts. If you are using `genType`, you need to use `bs.js` for now.
164+
- [genType](/docs/manual/latest/gentype-introduction) requires `bs.js` for compiled JS artifacts. If you are using `genType`, you need to use `bs.js` for now.
165165

166166
## warnings
167167

Diff for: ‎pages/docs/gentype/latest/getting-started.mdx renamed to ‎pages/docs/manual/latest/gentype-getting-started.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Getting Started"
33
description: "How to get started with genType in your ReScript projects"
4-
canonical: "/docs/gentype/latest/getting-started"
4+
canonical: "/docs/manual/latest/gentype-getting-started"
55
---
66

77
# Getting Started

Diff for: ‎pages/docs/gentype/latest/introduction.mdx renamed to ‎pages/docs/manual/latest/gentype-introduction.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Introduction"
3-
description: "GenType - Interoperability between ReScript and TypeScript / Flow"
4-
canonical: "/docs/gentype/latest/introduction"
3+
description: "GenType - Interoperability between ReScript and TypeScript"
4+
canonical: "/docs/manual/latest/gentype-introduction"
55
---
66

77
# GenType
@@ -98,7 +98,7 @@ const App = () => {
9898
9999
That's it for our quick example.
100100
101-
For detailed information, head to the [Getting Started](getting-started) or [Usage](usage) section.
101+
For detailed information, head to the [Getting Started](gentype-getting-started) or [Usage](usage) section.
102102
103103
## Development
104104

Diff for: ‎pages/docs/gentype/latest/supported-types.mdx renamed to ‎pages/docs/manual/latest/gentype-supported-types.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Supported Types"
33
description: "Supported types and value convertion in GenType"
4-
canonical: "/docs/gentype/latest/supported-types"
4+
canonical: "/docs/manual/latest/gentype-supported-types"
55
---
66

77
# Supported Types
@@ -39,7 +39,7 @@ The JS values are identical: there is no conversion unless the argument type nee
3939

4040
ReScript record values of type e.g. `{x: int}` such as `{x: 0}`, `{x: 1}`, are exported to JS values of type `{x: number}` without runtime conversion.
4141

42-
Since records are immutable by default, their fields will be exported to readonly property types in Flow/TS. Mutable fields are specified in ReScript by e.g. `{mutable mutableField: string}`.
42+
Since records are immutable by default, their fields will be exported to readonly property types in TS. Mutable fields are specified in ReScript by e.g. `{mutable mutableField: string}`.
4343

4444
The `@as` annotation can be used to change the name of a field on the JS side of things. So e.g. `{@as("y") x: int}` is exported as JS type `{y: number}`.
4545

@@ -50,14 +50,14 @@ If one field of the ReScript record has option type, this is exported to an opti
5050
ReScript object values of type e.g. `{. "x":int}` such as `{"x": 0}`, `{"x": 1}`, `{"x": 2}`, are exported as identical JS object values `{x:0}`, `{x:1}`, `{x:2}`. This requires no conversion. So they are exported to JS values of type `{x:number}`.
5151
A conversion is required only when the type of some field requires conversions.
5252

53-
Since objects are immutable by default, their fields will be exported to readonly property types in Flow/TS. Mutable fields are specified in ReScript by e.g. `{ @set "mutableField": string }`.
53+
Since objects are immutable by default, their fields will be exported to readonly property types in TS. Mutable fields are specified in ReScript by e.g. `{ @set "mutableField": string }`.
5454

5555
It is possible to mix object and option types, so for example the ReScript type `{. "x":int, "y":option<string>}` exports to JS type `{x:number, ?y: string}`, requires no conversion, and allows option pattern matching on the ReScript side.
5656

5757
## Tuples
5858

5959
ReScript tuple values of type e.g. `(int, string)` are exported as identical JS values of type `[number, string]`. This requires no conversion, unless one of types of the tuple items does.
60-
While the type of ReScript tuples is immutable, there's currently no mature enforcement in TS/Flow, so they're currenty exported to mutable tuples.
60+
While the type of ReScript tuples is immutable, there's currently no mature enforcement in TS, so they're currenty exported to mutable tuples.
6161

6262
## Variants
6363

@@ -96,7 +96,7 @@ Arrays with elements of ReScript type `t` are exported to JS arrays with element
9696

9797
Immutable arrays are supported with the additional ReScript library
9898
[ImmutableArray.res/.resi](https://github.com/reason-association/genType/tree/master/examples/typescript-react-example/src/ImmutableArray.resi), which currently needs to be added to your project.
99-
The type `ImmutableArray.t<+'a>` is covariant, and is mapped to readonly array types in TS/Flow. As opposed to TS/Flow, `ImmutableArray.t` does not allow casting in either direction with normal arrays. Instead, a copy must be performed using `fromArray` and `toArray`.
99+
The type `ImmutableArray.t<+'a>` is covariant, and is mapped to readonly array types in TS. As opposed to TS, `ImmutableArray.t` does not allow casting in either direction with normal arrays. Instead, a copy must be performed using `fromArray` and `toArray`.
100100

101101
## Functions and Function Components
102102

@@ -117,7 +117,7 @@ let make = (~name) => React.string(name);
117117

118118
## Imported Types
119119

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

122122
```res
123123
@genType.import("./SomeFlowTypes") type weekday

Diff for: ‎pages/docs/gentype/latest/usage.mdx renamed to ‎pages/docs/manual/latest/gentype-usage.mdx

File renamed without changes.

Diff for: ‎pages/docs/manual/latest/shared-data-types.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ Unlike most compiled-to-js languages, in ReScript, **you don't need to write dat
4141

4242
Many of these are stable, which means that you can still serialize/deserialize them as-is without manual conversions. But we discourage actively peeking into their structure otherwise.
4343

44-
These types require manual conversions if you want to export them for JS consumption. For a seamless JS/TypeScript/Flow integration experience, you might want to use [genType](https://github.com/cristianoc/gentype) instead of doing conversions by hand.
44+
These types require manual conversions if you want to export them for JS consumption. For a seamless JS/TypeScript integration experience, you might want to use [genType](https://github.com/cristianoc/gentype) instead of doing conversions by hand.

Diff for: ‎pages/docs/react/latest/introduction.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ All our documented examples can be compiled in our [ReScript Playground](/try) a
1818
- Comes with all essential React APIs for building production ready apps (`useState`, `useReducer`, `useEffect`, `useRef`,...)
1919
- No component class API (all ReScript & React codebases are built on function components & hooks)
2020
- Strong level of type safetiness and type inference for component props and state values
21-
- [GenType](/docs/gentype/latest/introduction) support for importing / exporting React components in TypeScript codebases
21+
- [GenType](/docs/manual/latest/gentype-introduction) support for importing / exporting React components in TypeScript codebases
2222

2323
> **This documentation assumes basic knowledge about ReactJS.**
2424
>

Diff for: ‎scripts/extract-tocs.mjs

-27
Original file line numberDiff line numberDiff line change
@@ -274,32 +274,6 @@ const createReactToc = (version) => {
274274
fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
275275
};
276276

277-
const createGenTypeToc = () => {
278-
const MD_DIR = path.join(__dirname, "../pages/docs/gentype/latest");
279-
const SIDEBAR_JSON = path.join(
280-
__dirname,
281-
"../data/sidebar_gentype_latest.json"
282-
);
283-
const TARGET_FILE = path.join(
284-
__dirname,
285-
"../index_data/gentype_latest_toc.json"
286-
);
287-
288-
const sidebarJson = JSON.parse(fs.readFileSync(SIDEBAR_JSON));
289-
290-
const FILE_ORDER = Object.values(sidebarJson).reduce((acc, items) => {
291-
return acc.concat(items);
292-
}, []);
293-
294-
const files = glob.sync(`${MD_DIR}/*.?(js|md?(x))`);
295-
const ordered = orderFiles(files, FILE_ORDER);
296-
297-
const result = ordered.map((filepath) => processFile(filepath, sidebarJson));
298-
const toc = createTOC(result);
299-
300-
fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
301-
};
302-
303277
const createCommunityToc = () => {
304278
const MD_DIR = path.join(__dirname, "../pages/community");
305279
const SIDEBAR_JSON = path.join(__dirname, "../data/sidebar_community.json");
@@ -344,5 +318,4 @@ createReasonCompilerToc();
344318
createReactToc("latest");
345319
createReactToc("v0.10.0");
346320
createReactToc("v0.11.0");
347-
createGenTypeToc();
348321
createCommunityToc();

Diff for: ‎src/DocsOverview.res

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let default = (~showVersionSelect=true) => {
3636
let ecosystem = [
3737
("Package Index", "/packages"),
3838
("rescript-react", "/docs/react/latest/introduction"),
39-
("GenType", "/docs/gentype/latest/introduction"),
39+
("GenType", "/docs/manual/latest/gentype-introduction"),
4040
("Reanalyze", "https://github.com/reason-association/reanalyze"),
4141
]
4242

Diff for: ‎src/common/App.res

-2
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,6 @@ let make = (props: props): React.element => {
136136
}
137137
| {base: ["docs", "reason-compiler"], version: Latest} =>
138138
<ReasonCompilerDocsLayout> content </ReasonCompilerDocsLayout>
139-
| {base: ["docs", "gentype"], version: Latest} =>
140-
<GenTypeDocsLayout frontmatter={component->frontmatter}> content </GenTypeDocsLayout>
141139
// common routes
142140
| {base} =>
143141
switch Belt.List.fromArray(base) {

Diff for: ‎src/common/Constants.res

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ let languageManual = version => {
2020
let ecosystem = [
2121
("Package Index", "/packages"),
2222
("rescript-react", "/docs/react/latest/introduction"),
23-
("GenType", "/docs/gentype/latest/introduction"),
23+
("GenType", "/docs/manual/latest/gentype-introduction"),
2424
("Reanalyze", "https://github.com/reason-association/reanalyze"),
2525
]
2626

Diff for: ‎src/components/Navigation.res

+4-3
Original file line numberDiff line numberDiff line change
@@ -189,11 +189,12 @@ module DocsSection = {
189189
{
190190
imgSrc: "/static/[email protected]",
191191
title: "GenType",
192-
description: "Seamless TypeScript & Flow integration",
193-
href: "/docs/gentype/latest/introduction",
192+
description: "Seamless TypeScript integration",
193+
href: "/docs/manual/latest/gentype-introduction",
194194
isActive: url => {
195195
switch url.base {
196-
| ["docs", "gentype"] => true
196+
| ["docs", "manual", "latest", fragment]
197+
if fragment->Js.String2.startsWith("gentype") => true
197198
| _ => false
198199
}
199200
},

0 commit comments

Comments
 (0)