Skip to content

Integrate genType as 'TypeScript Interop' chapter into main docs #755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
3 changes: 2 additions & 1 deletion data/sidebar_manual_latest.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@
"use-illegal-identifier-names",
"generate-converters-accessors",
"browser-support-polyfills",
"libraries"
"libraries",
"typescript-integration"
],
"Build System": [
"build-overview",
Expand Down
49 changes: 5 additions & 44 deletions misc_docs/syntax/decorator_gentype.mdx
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
---
id: "gentype-decorator"
keywords: ["gentype", "decorator", "typescript", "flow"]
keywords: ["gentype", "decorator", "typescript"]
name: "@genType"
summary: "This is the `@genType` decorator."
category: "decorators"
---

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.
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.

[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.

**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.
[GenType](/docs/manual/latest/typescript-integration) 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.

### Example

<CodeTab labels={["ReScript", "TypeScript Output", "Flow Output"]}>
<CodeTab labels={["ReScript", "TypeScript Output"]}>

```res
@genType
Expand Down Expand Up @@ -59,45 +57,8 @@ export const make: React.ComponentType<{
};
```

```js
/**
* @flow strict
* @generated from MyComponent.res
* @nolint
*/
/* eslint-disable */
// $FlowExpectedError: Reason checked type sufficiently
type $any = any;

// $FlowExpectedError: Reason checked type sufficiently
import * as React from "react";

const $$toRE818596289 = { Red: 0, Blue: 1 };

// $FlowExpectedError: Reason checked type sufficiently
import * as MyComponentBS from "./MyComponent.bs";

export type color = "Red" | "Blue";

// Type annotated function components are not checked by Flow, but typeof() works.
const make$$forTypeof = function (_: {|
+color: color,
+name: string,
|}): React$Node {
return null;
};

export type Props = {| +color: color, +name: string |};

export const make: typeof make$$forTypeof = function MyComponent(Arg1: $any) {
const $props = { color: $$toRE818596289[Arg1.color], name: Arg1.name };
const result = React.createElement(MyComponentBS.make, $props);
return result;
};
```

</CodeTab>

### References

* [GenType](/docs/gentype/latest/introduction)
* [TypeScript Integration](/docs/manual/latest/typescript-integration)
20 changes: 20 additions & 0 deletions next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,26 @@ const config = {
destination: "/docs/manual/v10.0.0/unboxed",
permanent: true,
},
{
source: "/docs/gentype/latest/introduction",
destination: "/docs/manual/latest/typescript-integration",
permanent: true,
},
{
source: "/docs/gentype/latest/getting-started",
destination: "/docs/manual/latest/typescript-integration",
permanent: true,
},
{
source: "/docs/gentype/latest/usage",
destination: "/docs/manual/latest/typescript-integration",
permanent: true,
},
{
source: "/docs/gentype/latest/supported-types",
destination: "/docs/manual/latest/typescript-integration",
permanent: true,
},
];
},
};
Expand Down
102 changes: 0 additions & 102 deletions pages/docs/gentype/latest/getting-started.mdx

This file was deleted.

105 changes: 0 additions & 105 deletions pages/docs/gentype/latest/introduction.mdx

This file was deleted.

Loading