Copyright	(C) 2016-2018 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <djohnson.m@gmail.com>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.Html

Contents

Core types and interface
Smart View constructors
Key patch internals
Namespace
Setting properties on virtual DOM nodes
Setting CSS
Handling events
Life cycle events

Description

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

Synopsis

module Miso.Html.Element
module Miso.Html.Event
data VTree action where
- VNode :: {..} -> VTree action
- VText :: {..} -> VTree action
newtype View action = View {
- runView :: VTree action
}
class ToView v where
data Attribute action
- = P MisoString Value
- | E ()
node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action
text :: MisoString -> View action
newtype Key = Key MisoString
class ToKey key where
data NS
- = HTML
- | SVG
prop :: ToJSON a => MisoString -> a -> Attribute action
style_ :: Map MisoString MisoString -> Attribute action
on :: MisoString -> Decoder r -> (r -> action) -> Attribute action
onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action
onCreated :: action -> Attribute action
onDestroyed :: action -> Attribute action
boolProp :: MisoString -> Bool -> Attribute action
stringProp :: MisoString -> String -> Attribute action
textProp :: MisoString -> MisoString -> Attribute action
intProp :: MisoString -> Int -> Attribute action
integerProp :: MisoString -> Int -> Attribute action
doubleProp :: MisoString -> Double -> Attribute action
classList_ :: [(MisoString, Bool)] -> Attribute action
title_ :: MisoString -> Attribute action
selected_ :: Bool -> Attribute action
hidden_ :: Bool -> Attribute action
value_ :: MisoString -> Attribute action
defaultValue_ :: MisoString -> Attribute action
accept_ :: MisoString -> Attribute action
acceptCharset_ :: MisoString -> Attribute action
action_ :: MisoString -> Attribute action
autocomplete_ :: Bool -> Attribute action
autosave_ :: MisoString -> Attribute action
disabled_ :: Bool -> Attribute action
enctype_ :: MisoString -> Attribute action
formation_ :: MisoString -> Attribute action
list_ :: MisoString -> Attribute action
maxlength_ :: MisoString -> Attribute action
minlength_ :: MisoString -> Attribute action
method_ :: MisoString -> Attribute action
multiple_ :: Bool -> Attribute action
novalidate_ :: Bool -> Attribute action
pattern_ :: MisoString -> Attribute action
readonly_ :: Bool -> Attribute action
required_ :: Bool -> Attribute action
size_ :: MisoString -> Attribute action
for_ :: MisoString -> Attribute action
max_ :: MisoString -> Attribute action
min_ :: MisoString -> Attribute action
step_ :: MisoString -> Attribute action
cols_ :: MisoString -> Attribute action
rows_ :: MisoString -> Attribute action
wrap_ :: MisoString -> Attribute action
target_ :: MisoString -> Attribute action
download_ :: MisoString -> Attribute action
downloadAs_ :: MisoString -> Attribute action
hreflang_ :: MisoString -> Attribute action
media_ :: MisoString -> Attribute action
ping_ :: MisoString -> Attribute action
rel_ :: MisoString -> Attribute action
ismap_ :: MisoString -> Attribute action
usemap_ :: MisoString -> Attribute action
shape_ :: MisoString -> Attribute action
coords_ :: MisoString -> Attribute action
src_ :: MisoString -> Attribute action
height_ :: MisoString -> Attribute action
width_ :: MisoString -> Attribute action
alt_ :: MisoString -> Attribute action
autoplay_ :: Bool -> Attribute action
controls_ :: Bool -> Attribute action
loop_ :: Bool -> Attribute action
preload_ :: MisoString -> Attribute action
poster_ :: MisoString -> Attribute action
default_ :: Bool -> Attribute action
kind_ :: MisoString -> Attribute action
srclang_ :: MisoString -> Attribute action
sandbox_ :: MisoString -> Attribute action
seamless_ :: MisoString -> Attribute action
srcdoc_ :: MisoString -> Attribute action
reversed_ :: MisoString -> Attribute action
start_ :: MisoString -> Attribute action
align_ :: MisoString -> Attribute action
colspan_ :: MisoString -> Attribute action
rowspan_ :: MisoString -> Attribute action
headers_ :: MisoString -> Attribute action
scope_ :: MisoString -> Attribute action
async_ :: MisoString -> Attribute action
charset_ :: MisoString -> Attribute action
content_ :: MisoString -> Attribute action
defer_ :: MisoString -> Attribute action
httpEquiv_ :: MisoString -> Attribute action
language_ :: MisoString -> Attribute action
scoped_ :: MisoString -> Attribute action
type_ :: MisoString -> Attribute action
name_ :: MisoString -> Attribute action
href_ :: MisoString -> Attribute action
id_ :: MisoString -> Attribute action
placeholder_ :: MisoString -> Attribute action
checked_ :: Bool -> Attribute action
autofocus_ :: Bool -> Attribute action
class_ :: MisoString -> Attribute action

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 #
Instance details Defined in Miso.Html.Internal Methods fmap :: (a -> b) -> VTree a -> VTree b # (<$) :: a -> VTree b -> VTree a #
Show (VTree action) #
Instance details 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`
Instance details 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 #
Instance details Defined in Miso.Html.Internal Methods fmap :: (a -> b) -> View a -> View b # (<$) :: a -> View b -> View a #
Show (View action) #	Show `View`
Instance details Defined in Miso.Html.Internal Methods showsPrec :: Int -> View action -> ShowS # show :: View action -> String # showList :: [View action] -> ShowS #
IsString (View a) #	`IsString` instance
Instance details Defined in Miso.Html.Internal Methods fromString :: String -> View a #
ToHtml (View action) #	Converting `View` to Lucid's `Html`
Instance details 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
Instance details Defined in Miso.Html.Internal Associated Types type MkLink (View a) a :: * # Methods toLink :: (Link -> a0) -> Proxy (View a) -> Link -> MkLink (View a) a0 #
type MkLink (View a :: *) b #
Instance details Defined in Miso.Html.Internal type MkLink (View a :: ) b = MkLink (Get ([] :: []) ()) b

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) #
Instance details Defined in Miso.Html.Internal Methods (==) :: Attribute action -> Attribute action -> Bool # (/=) :: Attribute action -> Attribute action -> Bool #
Show (Attribute action) #
Instance details 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 #
Instance details Defined in Miso.Html.Internal Methods (==) :: Key -> Key -> Bool # (/=) :: Key -> Key -> Bool #
Ord Key #
Instance details 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 #
Instance details Defined in Miso.Html.Internal Methods showsPrec :: Int -> Key -> ShowS # show :: Key -> String # showList :: [Key] -> ShowS #
ToKey Key #	Identity instance
Instance details 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`
Instance details Defined in Miso.Html.Internal Methods toKey :: Double -> Key #
ToKey Float #	Convert `Float` to `Key`
Instance details Defined in Miso.Html.Internal Methods toKey :: Float -> Key #
ToKey Int #	Convert `Int` to `Key`
Instance details Defined in Miso.Html.Internal Methods toKey :: Int -> Key #
ToKey Word #	Convert `Word` to `Key`
Instance details Defined in Miso.Html.Internal Methods toKey :: Word -> Key #
ToKey String #	Convert `String` to `Key`
Instance details Defined in Miso.Html.Internal Methods toKey :: String -> Key #
ToKey MisoString #	Convert `Text` to `Key`
Instance details Defined in Miso.Html.Internal Methods toKey :: MisoString -> Key #
ToKey Key #	Identity instance
Instance details Defined in Miso.Html.Internal Methods toKey :: Key -> Key #

Namespace

data NS #

Namespace for element creation

Constructors

HTML	HTML Namespace
SVG	SVG Namespace

Instances

Eq NS #
Instance details Defined in Miso.Html.Internal Methods (==) :: NS -> NS -> Bool # (/=) :: NS -> NS -> Bool #
Show NS #
Instance details 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

Documentation

Core types and interface

Smart View constructors

Key patch internals

Namespace

Setting properties on virtual DOM nodes

Setting CSS

Handling events

Life cycle events

Smart `View` constructors