Teamwork / visual-dom-diff

Highlight differences between two DOM trees.
https://teamwork.github.io/visual-dom-diff/
MIT License
47 stars 11 forks source link

Tables always appear to have changed when spaces occur between table tags #6

Closed diesburgm closed 4 years ago

diesburgm commented 4 years ago

I noticed on the preview page that if the an HTML table has spaces between some of the tags it always flags the table as being different.

If you add a new unit test it demonstrates this.

[
  'table - with spaces',
  htmlToFragment('<table> <tbody> <tr> <td>one</td> </tr> </tbody> </table>'),
  htmlToFragment('<table><tbody><tr><td>one</td></tr></tbody></table>'),
  '<table><tbody><tr><td>one</td></tr></tbody></table>',
  undefined,
],

Results in.

Expected: "<table><tbody><tr><td>one</td></tr></tbody></table>"
Received: "<table class=\"vdd-removed\"> <tbody> <tr> <td>one</td> </tr> </tbody> </table><table class=\"vdd-added\"><tbody><tr><td>one</td></tr></tbody></table>"

Even fails if both tables have same spaces:

[
  'table - with spaces',
  htmlToFragment('<table> <tbody> <tr> <td>one</td> </tr> </tbody> </table>'),
  htmlToFragment('<table> <tbody> <tr> <td>one</td> </tr> </tbody> </table>'),
  '<table> <tbody> <tr> <td>one</td> </tr> </tbody> </table>',
  undefined,
],

results in:

Expected: "<table> <tbody> <tr> <td>one</td> </tr> </tbody> </table>"
Received: "<table class=\"vdd-removed\"> <tbody> <tr> <td>one</td> </tr> </tbody> </table><table class=\"vdd-added\"> <tbody> <tr> <td>one</td> </tr> </tbody> </table>"
gkubisa commented 4 years ago

In order to simplify the implementation (and avoid a performance cost),visual-dom-diff assumes inputs contain only relevant, normalized data. As a result, extraneous data, like redundant spaces between certain tags, leads to sub-optimal diffs. If it affects you, I'd recommend pre-processing your input documents to a format that visual-dom-diff can handle properly. I think it is preferable over bloating the library with workarounds and options to support special cases.