attribute case is not preserved when converting from html

[pdeva]

Eg- this piece of code from a valid angular template becomes error prone when converted to jade cause ngModel is converted to ngmodel

<div class="container">
  <h1>User info</h1>
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>User Email</label>
      <input type="text" [(ngModel)]="email" ngControl="email" #spy="" required="" class="form-control"/>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

[donpark]

As you probably know tag and attribute names are case-insensitive in HTML and common convention is to use lower-case which got slipped into html2jade at some point for reasons I don't recall.

I just checked Jade and it does preserve attribute name case.

Since I don't want to introduce incompatibility with previous versions, I'll have to add an optional flag to preserve tag and attribute name case.

Can you tell me why you need attribute names' case to be preserved so I can understand your use-case?

[pdeva]

angular2 template syntax needs this. without this fix anyone using html to jade with angular2 template will run into issues

On Monday, December 28, 2015, Don Park [email protected] wrote:

As you probably know tag and attribute names are case-insensitive in HTML and common convention is to use lower-case which got slipped into html2jade at some point for reasons I don't recall.

I just checked Jade and it does preserve attribute name case.

Since I don't want to introduce incompatibility with previous versions, I'll have to add an optional flag to preserve tag and attribute name case.

Can you tell me why you need attribute names' case to be preserved so I can understand your use-case?

— Reply to this email directly or view it on GitHub https://github.com/donpark/html2jade/issues/102#issuecomment-167566054.

Prashant

[donpark]

@pdeva it turns out lowercasing of attribute name is done at DOM layer before html2jade sees them which means html2jade will have to either use HTML parser directly or find a DOM implementation that preserves attribute name case.

Unfortunately, neither options are pursuable time-wise. Punting for revisit later.

[donpark]

Just remembered that Angular uses two forms for attributes: dashed (like ng-model) and camelcased (like ngModel), later form intended for use in JavaScript.

Since I can't address this issue at this time, my suggested workaround is to write a short JS script that changes anything like "ngFoobar" to "ng-foobar". Sorry, this is the best I can do at this time. :-(

[pdeva]

the dashed form is no longer supported since angular2 beta

Prashant

On Mon, Dec 28, 2015 at 4:16 PM, Don Park [email protected] wrote:

Just remembered that Angular uses two forms for attributes: dashed (like ng-model) and camelcased (like ngModel), later form intended for use in JavaScript.

Since I can't address this issue at this time, my suggested workaround is to write a short JS script that changes anything like "ngFoobar" to "ng-foobar". Sorry, this is the best I can do at this time. :-(

— Reply to this email directly or view it on GitHub https://github.com/donpark/html2jade/issues/102#issuecomment-167682596.

[donpark]

do you have a link to an official doc saying that? I haven't been able to find any. - Don

[tb]

+1

Here is example from docs https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Syntax

<li *ngFor="#item of items; #i = index">...</li>
<li template="ngFor #item of items; #i = index">...</li>
<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>

Selectors

[ngFor][ngForOf]

I added failing test at https://github.com/tb/html2jade/commit/53e954b5a120ec5b92edc05ac474cb7e1887bf5a

[donpark]

thx for the example @tb but as I wrote above html2jade uses DOM API to support client-side generated HTML and thus only sees DOM normalized lowercased attribute names so this functionality cannot be implemented without uprooting everything.

When I get some spare time, I will look into htmlparser2, below DOM layer, which may expose the original attribute names and see whether it makes sense to switch or writing a completely new tool based on textual input makes more sense.

[jonscottclark]

Thanks for your work on this, @donpark, I'm also running into a case where tags and attribute name cases must be preserved.. on the fringe here :)

[thatmarvin]

Another use case — SVG names, like XML, are also case-sensitive.

[hsingh23]

Another case is almost all react components are title cased

[m-farahmand]

+1

[donpark]

Hi all. I've noticed that jsdom now supports xml parsing mode, enabling case-sensitivity, but my simple attempt to upgrade the module turned sour fast due to how much node and jsdom itself has changed over the years.

Thankfully, there is another relatively new module named html2pug and it appears to support case-sensitive conversion.