Skip to content

Update JSX V4 docs. #5782

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.

Sign up for GitHub

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
merged 2 commits into from
Nov 7, 2022
Merged

Update JSX V4 docs. #5782

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de4409a
Update JSX V4 docs.
cristianoc Nov 7, 2022
f5154ea
Update JSXV4.md
cristianoc Nov 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions res_syntax/cli/JSXV4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,26 @@ To build an entire project in V4 mode, including all its dependencies, use the n
### Dependency-level config

Dependencies inherit the `jsx` configuration of the root project. So if the root project uses V4 then the dependencies are built using V4, and the same for V3.
To build certain dependencies in V3 compatibility mode, whatever the version used in the root project, use `"v3-dependencies"` as in the example:
To build certain dependencies in V3 compatibility mode, whatever the version used in the root project, use `"v3-dependencies"`: the listed dependencies will be built in V3 mode, and in addition `-open ReactV3` is added to the compiler options.

For example, suppose a V3 project uses rescript-react 0.11, which requires compatibility mode if compiled with V3, and that 2 dependencies `"rescript-react-native", "rescript-react-navigation"` only build with compatibility mode. Then the setting will be:

```json
"jsx": {
"version": 4,
"v3-dependencies": ["rescript-react-native", "rescript-react-navigation"]
}
"version": 3,
"v3-dependencies": ["rescript-react-native", "rescript-react-navigation"]
},
"bsc-flags": ["-open ReactV3"]
```

In V3 compatibility mode, the listed dependencies are built in V3 mode, and in addition `-open ReatcV3` is added to the compiler options, so that the `ReactV3` compatibility module in rescript-react is used.
Another example is a V4 project that also uses `"rescript-react-native", "rescript-react-navigation"`. Then the setting will be:

```json
"jsx": {
"version": 4,
"v3-dependencies": ["rescript-react-native", "rescript-react-navigation"]
}
```

> Note: do not add @rescript/react to the v3-dependencies, or it will cause a cyclic dependencies error.

Expand Down Expand Up @@ -378,7 +388,6 @@ let p: A.props<_> = {x: "x", y: "y"}

V4 introduces support to control the definition of the `props` type by passing as argument to `@react.component` the body of the type definition of `props`. The main application is sharing a single type definition across several components. Here are a few examples:


```rescript
type sharedprops<'x, 'y> = {x: 'x, y: 'y, z:string}

Expand All @@ -400,6 +409,7 @@ module C3 = {
```

The generated code (some details removed) looks like this:

```rescript
@@jsxConfig({version: 4, mode: "classic"})

Expand Down