meeshkan / mutation-observer-applier

Apply MutationObserver mutations to a DOM.

Mutation Observer Applier

Apply MutationObserver mutations to a DOM.

This library takes mutations consumed by a Mutation Observer and applies them to a DOM successively to get a sequence of DOMs. It is like diff-patch-match, but for DOMs.

How it works

The API consists of a single class, MutationObserverApplier, with two main functions:

• serializeMutations(mutations: MutationRecord[]): IMutationRecord[]; - serialize a list of mutations emitted by the DOM.
• applyMutations(serializedMutations: IMutationRecord[]): void; - apply serialized mutations. The resulting DOM is present on this.DOM.

For examples of these two functions in use, please see the tests.

The library is written in typescript and uses the standard Web API types defined in lib.dom.d. For example, MutationRecord is defined here.

How it is used

At Meeshkan, we use this library to create videos of interactions with a DOM. Since it was incorporated into our stack, it has reduced the CPU usage of our recording script by ~70%.

License

MIT © Meeshkan