From ab6de48bbb45983fee01404bf7a5d22d99110288 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Wed, 5 Oct 2022 01:40:55 +0900
Subject: [PATCH 1/2] add test for optimization of jsx mode

---
 .../expected/optimizeAutomaticMode.res.txt    | 20 +++++++++++++++++++
 tests/ppx/react/optimizeAutomaticMode.res     | 12 +++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 tests/ppx/react/expected/optimizeAutomaticMode.res.txt
 create mode 100644 tests/ppx/react/optimizeAutomaticMode.res

diff --git a/tests/ppx/react/expected/optimizeAutomaticMode.res.txt b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
new file mode 100644
index 00000000..3acb0691
--- /dev/null
+++ b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
@@ -0,0 +1,20 @@
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module User = {
+  type t = {firstName: string, lastName: string}
+
+  let format = user => "Dr." ++ user.lastName
+  type props<'doctor> = {
+    doctor: 'doctor,
+  }
+
+  @react.component
+  let make = ({doctor, _}: props<'doctor>) => {
+    ReactDOM.jsx("h1", {id: "h1", children: {React.string(format(doctor))}})
+  }
+  let make = {
+    let \"OptimizeAutomaticMode$User" = (props: props<_>) => make(props)
+
+    \"OptimizeAutomaticMode$User"
+  }
+}
diff --git a/tests/ppx/react/optimizeAutomaticMode.res b/tests/ppx/react/optimizeAutomaticMode.res
new file mode 100644
index 00000000..6470a3b2
--- /dev/null
+++ b/tests/ppx/react/optimizeAutomaticMode.res
@@ -0,0 +1,12 @@
+@@jsxConfig({version: 4, mode: "automatic"})
+
+module User = {
+  type t = {firstName: string, lastName: string}
+
+  let format = user => "Dr." ++ user.lastName
+
+  @react.component
+  let make = (~doctor) => {
+    <h1 id="h1"> {React.string(format(doctor))} </h1>
+  }
+}

From 6aa8a2399681543eee92f839f31fb31201f553a8 Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Wed, 5 Oct 2022 01:42:52 +0900
Subject: [PATCH 2/2] using cast function to optimize

---
 cli/reactjs_jsx_v4.ml                                | 12 +++++++++++-
 tests/ppx/react/expected/commentAtTop.res.txt        |  2 +-
 tests/ppx/react/expected/fileLevelConfig.res.txt     |  2 +-
 tests/ppx/react/expected/forwardRef.res.txt          |  5 ++---
 .../ppx/react/expected/optimizeAutomaticMode.res.txt |  2 +-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml
index dd77662c..a237572a 100644
--- a/cli/reactjs_jsx_v4.ml
+++ b/cli/reactjs_jsx_v4.ml
@@ -459,7 +459,17 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
       recursivelyTransformedArgsForMake
       @
       match childrenExpr with
-      | Exact children -> [(labelled "children", children)]
+      | Exact children ->
+        [
+          ( labelled "children",
+            Exp.apply ~attrs:optionalAttr
+              (Exp.ident
+                 {
+                   txt = Ldot (Lident "ReactDOM", "someElement");
+                   loc = Location.none;
+                 })
+              [(Nolabel, children)] );
+        ]
       | ListLiteral {pexp_desc = Pexp_array list} when list = [] -> []
       | ListLiteral expression ->
         (* this is a hack to support react components that introspect into their children *)
diff --git a/tests/ppx/react/expected/commentAtTop.res.txt b/tests/ppx/react/expected/commentAtTop.res.txt
index 4ccf56e8..b2c0af59 100644
--- a/tests/ppx/react/expected/commentAtTop.res.txt
+++ b/tests/ppx/react/expected/commentAtTop.res.txt
@@ -4,7 +4,7 @@ type props<'msg> = { // test React JSX file
 
 @react.component
 let make = ({msg, _}: props<'msg>) => {
-  ReactDOM.jsx("div", {children: {msg->React.string}})
+  ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
 }
 let make = {
   let \"CommentAtTop" = (props: props<_>) => make(props)
diff --git a/tests/ppx/react/expected/fileLevelConfig.res.txt b/tests/ppx/react/expected/fileLevelConfig.res.txt
index 185df25c..b83a88e2 100644
--- a/tests/ppx/react/expected/fileLevelConfig.res.txt
+++ b/tests/ppx/react/expected/fileLevelConfig.res.txt
@@ -41,7 +41,7 @@ module V4A = {
 
   @react.component
   let make = ({msg, _}: props<'msg>) => {
-    ReactDOM.jsx("div", {children: {msg->React.string}})
+    ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
   }
   let make = {
     let \"FileLevelConfig$V4A" = (props: props<_>) => make(props)
diff --git a/tests/ppx/react/expected/forwardRef.res.txt b/tests/ppx/react/expected/forwardRef.res.txt
index f534ea4b..a9f2701d 100644
--- a/tests/ppx/react/expected/forwardRef.res.txt
+++ b/tests/ppx/react/expected/forwardRef.res.txt
@@ -167,9 +167,8 @@ module V4A = {
     ReactDOM.jsx(
       "div",
       {
-        children: React.jsx(
-          FancyInput.make,
-          {ref: input, children: {React.string("Click to focus")}},
+        children: ?ReactDOM.someElement(
+          React.jsx(FancyInput.make, {ref: input, children: {React.string("Click to focus")}}),
         ),
       },
     )
diff --git a/tests/ppx/react/expected/optimizeAutomaticMode.res.txt b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
index 3acb0691..6cbff453 100644
--- a/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
+++ b/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
@@ -10,7 +10,7 @@ module User = {
 
   @react.component
   let make = ({doctor, _}: props<'doctor>) => {
-    ReactDOM.jsx("h1", {id: "h1", children: {React.string(format(doctor))}})
+    ReactDOM.jsx("h1", {id: "h1", children: ?ReactDOM.someElement({React.string(format(doctor))})})
   }
   let make = {
     let \"OptimizeAutomaticMode$User" = (props: props<_>) => make(props)