Purescript interface to Elm Virtual DOM
newtype Property msg
When using HTML and JS, there are two ways to specify parts of a DOM node.
Attributes — You can set things in HTML itself. So the
<div class="greeting"></div>is called an attribute.
Properties — You can also set things in JS. So the
div.className = 'greeting'is called a property.
class attribute corresponds to the
className property. At first
glance, perhaps this distinction is defensible, but it gets much crazier.
There is not always a one-to-one mapping between attributes and properties!
Yes, that is a true fact. Sometimes an attribute exists, but there is no
corresponding property. Sometimes changing an attribute does not change the
underlying property. For example, as of this writing, the
attribute can be used in HTML, but there is no corresponding property!
Options for an event listener. If
stopPropagation is true, it means the
event stops traveling through the DOM so it will not trigger any other event
preventDefault is true, any built-in browser behavior related
to the event is prevented. For example, this is used with touch events when you
want to treat them as gestures of your own, not as scrolls.
Create arbitrary properties.
greeting : Html greeting = node "div" [ property "className" (Json.string "greeting") ] [ text "Hello!" ]
Notice that you must give the property name, so we use
className as it
class as it would appear in HTML.
attributeNS :: forall msg. String -> String -> String -> Property msg
Would you believe that there is another way to do this?! This corresponds
setAttributeNS function under the hood. It is doing pretty
much the same thing as
attribute but you are able to have "namespaced"
attributes. This is used in some SVG stuff at least.
A performance optimization that delays the building of virtual DOM nodes.
(view model) will definitely build some virtual DOM, perhaps a lot of
(lazy view model) delays the call until later. During diffing, we
can check to see if
model is referentially equal to the previous value used,
and if so, we just stop. No need to build up the tree structure and diff it,
we know if the input to
view is the same, the output must be the same!
keyedNode :: forall msg. String -> Array (Property msg) -> Array (Tuple String (VNode msg)) -> VNode msg
Works just like
node, but you add a unique identifier to each child
node. You want this when you have a list of nodes that is changing: adding
nodes, removing nodes, etc. In these cases, the unique identifiers help make
the DOM modifications more efficient.