Miso.Html

Example usage:

import Miso

data IntAction = Add | Subtract

intView :: Int -> View IntAction
intView n = div_ [ class_ "main" ] [
   btn_ [ onClick Add ] [ text_ "+" ]
 , text_ $ pack (show n)
 , btn_ [ onClick Subtract ] [ text_ "-" ]
 ]

More information on how to use miso is available on GitHub

http://github.com/dmjio/miso

Documentation

module Miso.Html.Element

module Miso.Html.Event

Core types and interface

data VTree model where

Virtual DOM implemented as a Rose Vector. Used for diffing, patching and event delegation. Not meant to be constructed directly, see View instead.

Constructors

VNode :: {..} -> VTree model

Fields

• vType :: Text

  Element type (i.e. "div", "a", "p")

• vNs :: NS

  HTML or SVG

• vProps :: Props

  Fields present on DOM Node

• vCss :: CSS

  Styles

• vKey :: Maybe Key

  Key used for child swap patch

• vChildren :: Vector (VTree model)

  Child nodes

VText :: {..} -> VTree model

Fields

• vText :: Text

  TextNode content

Instances

Show (VTree model)

Methods

showsPrec :: Int -> VTree model -> ShowS

show :: VTree model -> String

showList :: [VTree model] -> ShowS

ToHtml (VTree model)

Converting VTree to Lucid's Html

Methods

toHtml :: Monad m => VTree model -> HtmlT m ()

toHtmlRaw :: Monad m => VTree model -> HtmlT m ()

newtype View model

Core type for constructing a VTree, use this instead of VTree directly.

Constructors

View

Fields

• runView :: VTree model

Instances

Show (View model)

Show View

Methods

showsPrec :: Int -> View model -> ShowS

show :: View model -> String

showList :: [View model] -> ShowS

ToHtml (View model)

Converting View to Lucid's Html

Methods

toHtml :: Monad m => View model -> HtmlT m ()

toHtmlRaw :: Monad m => View model -> HtmlT m ()

class ToView v where

Convenience class for using View

Minimal complete definition

toView

Methods

toView :: v -> View model

data Attribute model

View Attributes to annotate DOM, converted into Events, Props, Attrs and CSS

Constructors

C MisoString MisoString

P MisoString Value

E ()

Smart View constructors

node :: NS -> MisoString -> Maybe Key -> [Attribute model] -> [View model] -> View model

VNode creation

text :: ToMisoString str => str -> View model

VText creation

Key patch internals

newtype Key

Key for specific children patch

Constructors

Key MisoString

Instances

Eq Key

Methods

(==) :: Key -> Key -> Bool

(/=) :: Key -> Key -> Bool

Ord Key

Methods

compare :: Key -> Key -> Ordering

(<) :: Key -> Key -> Bool

(<=) :: Key -> Key -> Bool

(>) :: Key -> Key -> Bool

(>=) :: Key -> Key -> Bool

max :: Key -> Key -> Key

min :: Key -> Key -> Key

Show Key

Methods

showsPrec :: Int -> Key -> ShowS

show :: Key -> String

showList :: [Key] -> ShowS

ToKey Key

Identity instance

Methods

toKey :: Key -> Key

class ToKey key where

Convert type into Key, ensure Key is unique

Minimal complete definition

toKey

Methods

toKey :: key -> Key

Instances

ToKey Double

Convert Double to Key

Methods

toKey :: Double -> Key

ToKey Float

Convert Float to Key

Methods

toKey :: Float -> Key

ToKey Int

Convert Int to Key

Methods

toKey :: Int -> Key

ToKey Word

Convert Word to Key

Methods

toKey :: Word -> Key

ToKey String

Convert String to Key

Methods

toKey :: String -> Key

ToKey MisoString

Convert Text to Key

Methods

toKey :: MisoString -> Key

ToKey Key

Identity instance

Methods

toKey :: Key -> Key

Namespace

data NS

Namespace for element creation

Constructors

HTML

HTML Namespace

SVG

SVG Namespace

Instances

Eq NS

Methods

(==) :: NS -> NS -> Bool

(/=) :: NS -> NS -> Bool

Show NS

Methods

showsPrec :: Int -> NS -> ShowS

show :: NS -> String

showList :: [NS] -> ShowS

Setting properties on virtual DOM nodes

prop :: ToJSON a => MisoString -> a -> Attribute model

Constructs a property on a VNode, used to set fields on a DOM Node

Setting CSS

style_ :: Map MisoString MisoString -> Attribute action

Constructs CSS for a DOM Element

import qualified Data.Map as M
div_ [ style_  $ M.singleton "background" "red" ] [ ]

https://developer.mozilla.org/en-US/docs/Web/CSS

Handling events

on :: MisoString -> Decoder r -> (r -> action) -> Attribute action

For defining delegated events

let clickHandler = on "click" emptyDecoder $ \() -> Action
in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]

onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action

For defining delegated events with options

let clickHandler = onWithOptions defaultOptions "click" emptyDecoder $ \() -> Action
in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]

String

module Miso.String

module Miso.Html.Property