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

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

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.

module Miso.Html.Property

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