donpark / html2jade

Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.
MIT License
1.18k stars 156 forks source link

Datalist aren't converting properly #109

Open seanmavley opened 8 years ago

seanmavley commented 8 years ago

This is what I get:

.medium-6.columns
    label
      | Arrival
      input(list='arrival', type='text', placeholder='Arrival', required='', autocomplete='')
      datalist#arrival
      select(name='arrival')
        option
        option(value='individual') Individual
        option(value='organization') organization

When I put in this:

<div class="medium-6 columns">
    <label>Arrival
        <input list='arrival' type='text' placeholder="Arrival" required autocomplete />
        <datalist id="arrival">
            <select name="arrival">
                <option></option>
                <option value="individual">Individual</option>
                <option value="organization">organization</option>
            </select>
        </datalist>
    </label>
</div>

However, the correct rendering should be

.medium-6.columns
    label
      | Arrival
      input(list='arrival', type='text', placeholder='Arrival', required='', autocomplete='')
      datalist#arrival
          select(name='arrival')
            option
            option(value='individual') Individual
            option(value='organization') organization

The select needs to be indented to make the datalist work, otherwise, the select creates a separate input field when rendered.

Forgive me if the issue is with http://html2jade.org, though it points back to this repo

donpark commented 8 years ago

bug confirmed. bug seems to be isolated to datalist element which is weird.

added to my todo-when-not-busy list. thx.

donpark commented 8 years ago

Turns out problem is fairly deep, stemming from using jsdom-little which is based on an old fork of jsdom and lacks definitions for datalist tag.

Switching to latest jsdom does fix the bug but has hard to ignore negative side-effects like:

  1. auto-insertion of empty head element when not present in HTML
  2. conditional comments get evaluted, removing contents for failed conditions.

1 is not serious but #2 is. And there may be other side-effects I overlooked.

Option A: patch jsdom-little to support missing elements. Putting time I don't have into legacy code seems like a waste. So, unless I get a PR, this option is not looking good.

Option B: patch 'jsdom'. This may be worth doing except I don't have the time at the moment.

Deferred for now.

seanmavley commented 8 years ago

Until it gets fixed, I think its only as easy as just indenting the datalist part after the conversion, as it happens to be the only tag element not converting properly. Thanks for looking into the issue.