diff --git a/pages/docs/gentype/latest/getting-started.mdx b/pages/docs/gentype/latest/getting-started.mdx index 554a3fd17..1827be0be 100644 --- a/pages/docs/gentype/latest/getting-started.mdx +++ b/pages/docs/gentype/latest/getting-started.mdx @@ -26,7 +26,7 @@ Add a `gentypeconfig` section to your `bsconfig.json` (See [Configuration](#conf ``` "gentypeconfig": { - "language": "untyped", + "language": "typescript", "shims": {}, "debug": { "all": false, @@ -35,22 +35,14 @@ Add a `gentypeconfig` section to your `bsconfig.json` (See [Configuration](#conf } ``` -For running `gentype` with ReScript via `npm` workflow, add following script in your `package.json`: - -``` -scripts: { - "build": "rescript", - "clean": "rescript clean" -} -``` +For running `genType` with ReScript via `npm` workflow, no special setup is required in `package.json`. > **Note:** `rescript` will automatically detect your installed `genType` version. ## Configuration Every `genType` powered project requires a configuration item `"gentypeconfig"` -at top level in the project's `bsconfig.json`. (The use of a separate file -`gentypeconfig.json` is being deprecated). The configuration has following +at top level in the project's `bsconfig.json`. The configuration has following structure: ```js @@ -70,12 +62,12 @@ structure: - `"untyped"`: Generate `*.gen.js` files in vanilla JavaScript. - **shims** - - e.g. `Array` with format: `"RescriptModule=JavaScriptModule"` - - Required to export certain basic ReScript data types to JS when one cannot modify the sources to add annotations (e.g. exporting ReScript lists) + - Required only if one needs to export certain basic ReScript data types to JS when one cannot modify the sources to add annotations (e.g. exporting ReScript lists), and if the types are not first-classed in genType. + - Example: `Array` with format: `"RescriptModule=JavaScriptModule"` ## Adding Shims (TS & Flow) -A shim is a TS / Flow file that provides user-defined definitions for library types. +A shim is a TS / Flow file that provides user-provided definitions for library types. Configure your shim files within `"gentypeconfig"` in your [`bsconfig.json`](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/bsconfig.json), and add relevant `.shims.js` files in a directory which is visible by ReScript e.g. [`src/shims/`](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/src/shims). An example shim to export ReactEvent can be found [here](https://github.com/reason-association/genType/blob/master/examples/typescript-react-example/src/shims/ReactEvent.shim.ts). @@ -97,8 +89,8 @@ We prepared some examples to give you an idea on how to integrate `genType` in y **Please make sure to build genType before trying to build the examples.** -- [flow-react-example](https://github.com/reason-association/genType/tree/master/examples/flow-react-example) - [typescript-react-example](https://github.com/reason-association/genType/tree/master/examples/typescript-react-example) +- [flow-react-example](https://github.com/reason-association/genType/tree/master/examples/flow-react-example) - [untyped-react-example](https://github.com/reason-association/genType/tree/master/examples/untyped-react-example) ## Experimental features diff --git a/pages/docs/gentype/latest/supported-types.mdx b/pages/docs/gentype/latest/supported-types.mdx index c37963c2a..5e300eb36 100644 --- a/pages/docs/gentype/latest/supported-types.mdx +++ b/pages/docs/gentype/latest/supported-types.mdx @@ -137,12 +137,6 @@ For example: let exampleFunction = (~_type) => "type: " ++ _type ``` -## Record Components - -ReasonReact record components with props of ReScript types `t1`, `t2`, `t3` are exported as reactjs components with props of the JS types corresponding to `t1`, `t2`, `t3`. The annotation is on the `make` function: `[@genType] let make ...`. - -A file can export many components by defining them in sub-modules. The toplevel component is also exported as default. - ## Imported Types It's possible to import an existing TS/Flow type as an opaque type in ReScript. For example, diff --git a/pages/docs/gentype/latest/usage.mdx b/pages/docs/gentype/latest/usage.mdx index 2abe6aefc..f8cc0b08f 100644 --- a/pages/docs/gentype/latest/usage.mdx +++ b/pages/docs/gentype/latest/usage.mdx @@ -71,45 +71,9 @@ Similarly, to import a value with a different JS name, use e.g. `@genType.import To import nested values, e.g. `Some.Nested.value`, use e.g. `@genType.import(("./MyMath", "Some.Nested.value"))`. -## Export and Import React Components Using Deprecated Record API - -**Important:** This section is only relevant for legacy [reason-react](https://github.com/reasonml/reason-react) codebases. - -To export a ReasonReact component to JS, and automatically generate a wrapper for it, simply annotate the `make` function: - -```res -@genType -let make = (~onClick: callback, _children) => { - ...component, - render: _ =>
{ReasonReact.string("Click me")}
, -}; -``` - -**NOTE:** the value `component` must also be defined, above `make` in the same module (also in the case of components defined in nested modules). - - -To import and wrap a ReactJS component for use by ReasonReact, the type of the `make` function is the only information required: - -```res -@genType.import("./MyBanner") /* Module with the JS component to be wrapped. */ -/* The make function will be automatically generated from the types below. */ -external make: - (~show: bool, ~message: option=?, 'a) => - ReasonReact.component< - ReasonReact.stateless, - ReasonReact.noRetainedProps, - ReasonReact.actionless, - > = - "make"; -``` - -The type of `make` must have a named argument for each prop in the JS component. Optional props have option type. The `make` function will be generated by `genType`. - -This assumes that the JS component was exported with a default export. In case of named export, use e.g. `@genType.import(("./MyBanner", "componentName"))`. To import a nested component, use e.g. `@genType.import(("./MyBanner", "Some.Nested.component"))`. - ## Interface (.resi) and Implementation (.res) files -If both `Foo.resi` and `Foo.res` exist, the annotations are taken from `Foo.resi`. +If both `Foo.resi` and `Foo.res` exist, the annotations are taken from `Foo.resi`. The same happens with local modules: if present, the module type gets precedence. The behaviour can be overridden by adding annotation `@genType.ignoreInterface` at the top of `Foo.resi`. Use case: expose implementation details to JS but not to ReScript. diff --git a/src/layouts/GenTypeDocsLayout.mjs b/src/layouts/GenTypeDocsLayout.mjs index 000427246..bcf24f936 100644 --- a/src/layouts/GenTypeDocsLayout.mjs +++ b/src/layouts/GenTypeDocsLayout.mjs @@ -42,7 +42,7 @@ function GenTypeDocsLayout(Props) { breadcrumbs: breadcrumbs, title: "GenType", metaTitleCategory: "ReScript GenType", - version: "v3", + version: "v4", components: components, theme: "Reason", children: children diff --git a/src/layouts/GenTypeDocsLayout.res b/src/layouts/GenTypeDocsLayout.res index 395ec980f..17b989682 100644 --- a/src/layouts/GenTypeDocsLayout.res +++ b/src/layouts/GenTypeDocsLayout.res @@ -31,7 +31,7 @@ let make = (~frontmatter=?, ~components=Markdown.default, ~children) => { } let title = "GenType" - let version = "v3" + let version = "v4"