lettenj61 / elm-reusable-html / Reusable

Minimal reusable functions to enrich common use of elm/html.

Types


type alias CustomTag children msg =
List (Html.Attribute msg) -> children -> Html msg

A type of function which constructs Html node with given msg and children.

This is merely an synonym for those values reside in elm/html, which you must be already familiar with.

You can use this to make a little statement about what type does your custom view function would accept as child node.

type alias CardProp msg =
    { title : String
    , body : Html msg
    }

card : CustomTag (CardProp msg) msg
card attributes { title, body } =
    div
        (class "card" :: attributes)
        [ span [ text title ]
        , body
        ]


type alias Tag msg =
CustomTag (List (Html msg)) msg

The fundamental function type that constructs Html from List of Attributes and Htmls.

Frankly, this package is all about defining your own Tag msg values, with as fewer keystrokes as possible.

import Html exposing (..)

myTag : Tag msg
myTag =
    div

Utilities

extend : List (Html.Attribute msg) -> Tag msg -> Tag msg

Extend given Tag function to ensure it would always have default Attributes.

row : Tag msg
row =
    extend [class "row"] div

row [] [ text "hello" ]
    == """<div class="row">hello</div>"""

wrap : (List (Html msg) -> Html msg) -> Tag msg -> Tag msg

Wraps another node so that it would be rendered inside the wrapper node.

wrapper : Tag msg
wrapper =
    span
        |> wrap (div [ class "wrapper" ])

wrapper [] [ text "in depth" ]
    ==  """
        <div class="wrapper">
            <span>in depth</span>
        </div>
        """

wrapDeep : List (List (Html msg) -> Html msg) -> Tag msg -> Tag msg

wrapDeep plants resulting view of given tag into deeply nested structure.

The first element in given outerNodes list would come topmost.

postItem : Tag msg
postItem =
    p
        |> extend [ class "post-item" ]
        |> wrapDeep
            [ (div [ class "post-wrapper" ])
            , (article [ class "post-body" ])
            ]

postItem [] [ text "New blog!" ]
    ==  """
        <div class="post-wrapper">
            <article class="post-body">
                <p class="post-item">New blog!</p>
            </article>
        </div>
        """