teamwork / visual-dom-diff Goto Github PK

View Code? Open in Web Editor NEW

42.0 45.0 11.0 893 KB

Highlight differences between two DOM trees.

Home Page: https://teamwork.github.io/visual-dom-diff/

License: MIT License

JavaScript 0.45% TypeScript 16.91% HTML 82.64%

diffing dom-tree

visual-dom-diff's Introduction

visual-dom-diff

Highlight differences between two DOM trees.

Installation

npm i visual-dom-diff

Usage

import { visualDomDiff } from 'visual-dom-diff'

const diffNode = visualDomDiff(originalNode, changedNode, options)

API

visualDomDiff(originalNode: Node, changedNode: Node, options?: Options): DocumentFragment

Returns a new document fragment with the content from the two input nodes and annotations indicating if the given fragment was removed, modified or added in the changedNode, ralative to the originalNode.

Changes to text content are represented as deletions (<del class="vdd-removed">) followed by insertions (<ins class="vdd-added">).

Changes to the document structure are indicated by adding the vdd-removed and vdd-added classes to the removed and inserted elements respectively.

Changes to formatting are treated as content modifications (<ins class="vdd-modified"> wraps the modified text) and only the new formatting is carried over to the returned document fragment.

Changes to attributes of structural elements are treated as modifications (vdd-modified class is added to the element) and only the new attributes are carried over to the returned document fragment.

Options

addedClass: string = 'vdd-added' The class used for annotating content additions.
modifiedClass: string = 'vdd-modified' The class used for annotating content modifications.
removedClass: string = 'vdd-removed' The class used for annotating content removals.
skipModified: boolean = false If true, then formatting changes are NOT wrapped in <ins class="vdd-modified"> and modified structural elements are NOT annotated with the vdd-modified class.
skipChildren: (node: Node): boolean | undefined Indicates if the child nodes of the specified node should be ignored. It is useful for ignoring child nodes of an element representing some embedded content, which should not be compared. Return undefined for the default behaviour.
skipSelf: (node: Node): boolean | undefined Indicates if the specified node should be ignored. Even if the node is ignored, its child nodes will still be processed, unless skipChildNodes says they should also be ignored. Ignored elements whose child nodes are processed are treated as formatting elements. Return undefined for the default behaviour.
diffText: (oldText: string, newText: string): Diff[] A function to use for diffing serialized representations of DOM nodes, where each DOM element is represented by a single character from the Private Use Area of the Basic Multilingual Unicode Plane. The default implementation is case sensitive and inteligently merges related changes to make the result more user friendly. See the source code for more details, especially if you want to implement a custom diffText function.

visual-dom-diff's People

Contributors

Stargazers

Watchers

Forkers

tristancaron ipip2005 diesburgm lucasleandro1204 newued rohitguptab sportskeeda enzolry zhangdahai112 agjohnson woltlab

visual-dom-diff's Issues

Failed to load in IE

This extra comma and some other syntax errors are causing script loading errors in IE. We're not able to use the library on IE browser.

When loading demo page on IE locally, also seen this error

Tables with rowspan or colspan is treated as invalid table

Add the following test.

[
  'table - with colspan',
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  htmlToFragment('<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2">col span</td></tr></tbody></table>'),
  '<table><tbody><tr><td>one</td><td>two</td></tr><tr><td colspan="2"</td></tr></tbody></table>',
  undefined,
],

Unit test fails.

Expected: "

<td colspan="2"

one	two

"
Received: "<table class="vdd-removed">onetwo<td colspan="2" <="" td=""><table class="vdd-added">onetwo<td colspan="2" <="" td="">"

Tableare considered removed + added when they are identical and inside a figure dom node

Step to reproduce :
compare two Dom tree identical but containing the following code :

<figure class="table table margins_1 pleine_largeur three_cols" contenteditable="false">
	<table>
		<tbody>
			<tr>
				<td contenteditable="true" colspan="3">
					<span style="display:inline-block;">Paris, Paris et Paris-La Défense, le 7 décembre 2018
					</span>
				</td>
			</tr>
			<tr>
				<td contenteditable="true" colspan="3">
					<span style="display:inline-block;">Les Commissaires aux Comptes
					</span>
				</td>
			</tr>
			<tr>
				<td contenteditable="true">
					<span style="display:inline-block;">BM&amp;A
					</span>
				</td>
				<td contenteditable="true">
					<span style="display:inline-block;">DENJEAN &amp; ASSOCIES AUDIT
					</span>
				</td>
				<td contenteditable="true">
					<span style="display:inline-block;">ERNST &amp; YOUNG Audit
					</span>
				</td>
			</tr>
			<tr>
				<td contenteditable="true">
					<span style="display:inline-block;">Eric Seyvos
					</span>
				</td>
				<td contenteditable="true">
					<span style="display:inline-block;">Thierry Denjean
					</span>
				</td>
				<td contenteditable="true">
					<span style="display:inline-block;">Pierre Abily
					</span>
				</td>
			</tr>
		</tbody>
	</table>
</figure>

the Results show the table with class vdd-removed then with vdd-added

Prevent text diffing across node borders

Hi @gkubisa, thanks for this great library!

I'm running into a bit of a strange issue in certain diffing scenarios, where the text is diffed all as one, instead of being interrupted by block-level nodes. This is leading to paragraphs that have not changed being duplicated. Here's an example:

Ideally this diff wouldn't touch the unchanged paragraphs.

Interestingly it only happens if the deleted and added text reaches a certain length compared to the unchanged paragraphs:

Any ideas how this can be solved?

Table shown as added/deleted even if there are no changes to the table

@gkubisa @ipip2005 Appreciate the work on this library! It perfectly fits our requirements except for the behaviour with tables.

I have a table where there are no changes, it is still shown as deleted and then added in the final differenced HTML. Is there a way this can be omitted from the output? Also, if I have made any changes inside the table, it should show that only that specific change has been done in that cell and not that the entire table has changed.

Add a `skipModified`option to the demo

Is it possible to do a word-by-word diffing?

Hi,
First I want to appreciate your effort of making this library. It fits our use case perfectly and we're considering using this library on our UI.
When trying it, we found something that is not quite straightforward in the real world paragraph comparison.
For example, in following cases, we are expecting word-by-word diffing instead of character-by-character:
I changed "some" to "same"

I changed from "I love accessibility" to "I have accountability"

validatetable function works incorrectly

When a table includes text nodes between tr's or td's validatetable function works incorrently. Look at following sample:

First html includes space between tags:
<table> <tr> <td>test</td></tr></table>

Second html includes no space between tags:
<table><tr><td>test</td></tr></table>

validate table function validates second html but returns false for first html because of space chars between tags.

When i examined validate table function I realized that validatetable function works with childNodes of node element. I think it must work with children element which includes the same data with childNodes element except text nodes.

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

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>"