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 action 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 action

Fields

• vType :: Text

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

• vNs :: NS

  HTML or SVG

• vProps :: Props

  Fields present on DOM Node

• vKey :: Maybe Key

  Key used for child swap patch

• vChildren :: Vector (VTree action)

  Child nodes

VText :: {..} -> VTree action

Fields

• vText :: Text

  TextNode content

Instances

Functor VTree

Methods

fmap :: (a -> b) -> VTree a -> VTree b

(<$) :: a -> VTree b -> VTree a

Show (VTree action)

Methods

showsPrec :: Int -> VTree action -> ShowS

show :: VTree action -> String

showList :: [VTree action] -> ShowS

ToHtml (VTree action)

Converting VTree to Lucid's Html

Methods

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

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

newtype View action

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

Constructors

View

Fields

• runView :: VTree action

Instances

Functor View

Methods

fmap :: (a -> b) -> View a -> View b

(<$) :: a -> View b -> View a

Show (View action)

Show View

Methods

showsPrec :: Int -> View action -> ShowS

show :: View action -> String

showList :: [View action] -> ShowS

IsString (View a)

IsString instance

Methods

fromString :: String -> View a

ToHtml (View action)

Converting View to Lucid's Html

Methods

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

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

HasLink * (View a)

For constructing type-safe links

Associated Types

type MkLink (View a) (endpoint :: View a) :: *

Methods

toLink :: Proxy (View a) endpoint -> Link -> MkLink (View a) endpoint

type MkLink * (View a)

type MkLink * (View a) = MkLink * (Get * ([] *) ())

class ToView v where

Convenience class for using View

Minimal complete definition

toView

Methods

toView :: v -> View action

data Attribute action

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

Constructors

P MisoString Value

E ()

Instances

Eq (Attribute action)

Methods

(==) :: Attribute action -> Attribute action -> Bool

(/=) :: Attribute action -> Attribute action -> Bool

Show (Attribute action)

Methods

showsPrec :: Int -> Attribute action -> ShowS

show :: Attribute action -> String

showList :: [Attribute action] -> ShowS

Smart View constructors

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

VNode creation

text :: MisoString -> View action

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 action

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_ "+" ]

module Miso.Html.Property