elm-html-pipeline

Build HTML nodes using the pipeline (|>) operator.

Example

import Html.Pipeline as Html
import Html.Pipeline.Attribute as Attribute
import Html.Pipeline.Event as Event

view : Int -> Html.Element Msg
view count =
  Html.div
    |> Html.children
        [ Html.button
            |> Event.onClick Decrement
            |> Html.text "-"
        , Html.div
            |> Html.text (String.fromInt count)
        , Html.button
            |> Event.onClick Increment
            |> Html.text "+"
        ]

Motivation

Feeling a little frustrated with all the list juggling involved in writing HTML in elm, I've been recently obsessed with trying a pipeline-based API instead.

This is experimental, but I'm publishing it because, even if it turns out to be a bad idea, at least the next person that wants to scratch the same itch will realize sooner.

This package offers the type Html.Pipeline.Element msg to generate HTML.

Usage

You start a pipeling with a function from Html.Pipeline:

The same functions available in Html for creating Html nodes are available in Html.Pipeline to create empty Elements.

button : Element msg
button =
    Element.button

Then you can add attributes, properties, event handlers and children:

button : msg -> String -> Element msg
button msg label =
    Element.button
        |> Event.onClick msg
        |> Element.text label

Html values are constructed once and then untouchable. Instead, Elements can be modified after being created:

primaryButton msg label =
    button msg label
        |> Attribute.class "primary-button"

secondaryButton msg label =
    button msg label
        |> Attribute.class "secondary-buton"

You can convert an Element msg to Html msg using Html.Pipeline.toHtml.

Unlike an Html msg, an Element msg cannot be a text node, but you can append text nodes to any element using Html.Pipeline.text.

You can also append Html msg nodes in an Element using Html.Pipeline.htmlChildren.

Attributes and events

Most functions in the Html.Pipeline.Attribute and Html.Pipeline.Event call the homonymous function in Html.Attributes and Html.Events

Keyed and lazy

There are no plans to support keyed and lazy nodes.

You can just use the regular Html.Keyed and Html.Lazy functions.