From bff87458f850d18dae44663e842b681765783c33 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 02:45:09 +0900
Subject: [PATCH 01/11] fix react comp key type

---
 cli/reactjs_jsx_v4.ml | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml
index e6876391..f6df59ae 100644
--- a/cli/reactjs_jsx_v4.ml
+++ b/cli/reactjs_jsx_v4.ml
@@ -387,49 +387,47 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
   | "automatic" ->
     let jsxExpr, key =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxWithKey")},
+          [key] )
       | None, [] ->
-        (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
-      | Some _, (_, keyExpr) :: _ ->
         ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxWithKey")},
+          [] )
+      | Some _, key :: _ ->
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxsWithKey")},
+          [key] )
       | Some _, [] ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
+        ( Exp.ident
+            {loc = Location.none; txt = Ldot (Lident "React", "jsxsWithKey")},
           [] )
     in
-    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ key)
+    Exp.apply ~attrs jsxExpr (key @ [(nolabel, makeID); (nolabel, props)])
   | _ -> (
     match (!childrenArg, keyProp) with
-    | None, (_, keyExpr) :: _ ->
+    | None, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementWithKey");
            })
-        [(nolabel, makeID); (nolabel, props); (nolabel, keyExpr)]
+        [key; (nolabel, makeID); (nolabel, props)]
     | None, [] ->
       Exp.apply ~attrs
         (Exp.ident
            {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
         [(nolabel, makeID); (nolabel, props)]
-    | Some children, (_, keyExpr) :: _ ->
+    | Some children, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementVariadicWithKey");
            })
-        [
-          (nolabel, makeID);
-          (nolabel, props);
-          (nolabel, children);
-          (nolabel, keyExpr);
-        ]
+        [key; (nolabel, makeID); (nolabel, props); (nolabel, children)]
     | Some children, [] ->
       Exp.apply ~attrs
         (Exp.ident

From 3a12ce150e392257a5ebed5b28680616724eae07 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 02:58:27 +0900
Subject: [PATCH 02/11] add tests

---
 tests/ppx/react/expected/externalWithCustomName.res.txt | 2 +-
 tests/ppx/react/expected/forwardRef.res.txt             | 5 ++++-
 tests/ppx/react/expected/noPropsWithKey.res.txt         | 4 ++--
 tests/ppx/react/expected/removedKeyProp.res.txt         | 4 ++--
 tests/ppx/react/expected/spreadProps.res.txt            | 4 ++--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/tests/ppx/react/expected/externalWithCustomName.res.txt b/tests/ppx/react/expected/externalWithCustomName.res.txt
index a4fd91d6..c8fd37c2 100644
--- a/tests/ppx/react/expected/externalWithCustomName.res.txt
+++ b/tests/ppx/react/expected/externalWithCustomName.res.txt
@@ -36,4 +36,4 @@ module Foo = {
   external component: React.componentLike<props<int, string>, React.element> = "component"
 }
 
-let t = React.jsx(Foo.component, {a: 1, b: "1"})
+let t = React.jsxWithKey(Foo.component, {a: 1, b: "1"})
diff --git a/tests/ppx/react/expected/forwardRef.res.txt b/tests/ppx/react/expected/forwardRef.res.txt
index 73af6f9c..4de37358 100644
--- a/tests/ppx/react/expected/forwardRef.res.txt
+++ b/tests/ppx/react/expected/forwardRef.res.txt
@@ -167,7 +167,10 @@ module V4A = {
       "div",
       {
         children: ?ReactDOM.someElement(
-          React.jsx(FancyInput.make, {ref: input, children: {React.string("Click to focus")}}),
+          React.jsxWithKey(
+            FancyInput.make,
+            {ref: input, children: {React.string("Click to focus")}},
+          ),
         ),
       },
     )
diff --git a/tests/ppx/react/expected/noPropsWithKey.res.txt b/tests/ppx/react/expected/noPropsWithKey.res.txt
index cacabd78..26b0facf 100644
--- a/tests/ppx/react/expected/noPropsWithKey.res.txt
+++ b/tests/ppx/react/expected/noPropsWithKey.res.txt
@@ -26,8 +26,8 @@ module V4C = {
     ReactDOM.createElement(
       React.fragment,
       [
-        React.createElementWithKey(V4CA.make, {}, "k"),
-        React.createElementWithKey(V4CB.make, {}, "k"),
+        React.createElementWithKey(~key="k", V4CA.make, {}),
+        React.createElementWithKey(~key="k", V4CB.make, {}),
       ],
     )
   let make = {
diff --git a/tests/ppx/react/expected/removedKeyProp.res.txt b/tests/ppx/react/expected/removedKeyProp.res.txt
index 6f44b028..3b51b231 100644
--- a/tests/ppx/react/expected/removedKeyProp.res.txt
+++ b/tests/ppx/react/expected/removedKeyProp.res.txt
@@ -34,14 +34,14 @@ let make = (_: props) =>
   ReactDOM.createElement(
     React.fragment,
     [
-      React.createElementWithKey(Foo.make, {x: "x", y: "y"}, "k"),
+      React.createElementWithKey(~key="k", Foo.make, {x: "x", y: "y"}),
       React.createElement(Foo.make, {x: "x", y: "y"}),
       React.createElementWithKey(
+        ~key="k",
         HasChildren.make,
         {
           children: React.createElement(Foo.make, {x: "x", y: "y"}),
         },
-        "k",
       ),
       React.createElement(
         HasChildren.make,
diff --git a/tests/ppx/react/expected/spreadProps.res.txt b/tests/ppx/react/expected/spreadProps.res.txt
index d43f50db..80d0a4f1 100644
--- a/tests/ppx/react/expected/spreadProps.res.txt
+++ b/tests/ppx/react/expected/spreadProps.res.txt
@@ -19,7 +19,7 @@ let c2 = React.createElement(A.make, {...p, x: "x"})
 // let c0 = <A x="x" {...p0} {...p1} />
 
 // only spread props
-let c1 = React.jsx(A.make, p)
+let c1 = React.jsxWithKey(A.make, p)
 
 // reversed order
-let c2 = React.jsx(A.make, {...p, x: "x"})
+let c2 = React.jsxWithKey(A.make, {...p, x: "x"})

From 6881b10ef3cdc41e2c2e00e263b7d98a45538476 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 11:49:58 +0900
Subject: [PATCH 03/11] call renamed jsx binding

---
 cli/reactjs_jsx_v4.ml | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml
index f6df59ae..9834f238 100644
--- a/cli/reactjs_jsx_v4.ml
+++ b/cli/reactjs_jsx_v4.ml
@@ -388,20 +388,15 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
     let jsxExpr, key =
       match (!childrenArg, keyProp) with
       | None, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxWithKey")},
+        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")},
           [key] )
       | None, [] ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxWithKey")},
-          [] )
+        (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
       | Some _, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxsWithKey")},
+        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [key] )
       | Some _, [] ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "React", "jsxsWithKey")},
+        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr (key @ [(nolabel, makeID); (nolabel, props)])

From 16203d7bcc050661443a0005019d4bda0338b1c3 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 11:54:07 +0900
Subject: [PATCH 04/11] add test

---
 tests/ppx/react/expected/externalWithCustomName.res.txt | 2 +-
 tests/ppx/react/expected/forwardRef.res.txt             | 5 +----
 tests/ppx/react/expected/spreadProps.res.txt            | 4 ++--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/tests/ppx/react/expected/externalWithCustomName.res.txt b/tests/ppx/react/expected/externalWithCustomName.res.txt
index c8fd37c2..a4fd91d6 100644
--- a/tests/ppx/react/expected/externalWithCustomName.res.txt
+++ b/tests/ppx/react/expected/externalWithCustomName.res.txt
@@ -36,4 +36,4 @@ module Foo = {
   external component: React.componentLike<props<int, string>, React.element> = "component"
 }
 
-let t = React.jsxWithKey(Foo.component, {a: 1, b: "1"})
+let t = React.jsx(Foo.component, {a: 1, b: "1"})
diff --git a/tests/ppx/react/expected/forwardRef.res.txt b/tests/ppx/react/expected/forwardRef.res.txt
index 4de37358..73af6f9c 100644
--- a/tests/ppx/react/expected/forwardRef.res.txt
+++ b/tests/ppx/react/expected/forwardRef.res.txt
@@ -167,10 +167,7 @@ module V4A = {
       "div",
       {
         children: ?ReactDOM.someElement(
-          React.jsxWithKey(
-            FancyInput.make,
-            {ref: input, children: {React.string("Click to focus")}},
-          ),
+          React.jsx(FancyInput.make, {ref: input, children: {React.string("Click to focus")}}),
         ),
       },
     )
diff --git a/tests/ppx/react/expected/spreadProps.res.txt b/tests/ppx/react/expected/spreadProps.res.txt
index 80d0a4f1..d43f50db 100644
--- a/tests/ppx/react/expected/spreadProps.res.txt
+++ b/tests/ppx/react/expected/spreadProps.res.txt
@@ -19,7 +19,7 @@ let c2 = React.createElement(A.make, {...p, x: "x"})
 // let c0 = <A x="x" {...p0} {...p1} />
 
 // only spread props
-let c1 = React.jsxWithKey(A.make, p)
+let c1 = React.jsx(A.make, p)
 
 // reversed order
-let c2 = React.jsxWithKey(A.make, {...p, x: "x"})
+let c2 = React.jsx(A.make, {...p, x: "x"})

From 30bab47b8dfeb90035f8f5677bbcfafef6bb244f Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 11:55:40 +0900
Subject: [PATCH 05/11] add more examples

---
 .../ppx/react/expected/noPropsWithKey.res.txt | 36 +++++++++++++++++++
 tests/ppx/react/noPropsWithKey.res            | 17 +++++++++
 2 files changed, 53 insertions(+)

diff --git a/tests/ppx/react/expected/noPropsWithKey.res.txt b/tests/ppx/react/expected/noPropsWithKey.res.txt
index 26b0facf..3aebb52d 100644
--- a/tests/ppx/react/expected/noPropsWithKey.res.txt
+++ b/tests/ppx/react/expected/noPropsWithKey.res.txt
@@ -36,3 +36,39 @@ module V4C = {
     \"NoPropsWithKey$V4C"
   }
 }
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4CA = {
+  type props = {}
+
+  @react.component let make = (_: props) => ReactDOM.jsx("div", {})
+  let make = {
+    let \"NoPropsWithKey$V4CA" = props => make(props)
+
+    \"NoPropsWithKey$V4CA"
+  }
+}
+
+module V4CB = {
+  type props = {}
+
+  @module("c")
+  external make: React.componentLike<props, React.element> = "component"
+}
+
+module V4C = {
+  type props = {}
+
+  @react.component
+  let make = (_: props) =>
+    React.jsxs(
+      React.jsxFragment,
+      {children: [React.jsx(~key="k", V4CA.make, {}), React.jsx(~key="k", V4CB.make, {})]},
+    )
+  let make = {
+    let \"NoPropsWithKey$V4C" = props => make(props)
+
+    \"NoPropsWithKey$V4C"
+  }
+}
diff --git a/tests/ppx/react/noPropsWithKey.res b/tests/ppx/react/noPropsWithKey.res
index 779309cc..9a986307 100644
--- a/tests/ppx/react/noPropsWithKey.res
+++ b/tests/ppx/react/noPropsWithKey.res
@@ -10,6 +10,23 @@ module V4CB = {
   external make: unit => React.element = "component"
 }
 
+module V4C = {
+  @react.component
+  let make = () => <><V4CA key="k" /> <V4CB key="k" /></>
+}
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module V4CA = {
+  @react.component
+  let make = () => <div />
+}
+
+module V4CB = {
+  @module("c") @react.component
+  external make: unit => React.element = "component"
+}
+
 module V4C = {
   @react.component
   let make = () => <><V4CA key="k" /> <V4CB key="k" /></>

From 556bda43f8befea1973c54908e842952e874f8f3 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 12:32:11 +0900
Subject: [PATCH 06/11] fix key type of lowercase jsx runtime

---
 cli/reactjs_jsx_v4.ml                        | 16 +++++++---------
 tests/ppx/react/expected/spreadProps.res.txt |  8 ++++++++
 tests/ppx/react/spreadProps.res              |  8 ++++++++
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml
index 9834f238..48483093 100644
--- a/cli/reactjs_jsx_v4.ml
+++ b/cli/reactjs_jsx_v4.ml
@@ -490,23 +490,21 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
     in
     let jsxExpr, key =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+      | None, key :: _ ->
+        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
+          [key] )
       | None, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
           [] )
-      | Some _, (_, keyExpr) :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+      | Some _, key :: _ ->
+        ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
+          [key] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr
-      ([(nolabel, componentNameExpr); (nolabel, props)] @ key)
+      (key @ [(nolabel, componentNameExpr); (nolabel, props)])
   | _ ->
     let children, nonChildrenProps =
       extractChildren ~loc:jsxExprLoc callArguments
diff --git a/tests/ppx/react/expected/spreadProps.res.txt b/tests/ppx/react/expected/spreadProps.res.txt
index d43f50db..1d54364d 100644
--- a/tests/ppx/react/expected/spreadProps.res.txt
+++ b/tests/ppx/react/expected/spreadProps.res.txt
@@ -11,6 +11,10 @@ let c1 = React.createElement(A.make, p)
 // reversed order
 let c2 = React.createElement(A.make, {...p, x: "x"})
 
+let c3 = ReactDOM.createDOMElementVariadic("div", ~props=p, [])
+
+let c4 = ReactDOM.createDOMElementVariadic("div", ~props={...p, x: "x", key: "k"}, [])
+
 @@jsxConfig({version: 4, mode: "automatic"})
 // Error: spreadProps should be first in order than other props
 // let c0 = <A x="x" {...p} />
@@ -23,3 +27,7 @@ let c1 = React.jsx(A.make, p)
 
 // reversed order
 let c2 = React.jsx(A.make, {...p, x: "x"})
+
+let c3 = ReactDOM.jsx("div", p)
+
+let c4 = ReactDOM.jsx(~key="k", "div", {...p, x: "x"})
diff --git a/tests/ppx/react/spreadProps.res b/tests/ppx/react/spreadProps.res
index b50f5c08..6c57717f 100644
--- a/tests/ppx/react/spreadProps.res
+++ b/tests/ppx/react/spreadProps.res
@@ -11,6 +11,10 @@ let c1 = <A {...p} />
 // reversed order
 let c2 = <A {...p} x="x" />
 
+let c3 = <div {...p} />
+
+let c4 = <div {...p} x="x" key="k" />
+
 @@jsxConfig({version:4, mode: "automatic"})
 // Error: spreadProps should be first in order than other props
 // let c0 = <A x="x" {...p} />
@@ -23,3 +27,7 @@ let c1 = <A {...p} />
 
 // reversed order
 let c2 = <A {...p} x="x" />
+
+let c3 = <div {...p} />
+
+let c4 = <div {...p} x="x" key="k" />
\ No newline at end of file

From e4b056e6c5907e17b7521b2e269e8a8e33e3facd Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 12:36:25 +0900
Subject: [PATCH 07/11] add more examples

---
 tests/ppx/react/expected/spreadProps.res.txt | 12 ++++++++++++
 tests/ppx/react/spreadProps.res              |  6 +++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/tests/ppx/react/expected/spreadProps.res.txt b/tests/ppx/react/expected/spreadProps.res.txt
index 1d54364d..765264ea 100644
--- a/tests/ppx/react/expected/spreadProps.res.txt
+++ b/tests/ppx/react/expected/spreadProps.res.txt
@@ -15,6 +15,12 @@ let c3 = ReactDOM.createDOMElementVariadic("div", ~props=p, [])
 
 let c4 = ReactDOM.createDOMElementVariadic("div", ~props={...p, x: "x", key: "k"}, [])
 
+let c4 = ReactDOM.createDOMElementVariadic(
+  "div",
+  ~props={...p, key: "k"},
+  [ReactDOM.createDOMElementVariadic("br", []), ReactDOM.createDOMElementVariadic("br", [])],
+)
+
 @@jsxConfig({version: 4, mode: "automatic"})
 // Error: spreadProps should be first in order than other props
 // let c0 = <A x="x" {...p} />
@@ -31,3 +37,9 @@ let c2 = React.jsx(A.make, {...p, x: "x"})
 let c3 = ReactDOM.jsx("div", p)
 
 let c4 = ReactDOM.jsx(~key="k", "div", {...p, x: "x"})
+
+let c5 = ReactDOM.jsxs(
+  ~key="k",
+  "div",
+  {...p, children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+)
diff --git a/tests/ppx/react/spreadProps.res b/tests/ppx/react/spreadProps.res
index 6c57717f..ba05ca04 100644
--- a/tests/ppx/react/spreadProps.res
+++ b/tests/ppx/react/spreadProps.res
@@ -15,6 +15,8 @@ let c3 = <div {...p} />
 
 let c4 = <div {...p} x="x" key="k" />
 
+let c4 = <div {...p} key="k"><br /><br /></div>
+
 @@jsxConfig({version:4, mode: "automatic"})
 // Error: spreadProps should be first in order than other props
 // let c0 = <A x="x" {...p} />
@@ -30,4 +32,6 @@ let c2 = <A {...p} x="x" />
 
 let c3 = <div {...p} />
 
-let c4 = <div {...p} x="x" key="k" />
\ No newline at end of file
+let c4 = <div {...p} x="x" key="k" />
+
+let c5 = <div {...p} key="k"><br /><br /></div>
\ No newline at end of file

From 1b92972447916e79bac6a3bf7231132258b04386 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sat, 22 Oct 2022 12:37:42 +0900
Subject: [PATCH 08/11] update jsx v4 spec about key type

---
 cli/JSXV4.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/cli/JSXV4.md b/cli/JSXV4.md
index bffe0181..cfddb85f 100644
--- a/cli/JSXV4.md
+++ b/cli/JSXV4.md
@@ -11,7 +11,7 @@ To build an entire project in V4 mode, including all its dependencies, use the n
 "jsx": { "version": 4 }
 ```
 
-> Note that JSX V4 requires the rescript compiler 10.1 or higher, and `rescript-react` version `0.11` or higher. In addition, `react` version `18.2` is required.
+> Note that JSX V4 requires the rescript compiler 10.1 or higher, and `rescript-react` version `0.11` or higher. In addition, `react` version `18.0` is required.
 
 ## Configuration And Upgrade
 
@@ -286,7 +286,11 @@ React.createElement(Comp.make, {x, y: 7, ?z})
 
 <Comp x key="7">
 // is transformed to
-React.createElement(Comp.make, Jsx.addKeyProp({x: x}, "7"))
+React.createElement(Comp.make, Jsx.addKeyProp(~key="7", {x: x}))
+
+<Comp x key=?Some("7")>
+// is transformed to
+React.createElement(Comp.make, Jsx.addKeyProp(~key=?Some("7"), {x: x}))
 ```
 
 ### New experimental automatic mode

From c67754043339accc1eff2af5c537126bd25768d6 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sun, 23 Oct 2022 00:56:12 +0900
Subject: [PATCH 09/11] fix JSX v4 spec

---
 cli/JSXV4.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cli/JSXV4.md b/cli/JSXV4.md
index cfddb85f..87876018 100644
--- a/cli/JSXV4.md
+++ b/cli/JSXV4.md
@@ -286,11 +286,11 @@ React.createElement(Comp.make, {x, y: 7, ?z})
 
 <Comp x key="7">
 // is transformed to
-React.createElement(Comp.make, Jsx.addKeyProp(~key="7", {x: x}))
+React.createElement(Comp.make, React.addKeyProp(~key="7", {x: x}))
 
 <Comp x key=?Some("7")>
 // is transformed to
-React.createElement(Comp.make, Jsx.addKeyProp(~key=?Some("7"), {x: x}))
+React.createElement(Comp.make, React.addKeyProp(~key=?Some("7"), {x: x}))
 ```
 
 ### New experimental automatic mode

From 03c14674547bfc0bb6167c1fc6494e3f66c19fb8 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sun, 23 Oct 2022 00:58:28 +0900
Subject: [PATCH 10/11] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87a36ca1..5848015d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@
 - Fix several printing issues with `async` including an infinite loop https://github.com/rescript-lang/syntax/pull/680
 - Fix issue where certain JSX expressions would be formatted differenctly in compiler 10.1.0-rc.1 https://github.com/rescript-lang/syntax/issues/675
 - Fix issue where printing nested pipe discards await https://github.com/rescript-lang/syntax/issues/687
+- Fix issue where the JSX key type is not an optional string https://github.com/rescript-lang/syntax/pull/693
 
 #### :eyeglasses: Spec Compliance
 

From 7bf775cb81377c1ef5483377e5bf8e6362e22955 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Sun, 23 Oct 2022 01:11:10 +0900
Subject: [PATCH 11/11] add jsx key type tests

---
 .../react/expected/optionalKeyType.res.txt    | 77 +++++++++++++++++++
 tests/ppx/react/optionalKeyType.res           | 37 +++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 tests/ppx/react/expected/optionalKeyType.res.txt
 create mode 100644 tests/ppx/react/optionalKeyType.res

diff --git a/tests/ppx/react/expected/optionalKeyType.res.txt b/tests/ppx/react/expected/optionalKeyType.res.txt
new file mode 100644
index 00000000..137570b7
--- /dev/null
+++ b/tests/ppx/react/expected/optionalKeyType.res.txt
@@ -0,0 +1,77 @@
+let key = None
+
+@@jsxConfig({version: 3})
+
+let _ = React.createElement(C.make, C.makeProps(~key="k", ()))
+let _ = React.createElement(C.make, C.makeProps(~key=?Some("k"), ()))
+let _ = React.createElement(C.make, C.makeProps(~key?, ()))
+let _ = ReactDOMRe.createDOMElementVariadic("div", ~props=ReactDOMRe.domProps(~key="k", ()), [])
+let _ = ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(~key=?Some("k"), ()),
+  [],
+)
+let _ = ReactDOMRe.createDOMElementVariadic("div", ~props=ReactDOMRe.domProps(~key?, ()), [])
+let _ = ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(~key="k", ()),
+  [ReactDOMRe.createDOMElementVariadic("br", []), ReactDOMRe.createDOMElementVariadic("br", [])],
+)
+let _ = ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(~key=?Some("k"), ()),
+  [ReactDOMRe.createDOMElementVariadic("br", []), ReactDOMRe.createDOMElementVariadic("br", [])],
+)
+let _ = ReactDOMRe.createDOMElementVariadic(
+  "div",
+  ~props=ReactDOMRe.domProps(~key?, ()),
+  [ReactDOMRe.createDOMElementVariadic("br", []), ReactDOMRe.createDOMElementVariadic("br", [])],
+)
+
+@@jsxConfig({version: 4, mode: "classic"})
+
+let _ = React.createElementWithKey(~key="k", C.make, {})
+let _ = React.createElementWithKey(~key=?Some("k"), C.make, {})
+let _ = React.createElementWithKey(~key?, C.make, {})
+let _ = ReactDOM.createDOMElementVariadic("div", ~props={key: "k"}, [])
+let _ = ReactDOM.createDOMElementVariadic("div", ~props={key: ?Some("k")}, [])
+let _ = ReactDOM.createDOMElementVariadic("div", ~props={key: ?key}, [])
+let _ = ReactDOM.createDOMElementVariadic(
+  "div",
+  ~props={key: "k"},
+  [ReactDOM.createDOMElementVariadic("br", []), ReactDOM.createDOMElementVariadic("br", [])],
+)
+let _ = ReactDOM.createDOMElementVariadic(
+  "div",
+  ~props={key: ?Some("k")},
+  [ReactDOM.createDOMElementVariadic("br", []), ReactDOM.createDOMElementVariadic("br", [])],
+)
+let _ = ReactDOM.createDOMElementVariadic(
+  "div",
+  ~props={key: ?key},
+  [ReactDOM.createDOMElementVariadic("br", []), ReactDOM.createDOMElementVariadic("br", [])],
+)
+
+@@jsxConfig({version: 4, mode: "automatic"})
+
+let _ = React.jsx(~key="k", C.make, {})
+let _ = React.jsx(~key=?Some("k"), C.make, {})
+let _ = React.jsx(~key?, C.make, {})
+let _ = ReactDOM.jsx(~key="k", "div", {})
+let _ = ReactDOM.jsx(~key=?Some("k"), "div", {})
+let _ = ReactDOM.jsx(~key?, "div", {})
+let _ = ReactDOM.jsxs(
+  ~key="k",
+  "div",
+  {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+)
+let _ = ReactDOM.jsxs(
+  ~key=?Some("k"),
+  "div",
+  {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+)
+let _ = ReactDOM.jsxs(
+  ~key?,
+  "div",
+  {children: React.array([ReactDOM.jsx("br", {}), ReactDOM.jsx("br", {})])},
+)
diff --git a/tests/ppx/react/optionalKeyType.res b/tests/ppx/react/optionalKeyType.res
new file mode 100644
index 00000000..bec2add5
--- /dev/null
+++ b/tests/ppx/react/optionalKeyType.res
@@ -0,0 +1,37 @@
+let key = None
+
+@@jsxConfig({version:3})
+
+let _ = <C key="k" />
+let _ = <C key=?Some("k") />
+let _ = <C ?key />
+let _ = <div key="k" />
+let _ = <div key=?Some("k") />
+let _ = <div ?key />
+let _ = <div key="k"> <br /><br /> </div>
+let _ = <div key=?Some("k")> <br /><br /> </div>
+let _ = <div ?key> <br /><br /> </div>
+
+@@jsxConfig({version:4, mode: "classic"})
+
+let _ = <C key="k" />
+let _ = <C key=?Some("k") />
+let _ = <C ?key />
+let _ = <div key="k" />
+let _ = <div key=?Some("k") />
+let _ = <div ?key />
+let _ = <div key="k"> <br /><br /> </div>
+let _ = <div key=?Some("k")> <br /><br /> </div>
+let _ = <div ?key> <br /><br /> </div>
+
+@@jsxConfig({version:4, mode: "automatic"})
+
+let _ = <C key="k" />
+let _ = <C key=?Some("k") />
+let _ = <C ?key />
+let _ = <div key="k" />
+let _ = <div key=?Some("k") />
+let _ = <div ?key />
+let _ = <div key="k"> <br /><br /> </div>
+let _ = <div key=?Some("k")> <br /><br /> </div>
+let _ = <div ?key> <br /><br /> </div>
\ No newline at end of file