Use React.Children API to include keys automatically, fixes #6 thanks @…

…MangelMaxime
Zaid-Ajaj · Jul 25, 2019 · 5d7b3f1 · 5d7b3f1
1 parent 3cae036
commit 5d7b3f1
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/demo/App.fs b/demo/App.fs
@@ -47,7 +47,7 @@ let update msg state =
 ]
 |> List.iter (fun x -> Browser.Dom.console.log(keyValueList CaseRules.LowerFirst [x]))
 
-let render state dispatch =
+let counterApp state dispatch =
     Html.div [
         prop.id "main"
         prop.style [ style.padding 20 ]
@@ -69,6 +69,39 @@ let render state dispatch =
         ]
     ]
 
+let keyWarnings state dispatch =
+    Html.div [
+        prop.id "id"
+        prop.className "class"
+        prop.children [
+            Html.div "text"
+            Html.div [
+                prop.id "id"
+                prop.className "class"
+                prop.children [
+                    Html.text "text"
+                    Html.div [
+                        prop.id "id"
+                        prop.className "class"
+                        prop.children [
+                            Html.text "text"
+                            Html.div [
+                                prop.id "id"
+                                prop.className "class"
+                                prop.children [
+                                    Html.text "text"
+                                    Html.div []
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+    ]
+
+let render state dispatch =
+    counterApp state dispatch
 
 Program.mkSimple init update render
 |> Program.withReactSynchronous "root"

diff --git a/src/Feliz.fsproj b/src/Feliz.fsproj
@@ -6,7 +6,7 @@
         <PackageIconUrl></PackageIconUrl>
         <PackageTags>fsharp;fable;react;html</PackageTags>
         <Authors>Zaid Ajaj</Authors>
-        <Version>0.18.0</Version>
+        <Version>0.19.0</Version>
         <TargetFramework>netstandard2.0</TargetFramework>
         <GenerateDocumentationFile>true</GenerateDocumentationFile>
     </PropertyGroup>

diff --git a/src/Interop.fs b/src/Interop.fs
@@ -4,8 +4,19 @@ open Fable.Core
 open Fable.Core.JsInterop
 open Fable.React
 
+type internal ReactChildren =
+    abstract toArray: ReactElement -> ReactElement seq
+    abstract toArray: ReactElement seq -> ReactElement seq
+
+type internal IReactApi =
+    abstract createElement: comp: obj * props: obj -> ReactElement
+    abstract createElement: comp: obj * props: obj * [<ParamList>] children: ReactElement seq -> ReactElement
+    abstract Children : ReactChildren
+
+
 [<RequireQualifiedAccess>]
 module Interop =
+    let internal reactApi : IReactApi = importDefault "react"
     let reactElement (name: string) (props: 'a) : ReactElement = import "createElement" "react"
     let inline mkAttr (key: string) (value: obj) : IReactProperty = unbox (key, value)
     let inline mkStyle (key: string) (value: obj) : IStyleAttribute = unbox (key, value)

diff --git a/src/Properties.fs b/src/Properties.fs
@@ -123,7 +123,7 @@ type prop =
     static member inline start(value: string) = Interop.mkAttr "start" value
     static member inline readOnly (value: bool) = Interop.mkAttr "readOnly" value
     static member inline custom(key: string, value: 't) = Interop.mkAttr key value
-    static member inline children (elems: Fable.React.ReactElement list) = Interop.mkAttr "children" (Array.ofList elems)
+    static member inline children (elems: Fable.React.ReactElement seq) = Interop.mkAttr "children" (Interop.reactApi.Children.toArray elems)
     static member inline onCut (handler: ClipboardEvent -> unit) = Interop.mkAttr "onCut" handler
     static member inline onPaste (handler: ClipboardEvent -> unit) = Interop.mkAttr "onPaste" handler
     static member inline onCompositionEnd (handler: CompositionEvent -> unit) = Interop.mkAttr "onCompositionEnd" handler