Format HTML template files as a pre-commit hook

[gashcrumb]

Now that we have it for typescript, json, css and scss files, we should have the same for HTML files to help @kahboom maintain sanity.

[gashcrumb]

Couple options here at least with html-beautify when it comes to aligning attributes, first is force-align which looks like:

# command so I don't forget :-)
yarn html-beautify -I -A force-aligned -s 2 ./src/app/integrations/list/list.component.html

<div class="integrations list">

  <syndesis-modal [title]="'Confirm ' + getActionTitle()"
                  [message]="'Are you sure you would like to ' + getAction() + ' the \'' + selectedIntegration?.name + '\' integration?'">
  </syndesis-modal>

  <!-- List Container -->
  <pfng-list [items]="integrations"
             [config]="listConfig"
             [itemTemplate]="itemTemplate"
             [actionTemplate]="actionTemplate"
             (onActionSelect)="handleAction($event, undefined)"
             (onClick)="handleClick($event)">
    <ng-template #itemTemplate
                 let-integration="item"
                 let-index="index">
      <div class="list-pf-left integration-icons">
        <span *ngIf="getStart(integration).connection; let connection">
          <img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
        </span>
        <span class="fa fa-angle-right"></span>
        <span *ngIf="getFinish(integration).connection; let connection">
          <img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
        </span>
      </div>
      <div class="list-pf-content-wrapper">
        <div class="list-pf-main-content integration-content">
          <div *ngIf="complete"
               class="list-pf-title name">{{ integration.name }}</div>
          <div class="list-pf-description description">
            {{ complete ? integration.description : integration.name }}
          </div>
        </div>

And then force which just indents attributes 1 tab width:

yarn html-beautify -I -A force -s 2 ./src/app/integrations/list/list.component.html

<div class="integrations list">

  <syndesis-modal [title]="'Confirm ' + getActionTitle()"
    [message]="'Are you sure you would like to ' + getAction() + ' the \'' + selectedIntegration?.name + '\' integration?'">
  </syndesis-modal>

  <!-- List Container -->
  <pfng-list [items]="integrations"
    [config]="listConfig"
    [itemTemplate]="itemTemplate"
    [actionTemplate]="actionTemplate"
    (onActionSelect)="handleAction($event, undefined)"
    (onClick)="handleClick($event)">
    <ng-template #itemTemplate
      let-integration="item"
      let-index="index">
      <div class="list-pf-left integration-icons">
        <span *ngIf="getStart(integration).connection; let connection">
          <img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
        </span>
        <span class="fa fa-angle-right"></span>
        <span *ngIf="getFinish(integration).connection; let connection">
          <img src="../../../assets/icons/{{ connection.connectorId }}.integration.png">
        </span>
      </div>
      <div class="list-pf-content-wrapper">
        <div class="list-pf-main-content integration-content">
          <div *ngIf="complete"
            class="list-pf-title name">{{ integration.name }}</div>
          <div class="list-pf-description description">
            {{ complete ? integration.description : integration.name }}
          </div>
        </div>

I also thought diffable-html looked interesting as well in that the goal was to make it easier to see HTML diffs. @kahboom @deeleman @seanforyou23 thoughts?

[kahboom]

@gashcrumb thanks for creating this! I kinda like the way it looks pre-force but that's just a matter of opinion. I'm happy with either.

As for diffable-html, do you mean so that we can use inline templates instead of external HTML files, or could you provide a specific use case? Sorry, Monday brain on a Tuesday.. it happens.

[gashcrumb]

As for diffable-html, do you mean so that we can use inline templates instead of external HTML files, or could you provide a specific use case? Sorry, Monday brain on a Tuesday.. it happens.

The goal here is to make it easier to see changes done to HTML files, i.e. when attributes are added/deleted or the text content of a tag changes etc. Mostly handy for the person reviewing a PR than anything I think.

I think @deeleman's preference was for the force behavior instead of force-aligned where attributes are aligned vertically with the first attribute, but I can wait until he gets back to voice his opinion :-)

[kahboom]

@gashcrumb Ah that makes sense, then I don't see any major disadvantage to trying it out if nobody has objections.

As for the force behavior, I don't really have a strong opinion about it, just happy to see attributes on separate lines tbh. I don't mind if we stuck with force.