Merge pull request #13 from mvsmal/react-fragment

React fragment support

Author: dbrattli

src/Interop.fs

@@ -26,6 +26,8 @@ module Interop =
 
     let inline createElement name (props: IReactProperty list) : ReactElement =
         Element (name, props)
+    let inline createElements (elements : ReactElement seq) : ReactElement =
+        Elements elements
     let inline createVoidElement name (props: IReactProperty list) : ReactElement =
         VoidElement (name, props)
     let inline createTextElement (content : string) = ViewBuilder.escape content |> TextElement

src/React.fs

@@ -42,3 +42,10 @@ type React =
     /// <param name='withKey'>A function to derive a component key from the props.</param>
     static member functionComponent(name: string, render: 'props -> #seq<ReactElement>, ?withKey: 'props -> string) =
         render
+        
+    /// <summary>
+    /// The `React.fragment` component lets you return multiple elements in your `render()` method without creating an additional DOM element.
+    /// </summary>
+    /// <param name='elements'>A collection of elements to render without parent</param>
+    static member fragment(elements : #seq<ReactElement>) =
+        Interop.createElements elements

src/ViewEngine.fs

@@ -29,6 +29,7 @@ and ReactElement =
     | Element of string * IReactProperty list // An element which may contain properties
     | VoidElement of string * IReactProperty list // An empty self-closed element which may contain properties
     | TextElement of string
+    | Elements of ReactElement seq
 
 [<RequireQualifiedAccess>]
 module ViewBuilder =
@@ -87,6 +88,9 @@ module ViewBuilder =
             match children, text, attrs with
             | _, Some text, _ -> buildParentNode (name, attrs, TextElement text :: children)
             | _ -> buildParentNode (name, attrs, children)
+        | Elements elements ->
+            for element in elements do
+                buildNode isHtml sb element
 
     let buildXmlNode  = buildNode false
     let buildHtmlNode = buildNode true

test/ViewEngineTest.fs

@@ -218,4 +218,23 @@ let ``Nested content should render correctly`` () =
     let html =
         nested
         |> Render.xmlView
-    Assert.Equal("<div><!-- this is a test --><h1>Header</h1><p><br/><strong>Ipsum</strong> dollar</p></div>", html)
+    Assert.Equal("<div><!-- this is a test --><h1>Header</h1><p><br/><strong>Ipsum</strong> dollar</p></div>", html)
+
+[<Fact>]
+let ``Fragment works correctly`` () =
+    let withFragment =
+        Html.div [
+            prop.className "test-class"
+            prop.children [
+                Html.p "test outer p"
+                React.fragment [
+                    Html.p "test inner p"
+                    Html.span "test span"
+                ]
+            ]
+        ]
+    
+    let html =
+        withFragment
+        |> Render.htmlView
+    Assert.Equal("<div class=\"test-class\"><p>test outer p</p><p>test inner p</p><span>test span</span></div>", html)