ThinkAlexandria/elm-html-in-elm/1.0.1

NOTE: the latest version is 1.0.2

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.

= Attribute AttributeRecord
| NamespacedAttribute NamespacedAttributeRecord
| Property PropertyRecord
| Styles (List ( String, String ))
| Event EventRecord

Type for representing Elm's Attributes

  • Attribute is an HTML attribute, like Html.Attributes.colspan. These values are applied using element.setAttribute(key, value) during a patch.
  • NamespacedAttribute has an namespace, like Svg.Attributes.xlinkHref
  • Property assigns a value to a node like Html.Attributes.class, and can hold any encoded value. Unlike attributes, where element.setAttribute() is used during the patch, properties are applied directly as element[key] = value.
  • Styles hold a list of key value pairs to be applied to the node's style set
  • Event contains a decoder for a msg and the Html.Event.Options for the event
type alias AttributeRecord =
{ key : String
, value : String
}

Attribute contains a string key and a string value

{ key : String
, value : String
, namespace : String
}

NamespacedAttribute contains a string key, string namespace and string value

type alias PropertyRecord =
{ key : String
, value : Value
}

Property contains a string key and a value with an arbitrary type

type alias EventRecord =
{ key : String
, decoder : Value
, options :
{ stopPropagation : Bool
, preventDefault : Bool
}
}

Event contains a string key, a decoder for a msg and event options

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

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

Decode a JSON object into an Attribute. You have to pass a function that decodes events from event attributes. If you don't want to decode event msgs, you can ignore it:

decodeAttribute (\_ -> ()) 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.