Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dillonkearns/elm-review-html-to-elm
Turn HTML into Elm. With support for elm-tailwind-modules.
https://github.com/dillonkearns/elm-review-html-to-elm
elm generator html
Last synced: 28 days ago
JSON representation
Turn HTML into Elm. With support for elm-tailwind-modules.
- Host: GitHub
- URL: https://github.com/dillonkearns/elm-review-html-to-elm
- Owner: dillonkearns
- License: bsd-3-clause
- Created: 2021-02-23T22:46:24.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-03T22:36:05.000Z (7 months ago)
- Last Synced: 2024-11-14T17:49:36.331Z (about 1 month ago)
- Topics: elm, generator, html
- Language: Elm
- Homepage: http://html-to-elm.com/
- Size: 430 KB
- Stars: 97
- Watchers: 5
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# elm-review-html-to-elm
Provides an [`elm-review`](https://package.elm-lang.org/packages/jfmengels/elm-review/latest/) 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](https://html-to-elm.com/).
## Provided rules
- [`HtmlToElm`](https://package.elm-lang.org/packages/dillonkearns/elm-review-html-to-elm/2.0.0/HtmlToElm)
## Configuration
```elm
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.
```elm
import Html exposing (Html)
import Html.Attributes as Attr
navbarView : Html msg
navbarView =
nav
[]
[ Debug.todo """@html
""" ]
```
## After fix
```elm
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!
```elm
import Html exposing (Html)
import Html.Attributes as Attr
navbarView : Html msg
navbarView =
Debug.todo """
```
## After fix
```elm
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`](https://github.com/matheus23/elm-tailwind-modules),
then this fix will turn your `class` attributes into `elm-tailwind-modules` attributes.
```elm
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 """
```
## After fix with Tailwind import
```elm
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:
```bash
elm-review --template dillonkearns/elm-review-html-to-elm/example
```