Expand only lowercase components

Author: davesnx

packages/server-reason-react-ppx/cram/ppx.sh

@@ -21,7 +21,7 @@ while [[ $# -gt 0 ]]; do
       shift 2
       ;;
     -js)
-      js_flag="-js"
+      js_flag="-melange"
       shift
       ;;
     *)

packages/server-reason-react-ppx/cram/styles.t/input.re

@@ -6,4 +6,9 @@
 <div className="lola" style={ReactDOM.Style.make(~backgroundColor="gainsboro", ())} styles=x />;
 <div className="lola" styles=?x />;
 <div style={ReactDOM.Style.make(~backgroundColor="gainsboro", ())} styles=?x />;
-<div className="lola" style={ReactDOM.Style.make(~backgroundColor="gainsboro", ())} styles=?x />;
+<div className="lola" style={ReactDOM.Style.make(~backgroundColor="gainsboro", ())} styles=?x />;
+
+/* Module-qualified components should NOT get ~styles expanded.
+   ~styles is passed through as a regular prop. */
+<Foo.Bar styles=x />;
+<Foo.Bar styles=?x />;

packages/server-reason-react-ppx/cram/styles.t/run.t

@@ -133,3 +133,77 @@ We need to output ML syntax here, otherwise refmt could not parse it.
                 : ReactDOM.Style.t));
        ])
     []
+  ;;
+  
+  Foo.Bar.make (Foo.Bar.makeProps ~styles:x ());;
+  Foo.Bar.make (Foo.Bar.makeProps ?styles:x ())
+
+In Melange mode (-js), ~styles is only expanded on lowercase (DOM) tags.
+Module-qualified components like Foo.Bar keep ~styles as a regular prop (not expanded).
+  $ rm -f output.ml temp.ml
+  $ ../ppx.sh --output ml -js input.re
+  div ~className:(fst x) ~style:(snd x) ~children:[] () [@JSX];;
+  
+  div
+    ?className:(match x with None -> None | Some x -> Some (fst x))
+    ?style:(match x with None -> None | Some x -> Some (snd x))
+    ~children:[] () [@JSX]
+  ;;
+  
+  div ~className:(fst x ^ " " ^ "lola") ~style:(snd x) ~children:[] () [@JSX];;
+  
+  div ~className:(fst x)
+    ~style:
+      (ReactDOM.Style.combine
+         (ReactDOM.Style.make ~backgroundColor:"gainsboro" ())
+         (snd x))
+    ~children:[] () [@JSX]
+  ;;
+  
+  div
+    ~className:(fst x ^ " " ^ "lola")
+    ~style:
+      (ReactDOM.Style.combine
+         (ReactDOM.Style.make ~backgroundColor:"gainsboro" ())
+         (snd x))
+    ~children:[] () [@JSX]
+  ;;
+  
+  div
+    ~className:
+      (match match x with None -> None | Some x -> Some (fst x) with
+      | None -> "lola"
+      | Some x -> x ^ " " ^ "lola")
+    ?style:(match x with None -> None | Some x -> Some (snd x))
+    ~children:[] () [@JSX]
+  ;;
+  
+  div
+    ?className:(match x with None -> None | Some x -> Some (fst x))
+    ~style:
+      (match match x with None -> None | Some x -> Some (snd x) with
+      | None -> ReactDOM.Style.make ~backgroundColor:"gainsboro" ()
+      | Some x ->
+          ReactDOM.Style.combine
+            (ReactDOM.Style.make ~backgroundColor:"gainsboro" ())
+            x)
+    ~children:[] () [@JSX]
+  ;;
+  
+  div
+    ~className:
+      (match match x with None -> None | Some x -> Some (fst x) with
+      | None -> "lola"
+      | Some x -> x ^ " " ^ "lola")
+    ~style:
+      (match match x with None -> None | Some x -> Some (snd x) with
+      | None -> ReactDOM.Style.make ~backgroundColor:"gainsboro" ()
+      | Some x ->
+          ReactDOM.Style.combine
+            (ReactDOM.Style.make ~backgroundColor:"gainsboro" ())
+            x)
+    ~children:[] () [@JSX]
+  ;;
+  
+  Foo.Bar.createElement ~styles:x ~children:[] () [@JSX];;
+  Foo.Bar.createElement ?styles:x ~children:[] () [@JSX]

packages/server-reason-react-ppx/server_reason_react_ppx.ml

@@ -1612,7 +1612,9 @@ let traverse =
           (* In the case of expressions, it's the only transformation that needs to be done for JS. This expansion from "styles" prop into "className" and "style" props is a feature by styled-ppx. The existence of this here, is because dune/ppxlib doesn't allow more than one preprocess_impl and even that, the combination of styled-ppx and server-reason-react.ppx doesn't compose properly. *)
           try
             match expr.pexp_desc with
-            | Pexp_apply (({ pexp_desc = Pexp_ident _; pexp_loc = loc; _ } as tag), args)
+            (* Only expand ~styles on lowercase tags (DOM elements like div, span, etc.)
+               Uppercase components and bindings handle styles in their own way. *)
+            | Pexp_apply (({ pexp_desc = Pexp_ident { txt = Lident _; _ }; pexp_loc = loc; _ } as tag), args)
               when has_jsx_attr expr.pexp_attributes ->
                 let new_args = Expand_styles_attribute.make ~loc args in
                 { (pexp_apply ~loc (super#expression ctx tag) new_args) with pexp_attributes = attributes }