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.
module ReviewConfig exposing (config)
import HtmlToElm
import Review.Rule exposing (Rule)
config : List Rule
config =
[ HtmlToElm.rule
]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>""" ]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" ]
]
]
]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>"""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!
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>"""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.
You can try the example configuration above out by running the following command:
elm-review --template dillonkearns/elm-review-html-to-elm/example
