Overview

Miso.Html.Render provides the ToHtml typeclass for serialising a View tree to a lazy ByteString of UTF-8 HTML. This is the foundation of miso's server-side rendering (SSR) support.

Instances are provided for both View () () () a (a single node) and [View () () () a] (a sequence of nodes): a bare View is static markup with no enclosing component and no app-global context to read, so its context, props and model are all fixed to (). A component's view, or any subtree that reads context / props / model, is rendered with toHtmlWith.

Quick start

import           Miso.Html.Render (ToHtml, toHtml, toHtmlWith)
import qualified Data.ByteString.Lazy as L

renderPage :: Model -> L.ByteString
renderPage m = toHtmlWith () () m (view () () m)

staticPage :: L.ByteString
staticPage = toHtml (div_ [] [ "Hello, world!" ])

With servant, use toHtml inside a ByteString or OctetStream response, or wire it into a ToHtml servant MIME type.

Rendering rules

• VNode — rendered as <tag attrs>children</tag>. Self-closing elements (<br/>, <img/>, <input/>, …) are rendered without a closing tag.
• VText — rendered as a raw text string (no escaping beyond what is already in the MisoString).
• VComp — recursively renders the sub-component's view using its initial (or hydrated) model.
• VFrag — renders all children inline, no wrapper tag.
• VContext (ambient accessor, not a node) — applied to the app-global context (() for a bare View under toHtml; the value given to toHtmlWith otherwise) and the result rendered in its place.
• VProps (ambient accessor, not a node) — applied to the props of the enclosing component (() for a bare View under toHtml; the value given to toHtmlWith otherwise) and the result rendered in its place.
• VModel (ambient accessor, not a node) — applied to the initial (or hydrated) model of the enclosing component (() for a bare View under toHtml; the value given to toHtmlWith otherwise) and the result rendered in its place.
• Event handlers (On) — silently dropped; they have no meaning in a static HTML string.
• Boolean properties (disabled, checked, required, …) — rendered as bare attribute names when True, omitted entirely when False.
• Adjacent text nodes — collapsed into a single text node to match browser parsing behaviour during hydration.

SSR flag

When compiled with -fssr the renderer calls the component's optional hydrateModel action to derive the initial model (e.g. by fetching from a database), falling back to the static model if the action throws.

See also

• Miso.Hydrate — client-side hydration from server-rendered HTML
• Miso.Html.Element — element smart constructors
• Miso.Html — top-level HTML DSL re-export hub