Improve React-style attributes in ssr

Author: zaaack

Samples/SSRSample/src/Client/View.fs

@@ -183,4 +183,19 @@ let view (model: Model) (dispatch) =
         ofFunction fnComp { text = "I'm rendered by Function Component!"} []
         ofFunction fnCompWithChildren { text = " I'm rendered by Function Component! "; children=[||]} [ span [] [ str " I'm rendered by children!"] ]
       ]
+
+      div [ ClassName "test-case" ] [
+        span [ ClassName "label" ] [ str "Test void elements:" ]
+        hr [ Style [ BorderColor "green" ] ]
+        br []
+      ]
+
+      div [ ClassName "test-case" ] [
+        span [ ClassName "label" ] [ str "Test add slug to attributes:" ]
+        div
+          [ HTMLAttr.Custom ("contentEditable", "true")
+            HTMLAttr.Custom ("placeholder", "I'm editable!")
+            Style [ CSSProp.Custom ("WebkitTransform", "translateX(30px)"); CSSProp.Custom ("WebkitTransformOrigin", "0 0") ] ]
+          [ ]
+      ]
     ]

Samples/SSRSample/src/Client/index.css

@@ -43,9 +43,18 @@ body {
   border: 1px solid #f93;
 }
 
-.children-comp > span {
-  margin-bottom: 5px;
+.children-comp > div {
+  margin-bottom: 10px;
   border: 1px solid #0cb3f0;
   padding: 5px 10px;
   display: block;
 }
+
+[placeholder][contenteditable]:empty:before {
+  content: attr(placeholder);
+  color: #9b9b9b;
+}
+
+[placeholder][contenteditable]:empty:focus:before {
+  content: "";
+}

src/Fable.React/Fable.Helpers.ReactServer.fs

@@ -49,7 +49,9 @@ let private cssProp (key: string) (value: obj) =
 
   key + ":" + value + ";"
 
-let private cssPropRegex = Regex("([A-Z])")
+let private slugRegex = Regex("([A-Z])", RegexOptions.Compiled)
+let inline private slugKey key =
+  slugRegex.Replace(string key, "-$1").ToLower()
 
 let private renderCssProp (prop: CSSProp): string =
   match prop with
@@ -458,7 +460,7 @@ let private renderCssProp (prop: CSSProp): string =
   | WritingMode v -> cssProp "writing-mode" v
   | ZIndex v -> cssProp "z-index" v
   | Zoom v -> cssProp "zoom" v
-  | CSSProp.Custom (key, value) -> cssProp key (cssPropRegex.Replace(string value, "-$1").ToLower())
+  | CSSProp.Custom (key, value) -> cssProp (slugKey key) value
 
 let inline boolAttr (key: string) (value: bool) = if value then key else ""
 let inline strAttr (key: string) (value: string) = key + "=\"" + (escapeHtml value) + "\""
@@ -616,7 +618,7 @@ let private renderHtmlAttr (attr: HTMLAttr): string =
     let css = css.[0..css.Length - 2]
     strAttr "style" css
 
-  | Custom (key, value) -> strAttr key (string value)
+  | Custom (key, value) -> strAttr (key.ToLower()) (string value)
   | Data (key, value) -> strAttr ("data-" + key) (string value)
 
 let private renderSVGAttr (attr: SVGAttr): string =
@@ -678,7 +680,7 @@ let private renderSVGAttr (attr: SVGAttr): string =
   | SVGAttr.Y1 v -> objAttr "y1" v
   | SVGAttr.Y2 v -> objAttr "y2" v
   | SVGAttr.Y v -> objAttr "y" v
-  | SVGAttr.Custom (key, value) -> objAttr key value
+  | SVGAttr.Custom (key, value) -> objAttr (slugKey key) value
 
 let private renderAttrs (attrs: IProp seq) tag =
   let html = StringBuilder()