From 4d74c0eee993b1aa5c47e9e31563d65af3acbe8d Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Tue, 21 Nov 2023 21:11:23 +0000
Subject: [PATCH 1/2] ppx: fix 822

---
 ppx/reason_react_ppx.ml | 18 ++++++++++++++----
 ppx/test/upper.t/run.t  |  5 +----
 test/React__test.re     | 37 +++++++++++++++++++++++++++++++------
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/ppx/reason_react_ppx.ml b/ppx/reason_react_ppx.ml
index 0b8f240d5..ba0065aa9 100644
--- a/ppx/reason_react_ppx.ml
+++ b/ppx/reason_react_ppx.ml
@@ -443,7 +443,14 @@ let makePropsType ~loc namedTypeList =
       };
     ]
 
-let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
+type component_type = Uppercase | Lowercase
+
+let jsxExprAndChildren ~component_type ~loc ~ctxt mapper ~keyProps children =
+  let ident =
+    match component_type with
+    | Uppercase -> Lident "React"
+    | Lowercase -> Lident "ReactDOM"
+  in
   let childrenExpr =
     Option.map (transformChildrenIfListUpper ~loc ~mapper ~ctxt) children
   in
@@ -477,7 +484,10 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
          children *)
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
         None,
-        Some (Binding.React.array ~loc children) )
+        Some
+          (match component_type with
+          | Uppercase -> children
+          | Lowercase -> Binding.React.array ~loc children) )
   | None, (label, key) :: _ ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
         Some (label, key),
@@ -485,8 +495,8 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
   | None, [] ->
       (Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") }, None, None)
 
-let reactJsxExprAndChildren = jsxExprAndChildren ~ident:(Lident "React")
-let reactDomJsxExprAndChildren = jsxExprAndChildren ~ident:(Lident "ReactDOM")
+let reactJsxExprAndChildren = jsxExprAndChildren ~component_type:Uppercase
+let reactDomJsxExprAndChildren = jsxExprAndChildren ~component_type:Lowercase
 
 (* Builds an AST node for the entire `external` definition of props *)
 let makeExternalDecl fnName loc namedArgListWithKeyAndRef namedTypeList =
diff --git a/ppx/test/upper.t/run.t b/ppx/test/upper.t/run.t
index a5ed6a84c..e3f259ba1 100644
--- a/ppx/test/upper.t/run.t
+++ b/ppx/test/upper.t/run.t
@@ -4,10 +4,7 @@
   let upper_children_single = foo =>
     React.jsx(Upper.make, Upper.makeProps(~children=foo, ()));
   let upper_children_multiple = (foo, bar) =>
-    React.jsxs(
-      Upper.make,
-      Upper.makeProps(~children=React.array([|foo, bar|]), ()),
-    );
+    React.jsxs(Upper.make, Upper.makeProps(~children=[|foo, bar|], ()));
   let upper_children =
     React.jsx(
       Page.make,
diff --git a/test/React__test.re b/test/React__test.re
index 8b26c8339..032e5eb9b 100644
--- a/test/React__test.re
+++ b/test/React__test.re
@@ -21,12 +21,14 @@ module DummyComponentThatMapsChildren = {
   [@react.component]
   let make = (~children, ()) => {
     <div>
-      {children->React.Children.mapWithIndex((element, index) => {
-         React.cloneElement(
-           element,
-           {"key": {j|$index|j}, "data-index": index},
-         )
-       })}
+      {children
+       ->React.array
+       ->React.Children.mapWithIndex((element, index) => {
+           React.cloneElement(
+             element,
+             {"key": {j|$index|j}, "data-index": index},
+           )
+         })}
     </div>;
   };
 };
@@ -357,4 +359,27 @@ describe("React", () => {
     /* We catch the exception here to not populate the error to the toplevel */
     ()
   };
+
+  test("Can define components with custom children", () => {
+    let container = getContainer(container);
+    let root = ReactDOM.Client.createRoot(container);
+
+    module Test = {
+      type t = {name: string};
+      [@react.component]
+      let make = (~children) => {
+        Array.map(children, c => <div> {React.string(c.name)} </div>)
+        ->React.array;
+      };
+    };
+
+    act(() => {
+      ReactDOM.Client.render(
+        root,
+        <Test> {Test.name: "foo"} {name: "bar"} </Test>,
+      )
+    });
+
+    expect(container->DOM.findBySelector("img")->Option.isSome)->toBe(true);
+  });
 });

From 7ecb2eb5df5ff7b70c1241501c60e0fc714747fa Mon Sep 17 00:00:00 2001
From: Javier Chavarri <javier.chavarri@gmail.com>
Date: Tue, 21 Nov 2023 21:13:21 +0000
Subject: [PATCH 2/2] +changelog

---
 CHANGES.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index 4b2635a6d..be1c60aa8 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -7,6 +7,8 @@
 * Wrap the `React` library, exposing just a single top-level module
   (@anmonteiro in [#783](https://github.com/reasonml/reason-react/pull/783))
 * Re-organise toplevel modules (@davesnx in [#794](https://github.com/reasonml/reason-react/pull/794))
+* BREAKING, ppx: Allow passing an array of custom children to a component
+  without having to wrap in array literal ([@jchavarri in #748](https://github.com/reasonml/reason-react/pull/823))
 
 # 0.12.0