miso-0.16.0.0: A tasty Haskell front-end framework

Copyright(C) 2016-2018 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <djohnson.m@gmail.com>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Html

Contents

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

Core types and interface

newtype VTree Source

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

Constructors

VTree 

Fields

getTree :: Object
 

newtype View action Source

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

Constructors

View 

Fields

runView :: Sink action -> IO VTree
 

Instances

Functor View Source 
HasLink * (View a) Source

For constructing type-safe links

IsString (View a) Source

IsString instance

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

class ToView v where Source

Convenience class for using View

Methods

toView :: v -> View m Source

newtype Attribute action Source

Attribute of a vnode in a View.

The Sink callback can be used to dispatch actions which are fed back to the update function. This is especially useful for event handlers like the onclick attribute. The second argument represents the vnode the attribute is attached to.

Constructors

Attribute (Sink action -> Object -> IO ()) 

Smart View constructors

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

Create a new VNode.

node ns tag key attrs children creates a new node with tag tag and Key key in the namespace ns. All attrs are called when the node is created and its children are initialized to children.

text :: MisoString -> View m Source

Create a new VText with the given content.

Key patch internals

newtype Key Source

A unique key for a dom node.

This key is only used to speed up diffing the children of a DOM node, the actual content is not important. The keys of the children of a given DOM node must be unique. Failure to satisfy this invariant gives undefined behavior at runtime.

Constructors

Key MisoString 

Instances

ToJSVal Key Source 
ToKey Key Source

Identity instance

class ToKey key where Source

Convert custom key types to Key.

Instances of this class do not have to guarantee uniqueness of the generated keys, it is up to the user to do so. toKey must be an injective function.

Methods

toKey :: key -> Key Source

Instances

Namespace

data NS Source

Namespace of DOM elements.

Constructors

HTML

HTML Namespace

SVG

SVG Namespace

Setting properties on virtual DOM nodes

prop :: ToJSVal a => MisoString -> a -> Attribute action Source

prop k v is an attribute that will set the attribute k of the DOM node associated with the vnode to v.

Setting css

style_ :: Map MisoString MisoString -> Attribute action Source

style_ attrs is an attribute that will set the style attribute of the associated DOM node to attrs.

style attributes not contained in attrs will be deleted.

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 Source

Convenience wrapper for onWithOptions defaultOptions.

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

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

onWithOptions opts eventName decoder toAction is an attribute that will set the event handler of the associated DOM node to a function that decodes its argument using decoder, converts it to an action using toAction and then feeds that action back to the update function.

opts can be used to disable further event propagation.

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

Life cycle events

onCreated :: action -> Attribute action Source

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

onDestroyed :: action -> Attribute action Source

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.

Events

defaultEvents :: Map MisoString Bool Source

Default delegated events

Subscription type

type Sub action = Sink action -> IO () Source

Type synonym for constructing event subscriptions.

The Sink callback is used to dispatch actions which are then fed back to the update function.