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

Defined in Miso.Html.Internal

Methods

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

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

Show (VTree action)

Defined in Miso.Html.Internal

Methods

showsPrec :: Int -> VTree action -> ShowS

show :: VTree action -> String

showList :: [VTree action] -> ShowS

ToHtml (VTree action)

Converting VTree to Lucid's Html

Defined in Miso.Html.Internal

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

Defined in Miso.Html.Internal

Methods

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

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

Show (View action)

Show View

Defined in Miso.Html.Internal

Methods

showsPrec :: Int -> View action -> ShowS

show :: View action -> String

showList :: [View action] -> ShowS

IsString (View a)

IsString instance

Defined in Miso.Html.Internal

Methods

fromString :: String -> View a

ToHtml (View action)

Converting View to Lucid's Html

Defined in Miso.Html.Internal

Methods

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

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

HasLink (View a :: *)

For constructing type-safe links

Defined in Miso.Html.Internal

Associated Types

type MkLink (View a) a :: *

Methods

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

HasRouter (View a :: *)

View

Defined in Miso.Router

Associated Types

type RouteT (View a) a :: *

Methods

mkRouter :: Proxy (View a) -> Proxy a0 -> RouteT (View a) a0 -> Router a0

type MkLink (View a :: *) b

Defined in Miso.Html.Internal

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

type RouteT (View a :: *) x

Defined in Miso.Router

type RouteT (View a :: *) x = x

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)

Defined in Miso.Html.Internal

Methods

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

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

Show (Attribute action)

Defined in Miso.Html.Internal

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

Defined in Miso.Html.Internal

Methods

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

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

Ord Key

Defined in Miso.Html.Internal

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

Defined in Miso.Html.Internal

Methods

showsPrec :: Int -> Key -> ShowS

show :: Key -> String

showList :: [Key] -> ShowS

ToKey Key

Identity instance

Defined in Miso.Html.Internal

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

Defined in Miso.Html.Internal

Methods

toKey :: Double -> Key

ToKey Float

Convert Float to Key

Defined in Miso.Html.Internal

Methods

toKey :: Float -> Key

ToKey Int

Convert Int to Key

Defined in Miso.Html.Internal

Methods

toKey :: Int -> Key

ToKey Word

Convert Word to Key

Defined in Miso.Html.Internal

Methods

toKey :: Word -> Key

ToKey String

Convert String to Key

Defined in Miso.Html.Internal

Methods

toKey :: String -> Key

ToKey MisoString

Convert Text to Key

Defined in Miso.Html.Internal

Methods

toKey :: MisoString -> Key

ToKey Key

Identity instance

Defined in Miso.Html.Internal

Methods

toKey :: Key -> Key

Namespace

data NS

Namespace for element creation

Constructors

HTML

HTML Namespace

SVG

SVG Namespace

MATHML

MATHML Namespace

Instances

Eq NS

Defined in Miso.Html.Internal

Methods

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

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

Show NS

Defined in Miso.Html.Internal

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

Life cycle events

onCreated :: action -> Attribute action

onCreated action is an event that gets called after the actual DOM element is created.

onDestroyed :: action -> Attribute action

onDestroyed action is an event that gets called after the DOM element is removed from the DOM. The action is given the DOM element that was removed from the DOM tree.

boolProp :: MisoString -> Bool -> Attribute action

Set field to Bool value

stringProp :: MisoString -> String -> Attribute action

Set field to String value

textProp :: MisoString -> MisoString -> Attribute action

Set field to Text value

intProp :: MisoString -> Int -> Attribute action

Set field to Int value

integerProp :: MisoString -> Int -> Attribute action

Set field to Integer value

doubleProp :: MisoString -> Double -> Attribute action

Set field to Double value

classList_ :: [(MisoString, Bool)] -> Attribute action

Define multiple classes conditionally

div_ [ classList_ [ ("empty", null items) ] [ ]

title_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title

selected_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/selected

hidden_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden

value_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value

defaultValue_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultValue

accept_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accept

acceptCharset_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/acceptCharset

action_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/action

autocomplete_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autocomplete

autosave_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autosave

disabled_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled

enctype_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/enctype

formation_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/formation

list_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/list

maxlength_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxlength

minlength_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/minlength

method_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/method

multiple_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/multiple

novalidate_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/novalidate

pattern_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pattern

readonly_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/readonly

required_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/required

size_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/size

for_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/for

max_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/max

min_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/min

step_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/step

cols_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/cols

rows_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rows

wrap_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wrap

target_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/target

download_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/download

downloadAs_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/downloadAs

hreflang_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hreflang

media_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/media

ping_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ping

rel_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rel

ismap_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ismap

usemap_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/usemap

shape_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/shape

coords_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/coords

src_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src

height_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height

width_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width

alt_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/alt

autoplay_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoplay

controls_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/controls

loop_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/loop

preload_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preload

poster_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/poster

default_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/default

kind_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/kind

srclang_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/srclang

sandbox_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sandbox

seamless_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/seamless

srcdoc_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/srcdoc

reversed_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/reversed

start_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/start

align_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align

colspan_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/colspan

rowspan_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rowspan

headers_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/headers

scope_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/scope

async_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/async

charset_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/charset

content_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/content

defer_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defer

httpEquiv_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/httpEquiv

language_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/language

scoped_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/scoped

type_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type

name_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/name

href_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/href

id_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id

placeholder_ :: MisoString -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/placeholder

checked_ :: Bool -> Attribute action

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

autofocus_ :: Bool -> Attribute action

Set "autofocus" property https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autofocus

class_ :: MisoString -> Attribute action

Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className