https://github.com/teamwork/visual-dom-diff

Highlight differences between two DOM trees.
https://github.com/teamwork/visual-dom-diff

diffing dom-tree

Last synced: 3 days ago
JSON representation

Highlight differences between two DOM trees.

• Host: GitHub
• URL: https://github.com/teamwork/visual-dom-diff
• Owner: Teamwork
• License: mit
• Created: 2018-11-15T15:36:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T04:11:46.000Z (almost 2 years ago)
• Last Synced: 2024-09-17T02:05:13.744Z (about 2 months ago)
• Topics: diffing, dom-tree
• Language: HTML
• Homepage: https://teamwork.github.io/visual-dom-diff/
• Size: 872 KB
• Stars: 46
• Watchers: 45
• Forks: 11
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# visual-dom-diff

Highlight differences between two DOM trees.

## Installation

```

npm i visual-dom-diff

```

## Usage

```javascript

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 (``) followed by insertions (``).

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 (`` 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 `` 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.