From da74a0da4ed6fea15f85ecd3255c6478b1c7a96f Mon Sep 17 00:00:00 2001 From: Kevan Stannard Date: Mon, 18 Jan 2021 20:25:22 +1100 Subject: [PATCH 1/5] Add Syntax Lookup @genType decorator --- misc_docs/syntax/decorator_gentype.mdx | 101 +++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 misc_docs/syntax/decorator_gentype.mdx diff --git a/misc_docs/syntax/decorator_gentype.mdx b/misc_docs/syntax/decorator_gentype.mdx new file mode 100644 index 000000000..458734576 --- /dev/null +++ b/misc_docs/syntax/decorator_gentype.mdx @@ -0,0 +1,101 @@ +--- +id: "gentype-decorator" +keywords: ["gentype", "decorator", "typescript", "flow"] +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. + +GenType is powerful code generation tool that provides support for both [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/). It has many features and includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. + +### Example + + + +```res +@genType +export type color = + | Red + | Blue + +@genType @react.component +export make = (~name: string, ~color: color) => { + let colorStr = switch color { + | Red => "red" + | Blue => "blue" + } +
{React.string(name)}
+} +``` + +```ts +/* TypeScript file generated from MyComponent.res by genType. */ +/* eslint-disable import/first */ + +import * as React from "react"; + +const $$toRE818596289: { [key: string]: any } = { Red: 0, Blue: 1 }; + +// tslint:disable-next-line:no-var-requires +const MyComponentBS = require("./MyComponent.bs"); + +// tslint:disable-next-line:interface-over-type-literal +export type color = "Red" | "Blue"; + +// tslint:disable-next-line:interface-over-type-literal +export type Props = { readonly color: color; readonly name: string }; + +export const make: React.ComponentType<{ + readonly color: color; + readonly name: string; +}> = function MyComponent(Arg1: any) { + const $props = { color: $$toRE818596289[Arg1.color], name: Arg1.name }; + const result = React.createElement(MyComponentBS.make, $props); + return result; +}; +``` + +```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; +}; +``` + + + +### References + +* [GenType](/docs/gentype/latest/introduction) From 4cb5a900c7bbdeab20bbfa60ab178c5dbfca8a9a Mon Sep 17 00:00:00 2001 From: Kevan Stannard Date: Mon, 18 Jan 2021 20:26:04 +1100 Subject: [PATCH 2/5] Make GenType a link --- misc_docs/syntax/decorator_gentype.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/misc_docs/syntax/decorator_gentype.mdx b/misc_docs/syntax/decorator_gentype.mdx index 458734576..fa1255d89 100644 --- a/misc_docs/syntax/decorator_gentype.mdx +++ b/misc_docs/syntax/decorator_gentype.mdx @@ -8,7 +8,7 @@ category: "decorators" The `@genType` decorator may be used to export ReScript values and types to JavaScript, and import JavaScript values and types into ReScript. -GenType is powerful code generation tool that provides support for both [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/). It has many features and includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. +[GenType](/docs/gentype/latest/introduction) is powerful code generation tool that provides support for both [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/). It has many features and includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. ### Example From 6896b86550d6069ba97e884c8e6cee27beae9e8e Mon Sep 17 00:00:00 2001 From: Kevan Stannard Date: Mon, 18 Jan 2021 20:39:51 +1100 Subject: [PATCH 3/5] Tweak copy --- misc_docs/syntax/decorator_gentype.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/misc_docs/syntax/decorator_gentype.mdx b/misc_docs/syntax/decorator_gentype.mdx index fa1255d89..f3a3716ac 100644 --- a/misc_docs/syntax/decorator_gentype.mdx +++ b/misc_docs/syntax/decorator_gentype.mdx @@ -8,7 +8,7 @@ category: "decorators" The `@genType` decorator may be used to export ReScript values and types to JavaScript, and import JavaScript values and types into ReScript. -[GenType](/docs/gentype/latest/introduction) is powerful code generation tool that provides support for both [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/). It has many features and includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. +[GenType](/docs/gentype/latest/introduction) is powerful code generation tool that can automatically generate [TypeScript](https://www.typescriptlang.org/) or [Flow](https://flow.org/) types, and also includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. ### Example From 7c5f343aeb4c66f95965f4a50b63b5db61f3fd3d Mon Sep 17 00:00:00 2001 From: Kevan Stannard Date: Thu, 21 Jan 2021 08:35:57 +1100 Subject: [PATCH 4/5] Update misc_docs/syntax/decorator_gentype.mdx Co-authored-by: Patrick Ecker --- misc_docs/syntax/decorator_gentype.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/misc_docs/syntax/decorator_gentype.mdx b/misc_docs/syntax/decorator_gentype.mdx index f3a3716ac..0ec6930db 100644 --- a/misc_docs/syntax/decorator_gentype.mdx +++ b/misc_docs/syntax/decorator_gentype.mdx @@ -8,7 +8,9 @@ category: "decorators" The `@genType` decorator may be used to export ReScript values and types to JavaScript, and import JavaScript values and types into ReScript. -[GenType](/docs/gentype/latest/introduction) is powerful code generation tool that can automatically generate [TypeScript](https://www.typescriptlang.org/) or [Flow](https://flow.org/) types, and also includes support for [ReasonReact](https://reasonml.github.io/reason-react/) components. +[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. ### Example From 74dec0c1f15d13438969ed54e32fccb8f858be4e Mon Sep 17 00:00:00 2001 From: Kevan Stannard Date: Thu, 21 Jan 2021 08:36:16 +1100 Subject: [PATCH 5/5] Update misc_docs/syntax/decorator_gentype.mdx Co-authored-by: Patrick Ecker --- misc_docs/syntax/decorator_gentype.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/misc_docs/syntax/decorator_gentype.mdx b/misc_docs/syntax/decorator_gentype.mdx index 0ec6930db..226678143 100644 --- a/misc_docs/syntax/decorator_gentype.mdx +++ b/misc_docs/syntax/decorator_gentype.mdx @@ -6,7 +6,7 @@ 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. +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. [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.