Support "diffable html"

[TheJaredWilcurt]

There is a library called diffable-html:

• https://github.com/algolia/diffable-html/blob/master/index.js

It is essentially just some hard coded settings passed in to htmlparser2. We already use htmlparser2 in this library, so no need to pull in diffable-html. Instead, we can reference their hardcoded settings and create our own settings and allow some more user-friendly worded options for users to be able to customize their snapshots.

• Pros:
  • Breaks up attributes on to multiple lines
• Cons:
  • removes comments
  • adds in inaccurate white-space ((text) vs ( text ))
  • Moves end tag to new line even if innerHtml is empty

Example:

<!--v-if-->
<!--v-if-->
<!--v-if-->
<span class="x">(<a href="https://github.com" class="y" data-whatever="true">Text</a>)</span>
<i class="fa fa-question"></i>
<th></th>
<!--v-if-->

<span class="x">
  (
  <a
    href="https://github.com"
    class="y"
    data-whatever="true"
  >
    Text
  </a>
  )
</span>
<i class="fa fa-question">
</i>
<th>
</th>

I think some people would be willing to give up correctness for the convenience of having all markup on separate lines.

[TheJaredWilcurt]

It's like night and day, huge improvements: <date-picker-stub appendtobody="true" clearable="true" confirmtext="OK" dateformat="M/D/YYYY" defaultvalue="Sat Aug 10 2019 00:00:00 GMT-0400 (Eastern Daylight Time)" disabled="true" disabledcalendarchanger="[Function]" disableddate="[Function]" disabledtime="[Function]" editable="true" format="M/D/YYYY" getclasses="[Function]" hourstep="1" inputattr="[object Object]" lang="en" minutestep="1" placeholder popupstyle="[object Object]" prefixclass="mx" scrollduration="100" secondstep="1" shortcuts timetitleformat="YYYY-MM-DD" titleformat="YYYY-MM-DD" type="date" valuetype="date"></date-picker-stub>

<date-picker-stub
  appendtobody="true"
  clearable="true"
  confirmtext="OK"
  dateformat="M/D/YYYY"
  defaultvalue="Sat Aug 10 2019 00:00:00 GMT-0400 (Eastern Daylight Time)"
  disabled="true"
  disabledcalendarchanger="[Function]"
  disableddate="[Function]"
  disabledtime="[Function]"
  editable="true"
  format="M/D/YYYY"
  getclasses="[Function]"
  hourstep="1"
  inputattr="[object Object]"
  lang="en"
  minutestep="1"
  placeholder
  popupstyle="[object Object]"
  prefixclass="mx"
  scrollduration="100"
  secondstep="1"
  shortcuts
  timetitleformat="YYYY-MM-DD"
  titleformat="YYYY-MM-DD"
  type="date"
  valuetype="date"
>
</date-picker-stub>

[TheJaredWilcurt]

Ultimately ended up completely writing my own diffable formatter from scratch, as all the pre-made options lacked configurability.

• https://github.com/tjw-lint/vue3-snapshot-serializer/blob/main/src/formatMarkup.js