Text nodes

A VText represents a DOM text node. Text nodes participate in keyed reconciliation.

The simplest way to produce a VText is via the IsString instance on View. String literals inside a child list are automatically promoted to text nodes:

H.div_ [] [ "Hello, world!" ]

For dynamic content, use the text smart constructor with a MisoString:

H.div_ [] [ text (ms userName) ]

HTML encoding#

When compiling with the ssr flag, text automatically HTML-encodes its argument — <, >, &, " and ' become entities. This prevents accidental XSS when rendering user-supplied strings on the server. To embed trusted, pre-rendered content without escaping use textRaw; it is a no-op on the client and bypasses encoding on the server.

text    "<b>bold</b>"   -- SSR output: &lt;b&gt;bold&lt;/b&gt;
textRaw "<b>bold</b>"   -- server and client: <b>bold</b>

Concatenating and keying#

text_ accepts a list of strings and joins them with a single space. A VText may also carry a Key (textKey, textKey_): keyed text nodes take part in the same reconciliation as keyed elements, so a stable key prevents unnecessary text-node replacement when sibling order changes.

H.div_ [] [ text_ [ "Hello", "world" ] ]
-- renders: Hello world

renderItem
  :: Item
  -> View context model Action
renderItem item =
  H.li_ []
    [ textKey (itemId item) (itemLabel item) ]

text

single string, HTML-encoded on the server

vtext

synonym for text

textRaw

single string, never HTML-encoded

text_

list of strings joined with a space

textKey

single keyed string

textKey_

list of keyed strings joined with a space