elm-html-string

Write code resembling elm/html and serialize to either a string or actual HTML

A fork of zwilias/elm-html-string 2.0.2, by Ilias Van Peer, kept under the same BSD-3 license. It renders the public pages of a site on the server and hands the same views to the browser.

This fork

• Attribute values are escaped as HTML: &, ", < and > become entities. 2.0.2 wrote a quote as \", which HTML does not read as an escape, so a value with a quote ended the attribute early.
• Attribute names are written as given (viewBox stays viewBox), and a property is written as its HTML attribute (readOnly as readonly, acceptCharset as accept-charset).
• The text of a script or a style is written as it is, with no entities, and a </ inside it is written <\/ so it cannot close the element. JSON-LD keeps its &.
• A void element made with node (node "meta", node "link") gets no closing tag.
• Attributes come out in the order written, class and style first.
• toHtml hands the browser attributes, the same ones toString writes: an Elm program started on HTML written by toString finds nothing to change. value, checked and selected are set as properties too, but an option's value.
• toString is about twice as fast in an interpreter such as QuickJS: one string per tag and per text, joined once at the end, and one regular expression to find what needs escaping.

It depends on elm/regex too, and its tests run on elm-explorations/test 2.x.

This package copies the entire API of elm/html, but adds 2 functions:

• toHtml which serializes the resulting Html.String.Html msg node into a Html.Html msg node
• toString which serializes the node into a String with optional indentation

Two caveats:

• You need to change your imports
• It can't properly support lazy nodes since those can't be expressed in Elm

Show me an example!

import Html.String as Html exposing (Html)
import Html.String.Attributes as Attr
import Html.String.Events as Events


type Msg = Increment | Decrement


counter : Int -> Html Msg
counter count =
    Html.div
        [ Attr.classList [ ( "below-zero" = count < 0 ), ( "counter" = True ) ] ]
        [ Html.button [ Events.onClick Decrement ] [ Html.text "-" ]
        , Html.text <| toString count
        , Html.button [ Events.onClick Increment ] [ Html.text "+" ]
        ]

counterAsString : String
counterAsString =
    Html.toString 2 <| counter -5

{- Expected output:

    <div class="below-zero counter">
      <button>
        -
      </button>
      -5
      <button>
        +
      </button>
    </div>
-}

Cool, anything else I should be aware of?

Yes.

• Event handlers are removed from the output.
• Void elements ignore children (br, img, etc.)
• Boolean properties are stripped from the output when False, and added as boolean properties when True. I.e. selected True will result in <someNode selected>.

Alright, coolbeans

Made with ❤️ and licensed under BSD-3. Fork me and send me some pull-requests!