support jsx transform with fragment

reasonml · Jun 4, 2024 · bd80320 · bd80320
1 parent 992096b
commit bd80320
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/ppx/reason_react_ppx.ml b/ppx/reason_react_ppx.ml
@@ -59,18 +59,17 @@ module Binding = struct
         ( { loc; txt = Ldot (Lident "React", "componentLike") },
           [ props; return ] )
 
-    let jsxFragment ~loc =
-      Builder.pexp_ident ~loc
-        { loc; txt = Ldot (Lident "React", "jsxFragment") }
+    let jsxFragment ~loc ~attrs children =
+      let fragment =
+        Builder.pexp_ident ~loc
+          { loc; txt = Ldot (Lident "React", "jsxFragment") }
+      in
+      Builder.pexp_apply ~loc ~attrs
+        (Builder.pexp_ident ~loc { loc; txt = Ldot (Lident "React", "jsx") })
+        [ (nolabel, fragment); (nolabel, children) ]
   end
 
   module ReactDOM = struct
-    let createElement ~loc ~attrs element children =
-      Builder.pexp_apply ~loc ~attrs
-        (Builder.pexp_ident ~loc
-           { loc; txt = Ldot (Lident "ReactDOM", "createElement") })
-        [ (nolabel, element); (nolabel, children) ]
-
     let domProps ~applyLoc ~loc props =
       Builder.pexp_apply ~loc:applyLoc
         (Builder.pexp_ident ~loc:applyLoc ~attrs:merlinHideAttrs
@@ -1410,10 +1409,9 @@ let jsxMapper =
               let childrenExpr =
                 transformChildrenIfList ~loc ~ctxt ~mapper:self listItems
               in
-              let fragment = Binding.React.jsxFragment ~loc in
               (* throw away the [@JSX] attribute and keep the others, if any *)
-              Binding.ReactDOM.createElement ~loc ~attrs:nonJSXAttributes
-                fragment childrenExpr)
+              Binding.React.jsxFragment ~loc ~attrs:nonJSXAttributes
+                childrenExpr)
       (* Delegate to the default mapper, a deep identity traversal *)
       | e -> super#expression ctxt e
     [@@raises Invalid_argument]

diff --git a/ppx/test/component.t/run.t b/ppx/test/component.t/run.t
@@ -27,7 +27,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
           ""[@@mel.obj ]
       let make =
         ((fun ?(name= "") ->
-            ReactDOM.createElement React.jsxFragment
+            React.jsx React.jsxFragment
               [|(ReactDOM.jsx "div"
                    (((ReactDOM.domProps)[@merlin.hide ])
                       ~children:(React.string ("First " ^ name)) ()));(

diff --git a/ppx/test/fragment.t/run.t b/ppx/test/fragment.t/run.t
@@ -1,15 +1,14 @@
   $ ../ppx.sh --output re input.re
-  let fragment = foo =>
-    [@bla] ReactDOM.createElement(React.jsxFragment, [|foo|]);
+  let fragment = foo => [@bla] React.jsx(React.jsxFragment, [|foo|]);
   let poly_children_fragment = (foo, bar) =>
-    ReactDOM.createElement(React.jsxFragment, [|foo, bar|]);
+    React.jsx(React.jsxFragment, [|foo, bar|]);
   let nested_fragment = (foo, bar, baz) =>
-    ReactDOM.createElement(
+    React.jsx(
       React.jsxFragment,
-      [|foo, ReactDOM.createElement(React.jsxFragment, [|bar, baz|])|],
+      [|foo, React.jsx(React.jsxFragment, [|bar, baz|])|],
     );
   let nested_fragment_with_lower = foo =>
-    ReactDOM.createElement(
+    React.jsx(
       React.jsxFragment,
       [|
         ReactDOM.jsx(