Proposal: Rework internal html representation and diff logic

[qfox]

I think we should use posthtml-like (bemjson-like) structure for internal representation to make diff calculation process cleaner and more flexible.

Current reports are non-informative on big projects.
Current way we comparing html documents leak on big files and don't feel quotes in attributes.

That's why we should think about core code refactoring.

Representation proposal

HtmlNode {
  meta: MetaData, // Different meta data, raw string, another helpful data
  tag: String,
  classList: ClassesCollection, // Set of classes
  attrs: Object<String, HtmlAttr>, // Map of attributes with attrs meta info like quote types
  //? dataAttrs: Object<String, HtmlAttr>, // Map of data attributes
  content: Array<TextNode, CommentNode, HtmlNode>
}

Samples proposal

<button class="button2" data-bem='{"button2":{}}'></button2>

→

{ meta: { diff: 'subset' }, tag: 'button', classList: ['button2'] }

Report proposal

(Something like https://github.com/chaijs/deep-eql mixed with https://github.com/debitoor/chai-subset)

/x/path
-  tag: 'button'
+  tag: 'button2'
.or .selector
+  attrs.missed: 'attr'
button.or like.or__that
+  classList[2]: 'missed-class'

Futher possible features

• More accurate comparing methods where it needs (There is no difference between quoted and unquoted attrs #144, Optional case sensitivity for tags and attributes #146).
• More clean diff calculation logic and testing possibilities (Regexp doesn't work when used in class attribute #139, Сравнение <noscript> c учетом порядка элементов #136, Write unit tests on masks #127).
• HtmlNode can achieve additional fields to compare like bemEntities with a set of BemjsonNodes ot BemEntityNames.
• etc.