eeue56/elm-html-in-elm/5.0.0

NOTE: this package is not compatible with Elm 0.19.1

ElmHtml.InternalTypes

Internal types used to represent Elm Html in pure Elm

type ElmHtml msg
= TextTag TextTagRecord
| NodeEntry (NodeRecord msg)
| CustomNode (CustomNodeRecord msg)
| MarkdownNode (MarkdownNodeRecord msg)
| NoOp

Type tree for representing Elm's Html

  • TextTag is just a plain old bit of text.
  • NodeEntry is an actual HTML node, e.g a div
  • CustomNode are nodes defined to work with the renderer in some way, e.g webgl/markdown
  • MarkdownNode is just a wrapper for CustomNode designed just for markdown
type alias TextTagRecord =
{ text : String }

Text tags just contain text

type alias NodeRecord msg =
{ tag : String
, children : List (ElmHtml msg)
, facts : Facts msg
, descendantsCount : Int
}

A node contains the tag as a string, the children, the facts (e.g attributes) and descendantsCount

type alias CustomNodeRecord msg =
{ facts : Facts msg
, model : Value
}

Custom nodes contain facts (e.g attributes) and a json value for the model

type alias MarkdownNodeRecord msg =
{ facts : Facts msg
, model : MarkdownModel
}

A markdown node contains facts (e.g attributes) and the model used by markdown

type alias Facts msg =
{ styles : Dict String String
, events : Dict String (Decoder msg)
, attributeNamespace : Maybe Value
, stringAttributes : Dict String String
, boolAttributes : Dict String Bool
}

Facts contain various dictionaries and values for a node

  • styles are a mapping of rules
  • events may be a json object containing event handlers
  • attributes are pulled out into stringAttributes and boolAttributes - things with string values go into stringAttributes, things with bool values go into boolAttributes
type alias Tagger =
Value

Tagger holds the map function when Html.Map is used, the tagger should then be applied to events comming from descendant nodes, it is basically a javascript function.

type alias EventHandler =
Value

EventHandler holds the function that is called when an event is triggered, it is basically a javascript object like this:

{ decoder: [Function] }

= VoidElements
| RawTextElements
| EscapableRawTextElements
| ForeignElements
| NormalElements

Type for representing the five kinds of elements according to HTML 5 spec. Used to handle different rendering behavior depending on the type of element.

decodeElmHtml : (List Tagger -> EventHandler -> Decoder msg) -> Decoder (ElmHtml msg)

decode a json object into ElmHtml, you have to pass a function that decodes events from Html Nodes. If you don't want to decode event msgs, you can ignore it:

decodeElmHtml (_ _ -> ()) jsonHtml

if you do want to decode them, you will probably need to write some native code like elm-html-test does to extract the function inside those.

emptyFacts : Facts msg

Just empty facts

toElementKind : String -> ElementKind

Identify the kind of element. Helper to convert an tag name into a type for pattern matching.