Jsx ppx v4 part2

CHANGELOG.md

@@ -1,9 +1,22 @@
 ## Master
 
+> **Tags:**
+>
+> - :boom: [Breaking Change]
+> - :eyeglasses: [Spec Compliance]
+> - :rocket: [New Feature]
+> - :bug: [Bug Fix]
+> - :memo: [Documentation]
+> - :house: [Internal]
+> - :nail_care: [Polish]
+
 #### :rocket: New Feature
 
 - Add surface syntax for `async`/`await` https://github.com/rescript-lang/syntax/pull/600
 
+- Initial support for JSX V4, still work in progress.
+  - :boom: when V4 is activated, at most one component is allowed for each module.
+
 ## ReScript 10.0
 
 - Fix printing for inline nullary functor types [#477](https://github.com/rescript-lang/syntax/pull/477)

cli/JSXV4.md

@@ -23,11 +23,8 @@ let make = React.forwardRef((~x, ~y, ref) => body)
 
 let make = React.forwardRef({
   let fn =
-    @react.component (~x, ~y, ~ref=?) => {
-      let ref = ref->Js.Nullable.fromOption
-      body
-    }
-  (props, ref) => fn({...props, ref: {ref->Js.Nullable.toOption}})
+    @react.component (~x, ~y) => ref => body
+  (props, ref) => fn(props, ref)
 })
 ```
 
@@ -70,6 +67,34 @@ React.createElement(Comp.make, {x, y:7, @optional z})
 React.createElement(Comp.make, {x, key: "7"})
 ```
 
+**New "jsx" transform**
+
+The V4 ppx supports [the new "jsx" transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) of React.js.
+
+The "jsx" transform affects component application but not the definition.
+
+```rescript
+<Comp x>
+// is converted to
+Js.React.jsx(Comp.make, {x})
+```
+
+```rescript
+<div name="div" />
+// is converted to
+Js.React.jsxDom("div", { name: "div" })
+```
+
+The props type of dom elements, e.g. `div`, is inferred to `Js.React.domProps`.
+
+```rescript
+type domProps = {
+  key?: string,
+  id?: string,
+  ...
+}
+```
+
 **Interface And External**
 
 ```rescript
@@ -98,3 +123,30 @@ function has the name of the enclosing module/file.
 
 ReactDOMRe.createElement(ReasonReact.fragment, [comp1, comp2, comp3])
 ```
+
+**File-level config**
+
+The top-level attribute `@@jsxConfig` is used to update the jsx config for the rest of the file (or until the next config update). Only the values mentioned are updated, the others are left unchanged.
+
+```rescript
+@@jsxConfig({ version: 4, mode: "automatic" })
+
+module Wrapper = {
+  module R1 = {
+    @react.component  // V4 & new jsx transform
+    let make = () => body
+  }
+
+  @@jsxConfig({ version: 4, mode: "classic" })
+
+  module R2 = {
+    @react.component  // V4 with `React.createElement`
+    let make = () => body
+  }
+}
+
+@@jsxConfig({ version: 3 })
+
+@react.component  // V3
+let make = () => body
+```

cli/JSXV4UPGRADE.md

@@ -0,0 +1,37 @@
+**JSX V4 upgrade path**
+
+1. No need to upgrade rescript-react or change bsconfig.json
+
+   JSX V3 by default.
+
+2. New opt-in configuration added in bsconfig.json
+
+   a. JSX V3
+
+   ```json
+   "jsx": {
+     "version": 3,
+   }
+   ```
+
+   b. JSX V4 with classic mode (generate calls to `React.createElement` just as with V3)
+
+   ```json
+   "jsx": {
+     "version": 4,
+     "mode": "classic"
+   }
+   ```
+
+   c. JSX V4 with experimental JSX mode (generate calls `jsx` functions)
+
+   ```json
+   "jsx": {
+     "version": 4,
+     "mode": "automatic"
+   }
+   ```
+
+   JSX V4 with `"automatic"` runtme needs React v17.\* or higher as a peer dependency. It will require a new version of`rescript-react`.
+
+   > The existing configuration `reason.react-jsx` will be ignored if the new configuration is present.