dillonkearns/elm-review-html-to-elm

Turn HTML into Elm. With support for elm-tailwind-modules.

elm-review-html-to-elm

Provides an elm-review rule to convert an HTML String into compiling Elm code.

You can also run this scaffolding tool with the web UI at html-to-elm.com.

Provided rules

• HtmlToElm

Configuration

module ReviewConfig exposing (config)

import HtmlToElm
import Review.Rule exposing (Rule)

config : List Rule
config =
    [ HtmlToElm.rule
    ]

@html directive

You can replace Debug.todo expressions with todo Strings beginning with @html to replace HTML strings in-place with compiling Elm view code.

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

navbarView : Html msg
navbarView =
    nav
        []
        [ Debug.todo """@html <ul class="flex"><li><a href="/">Home</a></li></ul>""" ]

After fix

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

navbarView : Html msg
navbarView =
    nav 
        []
        [ Html.ul
            [ Attr.class "flex"
            ]
            [ Html.li []
                [ Html.a
                    [ Attr.href "/"
                    ]
                    [ Html.text "Home" ]
                ]
            ]
        ]

Before fix

The fix runs on top-level values with an Html type annotation. It turns the HTML within the String in a Debug.todo call into compiling Elm code!

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

navbarView : Html msg
navbarView =
    Debug.todo """<ul class="flex"><li><a href="/">Home</a></li></ul>"""

After fix

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

navbarView : Html msg
navbarView =
    Html.ul
        [ Attr.class "flex"
        ]
        [ Html.li []
            [ Html.a
                [ Attr.href "/"
                ]
                [ Html.text "Home" ]
            ]
        ]

Note that the imports in our module are used for the auto-generated Elm code. So be sure to set up your imports the way you like them before scaffolding a HTML code!

With elm-tailwind-modules

If your imports include modules from elm-tailwind-modules, then this fix will turn your class attributes into elm-tailwind-modules attributes.

import Html.Styled exposing (..)
import Html.Styled.Attributes as Attr
import Tailwind.Breakpoints as Bp
import Tailwind.Utilities as Tw

navbarView : Html msg
navbarView =
    Debug.todo """<ul class="flex"><li><a href="/">Home</a></li></ul>"""

After fix with Tailwind import

import Html.Styled exposing (..)
import Html.Styled.Attributes as Attr
import Tailwind.Breakpoints
import Tailwind.Utilities

navbarView : Html msg
navbarView =
    Html.ul
        [ Attr.css
            [ Tailwind.Utilities.flex
            ]
        ]
        [ Html.li []
            [ Html.a
                [ Attr.href "/"
                ]
                [ text "Home" ]
            ]
        ]

Note that the example that first example didn't have import Tailwind.Utilities, and therefore class="flex" was interpreted as a plain CSS class, not a Tailwind class.

Try it out

You can try the example configuration above out by running the following command:

elm-review --template dillonkearns/elm-review-html-to-elm/example