Add custom option for the HtmlElement type (#106)

Author: Freymaurer

src/Fornax.Core/Model.fs

@@ -973,6 +973,8 @@ type CSSProperties =
         | Text of props: HtmlProperties list * children: HtmlElement list
         | Tspan of props: HtmlProperties list * children: HtmlElement list
         | String of string
+        // https://github.com/ionide/Fornax/issues/104
+        | Custom of tagName: string * props: HtmlProperties list * children: HtmlElement list
 
         static member ToString tag =
             let rec format tag (props : HtmlProperties list) (children : HtmlElement list) level =
@@ -1129,6 +1131,7 @@ type CSSProperties =
                 | Text (props, children) -> format "text" props children level
                 | Tspan (props, children) -> format "tspan" props children level
                 | String str -> str
+                | Custom (name, props, children) -> format name props children level
 
             helper 1 tag
 
@@ -1266,6 +1269,7 @@ type CSSProperties =
         let tspan (props : HtmlProperties list) (children: HtmlElement list) = HtmlElement.Tspan(props,children)
         let string str = HtmlElement.String str
         let (!!) str = HtmlElement.String str
+        let custom (tagName : string) (props : HtmlProperties list) (children : HtmlElement list) = HtmlElement.Custom(tagName,props,children)
 
 
 

test/Fornax.Core.UnitTests/Tests.fs

@@ -42,36 +42,72 @@ let modelTests =
             "Html element with no properties and no children"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - empty" <| fun _ ->
+            let actual = Html.custom "test" [] [] |> HtmlElement.ToString
+            let expected = "<test></test>"
+            "Custom Html element with no properties and no children"
+            |> Expect.equal actual expected
+
         testCase "Html element - one property" <| fun _ ->
             let actual = Html.a [ Href "index.html" ] [] |> HtmlElement.ToString
             let expected = "<a href=\"index.html\"></a>"
             "Html element with one property and no children"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - one property" <| fun _ ->
+            let actual = Html.custom "test" [ Href "index.html" ] [] |> HtmlElement.ToString
+            let expected = "<test href=\"index.html\"></test>"
+            "Custom Html element with one property and no children"
+            |> Expect.equal actual expected
+
         testCase "Html element - multiple properties" <| fun _ ->
             let actual = Html.a [ Href "index.html"; Hidden true ] [] |> HtmlElement.ToString
             let expected = "<a href=\"index.html\" hidden=\"true\"></a>"
             "Html element with multiple properties and no children"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - multiple property" <| fun _ ->
+            let actual = Html.custom "test" [ Href "index.html"; Hidden true ] [] |> HtmlElement.ToString
+            let expected = "<test href=\"index.html\" hidden=\"true\"></test>"
+            "Custom Html element with multiple properties and no children"
+            |> Expect.equal actual expected
+
         testCase "Html element - one child" <| fun _ ->
             let actual = Html.a [] [ Html.span [] [] ] |> HtmlElement.ToString
             let expected = "<a>\n  <span></span>\n</a>"
             "Html element with no properties and one child"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - one child" <| fun _ ->
+            let actual = Html.custom "test" [] [ Html.span [] [] ] |> HtmlElement.ToString
+            let expected = "<test>\n  <span></span>\n</test>"
+            "Custom Html element with no properties and one child"
+            |> Expect.equal actual expected
+
         testCase "Html element - multiple children" <| fun _ ->
             let actual = Html.a [] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
             let expected = "<a>\n  <span></span>\n  <div></div>\n</a>"
             "Html element with no properties and multiple children"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - multiple children" <| fun _ ->
+            let actual = Html.custom "test" [] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
+            let expected = "<test>\n  <span></span>\n  <div></div>\n</test>"
+            "Custom Html element with no properties and multiple children"
+            |> Expect.equal actual expected
+
         testCase "Html element - multiple properites and children" <| fun _ ->
             let actual = Html.a [ Href "index.html"; Hidden true] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
             let expected = "<a href=\"index.html\" hidden=\"true\">\n  <span></span>\n  <div></div>\n</a>"
             "Html element with multiple properties and multiple children"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - multiple properites and children" <| fun _ ->
+            let actual = Html.custom "test" [ Href "index.html"; Hidden true] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
+            let expected = "<test href=\"index.html\" hidden=\"true\">\n  <span></span>\n  <div></div>\n</test>"
+            "Custom Html element with multiple properties and multiple children"
+            |> Expect.equal actual expected
+
         testCase "Html element - void element as child" <| fun _ ->
             let actual = Html.div [ ] [ Html.br [ ] ] |> HtmlElement.ToString
             let expected = "<div>\n  <br/>\n</div>"
@@ -84,6 +120,18 @@ let modelTests =
             "Html element with one void element as child"
             |> Expect.equal actual expected
 
+        testCase "Custom Html element - mutliple properties and children (void and normal element)" <| fun _ ->
+            let actual = Html.custom "test" [ HtmlProperties.Style [ Display "block" ] ] [ Html.br [ ]; Html.p [ ] [ ]; Html.img [ Src "https://dummyimage.com/128x128/" ] ] |> HtmlElement.ToString
+            let expected = "<test style=\"display: block;\">\n  <br/>\n  <p></p>\n  <img src=\"https://dummyimage.com/128x128/\"/>\n</test>"
+            "Custom Html element with one void element as child"
+            |> Expect.equal actual expected
+
+        testCase "Custom Html element - as child with property and child" <| fun _ ->
+            let actual = Html.div [] [ Html.custom "test" [ HtmlProperties.Style [ Display "block" ] ] [ Html.span [] [] ] ] |> HtmlElement.ToString
+            let expected = "<div>\n  <test style=\"display: block;\">\n    <span></span>\n  </test>\n</div>"
+            "Custom Html element with one void element as child"
+            |> Expect.equal actual expected
+
         testCase "Html void element - empty" <| fun _ ->
             let actual = Html.br [ ] |> HtmlElement.ToString
             let expected = "<br/>"