From 904d2ca17dc77ede7a65412cbeb91d146efb7a75 Mon Sep 17 00:00:00 2001
From: Pedro Lisboa <35539594+pedrobslisboa@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:22:01 +0100
Subject: [PATCH] Handle DomProps with both jsx and html attribute name (#171)

* feat: handle DomProps with both jsx and html attribute name

* feat: use tuple on name and jsxName for DomProps

---------

Co-authored-by: David Sancho <dsnxmoreno@gmail.com>
---
 packages/react/src/DomProps.ml                |   2 +-
 packages/react/src/DomProps.mli               |   2 +-
 packages/react/src/React.ml                   |  28 +-
 packages/react/src/React.mli                  |  12 +-
 packages/react/test/test_cloneElement.ml      |  28 +-
 packages/react/test/test_react.ml             |   2 +-
 packages/reactDom/src/ReactDOM.ml             | 830 +++++++++---------
 .../test/test_renderToStaticMarkup.ml         |  53 +-
 .../cram/component.t/run.t                    |  19 +-
 .../cram/lower.t/run.t                        |  66 +-
 .../server_reason_react_ppx.ml                |  62 +-
 11 files changed, 588 insertions(+), 516 deletions(-)

diff --git a/packages/react/src/DomProps.ml b/packages/react/src/DomProps.ml
index 0c00369fc..c1a5e4d03 100644
--- a/packages/react/src/DomProps.ml
+++ b/packages/react/src/DomProps.ml
@@ -1659,7 +1659,7 @@ let camelcaseToKebabcase str =
   in
   str |> chars_of_string |> loop [] |> List.rev |> string_of_chars
 
-let findByName tag jsxName =
+let findByJsxName ~tag jsxName =
   let byName p = getJSXName p = jsxName in
   if isDataAttribute jsxName then
     let name = camelcaseToKebabcase jsxName in
diff --git a/packages/react/src/DomProps.mli b/packages/react/src/DomProps.mli
index a6dbe3a14..5ae9d6a6c 100644
--- a/packages/react/src/DomProps.mli
+++ b/packages/react/src/DomProps.mli
@@ -34,6 +34,6 @@ type errors = [ `ElementNotFound | `AttributeNotFound ]
 
 val getJSXName : prop -> string
 val getName : prop -> string
-val findByName : string -> string -> (prop, errors) result
+val findByJsxName : tag:string -> string -> (prop, errors) result
 val isReactValidProp : string -> bool
 val find_closest_name : string -> string option
diff --git a/packages/react/src/React.ml b/packages/react/src/React.ml
index a4ef92c90..c6c4d39f6 100644
--- a/packages/react/src/React.ml
+++ b/packages/react/src/React.ml
@@ -339,18 +339,18 @@ module JSX = struct
     | Inline of string
 
   type prop =
-    | Bool of (string * bool)
-    | String of (string * string)
+    | Bool of (string * string * bool)
+    | String of (string * string * string)
     | Style of string
     | DangerouslyInnerHtml of string
     | Ref of Ref.t
     | Event of string * event
 
-  let bool key value = Bool (key, value)
-  let string key value = String (key, value)
+  let bool name jsxName value = Bool (name, jsxName, value)
+  let string name jsxName value = String (name, jsxName, value)
   let style value = Style value
-  let int key value = String (key, string_of_int value)
-  let float key value = String (key, string_of_float value)
+  let int name jsxName value = String (name, jsxName, string_of_int value)
+  let float name jsxName value = String (name, jsxName, string_of_float value)
   let dangerouslyInnerHtml value = DangerouslyInnerHtml value#__html
   let ref value = Ref value
   let event key value = Event (key, value)
@@ -397,9 +397,8 @@ exception Invalid_children of string
 
 let compare_attribute left right =
   match (left, right) with
-  | JSX.Bool (left_key, _), JSX.Bool (right_key, _) ->
-      String.compare left_key right_key
-  | String (left_key, _), String (right_key, _) ->
+  | JSX.Bool (left_key, _, _), JSX.Bool (right_key, _, _)
+  | String (left_key, _, _), String (right_key, _, _) ->
       String.compare left_key right_key
   | Style left_styles, Style right_styles ->
       String.compare left_styles right_styles
@@ -408,10 +407,9 @@ let compare_attribute left right =
 let clone_attribute acc attr new_attr =
   let open JSX in
   match (attr, new_attr) with
-  | Bool (left, _), Bool (right, value) when left == right ->
-      Bool (left, value) :: acc
-  | String (left, _), String (right, value) when left == right ->
-      String (left, value) :: acc
+  | Bool (left, _, _), Bool (right, _, _) when left == right -> new_attr :: acc
+  | String (left, _, _), String (right, _, _) when left == right ->
+      new_attr :: acc
   | _ -> new_attr :: acc
 
 module StringMap = Map.Make (String)
@@ -421,8 +419,8 @@ let attributes_to_map attributes =
   List.fold_left
     (fun acc attr ->
       match attr with
-      | Bool (key, value) -> acc |> StringMap.add key (Bool (key, value))
-      | String (key, value) -> acc |> StringMap.add key (String (key, value))
+      | (Bool (key, _, _) | String (key, _, _)) as prop ->
+          acc |> StringMap.add key prop
       (* The following constructors shoudn't be part of the StringMap *)
       | DangerouslyInnerHtml _ -> acc
       | Ref _ -> acc
diff --git a/packages/react/src/React.mli b/packages/react/src/React.mli
index 4936c890b..7682fe505 100644
--- a/packages/react/src/React.mli
+++ b/packages/react/src/React.mli
@@ -515,8 +515,8 @@ module JSX : sig
 
   (** JSX.prop is the representation of HTML/SVG attributes and DOM events *)
   type prop =
-    | Bool of (string * bool)
-    | String of (string * string)
+    | Bool of (string * string * bool)
+    | String of (string * string * string)
     | Style of string
     | DangerouslyInnerHtml of string
     | Ref of domRef
@@ -524,12 +524,12 @@ module JSX : sig
 
   (** Helpers to create JSX.prop without variants, helpful for function application *)
 
-  val bool : string -> bool -> prop
-  val string : string -> string -> prop
+  val bool : string -> string -> bool -> prop
+  val string : string -> string -> string -> prop
   val style : string -> prop
   val dangerouslyInnerHtml : < __html : string ; .. > -> prop
-  val int : string -> int -> prop
-  val float : string -> float -> prop
+  val int : string -> string -> int -> prop
+  val float : string -> string -> float -> prop
   val ref : domRef -> prop
   val event : string -> event -> prop
 
diff --git a/packages/react/test/test_cloneElement.ml b/packages/react/test/test_cloneElement.ml
index f04247cf2..15d6aed3f 100644
--- a/packages/react/test/test_cloneElement.ml
+++ b/packages/react/test/test_cloneElement.ml
@@ -1,7 +1,7 @@
 let equal_attrs (a1 : React.JSX.prop) (a2 : React.JSX.prop) =
   match (a1, a2) with
-  | Bool (k1, v1), Bool (k2, v2) -> k1 == k2 && v1 = v2
-  | String (k1, v1), String (k2, v2) -> k1 == k2 && v1 == v2
+  | Bool (k1, x1, v1), Bool (k2, x2, v2) -> k1 == k2 && x1 == x2 && v1 = v2
+  | String (k1, x1, v1), String (k2, x2, v2) -> k1 == k2 && x1 == x2 && v1 == v2
   | Style s1, Style s2 -> s1 == s2
   | DangerouslyInnerHtml s1, DangerouslyInnerHtml s2 -> s1 == s2
   (* Can't compare functions ^^ *)
@@ -36,22 +36,28 @@ let assert_component left right =
 
 let clone_empty () =
   let component =
-    React.createElement "div" [ React.JSX.Bool ("hidden", true) ] []
+    React.createElement "div" [ React.JSX.Bool ("hidden", "hidden", true) ] []
   in
   assert_component component (React.cloneElement component [])
 
 let clone_attributes () =
   let component =
-    React.createElement "div" [ React.JSX.String ("val", "33") ] []
+    React.createElement "div" [ React.JSX.String ("val", "val", "33") ] []
   in
   let expected =
     React.createElement "div"
-      [ React.JSX.String ("val", "31"); React.JSX.Bool ("lola", true) ]
+      [
+        React.JSX.String ("val", "val", "31");
+        React.JSX.Bool ("lola", "lola", true);
+      ]
       []
   in
   let cloned =
     React.cloneElement component
-      [ React.JSX.Bool ("lola", true); React.JSX.String ("val", "31") ]
+      [
+        React.JSX.Bool ("lola", "lola", true);
+        React.JSX.String ("val", "val", "31");
+      ]
   in
   assert_component cloned expected
 
@@ -59,12 +65,18 @@ let clone_order_attributes () =
   let component = React.createElement "div" [] [] in
   let expected =
     React.createElement "div"
-      [ React.JSX.String ("val", "31"); React.JSX.Bool ("lola", true) ]
+      [
+        React.JSX.String ("val", "val", "31");
+        React.JSX.Bool ("lola", "lola", true);
+      ]
       []
   in
   let cloned =
     React.cloneElement component
-      [ React.JSX.Bool ("lola", true); React.JSX.String ("val", "31") ]
+      [
+        React.JSX.Bool ("lola", "lola", true);
+        React.JSX.String ("val", "val", "31");
+      ]
   in
   assert_component cloned expected
 
diff --git a/packages/react/test/test_react.ml b/packages/react/test/test_react.ml
index 468aebe23..6071b9607 100644
--- a/packages/react/test/test_react.ml
+++ b/packages/react/test/test_react.ml
@@ -32,7 +32,7 @@ module Gap = struct
         if element = React.null then React.null
         else
           React.createElement "div"
-            [ React.JSX.String ("class", "divider") ]
+            [ React.JSX.String ("class", "className", "divider") ]
             [ element ])
 end
 
diff --git a/packages/reactDom/src/ReactDOM.ml b/packages/reactDom/src/ReactDOM.ml
index f185d81b2..5fc636ffb 100644
--- a/packages/reactDom/src/ReactDOM.ml
+++ b/packages/reactDom/src/ReactDOM.ml
@@ -9,14 +9,15 @@ let attribute_to_html attr =
   match attr with
   (* ignores "ref" prop *)
   | React.JSX.Ref _ -> Html.omitted ()
-  | Bool (name, _) when is_react_custom_attribute name -> Html.omitted ()
+  | Bool (name, _, _) when is_react_custom_attribute name -> Html.omitted ()
   (* false attributes don't get rendered *)
-  | Bool (_name, false) -> Html.omitted ()
+  | Bool (_name, _, false) -> Html.omitted ()
   (* true attributes render solely the attribute name *)
-  | Bool (name, true) -> Html.present name
+  | Bool (name, _, true) -> Html.present name
   | Style styles -> Html.attribute "style" styles
-  | String (name, _value) when is_react_custom_attribute name -> Html.omitted ()
-  | String (name, value) -> Html.attribute name value
+  | String (name, _, _value) when is_react_custom_attribute name ->
+      Html.omitted ()
+  | String (name, _, value) -> Html.attribute name value
   (* Events don't get rendered on SSR *)
   | Event _ -> Html.omitted ()
   (* Since we extracted the attribute as children (Element.InnerHtml) in createElement,
@@ -249,7 +250,8 @@ let add kind value map =
 type dangerouslySetInnerHTML = < __html : string >
 
 (* `Booleanish_string` are JSX attributes represented as boolean values but rendered as strings on HTML https://github.com/facebook/react/blob/a17467e7e2cd8947c595d1834889b5d184459f12/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L1165-L1176 *)
-let booleanish_string name v = React.JSX.string name (string_of_bool v)
+let booleanish_string name jsxName v =
+  React.JSX.string name jsxName (string_of_bool v)
 
 [@@@ocamlformat "disable"]
 (* domProps isn't used by the generated code from the ppx, and it's purpose is to
@@ -749,164 +751,164 @@ let domProps
   ?suppressHydrationWarning
   () =
   []
-  |> add (React.JSX.string "key") key
+  |> add (React.JSX.string "key" "key") key
   |> add React.JSX.ref ref
-  |> add (React.JSX.string "aria-details") ariaDetails
-  |> add (booleanish_string "aria-disabled") ariaDisabled
-  |> add (booleanish_string "aria-hidden") ariaHidden
-  |> add (React.JSX.string "aria-keyshortcuts") ariaKeyshortcuts
-  |> add (React.JSX.string "aria-label") ariaLabel
-  |> add (React.JSX.string "aria-roledescription") ariaRoledescription
-  |> add (booleanish_string "aria-expanded") ariaExpanded
-  |> add (React.JSX.int "aria-level") ariaLevel
-  |> add (booleanish_string "aria-modal") ariaModal
-  |> add (booleanish_string "aria-multiline") ariaMultiline
-  |> add (booleanish_string "aria-multiselectable") ariaMultiselectable
-  |> add (React.JSX.string "aria-placeholder") ariaPlaceholder
-  |> add (booleanish_string "aria-readonly") ariaReadonly
-  |> add (booleanish_string "aria-required") ariaRequired
-  |> add (booleanish_string "aria-selected") ariaSelected
-  |> add (React.JSX.string "aria-sort") ariaSort
-  |> add (React.JSX.float "aria-valuemax") ariaValuemax
-  |> add (React.JSX.float "aria-valuemin") ariaValuemin
-  |> add (React.JSX.float "aria-valuenow") ariaValuenow
-  |> add (React.JSX.string "aria-valuetext") ariaValuetext
-  |> add (booleanish_string "aria-atomic") ariaAtomic
-  |> add (booleanish_string "aria-busy") ariaBusy
-  |> add (React.JSX.string "aria-relevant") ariaRelevant
-  |> add (React.JSX.bool "aria-grabbed") ariaGrabbed
-  |> add (React.JSX.string "aria-activedescendant") ariaActivedescendant
-  |> add (React.JSX.int "aria-colcount") ariaColcount
-  |> add (React.JSX.int "aria-colindex") ariaColindex
-  |> add (React.JSX.int "aria-colspan") ariaColspan
-  |> add (React.JSX.string "aria-controls") ariaControls
-  |> add (React.JSX.string "aria-describedby") ariaDescribedby
-  |> add (React.JSX.string "aria-errormessage") ariaErrormessage
-  |> add (React.JSX.string "aria-flowto") ariaFlowto
-  |> add (React.JSX.string "aria-labelledby") ariaLabelledby
-  |> add (React.JSX.string "aria-owns") ariaOwns
-  |> add (React.JSX.int "aria-posinset") ariaPosinset
-  |> add (React.JSX.int "aria-rowcount") ariaRowcount
-  |> add (React.JSX.int "aria-rowindex") ariaRowindex
-  |> add (React.JSX.int "aria-rowspan") ariaRowspan
-  |> add (React.JSX.int "aria-setsize") ariaSetsize
-  |> add (React.JSX.bool "checked") defaultChecked
-  |> add (React.JSX.string "value") defaultValue
-  |> add (React.JSX.string "accesskey") accessKey
-  |> add (React.JSX.string "class") className
-  |> add (booleanish_string "contenteditable") contentEditable
-  |> add (React.JSX.string "contextmenu") contextMenu
-  |> add (React.JSX.string "dir") dir
-  |> add (booleanish_string "draggable") draggable
-  |> add (React.JSX.bool "hidden") hidden
-  |> add (React.JSX.string "id") id
-  |> add (React.JSX.string "lang") lang
-  |> add (React.JSX.string "role") role
+  |> add (React.JSX.string "aria-details" "ariaDetails") ariaDetails
+  |> add (booleanish_string "aria-disabled" "ariaDisabled") ariaDisabled
+  |> add (booleanish_string "aria-hidden" "ariaHidden") ariaHidden
+  |> add (React.JSX.string "aria-keyshortcuts" "ariaKeyshortcuts") ariaKeyshortcuts
+  |> add (React.JSX.string "aria-label" "ariaLabel") ariaLabel
+  |> add (React.JSX.string "aria-roledescription" "ariaRoledescription") ariaRoledescription
+  |> add (booleanish_string "aria-expanded" "ariaExpanded") ariaExpanded
+  |> add (React.JSX.int "aria-level" "ariaLevel") ariaLevel
+  |> add (booleanish_string "aria-modal" "ariaModal") ariaModal
+  |> add (booleanish_string "aria-multiline" "ariaMultiline") ariaMultiline
+  |> add (booleanish_string "aria-multiselectable" "ariaMultiselectable") ariaMultiselectable
+  |> add (React.JSX.string "aria-placeholder" "ariaPlaceholder") ariaPlaceholder
+  |> add (booleanish_string "aria-readonly" "ariaReadonly") ariaReadonly
+  |> add (booleanish_string "aria-required" "ariaRequired") ariaRequired
+  |> add (booleanish_string "aria-selected" "ariaSelected") ariaSelected
+  |> add (React.JSX.string "aria-sort" "ariaSort") ariaSort
+  |> add (React.JSX.float "aria-valuemax" "ariaValuemax") ariaValuemax
+  |> add (React.JSX.float "aria-valuemin" "ariaValuemin") ariaValuemin
+  |> add (React.JSX.float "aria-valuenow" "ariaValuenow") ariaValuenow
+  |> add (React.JSX.string "aria-valuetext" "ariaValuetext") ariaValuetext
+  |> add (booleanish_string "aria-atomic" "ariaAtomic") ariaAtomic
+  |> add (booleanish_string "aria-busy" "ariaBusy") ariaBusy
+  |> add (React.JSX.string "aria-relevant" "ariaRelevant") ariaRelevant
+  |> add (React.JSX.bool "aria-grabbed" "ariaGrabbed") ariaGrabbed
+  |> add (React.JSX.string "aria-activedescendant" "ariaActivedescendant") ariaActivedescendant
+  |> add (React.JSX.int "aria-colcount" "ariaColcount") ariaColcount
+  |> add (React.JSX.int "aria-colindex" "ariaColindex") ariaColindex
+  |> add (React.JSX.int "aria-colspan" "ariaColspan") ariaColspan
+  |> add (React.JSX.string "aria-controls" "ariaControls") ariaControls
+  |> add (React.JSX.string "aria-describedby" "ariaDescribedby") ariaDescribedby
+  |> add (React.JSX.string "aria-errormessage" "ariaErrormessage") ariaErrormessage
+  |> add (React.JSX.string "aria-flowto" "ariaFlowto") ariaFlowto
+  |> add (React.JSX.string "aria-labelledby" "ariaLabelledby") ariaLabelledby
+  |> add (React.JSX.string "aria-owns" "ariaOwns") ariaOwns
+  |> add (React.JSX.int "aria-posinset" "ariaPosinset") ariaPosinset
+  |> add (React.JSX.int "aria-rowcount" "ariaRowcount") ariaRowcount
+  |> add (React.JSX.int "aria-rowindex" "ariaRowindex") ariaRowindex
+  |> add (React.JSX.int "aria-rowspan" "ariaRowspan") ariaRowspan
+  |> add (React.JSX.int "aria-setsize" "ariaSetsize") ariaSetsize
+  |> add (React.JSX.bool "checked" "defaultChecked") defaultChecked
+  |> add (React.JSX.string "value" "defaultValue") defaultValue
+  |> add (React.JSX.string "accesskey" "accessKey") accessKey
+  |> add (React.JSX.string "class" "className") className
+  |> add (booleanish_string "contenteditable" "contentEditable") contentEditable
+  |> add (React.JSX.string "contextmenu" "contextMenu") contextMenu
+  |> add (React.JSX.string "dir" "dir") dir
+  |> add (booleanish_string "draggable" "draggable") draggable
+  |> add (React.JSX.bool "hidden" "hidden") hidden
+  |> add (React.JSX.string "id" "id") id
+  |> add (React.JSX.string "lang" "lang") lang
+  |> add (React.JSX.string "role" "role") role
   |> add (fun v -> React.JSX.style (ReactDOMStyle.to_string v)) style
-  |> add (booleanish_string "spellcheck") spellCheck
-  |> add (React.JSX.int "tabindex") tabIndex
-  |> add (React.JSX.string "title") title
-  |> add (React.JSX.string "itemid") itemID
-  |> add (React.JSX.string "itemorop") itemProp
-  |> add (React.JSX.string "itemref") itemRef
-  |> add (React.JSX.bool "itemccope") itemScope
-  |> add (React.JSX.string "itemtype") itemType
-  |> add (React.JSX.string "accept") accept
-  |> add (React.JSX.string "accept-charset") acceptCharset
-  |> add (React.JSX.string "action") action
-  |> add (React.JSX.bool "allowfullscreen") allowFullScreen
-  |> add (React.JSX.string "alt") alt
-  |> add (React.JSX.bool "async") async
-  |> add (React.JSX.string "autocomplete") autoComplete
-  |> add (React.JSX.string "autocapitalize") autoCapitalize
-  |> add (React.JSX.bool "autofocus") autoFocus
-  |> add (React.JSX.bool "autoplay") autoPlay
-  |> add (React.JSX.string "challenge") challenge
-  |> add (React.JSX.string "charSet") charSet
-  |> add (React.JSX.bool "checked") checked
-  |> add (React.JSX.string "cite") cite
-  |> add (React.JSX.string "crossorigin") crossOrigin
-  |> add (React.JSX.int "cols") cols
-  |> add (React.JSX.int "colspan") colSpan
-  |> add (React.JSX.string "content") content
-  |> add (React.JSX.bool "controls") controls
-  |> add (React.JSX.string "coords") coords
-  |> add (React.JSX.string "data") data
-  |> add (React.JSX.string "datetime") dateTime
-  |> add (React.JSX.bool "default") default
-  |> add (React.JSX.bool "defer") defer
-  |> add (React.JSX.bool "disabled") disabled
-  |> add (React.JSX.string "download") download
-  |> add (React.JSX.string "enctype") encType
-  |> add (React.JSX.string "form") form
-  |> add (React.JSX.string "formction") formAction
-  |> add (React.JSX.string "formtarget") formTarget
-  |> add (React.JSX.string "formmethod") formMethod
-  |> add (React.JSX.string "headers") headers
-  |> add (React.JSX.string "height") height
-  |> add (React.JSX.int "high") high
-  |> add (React.JSX.string "href") href
-  |> add (React.JSX.string "hreflang") hrefLang
-  |> add (React.JSX.string "for") htmlFor
-  |> add (React.JSX.string "http-eequiv") httpEquiv
-  |> add (React.JSX.string "icon") icon
-  |> add (React.JSX.string "inputmode") inputMode
-  |> add (React.JSX.string "integrity") integrity
-  |> add (React.JSX.string "keytype") keyType
-  |> add (React.JSX.string "kind") kind
-  |> add (React.JSX.string "label") label
-  |> add (React.JSX.string "list") list
-  |> add (React.JSX.bool "loop") loop
-  |> add (React.JSX.int "low") low
-  |> add (React.JSX.string "manifest") manifest
-  |> add (React.JSX.string "max") max
-  |> add (React.JSX.int "maxlength") maxLength
-  |> add (React.JSX.string "media") media
-  |> add (React.JSX.string "mediagroup") mediaGroup
-  |> add (React.JSX.string "method") method_
-  |> add (React.JSX.string "min") min
-  |> add (React.JSX.int "minlength") minLength
-  |> add (React.JSX.bool "multiple") multiple
-  |> add (React.JSX.bool "muted") muted
-  |> add (React.JSX.string "name") name
-  |> add (React.JSX.string "nonce") nonce
-  |> add (React.JSX.bool "noValidate") noValidate
-  |> add (React.JSX.bool "open") open_
-  |> add (React.JSX.int "optimum") optimum
-  |> add (React.JSX.string "pattern") pattern
-  |> add (React.JSX.string "placeholder") placeholder
-  |> add (React.JSX.bool "playsInline") playsInline
-  |> add (React.JSX.string "poster") poster
-  |> add (React.JSX.string "preload") preload
-  |> add (React.JSX.string "radioGroup") radioGroup (* Unsure if it exists? *)
-  |> add (React.JSX.bool "readonly") readOnly
-  |> add (React.JSX.string "rel") rel
-  |> add (React.JSX.bool "required") required
-  |> add (React.JSX.bool "reversed") reversed
-  |> add (React.JSX.int "rows") rows
-  |> add (React.JSX.int "rowspan") rowSpan
-  |> add (React.JSX.string "sandbox") sandbox
-  |> add (React.JSX.string "scope") scope
-  |> add (React.JSX.bool "scoped") scoped
-  |> add (React.JSX.string "scrolling") scrolling
-  |> add (React.JSX.bool "selected") selected
-  |> add (React.JSX.string "shape") shape
-  |> add (React.JSX.int "size") size
-  |> add (React.JSX.string "sizes") sizes
-  |> add (React.JSX.int "span") span
-  |> add (React.JSX.string "src") src
-  |> add (React.JSX.string "srcdoc") srcDoc
-  |> add (React.JSX.string "srclang") srcLang
-  |> add (React.JSX.string "srcset") srcSet
-  |> add (React.JSX.int "start") start
-  |> add (React.JSX.float "step") step
-  |> add (React.JSX.string "summary") summary
-  |> add (React.JSX.string "target") target
-  |> add (React.JSX.string "type") type_
-  |> add (React.JSX.string "useMap") useMap
-  |> add (React.JSX.string "value") value
-  |> add (React.JSX.string "width") width
-  |> add (React.JSX.string "wrap") wrap
+  |> add (booleanish_string "spellcheck" "spellCheck") spellCheck
+  |> add (React.JSX.int "tabindex" "tabIndex") tabIndex
+  |> add (React.JSX.string "title" "title") title
+  |> add (React.JSX.string "itemid" "itemID") itemID
+  |> add (React.JSX.string "itemorop" "itemProp") itemProp
+  |> add (React.JSX.string "itemref" "itemRef") itemRef
+  |> add (React.JSX.bool "itemccope" "itemScope") itemScope
+  |> add (React.JSX.string "itemtype" "itemType") itemType
+  |> add (React.JSX.string "accept" "accept") accept
+  |> add (React.JSX.string "accept-charset" "acceptCharset") acceptCharset
+  |> add (React.JSX.string "action" "action") action
+  |> add (React.JSX.bool "allowfullscreen" "allowFullScreen") allowFullScreen
+  |> add (React.JSX.string "alt" "alt") alt
+  |> add (React.JSX.bool "async" "async") async
+  |> add (React.JSX.string "autocomplete" "autoComplete") autoComplete
+  |> add (React.JSX.string "autocapitalize" "autoCapitalize") autoCapitalize
+  |> add (React.JSX.bool "autofocus" "autoFocus") autoFocus
+  |> add (React.JSX.bool "autoplay" "autoPlay") autoPlay
+  |> add (React.JSX.string "challenge" "challenge") challenge
+  |> add (React.JSX.string "charSet" "charSet") charSet
+  |> add (React.JSX.bool "checked" "checked") checked
+  |> add (React.JSX.string "cite" "cite") cite
+  |> add (React.JSX.string "crossorigin" "crossOrigin") crossOrigin
+  |> add (React.JSX.int "cols" "cols") cols
+  |> add (React.JSX.int "colspan" "colSpan") colSpan
+  |> add (React.JSX.string "content" "content") content
+  |> add (React.JSX.bool "controls" "controls") controls
+  |> add (React.JSX.string "coords" "coords") coords
+  |> add (React.JSX.string "data" "data") data
+  |> add (React.JSX.string "datetime" "dateTime") dateTime
+  |> add (React.JSX.bool "default" "default") default
+  |> add (React.JSX.bool "defer" "defer") defer
+  |> add (React.JSX.bool "disabled" "disabled") disabled
+  |> add (React.JSX.string "download" "download") download
+  |> add (React.JSX.string "enctype" "encType") encType
+  |> add (React.JSX.string "form" "form") form
+  |> add (React.JSX.string "formction" "formAction") formAction
+  |> add (React.JSX.string "formtarget" "formTarget") formTarget
+  |> add (React.JSX.string "formmethod" "formMethod") formMethod
+  |> add (React.JSX.string "headers" "headers") headers
+  |> add (React.JSX.string "height" "height") height
+  |> add (React.JSX.int "high" "high") high
+  |> add (React.JSX.string "href" "href") href
+  |> add (React.JSX.string "hreflang" "hrefLang") hrefLang
+  |> add (React.JSX.string "for" "htmlFor") htmlFor
+  |> add (React.JSX.string "http-eequiv" "httpEquiv") httpEquiv
+  |> add (React.JSX.string "icon" "icon") icon
+  |> add (React.JSX.string "inputmode" "inputMode") inputMode
+  |> add (React.JSX.string "integrity" "integrity") integrity
+  |> add (React.JSX.string "keytype" "keyType") keyType
+  |> add (React.JSX.string "kind" "kind") kind
+  |> add (React.JSX.string "label" "label") label
+  |> add (React.JSX.string "list" "list") list
+  |> add (React.JSX.bool "loop" "loop") loop
+  |> add (React.JSX.int "low" "low") low
+  |> add (React.JSX.string "manifest" "manifest") manifest
+  |> add (React.JSX.string "max" "max") max
+  |> add (React.JSX.int "maxlength" "maxLength") maxLength
+  |> add (React.JSX.string "media" "media") media
+  |> add (React.JSX.string "mediagroup" "mediaGroup") mediaGroup
+  |> add (React.JSX.string "method" "method_") method_
+  |> add (React.JSX.string "min" "min") min
+  |> add (React.JSX.int "minlength" "minLength") minLength
+  |> add (React.JSX.bool "multiple" "multiple") multiple
+  |> add (React.JSX.bool "muted" "muted") muted
+  |> add (React.JSX.string "name" "name") name
+  |> add (React.JSX.string "nonce" "nonce") nonce
+  |> add (React.JSX.bool "noValidate" "noValidate") noValidate
+  |> add (React.JSX.bool "open" "open_") open_
+  |> add (React.JSX.int "optimum" "optimum") optimum
+  |> add (React.JSX.string "pattern" "pattern") pattern
+  |> add (React.JSX.string "placeholder" "placeholder") placeholder
+  |> add (React.JSX.bool "playsInline" "playsInline") playsInline
+  |> add (React.JSX.string "poster" "poster") poster
+  |> add (React.JSX.string "preload" "preload") preload
+  |> add (React.JSX.string "radioGroup" "radioGroup") radioGroup (* Unsure if it exists? *)
+  |> add (React.JSX.bool "readonly" "readOnly") readOnly
+  |> add (React.JSX.string "rel" "rel") rel
+  |> add (React.JSX.bool "required" "required") required
+  |> add (React.JSX.bool "reversed" "reversed") reversed
+  |> add (React.JSX.int "rows" "rows") rows
+  |> add (React.JSX.int "rowspan" "rowSpan") rowSpan
+  |> add (React.JSX.string "sandbox" "sandbox") sandbox
+  |> add (React.JSX.string "scope" "scope") scope
+  |> add (React.JSX.bool "scoped" "scoped") scoped
+  |> add (React.JSX.string "scrolling" "scrolling") scrolling
+  |> add (React.JSX.bool "selected" "selected") selected
+  |> add (React.JSX.string "shape" "shape") shape
+  |> add (React.JSX.int "size" "size") size
+  |> add (React.JSX.string "sizes" "sizes") sizes
+  |> add (React.JSX.int "span" "span") span
+  |> add (React.JSX.string "src" "src") src
+  |> add (React.JSX.string "srcdoc" "srcDoc") srcDoc
+  |> add (React.JSX.string "srclang" "srcLang") srcLang
+  |> add (React.JSX.string "srcset" "srcSet") srcSet
+  |> add (React.JSX.int "start" "start") start
+  |> add (React.JSX.float "step" "step") step
+  |> add (React.JSX.string "summary" "summary") summary
+  |> add (React.JSX.string "target" "target") target
+  |> add (React.JSX.string "type" "type_") type_
+  |> add (React.JSX.string "useMap" "useMap") useMap
+  |> add (React.JSX.string "value" "value") value
+  |> add (React.JSX.string "width" "width") width
+  |> add (React.JSX.string "wrap" "wrap") wrap
   |> add (React.JSX.Event.clipboard "onCopy") onCopy
   |> add (React.JSX.Event.clipboard "onCut") onCut
   |> add (React.JSX.Event.clipboard "onPaste") onPaste
@@ -984,259 +986,259 @@ let domProps
   |> add (React.JSX.Event.animation "onAnimationEnd") onAnimationEnd
   |> add (React.JSX.Event.animation "onAnimationIteration") onAnimationIteration
   |> add (React.JSX.Event.transition "onTransitionEnd") onTransitionEnd
-  |> add (React.JSX.string "accent-height") accentHeight
-  |> add (React.JSX.string "accumulate") accumulate
-  |> add (React.JSX.string "additive") additive
-  |> add (React.JSX.string "alignment-baseline") alignmentBaseline
-  |> add (React.JSX.string "allowReorder") allowReorder (* Does it exist? *)
-  |> add (React.JSX.string "alphabetic") alphabetic
-  |> add (React.JSX.string "amplitude") amplitude
-  |> add (React.JSX.string "arabic-form") arabicForm
-  |> add (React.JSX.string "ascent") ascent
-  |> add (React.JSX.string "attributeName") attributeName
-  |> add (React.JSX.string "attributeType") attributeType
-  |> add (React.JSX.string "autoReverse") autoReverse (* Does it exist? *)
-  |> add (React.JSX.string "azimuth") azimuth
-  |> add (React.JSX.string "baseFrequency") baseFrequency
-  |> add (React.JSX.string "baseProfile") baseProfile
-  |> add (React.JSX.string "baselineShift") baselineShift
-  |> add (React.JSX.string "bbox") bbox
-  |> add (React.JSX.string "begin") begin_
-  |> add (React.JSX.string "bias") bias
-  |> add (React.JSX.string "by") by
-  |> add (React.JSX.string "calcMode") calcMode
-  |> add (React.JSX.string "capHeight") capHeight
-  |> add (React.JSX.string "clip") clip
-  |> add (React.JSX.string "clipPath") clipPath
-  |> add (React.JSX.string "clipPathUnits") clipPathUnits
-  |> add (React.JSX.string "clipRule") clipRule
-  |> add (React.JSX.string "colorInterpolation") colorInterpolation
-  |> add (React.JSX.string "colorInterpolationFilters") colorInterpolationFilters
-  |> add (React.JSX.string "colorProfile") colorProfile
-  |> add (React.JSX.string "colorRendering") colorRendering
-  |> add (React.JSX.string "contentScriptType") contentScriptType
-  |> add (React.JSX.string "contentStyleType") contentStyleType
-  |> add (React.JSX.string "cursor") cursor
-  |> add (React.JSX.string "cx") cx
-  |> add (React.JSX.string "cy") cy
-  |> add (React.JSX.string "d") d
-  |> add (React.JSX.string "decelerate") decelerate
-  |> add (React.JSX.string "descent") descent
-  |> add (React.JSX.string "diffuseConstant") diffuseConstant
-  |> add (React.JSX.string "direction") direction
-  |> add (React.JSX.string "display") display
-  |> add (React.JSX.string "divisor") divisor
-  |> add (React.JSX.string "dominantBaseline") dominantBaseline
-  |> add (React.JSX.string "dur") dur
-  |> add (React.JSX.string "dx") dx
-  |> add (React.JSX.string "dy") dy
-  |> add (React.JSX.string "edgeMode") edgeMode
-  |> add (React.JSX.string "elevation") elevation
-  |> add (React.JSX.string "enableBackground") enableBackground
-  |> add (React.JSX.string "end") end_
-  |> add (React.JSX.string "exponent") exponent
-  |> add (React.JSX.string "externalResourcesRequired") externalResourcesRequired
-  |> add (React.JSX.string "fill") fill
-  |> add (React.JSX.string "fillOpacity") fillOpacity
-  |> add (React.JSX.string "fillRule") fillRule
-  |> add (React.JSX.string "filter") filter
-  |> add (React.JSX.string "filterRes") filterRes
-  |> add (React.JSX.string "filterUnits") filterUnits
-  |> add (React.JSX.string "flood-color") floodColor
-  |> add (React.JSX.string "flood-opacity") floodOpacity
-  |> add (React.JSX.string "focusable") focusable
-  |> add (React.JSX.string "font-family") fontFamily
-  |> add (React.JSX.string "font-size") fontSize
-  |> add (React.JSX.string "font-size-adjust") fontSizeAdjust
-  |> add (React.JSX.string "font-stretch") fontStretch
-  |> add (React.JSX.string "font-style") fontStyle
-  |> add (React.JSX.string "font-variant") fontVariant
-  |> add (React.JSX.string "font-weight") fontWeight
-  |> add (React.JSX.string "fomat") fomat
-  |> add (React.JSX.string "from") from
-  |> add (React.JSX.string "fx") fx
-  |> add (React.JSX.string "fy") fy
-  |> add (React.JSX.string "g1") g1
-  |> add (React.JSX.string "g2") g2
-  |> add (React.JSX.string "glyph-name") glyphName
-  |> add (React.JSX.string "glyph-orientation-horizontal") glyphOrientationHorizontal
-  |> add (React.JSX.string "glyph-orientation-vertical") glyphOrientationVertical
-  |> add (React.JSX.string "glyphRef") glyphRef
-  |> add (React.JSX.string "gradientTransform") gradientTransform
-  |> add (React.JSX.string "gradientUnits") gradientUnits
-  |> add (React.JSX.string "hanging") hanging
-  |> add (React.JSX.string "horiz-adv-x") horizAdvX
-  |> add (React.JSX.string "horiz-origin-x") horizOriginX
-  (* |> add (React.JSX.string "horiz-origin-y") horizOriginY *) (* Should be added *)
-  |> add (React.JSX.string "ideographic") ideographic
-  |> add (React.JSX.string "image-rendering") imageRendering
-  |> add (React.JSX.string "in") in_
-  |> add (React.JSX.string "in2") in2
-  |> add (React.JSX.string "intercept") intercept
-  |> add (React.JSX.string "k") k
-  |> add (React.JSX.string "k1") k1
-  |> add (React.JSX.string "k2") k2
-  |> add (React.JSX.string "k3") k3
-  |> add (React.JSX.string "k4") k4
-  |> add (React.JSX.string "kernelMatrix") kernelMatrix
-  |> add (React.JSX.string "kernelUnitLength") kernelUnitLength
-  |> add (React.JSX.string "kerning") kerning
-  |> add (React.JSX.string "keyPoints") keyPoints
-  |> add (React.JSX.string "keySplines") keySplines
-  |> add (React.JSX.string "keyTimes") keyTimes
-  |> add (React.JSX.string "lengthAdjust") lengthAdjust
-  |> add (React.JSX.string "letterSpacing") letterSpacing
-  |> add (React.JSX.string "lightingColor") lightingColor
-  |> add (React.JSX.string "limitingConeAngle") limitingConeAngle
-  |> add (React.JSX.string "local") local
-  |> add (React.JSX.string "marker-end") markerEnd
-  |> add (React.JSX.string "marker-height") markerHeight
-  |> add (React.JSX.string "marker-mid") markerMid
-  |> add (React.JSX.string "marker-start") markerStart
-  |> add (React.JSX.string "marker-units") markerUnits
-  |> add (React.JSX.string "markerWidth") markerWidth
-  |> add (React.JSX.string "mask") mask
-  |> add (React.JSX.string "maskContentUnits") maskContentUnits
-  |> add (React.JSX.string "maskUnits") maskUnits
-  |> add (React.JSX.string "mathematical") mathematical
-  |> add (React.JSX.string "mode") mode
-  |> add (React.JSX.string "numOctaves") numOctaves
-  |> add (React.JSX.string "offset") offset
-  |> add (React.JSX.string "opacity") opacity
-  |> add (React.JSX.string "operator") operator
-  |> add (React.JSX.string "order") order
-  |> add (React.JSX.string "orient") orient
-  |> add (React.JSX.string "orientation") orientation
-  |> add (React.JSX.string "origin") origin
-  |> add (React.JSX.string "overflow") overflow
-  |> add (React.JSX.string "overflowX") overflowX
-  |> add (React.JSX.string "overflowY") overflowY
-  |> add (React.JSX.string "overline-position") overlinePosition
-  |> add (React.JSX.string "overline-thickness") overlineThickness
-  |> add (React.JSX.string "paint-order") paintOrder
-  |> add (React.JSX.string "panose1") panose1
-  |> add (React.JSX.string "pathLength") pathLength
-  |> add (React.JSX.string "patternContentUnits") patternContentUnits
-  |> add (React.JSX.string "patternTransform") patternTransform
-  |> add (React.JSX.string "patternUnits") patternUnits
-  |> add (React.JSX.string "pointerEvents") pointerEvents
-  |> add (React.JSX.string "points") points
-  |> add (React.JSX.string "pointsAtX") pointsAtX
-  |> add (React.JSX.string "pointsAtY") pointsAtY
-  |> add (React.JSX.string "pointsAtZ") pointsAtZ
-  |> add (React.JSX.string "preserveAlpha") preserveAlpha
-  |> add (React.JSX.string "preserveAspectRatio") preserveAspectRatio
-  |> add (React.JSX.string "primitiveUnits") primitiveUnits
-  |> add (React.JSX.string "r") r
-  |> add (React.JSX.string "radius") radius
-  |> add (React.JSX.string "refX") refX
-  |> add (React.JSX.string "refY") refY
-  |> add (React.JSX.string "renderingIntent") renderingIntent (* Does it exist? *)
-  |> add (React.JSX.string "repeatCount") repeatCount
-  |> add (React.JSX.string "repeatDur") repeatDur
-  |> add (React.JSX.string "requiredExtensions") requiredExtensions (* Does it exists? *)
-  |> add (React.JSX.string "requiredFeatures") requiredFeatures
-  |> add (React.JSX.string "restart") restart
-  |> add (React.JSX.string "result") result
-  |> add (React.JSX.string "rotate") rotate
-  |> add (React.JSX.string "rx") rx
-  |> add (React.JSX.string "ry") ry
-  |> add (React.JSX.string "scale") scale
-  |> add (React.JSX.string "seed") seed
-  |> add (React.JSX.string "shape-rendering") shapeRendering
-  |> add (React.JSX.string "slope") slope
-  |> add (React.JSX.string "spacing") spacing
-  |> add (React.JSX.string "specularConstant") specularConstant
-  |> add (React.JSX.string "specularExponent") specularExponent
-  |> add (React.JSX.string "speed") speed
-  |> add (React.JSX.string "spreadMethod") spreadMethod
-  |> add (React.JSX.string "startOffset") startOffset
-  |> add (React.JSX.string "stdDeviation") stdDeviation
-  |> add (React.JSX.string "stemh") stemh
-  |> add (React.JSX.string "stemv") stemv
-  |> add (React.JSX.string "stitchTiles") stitchTiles
-  |> add (React.JSX.string "stopColor") stopColor
-  |> add (React.JSX.string "stopOpacity") stopOpacity
-  |> add (React.JSX.string "strikethrough-position") strikethroughPosition
-  |> add (React.JSX.string "strikethrough-thickness") strikethroughThickness
-  |> add (React.JSX.string "stroke") stroke
-  |> add (React.JSX.string "stroke-dasharray") strokeDasharray
-  |> add (React.JSX.string "stroke-dashoffset") strokeDashoffset
-  |> add (React.JSX.string "stroke-linecap") strokeLinecap
-  |> add (React.JSX.string "stroke-linejoin") strokeLinejoin
-  |> add (React.JSX.string "stroke-miterlimit") strokeMiterlimit
-  |> add (React.JSX.string "stroke-opacity") strokeOpacity
-  |> add (React.JSX.string "stroke-width") strokeWidth
-  |> add (React.JSX.string "surfaceScale") surfaceScale
-  |> add (React.JSX.string "systemLanguage") systemLanguage
-  |> add (React.JSX.string "tableValues") tableValues
-  |> add (React.JSX.string "targetX") targetX
-  |> add (React.JSX.string "targetY") targetY
-  |> add (React.JSX.string "text-anchor") textAnchor
-  |> add (React.JSX.string "text-decoration") textDecoration
-  |> add (React.JSX.string "textLength") textLength
-  |> add (React.JSX.string "text-rendering") textRendering
-  |> add (React.JSX.string "to") to_
-  |> add (React.JSX.string "transform") transform
-  |> add (React.JSX.string "u1") u1
-  |> add (React.JSX.string "u2") u2
-  |> add (React.JSX.string "underline-position") underlinePosition
-  |> add (React.JSX.string "underline-thickness") underlineThickness
-  |> add (React.JSX.string "unicode") unicode
-  |> add (React.JSX.string "unicode-bidi") unicodeBidi
-  |> add (React.JSX.string "unicode-range") unicodeRange
-  |> add (React.JSX.string "units-per-em") unitsPerEm
-  |> add (React.JSX.string "v-alphabetic") vAlphabetic
-  |> add (React.JSX.string "v-hanging") vHanging
-  |> add (React.JSX.string "v-ideographic") vIdeographic
-  |> add (React.JSX.string "vMathematical") vMathematical (* Does it exists? *)
-  |> add (React.JSX.string "values") values
-  |> add (React.JSX.string "vector-effect") vectorEffect
-  |> add (React.JSX.string "version") version
-  |> add (React.JSX.string "vert-adv-x") vertAdvX
-  |> add (React.JSX.string "vert-adv-y") vertAdvY
-  |> add (React.JSX.string "vert-origin-x") vertOriginX
-  |> add (React.JSX.string "vert-origin-y") vertOriginY
-  |> add (React.JSX.string "viewBox") viewBox
-  |> add (React.JSX.string "viewTarget") viewTarget
-  |> add (React.JSX.string "visibility") visibility
-  |> add (React.JSX.string "widths") widths
-  |> add (React.JSX.string "word-spacing") wordSpacing
-  |> add (React.JSX.string "writing-mode") writingMode
-  |> add (React.JSX.string "x") x
-  |> add (React.JSX.string "x1") x1
-  |> add (React.JSX.string "x2") x2
-  |> add (React.JSX.string "xChannelSelector") xChannelSelector
-  |> add (React.JSX.string "x-height") xHeight
-  |> add (React.JSX.string "xlink:arcrole") xlinkActuate
-  |> add (React.JSX.string "xlinkArcrole") xlinkArcrole
-  |> add (React.JSX.string "xlink:href") xlinkHref
-  |> add (React.JSX.string "xlink:role") xlinkRole
-  |> add (React.JSX.string "xlink:show") xlinkShow
-  |> add (React.JSX.string "xlink:title") xlinkTitle
-  |> add (React.JSX.string "xlink:type") xlinkType
-  |> add (React.JSX.string "xmlns") xmlns
-  |> add (React.JSX.string "xmlnsXlink") xmlnsXlink
-  |> add (React.JSX.string "xml:base") xmlBase
-  |> add (React.JSX.string "xml:lang") xmlLang
-  |> add (React.JSX.string "xml:space") xmlSpace
-  |> add (React.JSX.string "y") y
-  |> add (React.JSX.string "y1") y1
-  |> add (React.JSX.string "y2") y2
-  |> add (React.JSX.string "yChannelSelector") yChannelSelector
-  |> add (React.JSX.string "z") z
-  |> add (React.JSX.string "zoomAndPan") zoomAndPan
-  |> add (React.JSX.string "about") about
-  |> add (React.JSX.string "datatype") datatype
-  |> add (React.JSX.string "inlist") inlist
-  |> add (React.JSX.string "prefix") prefix
-  |> add (React.JSX.string "property") property
-  |> add (React.JSX.string "resource") resource
-  |> add (React.JSX.string "typeof") typeof
-  |> add (React.JSX.string "vocab") vocab
+  |> add (React.JSX.string "accent-height" "accentHeight") accentHeight
+  |> add (React.JSX.string "accumulate" "accumulate") accumulate
+  |> add (React.JSX.string "additive" "additive") additive
+  |> add (React.JSX.string "alignment-baseline" "alignmentBaseline") alignmentBaseline
+  |> add (React.JSX.string "allowReorder" "allowReorder") allowReorder (* Does it exist? *)
+  |> add (React.JSX.string "alphabetic" "alphabetic") alphabetic
+  |> add (React.JSX.string "amplitude" "amplitude") amplitude
+  |> add (React.JSX.string "arabic-form" "arabicForm") arabicForm
+  |> add (React.JSX.string "ascent" "ascent") ascent
+  |> add (React.JSX.string "attributeName" "attributeName") attributeName
+  |> add (React.JSX.string "attributeType" "attributeType") attributeType
+  |> add (React.JSX.string "autoReverse" "autoReverse") autoReverse (* Does it exist? *)
+  |> add (React.JSX.string "azimuth" "azimuth") azimuth
+  |> add (React.JSX.string "baseFrequency" "baseFrequency") baseFrequency
+  |> add (React.JSX.string "baseProfile" "baseProfile") baseProfile
+  |> add (React.JSX.string "baselineShift" "baselineShift") baselineShift
+  |> add (React.JSX.string "bbox" "bbox") bbox
+  |> add (React.JSX.string "begin" "begin_") begin_
+  |> add (React.JSX.string "bias" "bias") bias
+  |> add (React.JSX.string "by" "by") by
+  |> add (React.JSX.string "calcMode" "calcMode") calcMode
+  |> add (React.JSX.string "capHeight" "capHeight") capHeight
+  |> add (React.JSX.string "clip" "clip") clip
+  |> add (React.JSX.string "clipPath" "clipPath") clipPath
+  |> add (React.JSX.string "clipPathUnits" "clipPathUnits") clipPathUnits
+  |> add (React.JSX.string "clipRule" "clipRule") clipRule
+  |> add (React.JSX.string "colorInterpolation" "colorInterpolation") colorInterpolation
+  |> add (React.JSX.string "colorInterpolationFilters" "colorInterpolationFilters") colorInterpolationFilters
+  |> add (React.JSX.string "colorProfile" "colorProfile") colorProfile
+  |> add (React.JSX.string "colorRendering" "colorRendering") colorRendering
+  |> add (React.JSX.string "contentScriptType" "contentScriptType") contentScriptType
+  |> add (React.JSX.string "contentStyleType" "contentStyleType") contentStyleType
+  |> add (React.JSX.string "cursor" "cursor") cursor
+  |> add (React.JSX.string "cx" "cx") cx
+  |> add (React.JSX.string "cy" "cy") cy
+  |> add (React.JSX.string "d" "d") d
+  |> add (React.JSX.string "decelerate" "decelerate") decelerate
+  |> add (React.JSX.string "descent" "descent") descent
+  |> add (React.JSX.string "diffuseConstant" "diffuseConstant") diffuseConstant
+  |> add (React.JSX.string "direction" "direction") direction
+  |> add (React.JSX.string "display" "display") display
+  |> add (React.JSX.string "divisor" "divisor") divisor
+  |> add (React.JSX.string "dominantBaseline" "dominantBaseline") dominantBaseline
+  |> add (React.JSX.string "dur" "dur") dur
+  |> add (React.JSX.string "dx" "dx") dx
+  |> add (React.JSX.string "dy" "dy") dy
+  |> add (React.JSX.string "edgeMode" "edgeMode") edgeMode
+  |> add (React.JSX.string "elevation" "elevation") elevation
+  |> add (React.JSX.string "enableBackground" "enableBackground") enableBackground
+  |> add (React.JSX.string "end" "end_") end_
+  |> add (React.JSX.string "exponent" "exponent") exponent
+  |> add (React.JSX.string "externalResourcesRequired" "externalResourcesRequired") externalResourcesRequired
+  |> add (React.JSX.string "fill" "fill") fill
+  |> add (React.JSX.string "fillOpacity" "fillOpacity") fillOpacity
+  |> add (React.JSX.string "fillRule" "fillRule") fillRule
+  |> add (React.JSX.string "filter" "filter") filter
+  |> add (React.JSX.string "filterRes" "filterRes") filterRes
+  |> add (React.JSX.string "filterUnits" "filterUnits") filterUnits
+  |> add (React.JSX.string "flood-color" "floodColor") floodColor
+  |> add (React.JSX.string "flood-opacity" "floodOpacity") floodOpacity
+  |> add (React.JSX.string "focusable" "focusable") focusable
+  |> add (React.JSX.string "font-family" "fontFamily") fontFamily
+  |> add (React.JSX.string "font-size" "fontSize") fontSize
+  |> add (React.JSX.string "font-size-adjust" "fontSizeAdjust") fontSizeAdjust
+  |> add (React.JSX.string "font-stretch" "fontStretch") fontStretch
+  |> add (React.JSX.string "font-style" "fontStyle") fontStyle
+  |> add (React.JSX.string "font-variant" "fontVariant") fontVariant
+  |> add (React.JSX.string "font-weight" "fontWeight") fontWeight
+  |> add (React.JSX.string "fomat" "fomat") fomat
+  |> add (React.JSX.string "from" "from") from
+  |> add (React.JSX.string "fx" "fx") fx
+  |> add (React.JSX.string "fy" "fy") fy
+  |> add (React.JSX.string "g1" "g1") g1
+  |> add (React.JSX.string "g2" "g2") g2
+  |> add (React.JSX.string "glyph-name" "glyphName") glyphName
+  |> add (React.JSX.string "glyph-orientation-horizontal" "glyphOrientationHorizontal") glyphOrientationHorizontal
+  |> add (React.JSX.string "glyph-orientation-vertical" "glyphOrientationVertical") glyphOrientationVertical
+  |> add (React.JSX.string "glyphRef" "glyphRef") glyphRef
+  |> add (React.JSX.string "gradientTransform" "gradientTransform") gradientTransform
+  |> add (React.JSX.string "gradientUnits" "gradientUnits") gradientUnits
+  |> add (React.JSX.string "hanging" "hanging") hanging
+  |> add (React.JSX.string "horiz-adv-x" "horizAdvX") horizAdvX
+  |> add (React.JSX.string "horiz-origin-x" "horizOriginX") horizOriginX
+  (* |> add (React.JSX.string "horiz-origin-y" "horizOriginY") horizOriginY *) (* Should be added *)
+  |> add (React.JSX.string "ideographic" "ideographic") ideographic
+  |> add (React.JSX.string "image-rendering" "imageRendering") imageRendering
+  |> add (React.JSX.string "in" "in_") in_
+  |> add (React.JSX.string "in2" "in2") in2
+  |> add (React.JSX.string "intercept" "intercept") intercept
+  |> add (React.JSX.string "k" "k") k
+  |> add (React.JSX.string "k1" "k1") k1
+  |> add (React.JSX.string "k2" "k2") k2
+  |> add (React.JSX.string "k3" "k3") k3
+  |> add (React.JSX.string "k4" "k4") k4
+  |> add (React.JSX.string "kernelMatrix" "kernelMatrix") kernelMatrix
+  |> add (React.JSX.string "kernelUnitLength" "kernelUnitLength") kernelUnitLength
+  |> add (React.JSX.string "kerning" "kerning") kerning
+  |> add (React.JSX.string "keyPoints" "keyPoints") keyPoints
+  |> add (React.JSX.string "keySplines" "keySplines") keySplines
+  |> add (React.JSX.string "keyTimes" "keyTimes") keyTimes
+  |> add (React.JSX.string "lengthAdjust" "lengthAdjust") lengthAdjust
+  |> add (React.JSX.string "letterSpacing" "letterSpacing") letterSpacing
+  |> add (React.JSX.string "lightingColor" "lightingColor") lightingColor
+  |> add (React.JSX.string "limitingConeAngle" "limitingConeAngle") limitingConeAngle
+  |> add (React.JSX.string "local" "local") local
+  |> add (React.JSX.string "marker-end" "markerEnd") markerEnd
+  |> add (React.JSX.string "marker-height" "markerHeight") markerHeight
+  |> add (React.JSX.string "marker-mid" "markerMid") markerMid
+  |> add (React.JSX.string "marker-start" "markerStart") markerStart
+  |> add (React.JSX.string "marker-units" "markerUnits") markerUnits
+  |> add (React.JSX.string "markerWidth" "markerWidth") markerWidth
+  |> add (React.JSX.string "mask" "mask") mask
+  |> add (React.JSX.string "maskContentUnits" "maskContentUnits") maskContentUnits
+  |> add (React.JSX.string "maskUnits" "maskUnits") maskUnits
+  |> add (React.JSX.string "mathematical" "mathematical") mathematical
+  |> add (React.JSX.string "mode" "mode") mode
+  |> add (React.JSX.string "numOctaves" "numOctaves") numOctaves
+  |> add (React.JSX.string "offset" "offset") offset
+  |> add (React.JSX.string "opacity" "opacity") opacity
+  |> add (React.JSX.string "operator" "operator") operator
+  |> add (React.JSX.string "order" "order") order
+  |> add (React.JSX.string "orient" "orient") orient
+  |> add (React.JSX.string "orientation" "orientation") orientation
+  |> add (React.JSX.string "origin" "origin") origin
+  |> add (React.JSX.string "overflow" "overflow") overflow
+  |> add (React.JSX.string "overflowX" "overflowX") overflowX
+  |> add (React.JSX.string "overflowY" "overflowY") overflowY
+  |> add (React.JSX.string "overline-position" "overlinePosition") overlinePosition
+  |> add (React.JSX.string "overline-thickness" "overlineThickness") overlineThickness
+  |> add (React.JSX.string "paint-order" "paintOrder") paintOrder
+  |> add (React.JSX.string "panose1" "panose1") panose1
+  |> add (React.JSX.string "pathLength" "pathLength") pathLength
+  |> add (React.JSX.string "patternContentUnits" "patternContentUnits") patternContentUnits
+  |> add (React.JSX.string "patternTransform" "patternTransform") patternTransform
+  |> add (React.JSX.string "patternUnits" "patternUnits") patternUnits
+  |> add (React.JSX.string "pointerEvents" "pointerEvents") pointerEvents
+  |> add (React.JSX.string "points" "points") points
+  |> add (React.JSX.string "pointsAtX" "pointsAtX") pointsAtX
+  |> add (React.JSX.string "pointsAtY" "pointsAtY") pointsAtY
+  |> add (React.JSX.string "pointsAtZ" "pointsAtZ") pointsAtZ
+  |> add (React.JSX.string "preserveAlpha" "preserveAlpha") preserveAlpha
+  |> add (React.JSX.string "preserveAspectRatio" "preserveAspectRatio") preserveAspectRatio
+  |> add (React.JSX.string "primitiveUnits" "primitiveUnits") primitiveUnits
+  |> add (React.JSX.string "r" "r") r
+  |> add (React.JSX.string "radius" "radius") radius
+  |> add (React.JSX.string "refX" "refX") refX
+  |> add (React.JSX.string "refY" "refY") refY
+  |> add (React.JSX.string "renderingIntent" "renderingIntent") renderingIntent (* Does it exist? *)
+  |> add (React.JSX.string "repeatCount" "repeatCount") repeatCount
+  |> add (React.JSX.string "repeatDur" "repeatDur") repeatDur
+  |> add (React.JSX.string "requiredExtensions" "requiredExtensions") requiredExtensions (* Does it exists? *)
+  |> add (React.JSX.string "requiredFeatures" "requiredFeatures") requiredFeatures
+  |> add (React.JSX.string "restart" "restart") restart
+  |> add (React.JSX.string "result" "result") result
+  |> add (React.JSX.string "rotate" "rotate") rotate
+  |> add (React.JSX.string "rx" "rx") rx
+  |> add (React.JSX.string "ry" "ry") ry
+  |> add (React.JSX.string "scale" "scale") scale
+  |> add (React.JSX.string "seed" "seed") seed
+  |> add (React.JSX.string "shape-rendering" "shapeRendering") shapeRendering
+  |> add (React.JSX.string "slope" "slope") slope
+  |> add (React.JSX.string "spacing" "spacing") spacing
+  |> add (React.JSX.string "specularConstant" "specularConstant") specularConstant
+  |> add (React.JSX.string "specularExponent" "specularExponent") specularExponent
+  |> add (React.JSX.string "speed" "speed") speed
+  |> add (React.JSX.string "spreadMethod" "spreadMethod") spreadMethod
+  |> add (React.JSX.string "startOffset" "startOffset") startOffset
+  |> add (React.JSX.string "stdDeviation" "stdDeviation") stdDeviation
+  |> add (React.JSX.string "stemh" "stemh") stemh
+  |> add (React.JSX.string "stemv" "stemv") stemv
+  |> add (React.JSX.string "stitchTiles" "stitchTiles") stitchTiles
+  |> add (React.JSX.string "stopColor" "stopColor") stopColor
+  |> add (React.JSX.string "stopOpacity" "stopOpacity") stopOpacity
+  |> add (React.JSX.string "strikethrough-position" "strikethroughPosition") strikethroughPosition
+  |> add (React.JSX.string "strikethrough-thickness" "strikethroughThickness") strikethroughThickness
+  |> add (React.JSX.string "stroke" "stroke") stroke
+  |> add (React.JSX.string "stroke-dasharray" "strokeDasharray") strokeDasharray
+  |> add (React.JSX.string "stroke-dashoffset" "strokeDashoffset") strokeDashoffset
+  |> add (React.JSX.string "stroke-linecap" "strokeLinecap") strokeLinecap
+  |> add (React.JSX.string "stroke-linejoin" "strokeLinejoin") strokeLinejoin
+  |> add (React.JSX.string "stroke-miterlimit" "strokeMiterlimit") strokeMiterlimit
+  |> add (React.JSX.string "stroke-opacity" "strokeOpacity") strokeOpacity
+  |> add (React.JSX.string "stroke-width" "strokeWidth") strokeWidth
+  |> add (React.JSX.string "surfaceScale" "surfaceScale") surfaceScale
+  |> add (React.JSX.string "systemLanguage" "systemLanguage") systemLanguage
+  |> add (React.JSX.string "tableValues" "tableValues") tableValues
+  |> add (React.JSX.string "targetX" "targetX") targetX
+  |> add (React.JSX.string "targetY" "targetY") targetY
+  |> add (React.JSX.string "text-anchor" "textAnchor") textAnchor
+  |> add (React.JSX.string "text-decoration" "textDecoration") textDecoration
+  |> add (React.JSX.string "textLength" "textLength") textLength
+  |> add (React.JSX.string "text-rendering" "textRendering") textRendering
+  |> add (React.JSX.string "to" "to_") to_
+  |> add (React.JSX.string "transform" "transform") transform
+  |> add (React.JSX.string "u1" "u1") u1
+  |> add (React.JSX.string "u2" "u2") u2
+  |> add (React.JSX.string "underline-position" "underlinePosition") underlinePosition
+  |> add (React.JSX.string "underline-thickness" "underlineThickness") underlineThickness
+  |> add (React.JSX.string "unicode" "unicode") unicode
+  |> add (React.JSX.string "unicode-bidi" "unicodeBidi") unicodeBidi
+  |> add (React.JSX.string "unicode-range" "unicodeRange") unicodeRange
+  |> add (React.JSX.string "units-per-em" "unitsPerEm") unitsPerEm
+  |> add (React.JSX.string "v-alphabetic" "vAlphabetic") vAlphabetic
+  |> add (React.JSX.string "v-hanging" "vHanging") vHanging
+  |> add (React.JSX.string "v-ideographic" "vIdeographic") vIdeographic
+  |> add (React.JSX.string "vMathematical" "vMathematical") vMathematical (* Does it exists? *)
+  |> add (React.JSX.string "values" "values") values
+  |> add (React.JSX.string "vector-effect" "vectorEffect") vectorEffect
+  |> add (React.JSX.string "version" "version") version
+  |> add (React.JSX.string "vert-adv-x" "vertAdvX") vertAdvX
+  |> add (React.JSX.string "vert-adv-y" "vertAdvY") vertAdvY
+  |> add (React.JSX.string "vert-origin-x" "vertOriginX") vertOriginX
+  |> add (React.JSX.string "vert-origin-y" "vertOriginY") vertOriginY
+  |> add (React.JSX.string "viewBox" "viewBox") viewBox
+  |> add (React.JSX.string "viewTarget" "viewTarget") viewTarget
+  |> add (React.JSX.string "visibility" "visibility") visibility
+  |> add (React.JSX.string "widths" "widths") widths
+  |> add (React.JSX.string "word-spacing" "wordSpacing") wordSpacing
+  |> add (React.JSX.string "writing-mode" "writingMode") writingMode
+  |> add (React.JSX.string "x" "x") x
+  |> add (React.JSX.string "x1" "x1") x1
+  |> add (React.JSX.string "x2" "x2") x2
+  |> add (React.JSX.string "xChannelSelector" "xChannelSelector") xChannelSelector
+  |> add (React.JSX.string "x-height" "xHeight") xHeight
+  |> add (React.JSX.string "xlink:arcrole" "xlinkActuate") xlinkActuate
+  |> add (React.JSX.string "xlinkArcrole" "xlinkArcrole") xlinkArcrole
+  |> add (React.JSX.string "xlink:href" "xlinkHref") xlinkHref
+  |> add (React.JSX.string "xlink:role" "xlinkRole") xlinkRole
+  |> add (React.JSX.string "xlink:show" "xlinkShow") xlinkShow
+  |> add (React.JSX.string "xlink:title" "xlinkTitle") xlinkTitle
+  |> add (React.JSX.string "xlink:type" "xlinkType") xlinkType
+  |> add (React.JSX.string "xmlns" "xmlns") xmlns
+  |> add (React.JSX.string "xmlnsXlink" "xmlnsXlink") xmlnsXlink
+  |> add (React.JSX.string "xml:base" "xmlBase") xmlBase
+  |> add (React.JSX.string "xml:lang" "xmlLang") xmlLang
+  |> add (React.JSX.string "xml:space" "xmlSpace") xmlSpace
+  |> add (React.JSX.string "y" "y") y
+  |> add (React.JSX.string "y1" "y1") y1
+  |> add (React.JSX.string "y2" "y2") y2
+  |> add (React.JSX.string "yChannelSelector" "yChannelSelector") yChannelSelector
+  |> add (React.JSX.string "z" "z") z
+  |> add (React.JSX.string "zoomAndPan" "zoomAndPan") zoomAndPan
+  |> add (React.JSX.string "about" "about") about
+  |> add (React.JSX.string "datatype" "datatype") datatype
+  |> add (React.JSX.string "inlist" "inlist") inlist
+  |> add (React.JSX.string "prefix" "prefix") prefix
+  |> add (React.JSX.string "property" "property") property
+  |> add (React.JSX.string "resource" "resource") resource
+  |> add (React.JSX.string "typeof" "typeof") typeof
+  |> add (React.JSX.string "vocab" "vocab") vocab
   |> add (React.JSX.dangerouslyInnerHtml) dangerouslySetInnerHTML
-  |> add (React.JSX.bool "suppressContentEditableWarning") suppressContentEditableWarning
-  |> add (React.JSX.bool "suppressHydrationWarning") suppressHydrationWarning
+  |> add (React.JSX.bool "suppressContentEditableWarning" "suppressContentEditableWarning") suppressContentEditableWarning
+  |> add (React.JSX.bool "suppressHydrationWarning" "suppressHydrationWarning") suppressHydrationWarning
 
 module Ref = React.Ref
 
diff --git a/packages/reactDom/test/test_renderToStaticMarkup.ml b/packages/reactDom/test/test_renderToStaticMarkup.ml
index 130d90ef8..ddbab7175 100644
--- a/packages/reactDom/test/test_renderToStaticMarkup.ml
+++ b/packages/reactDom/test/test_renderToStaticMarkup.ml
@@ -12,15 +12,17 @@ let html_doctype () =
     "<!DOCTYPE html><html></html>"
 
 let empty_string_attribute () =
-  let div = React.createElement "div" [ React.JSX.String ("class", "") ] [] in
+  let div =
+    React.createElement "div" [ React.JSX.String ("class", "className", "") ] []
+  in
   assert_string (ReactDOM.renderToStaticMarkup div) "<div class=\"\"></div>"
 
 let string_attributes () =
   let a =
     React.createElement "a"
       [
-        React.JSX.String ("href", "google.html");
-        React.JSX.String ("target", "_blank");
+        React.JSX.String ("href", "href", "google.html");
+        React.JSX.String ("target", "target", "_blank");
       ]
       []
   in
@@ -32,10 +34,10 @@ let bool_attributes () =
   let a =
     React.createElement "input"
       [
-        React.JSX.String ("type", "checkbox");
-        React.JSX.String ("name", "cheese");
-        React.JSX.Bool ("checked", true);
-        React.JSX.Bool ("disabled", false);
+        React.JSX.String ("type", "type", "checkbox");
+        React.JSX.String ("name", "name", "cheese");
+        React.JSX.Bool ("checked", "checked", true);
+        React.JSX.Bool ("disabled", "disabled", false);
       ]
       []
   in
@@ -45,7 +47,9 @@ let bool_attributes () =
 
 let truthy_attributes () =
   let component =
-    React.createElement "input" [ React.JSX.String ("aria-hidden", "true") ] []
+    React.createElement "input"
+      [ React.JSX.String ("aria-hidden", "ariaHidden", "true") ]
+      []
   in
   assert_string
     (ReactDOM.renderToStaticMarkup component)
@@ -68,8 +72,11 @@ let ignored_attributes_on_jsx () =
   let div =
     React.createElement "div"
       [
-        React.JSX.String ("key", "uniqueKeyId");
-        React.JSX.Bool ("suppressContentEditableWarning", true);
+        React.JSX.String ("key", "key", "uniqueKeyId");
+        React.JSX.Bool
+          ( "suppressContentEditableWarning",
+            "suppressContentEditableWarning",
+            true );
       ]
       []
   in
@@ -117,8 +124,8 @@ let encode_attributes () =
   let component =
     React.createElement "div"
       [
-        React.JSX.String ("about", "\' <");
-        React.JSX.String ("data-user-path", "what/the/path");
+        React.JSX.String ("about", "about", "\' <");
+        React.JSX.String ("data-user-path", "data-user-path", "what/the/path");
       ]
       [ React.string "& \"" ]
   in
@@ -131,7 +138,7 @@ let dangerouslySetInnerHtml () =
   let component =
     React.createElement "script"
       [
-        React.JSX.String ("type", "application/javascript");
+        React.JSX.String ("type", "type", "application/javascript");
         React.JSX.DangerouslyInnerHtml "console.log(\"Hi!\")";
       ]
       []
@@ -205,7 +212,7 @@ let make ~name () =
   let onClick (event : React.Event.Mouse.t) : unit = ignore event in
   React.createElement "button"
     [
-      React.JSX.String ("name", (name : string));
+      React.JSX.String ("name", "name", (name : string));
       React.JSX.Event
         ("onClick", React.JSX.Mouse (onClick : React.Event.Mouse.t -> unit));
     ]
@@ -218,14 +225,19 @@ let event () =
 
 let className () =
   let div =
-    React.createElement "div" [ React.JSX.String ("class", "lol") ] []
+    React.createElement "div"
+      [ React.JSX.String ("class", "className", "lol") ]
+      []
   in
   assert_string (ReactDOM.renderToStaticMarkup div) "<div class=\"lol\"></div>"
 
 let className_2 () =
   let component =
     React.createElement "div"
-      [ React.JSX.String ("class", "flex xs:justify-center overflow-hidden") ]
+      [
+        React.JSX.String
+          ("class", "className", "flex xs:justify-center overflow-hidden");
+      ]
       []
   in
   assert_string
@@ -257,6 +269,7 @@ let render_svg () =
       [
         React.JSX.String
           ( "d",
+            "d",
             "M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 \
              3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 \
              12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 \
@@ -268,10 +281,10 @@ let render_svg () =
   let svg =
     React.createElement "svg"
       [
-        React.JSX.String ("xmlns", "http://www.w3.org/2000/svg");
-        React.JSX.String ("viewBox", "0 0 24 24");
-        React.JSX.String ("width", "24px");
-        React.JSX.String ("height", "24px");
+        React.JSX.String ("xmlns", "xmlns", "http://www.w3.org/2000/svg");
+        React.JSX.String ("viewBox", "viewBox", "0 0 24 24");
+        React.JSX.String ("width", "width", "24px");
+        React.JSX.String ("height", "height", "24px");
       ]
       [ path ]
   in
diff --git a/packages/server-reason-react-ppx/cram/component.t/run.t b/packages/server-reason-react-ppx/cram/component.t/run.t
index 4b9d2f0b8..f631e4a55 100644
--- a/packages/server-reason-react-ppx/cram/component.t/run.t
+++ b/packages/server-reason-react-ppx/cram/component.t/run.t
@@ -18,7 +18,9 @@ We need to output ML syntax here, otherwise refmt could not parse it.
             (Stdlib.List.filter_map Fun.id
                [
                  Some (React.JSX.Ref (buttonRef : React.domRef));
-                 Some (React.JSX.String ("class", ("FancyButton" : string)));
+                 Some
+                   (React.JSX.String
+                      ("class", "className", ("FancyButton" : string)));
                ])
             [ children ])
   end
@@ -31,12 +33,13 @@ We need to output ML syntax here, otherwise refmt could not parse it.
           React.createElement "button"
             (Stdlib.List.filter_map Fun.id
                [
-                 Some (React.JSX.String ("name", (name : string)));
+                 Some (React.JSX.String ("name", "name", (name : string)));
                  Some
                    (React.JSX.Event
                       ( "onClick",
                         React.JSX.Mouse (onClick : React.Event.Mouse.t -> unit) ));
-                 Some (React.JSX.Bool ("disabled", (isDisabled : bool)));
+                 Some
+                   (React.JSX.Bool ("disabled", "disabled", (isDisabled : bool)));
                ])
             [])
   end
@@ -67,14 +70,14 @@ We need to output ML syntax here, otherwise refmt could not parse it.
                 [
                   React.createElement "div"
                     (Stdlib.List.filter_map Fun.id
-                       [ Some (React.JSX.String ("id", ("root" : string))) ])
+                       [ Some (React.JSX.String ("id", "id", ("root" : string))) ])
                     [ children ];
                   React.createElement "script"
                     (Stdlib.List.filter_map Fun.id
                        [
                          Some
                            (React.JSX.String
-                              ("src", ("/static/client.js" : string)));
+                              ("src", "src", ("/static/client.js" : string)));
                        ])
                     [];
                 ];
@@ -90,7 +93,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
                [
                  Some
                    (React.JSX.String
-                      ("aria-hidden", string_of_bool ("true" : bool)));
+                      ("aria-hidden", "ariaHidden", string_of_bool ("true" : bool)));
                ])
             [ children ])
   end
@@ -101,7 +104,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
         (fun () ->
           React.createElement "form"
             (Stdlib.List.filter_map Fun.id
-               [ Some (React.JSX.String ("method", ("GET" : string))) ])
+               [ Some (React.JSX.String ("method", "method_", ("GET" : string))) ])
             [ children ])
   end
   
@@ -113,7 +116,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
         (fun () ->
           React.createElement "form"
             (Stdlib.List.filter_map Fun.id
-               [ Some (React.JSX.String ("method", ("GET" : string))) ])
+               [ Some (React.JSX.String ("method", "method_", ("GET" : string))) ])
             [ children ])
   end
   
diff --git a/packages/server-reason-react-ppx/cram/lower.t/run.t b/packages/server-reason-react-ppx/cram/lower.t/run.t
index 5c4f07df2..0acd53847 100644
--- a/packages/server-reason-react-ppx/cram/lower.t/run.t
+++ b/packages/server-reason-react-ppx/cram/lower.t/run.t
@@ -5,7 +5,12 @@
       "div",
       Stdlib.List.filter_map(
         Fun.id,
-        [Some([@implicit_arity] React.JSX.String("class", "": string))],
+        [
+          Some(
+            [@implicit_arity]
+            React.JSX.String("class", "className", "": string),
+          ),
+        ],
       ),
       [],
     );
@@ -45,7 +50,8 @@
           | None => None
           | Some(v) =>
             Some(
-              [@implicit_arity] React.JSX.String("tabindex", string_of_int(v)),
+              [@implicit_arity]
+              React.JSX.String("tabindex", "tabIndex", string_of_int(v)),
             )
           },
         ],
@@ -60,11 +66,11 @@
         [
           Some(
             [@implicit_arity]
-            React.JSX.String("tabindex", string_of_int(1: int)),
+            React.JSX.String("tabindex", "tabIndex", string_of_int(1: int)),
           ),
           Some(
             [@implicit_arity]
-            React.JSX.String("href", "https://example.com": string),
+            React.JSX.String("href", "href", "https://example.com": string),
           ),
         ],
       ),
@@ -87,7 +93,7 @@
         [
           Some(
             [@implicit_arity]
-            React.JSX.String("class", "flex-container": string),
+            React.JSX.String("class", "className", "flex-container": string),
           ),
         ],
       ),
@@ -98,7 +104,8 @@
             Fun.id,
             [
               Some(
-                [@implicit_arity] React.JSX.String("class", "sidebar": string),
+                [@implicit_arity]
+                React.JSX.String("class", "className", "sidebar": string),
               ),
             ],
           ),
@@ -110,7 +117,7 @@
                 [
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("class", "title": string),
+                    React.JSX.String("class", "className", "title": string),
                   ),
                 ],
               ),
@@ -122,7 +129,8 @@
                 Fun.id,
                 [
                   Some(
-                    [@implicit_arity] React.JSX.String("class", "menu": string),
+                    [@implicit_arity]
+                    React.JSX.String("class", "className", "menu": string),
                   ),
                 ],
               ),
@@ -140,7 +148,7 @@
                              [
                                Some(
                                  [@implicit_arity]
-                                 React.JSX.String("key", e.path: string),
+                                 React.JSX.String("key", "key", e.path: string),
                                ),
                              ],
                            ),
@@ -152,7 +160,11 @@
                                  [
                                    Some(
                                      [@implicit_arity]
-                                     React.JSX.String("href", e.path: string),
+                                     React.JSX.String(
+                                       "href",
+                                       "href",
+                                       e.path: string,
+                                     ),
                                    ),
                                    Some(
                                      [@implicit_arity]
@@ -192,7 +204,8 @@
         [
           Some(React.JSX.Ref(ref: React.domRef)),
           Some(
-            [@implicit_arity] React.JSX.String("class", "FancyButton": string),
+            [@implicit_arity]
+            React.JSX.String("class", "className", "FancyButton": string),
           ),
         ],
       ),
@@ -204,7 +217,10 @@
       Stdlib.List.filter_map(
         Fun.id,
         [
-          Some([@implicit_arity] React.JSX.String("translate", "yes": string)),
+          Some(
+            [@implicit_arity]
+            React.JSX.String("translate", "translate", "yes": string),
+          ),
         ],
       ),
       [
@@ -214,7 +230,8 @@
             Fun.id,
             [
               Some(
-                [@implicit_arity] React.JSX.String("id", "idpicture": string),
+                [@implicit_arity]
+                React.JSX.String("id", "id", "idpicture": string),
               ),
             ],
           ),
@@ -226,14 +243,19 @@
                 [
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("src", "picture/img.png": string),
+                    React.JSX.String("src", "src", "picture/img.png": string),
                   ),
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("alt", "test picture/img.png": string),
+                    React.JSX.String(
+                      "alt",
+                      "alt",
+                      "test picture/img.png": string,
+                    ),
                   ),
                   Some(
-                    [@implicit_arity] React.JSX.String("id", "idimg": string),
+                    [@implicit_arity]
+                    React.JSX.String("id", "id", "idimg": string),
                   ),
                 ],
               ),
@@ -246,11 +268,11 @@
                 [
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("type", "image/webp": string),
+                    React.JSX.String("type", "type_", "image/webp": string),
                   ),
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("src", "picture/img1.webp": string),
+                    React.JSX.String("src", "src", "picture/img1.webp": string),
                   ),
                 ],
               ),
@@ -263,11 +285,11 @@
                 [
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("type", "image/jpeg": string),
+                    React.JSX.String("type", "type_", "image/jpeg": string),
                   ),
                   Some(
                     [@implicit_arity]
-                    React.JSX.String("src", "picture/img2.jpg": string),
+                    React.JSX.String("src", "src", "picture/img2.jpg": string),
                   ),
                 ],
               ),
@@ -283,8 +305,8 @@
       Stdlib.List.filter_map(
         Fun.id,
         [
-          Some([@implicit_arity] React.JSX.String("dx", "1 2": string)),
-          Some([@implicit_arity] React.JSX.String("dy", "3 4": string)),
+          Some([@implicit_arity] React.JSX.String("dx", "dx", "1 2": string)),
+          Some([@implicit_arity] React.JSX.String("dy", "dy", "3 4": string)),
         ],
       ),
       [],
diff --git a/packages/server-reason-react-ppx/server_reason_react_ppx.ml b/packages/server-reason-react-ppx/server_reason_react_ppx.ml
index 9c5189df1..56272d5d3 100644
--- a/packages/server-reason-react-ppx/server_reason_react_ppx.ml
+++ b/packages/server-reason-react-ppx/server_reason_react_ppx.ml
@@ -80,7 +80,7 @@ let rewrite_component ~loc tag args children =
   pexp_apply ~loc component props
 
 let validate_prop ~loc id name =
-  match DomProps.findByName id name with
+  match DomProps.findByJsxName ~tag:id name with
   | Ok p -> p
   | Error `ElementNotFound ->
       raise_errorf ~loc
@@ -100,52 +100,75 @@ let validate_prop ~loc id name =
              If this isn't correct, please open an issue at %s." name id
             suggestion issues_url)
 
-let make_prop ~is_optional ~prop attribute_name attribute_value =
+let make_prop ~is_optional ~prop attribute_value =
   let loc = attribute_value.pexp_loc in
   let open DomProps in
   match (prop, is_optional) with
-  | Attribute { type_ = DomProps.String; _ }, false ->
+  | Attribute { type_ = DomProps.String; name; jsxName }, false ->
       [%expr
         Some
           (React.JSX.String
-             ([%e attribute_name], ([%e attribute_value] : string)))]
-  | Attribute { type_ = DomProps.String; _ }, true ->
+             ( [%e estring ~loc name],
+               [%e estring ~loc jsxName],
+               ([%e attribute_value] : string) ))]
+  | Attribute { type_ = DomProps.String; name; jsxName }, true ->
       [%expr
         match ([%e attribute_value] : string option) with
         | None -> None
-        | Some v -> Some (React.JSX.String ([%e attribute_name], v))]
-  | Attribute { type_ = DomProps.Int; _ }, false ->
+        | Some v ->
+            Some
+              (React.JSX.String
+                 ([%e estring ~loc name], [%e estring ~loc jsxName], v))]
+  | Attribute { type_ = DomProps.Int; name; jsxName }, false ->
       [%expr
         Some
           (React.JSX.String
-             ([%e attribute_name], string_of_int ([%e attribute_value] : int)))]
-  | Attribute { type_ = DomProps.Int; _ }, true ->
+             ( [%e estring ~loc name],
+               [%e estring ~loc jsxName],
+               string_of_int ([%e attribute_value] : int) ))]
+  | Attribute { type_ = DomProps.Int; name; jsxName }, true ->
       [%expr
         match ([%e attribute_value] : int option) with
         | None -> None
         | Some v ->
-            Some (React.JSX.String ([%e attribute_name], string_of_int v))]
-  | Attribute { type_ = DomProps.Bool; _ }, false ->
+            Some
+              (React.JSX.String
+                 ( [%e estring ~loc name],
+                   [%e estring ~loc jsxName],
+                   string_of_int v ))]
+  | Attribute { type_ = DomProps.Bool; name; jsxName }, false ->
       [%expr
         Some
-          (React.JSX.Bool ([%e attribute_name], ([%e attribute_value] : bool)))]
-  | Attribute { type_ = DomProps.Bool; _ }, true ->
+          (React.JSX.Bool
+             ( [%e estring ~loc name],
+               [%e estring ~loc jsxName],
+               ([%e attribute_value] : bool) ))]
+  | Attribute { type_ = DomProps.Bool; name; jsxName }, true ->
       [%expr
         match ([%e attribute_value] : bool option) with
         | None -> None
-        | Some v -> Some (React.JSX.Bool ([%e attribute_name], v))]
+        | Some v ->
+            Some
+              (React.JSX.Bool
+                 ([%e estring ~loc name], [%e estring ~loc jsxName], v))]
   (* BooleanishString needs to transform bool into string *)
-  | Attribute { type_ = DomProps.BooleanishString; _ }, false ->
+  | Attribute { type_ = DomProps.BooleanishString; name; jsxName }, false ->
       [%expr
         Some
           (React.JSX.String
-             ([%e attribute_name], string_of_bool ([%e attribute_value] : bool)))]
-  | Attribute { type_ = DomProps.BooleanishString; _ }, true ->
+             ( [%e estring ~loc name],
+               [%e estring ~loc jsxName],
+               string_of_bool ([%e attribute_value] : bool) ))]
+  | Attribute { type_ = DomProps.BooleanishString; name; jsxName }, true ->
       [%expr
         match ([%e attribute_value] : bool option) with
         | None -> None
         | Some v ->
-            Some (React.JSX.String ([%e attribute_name], string_of_bool v))]
+            Some
+              (React.JSX.String
+                 ( [%e estring ~loc name],
+                   [%e estring ~loc jsxName],
+                   string_of_bool v ))]
   | Attribute { type_ = DomProps.Style; _ }, false ->
       [%expr
         Some
@@ -440,8 +463,7 @@ let transform_labelled ~loc ~tag_name (prop_label, (runtime_value : expression))
   | Optional name | Labelled name ->
       let is_optional = is_optional prop_label in
       let prop = validate_prop ~loc tag_name name in
-      let name = estring ~loc (DomProps.getName prop) in
-      let new_prop = make_prop ~is_optional ~prop name runtime_value in
+      let new_prop = make_prop ~is_optional ~prop runtime_value in
       [%expr [%e new_prop] :: [%e props]]
 
 let transform_lowercase_props ~loc ~tag_name args =