Overview

Miso.Property provides the low-level primitives for constructing Attribute values that set DOM properties on virtual nodes. All higher-level property combinators in Miso.Html.Property, Miso.Svg.Property, and Miso.Mathml.Property are built on top of these.

The central combinator is prop:

prop :: ToJSON a => MisoString -> a -> Attribute action

It wraps any JSON-serialisable value as a Property node, which the virtual DOM diffs and writes to the DOM node only when the value changes.

Typed convenience wrappers

textProp

MisoString — textProp "placeholder" "…"

stringProp

String — stringProp "lang" "en"

boolProp

Bool — boolProp "checked" True

intProp

Int — intProp "tabIndex" 3

integerProp

Integer — integerProp "size" 10

doubleProp

Double — doubleProp "volume" 0.8

objectProp

Object — objectProp "dataset" obj

Class list

classList stores CSS class names as a deduplicated list rather than a single concatenated string. The virtual DOM diffing engine handles the list directly so individual class additions and removals are efficient:

classList ["btn", "btn-primary"]

Virtual DOM keys

key_ (alias keyProp) attaches a reconciliation key to a node, telling the differ which old and new nodes correspond to each other in a dynamic list:

ul_ []
  [ li_ [ key_ item.id ] [ text item.label ]
  | item <- items
  ]

See also

• Miso.Html.Property — named HTML property combinators built on this module
• Miso.Svg.Property — SVG property combinators
• Miso.Mathml.Property — MathML property combinators
• Miso.Types — Attribute, Key, ToKey