vdiff

Diffs two vd datastructures.

API

let ops = vdiff(e1, el2);

ops will be an array of zero or more operation objects like:

{
  "name": "add",
  "target": [0],
  "node": <Element>
}

The operation types are:

• For elements
  • add (node, index)
  • del (node)
  • replace (node, old)
  • move (index)
• For attributes:
  • attr-add (key, val)
  • attr-del (key)
  • attr-set (key, old, val)
• For the style property
  • style-add (key, val)
  • style-del (key)
  • style-set (key, old, val)
• For the classList property
  • class-add (val)
  • class-del (val)

They all have a target property, which is a vector that points to the affected element.

Each operation assumes that the previous one was applied. If the first 3 operations are del, each will thus target always the first element of the list (0).

Features

Element replacement

We assume that different nodeTypes will result in different underlying sub-trees worth replacing entirely.

This yields great performance for the vast majority of state transitions in applications.

Compound attribute diff

One of the most common changes that occurs in elements is narrowed down to two properties: style and class.

Both have underlying datastructures beyond their string representation. The style object of the DOMElement and its classList.

By applying the changes through those APIs instead of setAttribute, we accomplish substantial gains in performance, especially for classes:

https://plus.google.com/+PaulIrish/posts/APArpwWqew3

Key support

vdiff becomes more efficient if elements have a unique identifier. An id will be used if found, otherwise a custom key attribute is used.

Credits

Inspired by React's reconciliation strategy.