Sample SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
  <defs>
    <clipPath id="a">
      <path d="M.06.04h999.893V1000H.06zm0 0"/>
    </clipPath>
  </defs>
  <g clip-path="url(#a)">
    <path d="M.06.04h999.893V1000H.06zm0 0" fill="#ee3833"/>
  </g>
 </svg>

outputs

svg [ height "1000", viewBox "0 0 1000 1000", width "1000", attribute "xmlns" "http://www.w3.org/2000/svg" ]
  [ defs []
    [ clipPath [ id "a" ]
      [ path [ d "M.06.04h999.893V1000H.06zm0 0" ]
        []
      , text "    "
      ]
    ]
  , g [ attribute "clip-path" "url(#a)" ]
    [ path [ d "M.06.04h999.893V1000H.06zm0 0", fill "#ee3833" ]
      []
    , text "  "
    ]
  ]

Hey, any thoughts on making a command line tool so that it can be used like babel?

Hey,

Check the following HTML:

<div class="intro-heading">It's Nice To Meet You</div>

The ' character causes the output to become:

div [ class "intro-heading" ]
    [ text "It" ]

where as I expected:

div [ class "intro-heading" ]
    [ text "It's Nice To Meet You" ]

This becomes even more of a problem if there's more tags after the div containing a ' character:

<header>
  <div class="container">
    <div class="intro-text">
      <div class="intro-lead-in">Welcome To Our Studio!</div>
      <div class="intro-heading">It's Nice To Meet You</div>
      <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
    </div>
  </div>
</header>

becomes

header []
    [ div [ class "container" ]
        [ div [ class "intro-text" ]
            [ div [ class "intro-lead-in" ]
                [ text "Welcome To Our Studio!" ]
            , div [ class "intro-heading" ]
                [ text "It" ]
            ]
        ]
    ]

As you can see, the entire link

<a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>

is missing here.

Let me know if there's more I can do!

Currently, rather than using the style function, the attribute function is being used for style attributes.

currently

<div style="background-color: red;"></div>

outputs as

div [ attribute "style" "background-color: red;" ]
    []

but

div [ style [("background-color", "red") ]
    []

would be much nicer

Firstly I want to thank you for providing this wonderful and very useful tool, that will make life much better for those who - like me - want to port an existing project to Elm.

along the way, I encountered a couple of issues, causing minor inconvenience:

• comments
• some non-html tags like, say, ng-click

were causing the parser to stop producing elements for the node after the offending one.

I'm not an Elm user but I'm going to build a service, similar to this one, to convert HTML to HyperScript and I'd like to discuss one specific aspect with interested person.

I see that currently html-to-elm just trims all whitespace around text. Hovewer, this is not correct in general case. Trailing and leading space around and inside inline tags is significant. For example, this:

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>  

currently translates to this:

div [] [ 
  span [] [ text "1" ],
  span [] [ text "2" ],
  span [] [ text "3" ]
]

but should be converted to this:

div [] [ 
  span [] [ text "1" ], text "\n",
  span [] [ text "2" ], text "\n",
  span [] [ text "3" ], text "\n"
]

because inline tags are part of the big imaginary text block inside div. This space acts not as leading or trailing but as space between words! Sorry if I messed up with syntax, as I said I'm not an Elm user.

There are three possible approaches here:

Strip all trailing whitespace (current one)

+ simple to implement

• leads to "glued" words in some cases. Must be fixed manually.

Keep all trailing whitespace

+ simple to implement

• leads to excessive whitespace in some cases. Must be fixed manually.

Different whitespace handling, depending on tags types (heuristic)

+ correct output in most cases

• correctness is not guaranteed, as CSS may redefine which tags are inline and which are block
• complex to implement

What do you think about it? Which approach should we prefer and why?
Did that whitespace issue occur in your practice?

Another one :)

If I paste in the following snippet:

            <div class="navbar-collapse collapse" id="navigation">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="index.html">Home</a>
                    </li>
                    <li class="active"><a href="/cheeses">Our Cheeses</a>
                    </li>
                    <li class="active"><a href="/baskets">Gift Baskets</a>
                    </li>
                    <li class="active"><a href="/platters">Event Platters</a>
                    </li>
                    <li class="active"><a href="/tastings">Cheese Tastings</a>
                    </li>
                </ul>
            </div>

I get

div [ class "navbar-collapse collapse", id "navigation" ]
    [ ul [ class "nav navbar-nav navbar-left" ]
        [ li [ class "active" ]
            [ a [ href "index.html" ]
                [ text "Home" ]
        , li [ class "active" ]
            [ a [ href "/cheeses" ]
                [ text "Our Cheeses" ]
        , li [ class "active" ]
            [ a [ href "/baskets" ]
                [ text "Gift Baskets" ]
        , li [ class "active" ]
            [ a [ href "/platters" ]
                [ text "Event Platters" ]
        , li [ class "active" ]
            [ a [ href "/tastings" ]
                [ text "Cheese Tastings" ]
        ]

it looks like each of the lis are missing the closing bracket for the list of child elements. The top div is also missing its closing bracket.

Thanks again, though, for making this!

Currently for any html attributes that take bools or ints, such as <input readonly=true> or <input tabindex=2>, the generic Html.Attribute.attribute function is used for the conversion. For example, tabindex=2 will be converted to attribute "tabindex" "2" rather than the preferable tabindex 2 from Html.Attribute.tabindex.

For bool attributes, it should be able to handle the absence of an attribute value, such as <input readonly>, and convert that to input [readonly True] []

Inline styles aren't currently formatted properly.

Input:

<div style="background-color: red;"></div>

Current output

div [ style "background-color: red;" ]
    []

Expected output

div [ style [("background-color", "red") ]
    []

Thanks!

If you input:

<div style="background-image: url(&quot;avatar.jpg&quot;);"></div>

The result is:

div [ attribute "style" "background-image: url("avatar.jpg");" ]
  []

Which is not valid elm code.
It should escape the double quotes:

div [ attribute "style" "background-image: url(\"avatar.jpg\");" ]
  []

Input

<div>
  Text
  <span></span> <!-- "" -->
  Text
  <span>aaa</span>
</div>

Actual Output

div []
    [ text "Text  "
    , span []
        []
    ]

Expected Output

div []
    [ text "Text  "
    , span []
        []
    , text "  Text  "
    , span []
        [ text "aaa" ]
    ]

Hi all, I just want to inform you the copy button not working properly.

I would very much like to use this in a project I am working on

Hi there,

First of all, thanks for your great work! This tool really saves a lot of time!

I experienced some mismatches when trying to convert attributes like novalidate or required. The documentation of the elm-lang/html-package expects either of these functions to be called with a Bool, but instead the parser delivers an empty String.

Here's an example:

<div class="form-group">
  <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
  <p class="help-block text-danger"></p>
</div>

becomes

div [ class "form-group" ]
    [ input [ class "form-control", attribute "data-validation-required-message" "Please enter your name.", id "name", placeholder "Your Name *", required "", type' "text" ]
        []
    , p [ class "help-block text-danger" ]
        []
    ]

So required as an attribute in HTML should be parsed to required True instead of required "". From my experience the same applies to novalidate. Maybe there's other attributes that expect a Bool instead of a String.

Let me know if there's anything else you need :)

Currently, the program suppose the following imports

import Html exposing (..)
import Html.Attributes exposing (..)

(maybe the same with Events)

In my codes, I'm doing import Html exposing (..)
a lot but almost never import Html.Attributes exposing (..).

It would be nice if the program let the user choose what kind of
import he wants. It may be limited choices like :

• first radio group : " import Html exposing (..) or import Html"
• second radio group : "import Html.Attributes exposing (..)" or "import Html.Attributes" or "import Html.Attributes as Attributes"
• the same for Events.

I paste in:

<div class="navbar navbar-default yamm" role="navigation" id="navbar">
        <div class="container">
            <div class="navbar-header">

                <a class="navbar-brand home" href="index.html" data-animate-hover="bounce">
                    <img src="img/logo.png" alt="Cheese Palette logo" class="hidden-xs">
                    <img src="img/logo-small.png" alt="Cheese Palette logo" class="visible-xs"><span class="sr-only">Cheese Palette - go to homepage</span>
                </a>
                <div class="navbar-buttons">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-align-justify"></i>
                    </button>
                    <a class="btn btn-default navbar-toggle" href="basket.html">
                        <i class="fa fa-shopping-cart"></i>  <span class="hidden-xs">3 items in cart</span>
                    </a>
                </div>
            </div>

            <div class="navbar-collapse collapse" id="navigation">

                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="index.html">Home</a>
                    </li>
                    <li class="active"><a href="/cheeses">Our Cheeses</a>
                    </li>
                    <li class="active"><a href="/baskets">Gift Baskets</a>
                    </li>
                    <li class="active"><a href="/platters">Event Platters</a>
                    </li>
                    <li class="active"><a href="/tastings">Cheese Tastings</a>
                    </li>
                </ul>

            </div>

            <div class="navbar-buttons">

                <div class="navbar-collapse collapse right" id="basket-overview">
                    <a href="/cart" class="btn btn-primary navbar-btn"><i class="fa fa-shopping-cart"></i><span class="hidden-sm">3 items in cart</span></a>
                </div>
            </div>
        </div>
    </div>

But I only get

div [ class "navbar navbar-default yamm", id "navbar", attribute "role" "navigation" ]
    [ div [ class "container" ]
        [ div [ class "navbar-header" ]
            [ a [ class "navbar-brand home", attribute "data-animate-hover" "bounce", href "index.html" ]
                [ img [ alt "Cheese Palette logo", class "hidden-xs", src "img/logo.png" ]
                    []
                , img [ alt "Cheese Palette logo", class "visible-xs", src "img/logo-small.png" ]
                    []
                , span [ class "sr-only" ]
                    [ text "Cheese Palette " ]
                ]

back out. Only the beginning of the content was translated. The rest seems to be skipped for some reason.

Thanks for writing this neat tool!

input

<div>a "quoted" word</div>

expected output

div []
    [ text "a \"quoted\" word" ]

actual output

div []
    [ text "a "quoted" word" ]

Can the output have some patterns replaced based on a series of simple rules?

For example, with the following output:

svg [ height "327", width "763", attribute "xmlns" "http://www.w3.org/2000/svg" ]
    [ node "path" [ attribute "d" ...
    ...

maybe replace node "path" with path, attribute "d" with d and attribute "xmlns" with xmlSpace

If a simple dictionary of these correspondences can be maintained, the output could look much better.

Trying to convert the following template (from RealWorld project) fails part way because of a single quote in the plaecholder attribute

<form>
  <fieldset>
    <fieldset class="form-group">
      <input type="text" class="form-control" placeholder="What's this article about?">
    </fieldset>
    <button class="btn btn-lg pull-xs-right btn-primary" type="button">
      Publish Article
    </button>
  </fieldset>
</form>

and returns

form []
    [ fieldset []
        [ fieldset [ class "form-group" ]
            []
        ]
    ]

Compared to...

<form>
  <fieldset>
    <fieldset class="form-group">
      <input type="text" class="form-control" placeholder="Whats this article about?">
    </fieldset>
    <button class="btn btn-lg pull-xs-right btn-primary" type="button">
      Publish Article
    </button>
  </fieldset>
</form>

and...

form []
    [ fieldset []
        [ fieldset [ class "form-group" ]
            [ input [ class "form-control", placeholder "Whats this article about?", type_ "text" ]
                []
            ]
        , button [ class "btn btn-lg pull-xs-right btn-primary", type_ "button" ]
            [ text "Publish Article    " ]
        ]
    ]

Hi thanks for this handy tools ! Really good thing.

We all know that Elm compiled to JavaScript to run on browser but you probably don't want it to be recognized as a JavaScript app right?

Since you are hosting your app on Github (gh-pages branch) I suggest you use travis to build your gh-pages branch, just like what I did here so that

Anyway if you are fine with your approach then feel free to close. I might contribute if you are interestred =)

Trying out https://mbylstra.github.io/html-to-elm with flowbite examples
generates Elm that requires imports and post-processing. Problem mainly
lies in need for qualified Svg imports.

For reference here is a script that works with sed on osx that corrects the output
for the samples on this page https://flowbite.com/docs/components/sidebar

#!/bin/bash

# Fixes output from https://mbylstra.github.io/html-to-elm
# Assumes imports:
#
#  import Html exposing (..)
#  import Html.Attributes exposing (..)
#  import Svg
#  import Svg.Attributes

sed -i .bak \
    -e 's/ d "/ Svg.Attributes.d "/g' \
    -e 's/ svg \[ class "/ Svg.svg [ Svg.Attributes.class "/g' \
    -e 's/ path / Svg.path /g' \
    -e 's/ viewBox "/ Svg.Attributes.viewBox "/g' \
    -e 's/ fill "/ Svg.Attributes.fill "/g' \
    Main.elm

Not sure if this is a new change in 0.18 but the online html to elm tool changes type to type' instead of type_ (the later being the correct one in elm 0.18)