Add data-* attrs support

.ocamlformat

@@ -1 +1 @@
-version = 0.26.0
+version = 0.27.0

demo/main.re

@@ -221,6 +221,24 @@ module WithoutForward = {
   };
 };
 
+module DataAttrsDemo = {
+  [@react.component]
+  let make = () => {
+    let dataAttrs =
+      [("testid", "demo-element"), ("component", "DataAttrsDemo")]
+      |> Js.Dict.fromList;
+
+    <section>
+      <h3> {React.string("DataAttrs Demo")} </h3>
+      <div dataAttrs>
+        {React.string(
+           "This div has data-testid='demo-element' and data-component='DataAttrsDemo'",
+         )}
+      </div>
+    </section>;
+  };
+};
+
 module App = {
   [@react.component]
   let make = (~initialValue) => {
@@ -237,6 +255,7 @@ module App = {
       <UseReducerNoProblemo key="use-reducer-no-problemo" />
       <FragmentsEverywhere key="fragments-everywhere" />
       <WithoutForward key="without-forward" />
+      <DataAttrsDemo key="data-attrs-demo" />
     </main>;
   };
 };

ppx/reason_react_ppx.ml

@@ -108,7 +108,7 @@ let constantString ~loc str =
 
 let safeTypeFromValue valueStr =
   match getLabel valueStr with
-  | Some valueStr when String.sub valueStr 0 1 = "_" -> ("T" ^ valueStr)
+  | Some valueStr when String.sub valueStr 0 1 = "_" -> "T" ^ valueStr
   | Some valueStr -> valueStr
   | None -> ""
 
@@ -229,8 +229,10 @@ let hasAttrOnBinding { pvb_attributes; _ } =
 let getFnName binding =
   match binding with
   | { pvb_pat = { ppat_desc = Ppat_var { txt; _ }; _ }; _ } -> txt
-  | { pvb_loc; _} ->
-      Location.raise_errorf ~loc:pvb_loc "[@react.component] cannot be used with a destructured binding. Please use it on a `let make = ...` binding instead."
+  | { pvb_loc; _ } ->
+      Location.raise_errorf ~loc:pvb_loc
+        "[@react.component] cannot be used with a destructured binding. Please \
+         use it on a `let make = ...` binding instead."
 
 let makeNewBinding binding expression newName =
   match binding with
@@ -243,7 +245,9 @@ let makeNewBinding binding expression newName =
         pvb_attributes = [ merlinFocus ];
       }
   | { pvb_loc; _ } ->
-      Location.raise_errorf ~loc:pvb_loc "[@react.component] cannot be used with a destructured binding. Please use it on a `let make = ...` binding instead."
+      Location.raise_errorf ~loc:pvb_loc
+        "[@react.component] cannot be used with a destructured binding. Please \
+         use it on a `let make = ...` binding instead."
 
 (* Lookup the value of `props` otherwise raise errorf *)
 let getPropsNameValue _acc (loc, expr) =
@@ -252,7 +256,9 @@ let getPropsNameValue _acc (loc, expr) =
       { pexp_desc = Pexp_ident { txt = Lident str; _ }; _ } ) ->
       { propsName = str }
   | { txt; loc }, _ ->
-      Location.raise_errorf ~loc "[@react.component] only accepts 'props' as a field, given: %s" (Longident.last_exn txt)
+      Location.raise_errorf ~loc
+        "[@react.component] only accepts 'props' as a field, given: %s"
+        (Longident.last_exn txt)
 
 (* Lookup the `props` record or string as part of [@react.component] and store
    the name for use when rewriting *)
@@ -261,22 +267,22 @@ let getPropsAttr payload =
   match payload with
   | Some
       (PStr
-        ({
-           pstr_desc =
-             Pstr_eval ({ pexp_desc = Pexp_record (recordFields, None); _ }, _);
-           _;
-         }
-        :: _rest)) ->
+         ({
+            pstr_desc =
+              Pstr_eval ({ pexp_desc = Pexp_record (recordFields, None); _ }, _);
+            _;
+          }
+         :: _rest)) ->
       List.fold_left getPropsNameValue defaultProps recordFields
   | Some
       (PStr
-        ({
-           pstr_desc =
-             Pstr_eval
-               ({ pexp_desc = Pexp_ident { txt = Lident "props"; _ }; _ }, _);
-           _;
-         }
-        :: _rest)) ->
+         ({
+            pstr_desc =
+              Pstr_eval
+                ({ pexp_desc = Pexp_ident { txt = Lident "props"; _ }; _ }, _);
+            _;
+          }
+         :: _rest)) ->
       { propsName = "props" }
   | Some (PStr ({ pstr_desc = Pstr_eval (_, _); pstr_loc; _ } :: _rest)) ->
       Location.raise_errorf ~loc:pstr_loc
@@ -487,7 +493,7 @@ let jsxExprAndChildren ~component_type ~loc ~ctxt mapper ~keyProps children =
          children *)
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
         None,
-        Some (Binding.React.array ~loc children))
+        Some (Binding.React.array ~loc children) )
   | None, (label, key) :: _ ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
         Some (label, key),
@@ -645,7 +651,8 @@ let jsxMapper =
     match expr.pexp_desc with
     | Pexp_fun (Labelled "key", _, _, _) | Pexp_fun (Optional "key", _, _, _) ->
         Location.raise_errorf ~loc:expr.pexp_loc
-          ("~key cannot be accessed from the component props. Please set the key where the component is being used.")
+          "~key cannot be accessed from the component props. Please set the \
+           key where the component is being used."
     | Pexp_fun
         ( ((Optional label | Labelled label) as arg),
           default,

ppx/test/react.t

@@ -36,6 +36,7 @@ Demonstrate how to use the React JSX PPX
   'use strict';
 
   const Belt__Belt_List = require("melange.belt/belt_List.js");
+  const ReactDOM = require("reason-react/ReactDOM.js");
   const JsxRuntime = require("react/jsx-runtime");
 
   function X$App(Props) {
@@ -46,7 +47,7 @@ Demonstrate how to use the React JSX PPX
         tl: /* [] */ 0
       }
     }, (function (greeting) {
-      return JsxRuntime.jsx("h1", {
+      return ReactDOM.jsx("h1", {
         children: greeting
       });
     })));

src/ReactDOM.re

@@ -484,30 +484,35 @@ module Experimental = {
   external preloadOptions:
     (
       ~_as: [
-              | `audio
-              | `document
-              | `embed
-              | `fetch
-              | `font
-              | `image
-              | [@mel.as "object"] `object_
-              | `script
-              | `style
-              | `track
-              | `video
-              | `worker
-            ],
-      ~fetchPriority: [ | `auto | `high | `low]=?,
-      ~referrerPolicy: [
-                         | [@mel.as "no-referrer"] `noReferrer
-                         | [@mel.as "no-referrer-when-downgrade"]
-                           `noReferrerWhenDowngrade
-                         | [@mel.as "origin"] `origin
-                         | [@mel.as "origin-when-cross-origin"]
-                           `originWhenCrossOrigin
-                         | [@mel.as "unsafe-url"] `unsafeUrl
-                       ]
-                         =?,
+        | `audio
+        | `document
+        | `embed
+        | `fetch
+        | `font
+        | `image
+        | [@mel.as "object"] `object_
+        | `script
+        | `style
+        | `track
+        | `video
+        | `worker
+      ],
+      ~fetchPriority:
+        [
+          | `auto
+          | `high
+          | `low
+        ]
+          =?,
+      ~referrerPolicy:
+        [
+          | [@mel.as "no-referrer"] `noReferrer
+          | [@mel.as "no-referrer-when-downgrade"] `noReferrerWhenDowngrade
+          | [@mel.as "origin"] `origin
+          | [@mel.as "origin-when-cross-origin"] `originWhenCrossOrigin
+          | [@mel.as "unsafe-url"] `unsafeUrl
+        ]
+          =?,
       ~imageSrcSet: string=?,
       ~imageSizes: string=?,
       ~crossOrigin: string=?,
@@ -520,11 +525,29 @@ module Experimental = {
   [@deriving jsProperties]
   type preinitOptions = {
     [@mel.as "as"]
-    _as: [ | `script | `style],
+    _as: [
+      | `script
+      | `style
+    ],
     [@mel.optional]
-    fetchPriority: option([ | `auto | `high | `low]),
+    fetchPriority:
+      option(
+        [
+          | `auto
+          | `high
+          | `low
+        ],
+      ),
     [@mel.optional]
-    precedence: option([ | `reset | `low | `medium | `high]),
+    precedence:
+      option(
+        [
+          | `reset
+          | `low
+          | `medium
+          | `high
+        ],
+      ),
     [@mel.optional]
     crossOrigin: option(string),
     [@mel.optional]
@@ -1609,6 +1632,9 @@ type domProps = {
   suppressContentEditableWarning: option(bool),
   [@mel.optional]
   suppressHydrationWarning: option(bool),
+  /* data attributes */
+  [@mel.optional]
+  dataAttrs: option(Js.Dict.t(string)),
 };
 
 // As we've removed `ReactDOMRe.createElement`, this enables patterns like
@@ -1625,16 +1651,58 @@ external createDOMElementVariadic:
   (string, ~props: domProps=?, array(React.element)) => React.element =
   "createElement";
 
+// Helper function to process dataAttrs
+let processDataAttrs = (props: domProps): domProps => {
+  switch (props.dataAttrs) {
+  | None => props // Short circuit: if no data attributes provided, return props unchanged for better performance
+  | Some(_) =>
+    props
+    |> Obj.magic
+    |> Js.Dict.entries
+    |> Js.Array.reduce(
+         ~f=
+           acc =>
+             fun
+             | ("dataAttrs", dataAttrsDict) =>
+               dataAttrsDict
+               |> Obj.magic
+               |> Js.Dict.entries
+               |> Js.Array.reduce(
+                    ~f=
+                      (acc, (dataKey, dataValue)) =>
+                        [
+                          ("data-" ++ dataKey, dataValue |> Obj.magic: string),
+                          ...acc,
+                        ],
+                    ~init=acc,
+                  )
+             | (key, value) => [(key, value), ...acc],
+         ~init=[],
+       )
+    |> Js.Dict.fromList
+    |> Obj.magic
+  };
+};
+
+// JSX functions with dataAttrs processing
 [@mel.module "react/jsx-runtime"]
 external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.element =
   "jsx";
+let jsxKeyed = (component: string, props: domProps, ~key=?, ()) =>
+  jsxKeyed(component, processDataAttrs(props), ~key?, ());
 
 [@mel.module "react/jsx-runtime"]
 external jsx: (string, domProps) => React.element = "jsx";
+let jsx = (component: string, props: domProps) =>
+  jsx(component, processDataAttrs(props));
 
 [@mel.module "react/jsx-runtime"]
 external jsxs: (string, domProps) => React.element = "jsxs";
+let jsxs = (component: string, props: domProps) =>
+  jsxs(component, processDataAttrs(props));
 
 [@mel.module "react/jsx-runtime"]
 external jsxsKeyed: (string, domProps, ~key: string=?, unit) => React.element =
   "jsxs";
+let jsxsKeyed = (component: string, props: domProps, ~key=?, ()) =>
+  jsxsKeyed(component, processDataAttrs(props), ~key?, ());