diff --git a/demo/App.fs b/demo/App.fs index 50b1e562..e455749f 100644 --- 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 index 6ee70c2f..a054ff1e 100644 --- a/src/Feliz.fsproj +++ b/src/Feliz.fsproj @@ -6,7 +6,7 @@ fsharp;fable;react;html Zaid Ajaj - 0.18.0 + 0.19.0 netstandard2.0 true diff --git a/src/Interop.fs b/src/Interop.fs index 6aed504e..23603e23 100644 --- 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 * [] children: ReactElement seq -> ReactElement + abstract Children : ReactChildren + + [] 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 index 544a9901..8900bdf8 100644 --- 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