diff --git a/demo/App.fs b/demo/App.fs
index 5aa49457..28772f30 100644
--- a/demo/App.fs
+++ b/demo/App.fs
@@ -38,6 +38,8 @@ let customStyles =
style.position position.sticky
]
+Browser.Dom.console.log(customStyles)
+
let render state dispatch =
Html.div [
attr.id "main"
@@ -46,15 +48,17 @@ let render state dispatch =
Html.span [ customStyles ]
Html.button [
+ attr.id "incr"
attr.className "btn btn-success"
- attr.style [ style.marginLeft 5 ]
+ attr.style [ style.marginRight 5 ]
attr.onClick (fun _ -> dispatch Increment)
attr.content "Increment"
]
Html.button [
+ attr.id "decr"
attr.className "btn btn-danger"
- attr.style [ style.marginRight 5 ]
+ attr.styleList [ true, [style.marginLeft 5]; true, [style.color colors.blueViolet] ]
attr.onClick (fun _ -> dispatch Decrement)
attr.content "Decrement"
]
diff --git a/src/Attributes.fs b/src/Attributes.fs
index 561331e2..30fcb745 100644
--- a/src/Attributes.fs
+++ b/src/Attributes.fs
@@ -2,6 +2,8 @@ namespace Feliz
open Fable.React
open Browser.Types
+open Fable.Core.JsInterop
+open Fable.Core
type attr() =
static member inline id(value: string) = Interop.mkAttr "id" value
@@ -59,7 +61,7 @@ type attr() =
/// Alias for inline `attr.children [ Html.content value ]`
static member inline content(value: int) = attr.children [ unbox value ]
/// Alias for inline `attr.children [ Html.content value ]`
- static member inline content(value: ReactElement) = attr.children [ value ]
+ static member inline content(value: ReactElement) = attr.children [ unbox value ]
static member inline rows(value: int) = Interop.mkAttr "rows" value
static member inline rowSpan(value: int) = Interop.mkAttr "rowSpan" value
static member inline inputType(value: string) = Interop.mkAttr "type" value
@@ -136,10 +138,10 @@ type attr() =
static member inline onAnimationEnd (handler: AnimationEvent -> unit) = Interop.mkAttr "onAnimationEnd" handler
static member inline onAnimationIteration (handler: AnimationEvent -> unit) = Interop.mkAttr "onAnimationIteration" handler
static member inline onTransitionEnd (handler: TransitionEvent -> unit) = Interop.mkAttr "onTransitionEnd" handler
- static member inline style (properties: IStyleAttribute list) = Interop.mkAttr "style" (Interop.createObj (unbox properties))
+ static member inline style (properties: IStyleAttribute list) = Interop.mkAttr "style" (keyValueList CaseRules.LowerFirst properties)
static member styleList (properties: (bool * IStyleAttribute list) list) =
properties
|> List.filter fst
|> List.collect snd
- |> (unbox >> Interop.createObj)
+ |> keyValueList CaseRules.LowerFirst
|> Interop.mkAttr "style"
\ No newline at end of file
diff --git a/src/Feliz.fsproj b/src/Feliz.fsproj
index ad6e9a7c..9cc9eff0 100644
--- a/src/Feliz.fsproj
+++ b/src/Feliz.fsproj
@@ -6,7 +6,7 @@
fsharp;fable;react;html
Zaid Ajaj
- 0.5.0
+ 0.6.0
netstandard2.0
true
diff --git a/src/Html.fs b/src/Html.fs
index c94986c4..19b72c53 100644
--- a/src/Html.fs
+++ b/src/Html.fs
@@ -2,6 +2,7 @@ namespace Feliz
open Fable.React
open Fable.Core
+open Fable.Core.JsInterop
[]
type Html =
@@ -47,10 +48,10 @@ type Html =
static member inline ol xs = Interop.createElement "ol" xs
static member inline a xs = Interop.createElement "a" xs
static member inline anchor xs = Interop.createElement "anchor" xs
- static member inline img xs = Interop.createVoid "img" xs
- static member inline br xs = Interop.createVoid "br" xs
- static member inline hr xs = Interop.createVoid "hr" xs
- static member inline input xs = Interop.createVoid "input" xs
+ static member inline img xs = Interop.createElement "img" xs
+ static member inline br xs = Interop.createElement "br" xs
+ static member inline hr xs = Interop.createElement "hr" xs
+ static member inline input xs = Interop.createElement "input" xs
static member inline form xs = Interop.createElement "form" xs
static member inline i xs = Interop.createElement "i" xs
static member inline p xs = Interop.createElement "p" xs
@@ -62,29 +63,29 @@ type Html =
static member content (value: int) : ReactElement = unbox value
static member text (value: string) : ReactElement = unbox value
static member text (value: int) : ReactElement = unbox value
- static member inline div (value: string) = Interop.reactElement "div" (obj()) value
- static member inline div (value: int) = Interop.reactElement "div" (obj()) value
- static member inline span (value: string) = Interop.reactElement "span" (obj()) value
- static member inline span (value: int) = Interop.reactElement "span" (obj()) value
- static member inline h1 (value: string) = Interop.reactElement "h1" (obj()) value
- static member inline h1 (value: int) = Interop.reactElement "h1" (obj()) value
- static member inline h2 (value: string) = Interop.reactElement "h2" (obj()) value
- static member inline h2 (value: int) = Interop.reactElement "h2" (obj()) value
- static member inline h3 (value: string) = Interop.reactElement "h3" (obj()) value
- static member inline h3 (value: int) = Interop.reactElement "h3" (obj()) value
- static member inline h4 (value: string) = Interop.reactElement "h4" (obj()) value
- static member inline h4 (value: int) = Interop.reactElement "h4" (obj()) value
- static member inline h5 (value: string) = Interop.reactElement "h5" (obj()) value
- static member inline h5 (value: int) = Interop.reactElement "h5" (obj()) value
- static member inline h6 (value: string) = Interop.reactElement "h6" (obj()) value
- static member inline h6 (value: int) = Interop.reactElement "h6" (obj()) value
- static member inline strong(value: string) = Interop.reactElement "strong" (obj()) value
- static member inline strong(value: int) = Interop.reactElement "strong" (obj()) value
- static member inline p(value: string) = Interop.reactElement "p" (obj()) value
- static member inline p(value: int) = Interop.reactElement "p" (obj()) value
- static member inline paragraph(value: string) = Interop.reactElement "p" (obj()) value
- static member inline paragraph(value: int) = Interop.reactElement "p" (obj()) value
- static member inline td(value: string) = Interop.reactElement "td" (obj()) value
- static member inline td(value: int) = Interop.reactElement "td" (obj()) value
- static member inline th(value: string) = Interop.reactElement "th" (obj()) value
- static member inline th(value: int) = Interop.reactElement "th" (obj()) value
\ No newline at end of file
+ static member inline div (value: string) = Interop.reactElement "div" (createObj [ "children" ==> [| value |] ])
+ static member inline div (value: int) = Interop.reactElement "div" (createObj [ "children" ==> [| value |] ])
+ static member inline span (value: string) = Interop.reactElement "span" (createObj [ "children" ==> [| value |] ])
+ static member inline span (value: int) = Interop.reactElement "span" (createObj [ "children" ==> [| value |] ])
+ static member inline h1 (value: string) = Interop.reactElement "h1" (createObj [ "children" ==> [| value |] ])
+ static member inline h1 (value: int) = Interop.reactElement "h1" (createObj [ "children" ==> [| value |] ])
+ static member inline h2 (value: string) = Interop.reactElement "h2" (createObj [ "children" ==> [| value |] ])
+ static member inline h2 (value: int) = Interop.reactElement "h2" (createObj [ "children" ==> [| value |] ])
+ static member inline h3 (value: string) = Interop.reactElement "h3" (createObj [ "children" ==> [| value |] ])
+ static member inline h3 (value: int) = Interop.reactElement "h3" (createObj [ "children" ==> [| value |] ])
+ static member inline h4 (value: string) = Interop.reactElement "h4" (createObj [ "children" ==> [| value |] ])
+ static member inline h4 (value: int) = Interop.reactElement "h4" (createObj [ "children" ==> [| value |] ])
+ static member inline h5 (value: string) = Interop.reactElement "h5" (createObj [ "children" ==> [| value |] ])
+ static member inline h5 (value: int) = Interop.reactElement "h5" (createObj [ "children" ==> [| value |] ])
+ static member inline h6 (value: string) = Interop.reactElement "h6" (createObj [ "children" ==> [| value |] ])
+ static member inline h6 (value: int) = Interop.reactElement "h6" (createObj [ "children" ==> [| value |] ])
+ static member inline strong(value: string) = Interop.reactElement "strong" (createObj [ "children" ==> [| value |] ])
+ static member inline strong(value: int) = Interop.reactElement "strong" (createObj [ "children" ==> [| value |] ])
+ static member inline p(value: string) = Interop.reactElement "p" (createObj [ "children" ==> [| value |] ])
+ static member inline p(value: int) = Interop.reactElement "p" (createObj [ "children" ==> [| value |] ])
+ static member inline paragraph(value: string) = Interop.reactElement "p" (createObj [ "children" ==> [| value |] ])
+ static member inline paragraph(value: int) = Interop.reactElement "p" (createObj [ "children" ==> [| value |] ])
+ static member inline td(value: string) = Interop.reactElement "td" (createObj [ "children" ==> [| value |] ])
+ static member inline td(value: int) = Interop.reactElement "td" (createObj [ "children" ==> [| value |] ])
+ static member inline th(value: string) = Interop.reactElement "th" (createObj [ "children" ==> [| value |] ])
+ static member inline th(value: int) = Interop.reactElement "th" (createObj [ "children" ==> [| value |] ])
\ No newline at end of file
diff --git a/src/Interop.fs b/src/Interop.fs
index f86acaa5..b4a2fce9 100644
--- a/src/Interop.fs
+++ b/src/Interop.fs
@@ -6,46 +6,8 @@ open Fable.React
[]
module Interop =
- let reactElement (name: string) (props: 'a) (children: 'b) : ReactElement = import "createElement" "react"
-
+ let reactElement (name: string) (props: 'a) : ReactElement = import "createElement" "react"
let inline mkAttr (key: string) (value: obj) : IReactAttribute = unbox (key, value)
let inline mkStyle (key: string) (value: obj) : IStyleAttribute = unbox (key, value)
-
- []
- let setProperty (key: string) (value: obj) (objectLiteral: obj) = jsNative
-
- let createObj (properties: obj list) =
- let propsObj = obj()
- let propsList = unbox<(string * obj) list> properties
- for (key, value) in propsList do
- if key <> "children" then
- setProperty key value propsObj
- propsObj
-
- let extract (pred: 't -> bool) (xs: 't list) : 't option * 't list =
- let rec extract' pred xs elem acc =
- match xs, elem with
- | [ ], Some _ -> elem, acc
- | [ ], None -> None, acc
- | values, Some _ -> elem, List.append values acc
- | x :: rest, None when pred x -> Some x, List.append acc rest
- | x :: rest, None -> extract' pred rest None (List.append [x] acc)
-
- extract' pred xs None [ ]
-
- let createElement name (properties: IReactAttribute list) : ReactElement =
- let props = unbox<(string * obj) list> properties
- match extract (fun (key, value) -> key = "children") props with
- | None, rest ->
- let restProps = createObj (unbox rest)
- reactElement name restProps null
- | Some (key, value), rest ->
- let restProps = createObj (unbox rest)
- reactElement name restProps (unbox value)
-
- let createVoid name (properties: IReactAttribute list) : ReactElement =
- let props = unbox<(string * obj) list> properties
- match extract (fun (key, value) -> key = "children") props with
- | _, rest ->
- let restProps = createObj (unbox rest)
- reactElement name restProps null
\ No newline at end of file
+ let inline createElement name (properties: IReactAttribute list) : ReactElement =
+ reactElement name (keyValueList CaseRules.LowerFirst properties)
\ No newline at end of file