ppx: support "custom children" in uppercase components without having to wrap in array literal

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
 

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,16 +484,19 @@ 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),
         None )
   | 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 =

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,

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);
+  });
 });