Add Property data type

src/Miso/Html/Render.hs

@@ -117,7 +117,7 @@ renderAttrs (Property key value) =
   mconcat
   [ fromMisoString key
   , stringUtf8 "=\""
-  , toHtmlFromJSON value
+  , toHtmlProperty value
   , stringUtf8 "\""
   ]
 renderAttrs (On _) = mempty
@@ -149,14 +149,24 @@ collapseSiblingTextNodes (x:xs) =
 ----------------------------------------------------------------------------
 -- | Helper for turning JSON into Text
 -- Object, Array and Null are kind of non-sensical here
-toHtmlFromJSON :: Value -> Builder
-toHtmlFromJSON (String t)   = fromMisoString (ms t)
-toHtmlFromJSON (Number t)   = fromMisoString $ ms (show t)
-toHtmlFromJSON (Bool True)  = "true"
-toHtmlFromJSON (Bool False) = "false"
-toHtmlFromJSON Null         = "null"
-toHtmlFromJSON (Object o)   = fromMisoString $ ms (show o)
-toHtmlFromJSON (Array a)    = fromMisoString $ ms (show a)
+toHtmlProperty :: Property -> Builder
+toHtmlProperty = \case
+  TextProp v -> fromMisoString v
+  BoolProp x
+    | x -> "true"
+    | otherwise -> "false"
+  IntProp x -> fromMisoString (ms x)
+  DoubleProp x -> fromMisoString (ms x)
+  JSONProp value -> toHtmlFromJSON value
+    where
+      toHtmlFromJSON = \case
+        String t   -> fromMisoString (ms t)
+        Number t   -> fromMisoString $ ms (show t)
+        Bool True  -> "true"
+        Bool False -> "false"
+        Object o   -> lazyByteString (encode o)
+        Array a    -> lazyByteString (encode a)
+        Null       -> "null"
 -----------------------------------------------------------------------------
 #ifdef SSR
 -- | Used for server-side model hydration, internally only in 'renderView'.

src/Miso/Property.hs

@@ -35,40 +35,40 @@ import           Miso.Types
 -----------------------------------------------------------------------------
 -- | @prop k v@ is an attribute that will set the attribute @k@ of the DOM
 -- node associated with the vnode to @v@.
-prop :: ToJSON a => MisoString -> a -> Attribute action
-prop k v = Property k (toJSON v)
+prop :: ToJSON value => MisoString -> value -> Attribute action
+prop k v = Property k (JSONProp (toJSON v))
 -----------------------------------------------------------------------------
 -- | Set field to 'Bool' value
 boolProp :: MisoString -> Bool -> Attribute action
-boolProp = prop
+boolProp k v = Property k (BoolProp v)
 -----------------------------------------------------------------------------
 -- | Set field to 'String' value
 stringProp ::  MisoString -> String -> Attribute action
-stringProp = prop
+stringProp k v = Property k (TextProp (ms v))
 -----------------------------------------------------------------------------
 -- | Set field to 'MisoString' value
 textProp ::  MisoString -> MisoString -> Attribute action
-textProp = prop
+textProp k v = Property k (TextProp v)
 -----------------------------------------------------------------------------
 -- | Set field to t'Object' value
 objectProp ::  MisoString -> Object -> Attribute action
 objectProp = prop
 -----------------------------------------------------------------------------
 -- | Set field to 'Int' value
 intProp ::  MisoString -> Int -> Attribute action
-intProp = prop
+intProp k v = Property k (IntProp v)
 -----------------------------------------------------------------------------
 -- | Set field to 'Integer' value
 integerProp ::  MisoString -> Integer -> Attribute action
-integerProp = prop
+integerProp k v = doubleProp k (fromIntegral v)
 -----------------------------------------------------------------------------
 -- | Set field to 'Double' value
 doubleProp ::  MisoString -> Double -> Attribute action
-doubleProp = prop
+doubleProp k v = Property k (DoubleProp v)
 -----------------------------------------------------------------------------
 -- | Set 'Miso.Types.Key' on 'VNode'.
 keyProp :: ToKey key => key -> Attribute action
-keyProp key = prop "key" (toKey key)
+keyProp key = textProp "key" (ms (toKey key))
 -----------------------------------------------------------------------------
 -- | Synonym for 'keyProp'
 -- Allows a user to specify a t'Key' inside of an '[Attribute action]'

src/Miso/Types.hs

@@ -28,16 +28,17 @@ module Miso.Types
     App
   , Component     (..)
   , ComponentId
-  , SomeComponent (..)
-  , View          (..)
-  , Key           (..)
-  , Attribute     (..)
-  , NS            (..)
-  , CSS           (..)
-  , JS            (..)
-  , LogLevel      (..)
-  , VTree         (..)
-  , VTreeType     (..)
+  , SomeComponent    (..)
+  , View             (..)
+  , Key              (..)
+  , Attribute        (..)
+  , Property         (..)
+  , NS               (..)
+  , CSS              (..)
+  , JS               (..)
+  , LogLevel         (..)
+  , VTree            (..)
+  , VTreeType        (..)  
   , MountPoint
   , DOMRef
   , ROOT
@@ -83,7 +84,7 @@ module Miso.Types
   , ms
   ) where
 -----------------------------------------------------------------------------
-import           Data.Aeson (Value, ToJSON)
+import           Data.Aeson (ToJSON, Value)
 import           Data.JSString (JSString)
 import qualified Data.Map.Strict as M
 import           Data.Maybe (fromMaybe, isJust)
@@ -359,10 +360,26 @@ instance ToKey Float where toKey = Key . toMisoString
 -- | Convert 'Word' to t'Key'
 instance ToKey Word where toKey = Key . toMisoString
 -----------------------------------------------------------------------------
+data Property
+  = IntProp Int
+  | BoolProp Bool
+  | TextProp MisoString
+  | DoubleProp Double
+  | JSONProp Value
+  deriving (Show, Eq)
+-----------------------------------------------------------------------------
+instance ToJSVal Property where
+  toJSVal = \case
+    IntProp x -> toJSVal x
+    BoolProp x -> toJSVal x
+    TextProp x -> toJSVal x
+    DoubleProp x -> toJSVal x
+    JSONProp x -> toJSVal x
+-----------------------------------------------------------------------------
 -- | Attribute of a vnode in a t'View'.
 --
 data Attribute action
-  = Property MisoString Value
+  = Property MisoString Property
   | ClassList [MisoString]
   | On (Sink action -> VTree -> LogLevel -> Events -> JSM ())
   -- ^ The @Sink@ callback can be used to dispatch actions which are fed back to