rule : Review.Rule.Rule
Generates Elm code from HTML Strings
config =
[ HtmlToElm.rule
]
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
import Html.Attributes as Attr
navbarView : Html msg
navbarView =
Debug.todo """<ul class="flex"><li><a href="/">Home</a></li></ul>"""
import 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!
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><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 this rule out by running the following command:
elm-review --template dillonkearns/elm-review-html-to-elm/example --rules HtmlToElm
htmlToElm : Config -> String -> String
If you're using this through elm-review
, you won't need this function. This is a lower-level function to convert
an HTML String into an Elm String.