search

mbylstra / html-to-elm

An online tool for converting HTML to elm-html. Go to
http://mbylstra.github.io/html-to-elm/
395 stars 23 forks source link

Attribute outputs cause mismatches #14

Closed PhilippMeissner closed 8 years ago

PhilippMeissner commented 8 years ago

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 :)

mbylstra commented 8 years ago

HI Phillip, I'm glad this has been helpful for you.

Thanks for the detailed error report. It's good that you picked this up, as I imagine this must be causing a lot of problems for people, as boolean attributes are quite common. It's also a problem for int attributes such as tabindex.

I've made a quick fix which is to remove any bool or int attributes from the "attribute function whitelist". What this means is that now any int or bool attributes will be converted using the Html.Attribute.attribute function.

Eg: <input readonly> will be converted to input [ attribute "readonly" "" ] []. This should successfully compile now, although it's not ideal. I've created another issue to improve things: https://github.com/mbylstra/html-to-elm/issues/16.

This is what your example looks like with the latest version:

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