Merge pull request #201 from kevanstannard/syntax-lookup-gentype-decorator

Syntax lookup @genType decorator

Author: ryyppy

misc_docs/syntax/decorator_gentype.mdx

@@ -0,0 +1,103 @@
+---
+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. 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.
+
+**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
+
+<CodeTab labels={["ReScript", "TypeScript Output", "Flow Output"]}>
+
+```res
+@genType
+export type color =
+  | Red
+  | Blue
+
+@genType @react.component
+export make = (~name: string, ~color: color) => {
+  let colorStr = switch color {
+  | Red => "red"
+  | Blue => "blue"
+  }
+  <div className={"color-" ++ colorStr}> {React.string(name)} </div>
+}
+```
+
+```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;
+};
+```
+
+</CodeTab>
+
+### References
+
+* [GenType](/docs/gentype/latest/introduction)