Understanding generic union types in Elm

17
votes

I'm having some trouble understanding what exactly the Html msg type is, or how it gets used. I found this line of code in VirtualDom.elm, which Html msg seems to be an alias of:

type Node msg = Node

This looks like a generic union type with one type parameter, msg, and one trivial case that holds no additional information. I'm wondering:

  1. How does the div function construct one of these objects?
  2. How does an object like this get used?
  3. How could an object like this get used?
  4. Is there any value for a user to define a type like this, or is Html msg just a magical type to support the Elm compiler/runtime?
1
elm
This pattern is fairly common for defining Opaque types, whose structure is actually manipulated by Native JS code. You can see this here: github.com/elm-lang/virtual-dom/blob/1.1.0/src/Native/… – jmite

1 Answers

12
votes

Html msg is a Type Alias for Node msg, which is a Generic Union Type

Union Type Node msg

It only makes sense to reason about Node msg type signature in a context of Elm Architecture, where all input for your application, except flags for Http.App.programWithFlags, is happening through messages.

msg type variable in Node msg is only hinting you towards the idea, that all messages from your DOM sub-tree should belong to a single union type.

node
    :  String
    -> List (Attribute msg)
    -> List (Html msg)  -- List of children nodes with a msg
    -> Html msg         -- Produced DOM node

How div function uses generic Union Types

Thanks to msg type variable, Elm compiler knows, when your DOM tree is correct in the context of Elm Architecture.

In JavaScript world Node value of Node msg Union Type is representing the object with the following structure:

{  
   "type":"node",
   "tag":"div",
   "facts":{},            // Attributes and DOM events
   "children":[],         // Children, have the same structure
   "descendantsCount": 0  // Used for Virtual DOM diffing
}

How you can use generic Union Types

Most of the complex core data structures are implemented using generic Union Types, check Maybe or Dict to get inspired.

Html msg and user-defined generic Union Types

Html msg in particular is somewhat magical, but you can implement some interesting structures, like linked lists or other tree-like structures.

type List a =
  Empty | Node a (List a)