Add Syntax Lookup @genType decorator

Author: kevanstannard

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
+
+<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)