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 |
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
Synopsis
- nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action
- nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action
- div_ :: [Attribute action] -> [View action] -> View action
- table_ :: [Attribute action] -> [View action] -> View action
- thead_ :: [Attribute action] -> [View action] -> View action
- tbody_ :: [Attribute action] -> [View action] -> View action
- tr_ :: [Attribute action] -> [View action] -> View action
- trKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- th_ :: [Attribute action] -> [View action] -> View action
- td_ :: [Attribute action] -> [View action] -> View action
- tfoot_ :: [Attribute action] -> [View action] -> View action
- section_ :: [Attribute action] -> [View action] -> View action
- header_ :: [Attribute action] -> [View action] -> View action
- footer_ :: [Attribute action] -> [View action] -> View action
- button_ :: [Attribute action] -> [View action] -> View action
- form_ :: [Attribute action] -> [View action] -> View action
- p_ :: [Attribute action] -> [View action] -> View action
- s_ :: [Attribute action] -> [View action] -> View action
- ul_ :: [Attribute action] -> [View action] -> View action
- span_ :: [Attribute action] -> [View action] -> View action
- strong_ :: [Attribute action] -> [View action] -> View action
- li_ :: [Attribute action] -> [View action] -> View action
- liKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- h1_ :: [Attribute action] -> [View action] -> View action
- h2_ :: [Attribute action] -> [View action] -> View action
- h3_ :: [Attribute action] -> [View action] -> View action
- h4_ :: [Attribute action] -> [View action] -> View action
- h5_ :: [Attribute action] -> [View action] -> View action
- h6_ :: [Attribute action] -> [View action] -> View action
- hr_ :: [Attribute action] -> View action
- pre_ :: [Attribute action] -> [View action] -> View action
- input_ :: [Attribute action] -> View action
- label_ :: [Attribute action] -> [View action] -> View action
- a_ :: [Attribute action] -> [View action] -> View action
- mark_ :: [Attribute action] -> [View action] -> View action
- ruby_ :: [Attribute action] -> [View action] -> View action
- rt_ :: [Attribute action] -> [View action] -> View action
- rp_ :: [Attribute action] -> [View action] -> View action
- bdi_ :: [Attribute action] -> [View action] -> View action
- bdo_ :: [Attribute action] -> [View action] -> View action
- wbr_ :: [Attribute action] -> View action
- details_ :: [Attribute action] -> [View action] -> View action
- summary_ :: [Attribute action] -> [View action] -> View action
- menuitem_ :: [Attribute action] -> [View action] -> View action
- menu_ :: [Attribute action] -> [View action] -> View action
- fieldset_ :: [Attribute action] -> [View action] -> View action
- legend_ :: [Attribute action] -> [View action] -> View action
- datalist_ :: [Attribute action] -> [View action] -> View action
- optgroup_ :: [Attribute action] -> [View action] -> View action
- keygen_ :: [Attribute action] -> [View action] -> View action
- output_ :: [Attribute action] -> [View action] -> View action
- progress_ :: [Attribute action] -> [View action] -> View action
- meter_ :: [Attribute action] -> [View action] -> View action
- center_ :: [Attribute action] -> [View action] -> View action
- audio_ :: [Attribute action] -> [View action] -> View action
- video_ :: [Attribute action] -> [View action] -> View action
- source_ :: [Attribute action] -> View action
- track_ :: [Attribute action] -> View action
- embed_ :: [Attribute action] -> View action
- object_ :: [Attribute action] -> [View action] -> View action
- param_ :: [Attribute action] -> View action
- ins_ :: [Attribute action] -> [View action] -> View action
- del_ :: [Attribute action] -> [View action] -> View action
- small_ :: [Attribute action] -> [View action] -> View action
- cite_ :: [Attribute action] -> [View action] -> View action
- dfn_ :: [Attribute action] -> [View action] -> View action
- abbr_ :: [Attribute action] -> [View action] -> View action
- time_ :: [Attribute action] -> [View action] -> View action
- var_ :: [Attribute action] -> [View action] -> View action
- samp_ :: [Attribute action] -> [View action] -> View action
- kbd_ :: [Attribute action] -> [View action] -> View action
- caption_ :: [Attribute action] -> [View action] -> View action
- colgroup_ :: [Attribute action] -> [View action] -> View action
- col_ :: [Attribute action] -> View action
- nav_ :: [Attribute action] -> [View action] -> View action
- article_ :: [Attribute action] -> [View action] -> View action
- aside_ :: [Attribute action] -> [View action] -> View action
- address_ :: [Attribute action] -> [View action] -> View action
- main_ :: [Attribute action] -> [View action] -> View action
- body_ :: [Attribute action] -> [View action] -> View action
- figure_ :: [Attribute action] -> [View action] -> View action
- figcaption_ :: [Attribute action] -> [View action] -> View action
- dl_ :: [Attribute action] -> [View action] -> View action
- dt_ :: [Attribute action] -> [View action] -> View action
- dd_ :: [Attribute action] -> [View action] -> View action
- img_ :: [Attribute action] -> View action
- iframe_ :: [Attribute action] -> [View action] -> View action
- canvas_ :: [Attribute action] -> [View action] -> View action
- math_ :: [Attribute action] -> [View action] -> View action
- select_ :: [Attribute action] -> [View action] -> View action
- option_ :: [Attribute action] -> [View action] -> View action
- textarea_ :: [Attribute action] -> [View action] -> View action
- sub_ :: [Attribute action] -> [View action] -> View action
- sup_ :: [Attribute action] -> [View action] -> View action
- br_ :: [Attribute action] -> View action
- ol_ :: [Attribute action] -> [View action] -> View action
- blockquote_ :: [Attribute action] -> [View action] -> View action
- code_ :: [Attribute action] -> [View action] -> View action
- em_ :: [Attribute action] -> [View action] -> View action
- i_ :: [Attribute action] -> [View action] -> View action
- b_ :: [Attribute action] -> [View action] -> View action
- u_ :: [Attribute action] -> [View action] -> View action
- q_ :: [Attribute action] -> [View action] -> View action
- link_ :: [Attribute action] -> View action
- script_ :: [Attribute action] -> MisoString -> View action
- module Miso.Html.Event
- data Attribute action
- = P MisoString Value
- | E ()
- class ToKey key where
- newtype Key = Key MisoString
- data NS
- class ToView v where
- newtype View action = View {}
- data VTree action where
- node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action
- text :: MisoString -> View action
- prop :: ToJSON a => MisoString -> a -> 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
- onBeforeDestroyed :: action -> Attribute action
- style_ :: Map MisoString MisoString -> 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
- ref_ :: 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
- data_ :: MisoString -> MisoString -> Attribute action
Documentation
nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action Source #
Construct a node with a Key
trKeyed_ :: Key -> [Attribute action] -> [View action] -> View action Source #
Contains Key
, inteded to be used for child replacement patch
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
liKeyed_ :: Key -> [Attribute action] -> [View action] -> View action Source #
Contains Key
, inteded to be used for child replacement patch
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
script_ :: [Attribute action] -> MisoString -> View action Source #
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
This takes the raw text to be put in the script tag.
That means that if any part of the text is not trusted there's a potential JavaScript injection. Read more at https://owasp.org/www-community/attacks/xss/
You can also easily shoot yourself in the foot with something like:
script_
[] "</script>"
module Miso.Html.Event
data Attribute action Source #
View
Attributes to annotate DOM, converted into Events, Props, Attrs and CSS
P MisoString Value | |
E () |
class ToKey key where Source #
Convert type into Key, ensure Key
is unique
Key for specific children patch
Namespace for element creation
Instances
Functor View Source # | |
Show (View action) Source # | Show |
IsString (View a) Source # |
|
Defined in Miso.Html.Internal fromString :: String -> View a # | |
ToHtml (View action) Source # | |
HasLink (View a :: Type) Source # | For constructing type-safe links |
HasRouter (View a :: Type) Source # | View |
type MkLink (View a :: Type) b Source # | |
type RouteT (View a :: Type) x Source # | |
Defined in Miso.Router |
data VTree action where Source #
Virtual DOM implemented as a Rose Vector
.
Used for diffing, patching and event delegation.
Not meant to be constructed directly, see View
instead.
node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action Source #
VNode
creation
prop :: ToJSON a => MisoString -> a -> Attribute action Source #
Constructs a property on a VNode
, used to set fields on a DOM Node
on :: MisoString -> Decoder r -> (r -> action) -> Attribute action Source #
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 Source #
For defining delegated events with options
let clickHandler = onWithOptions defaultOptions "click" emptyDecoder $ \() -> Action in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]
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.
onBeforeDestroyed :: action -> Attribute action Source #
onBeforeDestroyed action
is an event that gets called before the DOM element
is removed from the DOM. The action
is given the DOM element that was
removed from the DOM tree.
style_ :: Map MisoString MisoString -> Attribute action Source #
Constructs CSS for a DOM Element
import qualified Data.Map as M div_ [ style_ $ M.singleton "background" "red" ] [ ]
stringProp :: MisoString -> String -> Attribute action Source #
Set field to String
value
textProp :: MisoString -> MisoString -> Attribute action Source #
Set field to Text
value
integerProp :: MisoString -> Int -> Attribute action Source #
Set field to Integer
value
doubleProp :: MisoString -> Double -> Attribute action Source #
Set field to Double
value
classList_ :: [(MisoString, Bool)] -> Attribute action Source #
Define multiple classes conditionally
div_ [ classList_ [ ("empty", null items) ] [ ]
title_ :: MisoString -> Attribute action Source #
value_ :: MisoString -> Attribute action Source #
defaultValue_ :: MisoString -> Attribute action Source #
accept_ :: MisoString -> Attribute action Source #
acceptCharset_ :: MisoString -> Attribute action Source #
action_ :: MisoString -> Attribute action Source #
autocomplete_ :: Bool -> Attribute action Source #
autosave_ :: MisoString -> Attribute action Source #
enctype_ :: MisoString -> Attribute action Source #
formation_ :: MisoString -> Attribute action Source #
list_ :: MisoString -> Attribute action Source #
maxlength_ :: MisoString -> Attribute action Source #
minlength_ :: MisoString -> Attribute action Source #
method_ :: MisoString -> Attribute action Source #
novalidate_ :: Bool -> Attribute action Source #
pattern_ :: MisoString -> Attribute action Source #
size_ :: MisoString -> Attribute action Source #
for_ :: MisoString -> Attribute action Source #
ref_ :: MisoString -> Attribute action Source #
max_ :: MisoString -> Attribute action Source #
min_ :: MisoString -> Attribute action Source #
step_ :: MisoString -> Attribute action Source #
cols_ :: MisoString -> Attribute action Source #
rows_ :: MisoString -> Attribute action Source #
wrap_ :: MisoString -> Attribute action Source #
target_ :: MisoString -> Attribute action Source #
download_ :: MisoString -> Attribute action Source #
downloadAs_ :: MisoString -> Attribute action Source #
hreflang_ :: MisoString -> Attribute action Source #
media_ :: MisoString -> Attribute action Source #
ping_ :: MisoString -> Attribute action Source #
rel_ :: MisoString -> Attribute action Source #
ismap_ :: MisoString -> Attribute action Source #
usemap_ :: MisoString -> Attribute action Source #
shape_ :: MisoString -> Attribute action Source #
coords_ :: MisoString -> Attribute action Source #
src_ :: MisoString -> Attribute action Source #
height_ :: MisoString -> Attribute action Source #
width_ :: MisoString -> Attribute action Source #
alt_ :: MisoString -> Attribute action Source #
preload_ :: MisoString -> Attribute action Source #
poster_ :: MisoString -> Attribute action Source #
kind_ :: MisoString -> Attribute action Source #
srclang_ :: MisoString -> Attribute action Source #
sandbox_ :: MisoString -> Attribute action Source #
seamless_ :: MisoString -> Attribute action Source #
srcdoc_ :: MisoString -> Attribute action Source #
reversed_ :: MisoString -> Attribute action Source #
start_ :: MisoString -> Attribute action Source #
align_ :: MisoString -> Attribute action Source #
colspan_ :: MisoString -> Attribute action Source #
rowspan_ :: MisoString -> Attribute action Source #
headers_ :: MisoString -> Attribute action Source #
scope_ :: MisoString -> Attribute action Source #
async_ :: MisoString -> Attribute action Source #
charset_ :: MisoString -> Attribute action Source #
content_ :: MisoString -> Attribute action Source #
defer_ :: MisoString -> Attribute action Source #
httpEquiv_ :: MisoString -> Attribute action Source #
language_ :: MisoString -> Attribute action Source #
scoped_ :: MisoString -> Attribute action Source #
type_ :: MisoString -> Attribute action Source #
name_ :: MisoString -> Attribute action Source #
href_ :: MisoString -> Attribute action Source #
id_ :: MisoString -> Attribute action Source #
placeholder_ :: MisoString -> Attribute action Source #
autofocus_ :: Bool -> Attribute action Source #
Set "autofocus" property https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autofocus
class_ :: MisoString -> Attribute action Source #
Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className
data_ :: MisoString -> MisoString -> Attribute action Source #
Set "data-*" property https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*