BFF

Module: bff/patch-dom

(require("bff/patch-dom"))(target, source [, options])

Patches the target element and its child elements such that it will be identical to the source element and its child structure. It achieves this by recursively patching, removing or adding elements in the target element hierarchy. The overall logic of the algorithm goes as follows:

  • If the target and source elements have differing node type types (e.g. a <div> and a <span> tag) the target element is replaced by the source element.
  • Otherwise, if the target and source elements are of the same type (e.g. two <div> tags), the attributes of the target element will be replaced by those of the target element. Then the target and source elements' children lists are compared using a version of the Levenshtein algorithm. This results in the children of the target element being either patched (by calling patchDom recursively) or removed. Child elements only present in the source child list will also be added to the target child list at their respective positions.

If any encountered target elements has a patch-ignore attribute, that node and its children will not be patched.

Parameters:
Name Type Argument Description
target HTMLElement

The element (hierarchy) to be patched. Will be identical to the source element (hierarchy) after the function call completes.
source HTMLElement

The element (hierarchy) that the target (hierarchy) will be transformed into.
options Object <optional>

Options that will be recursively passed down to all patchDom calls. Currently only one option is implemented:

  • ignoreSubtreeOf: A CSS selector string that identifies any elements, whose subtrees will not be patched.
Source: