muty

The W3C DOMMutationObserverAPI is verbose and unintuitive. This wrapper makes DOM observation terse and obvious.

What?

Exposes:

<scriptsrc=//unpkg /muty/script.js></script>
<scriptsrc=//unpkg /muty/module.jstype=module></script>

importmutyfrom'muty'
// or
varmuty=require('muty')

// A single function for mutation observation
muty(options,element,callback)// => MutationObserver

// An options object with all boolean flags set to true for broad capture
muty.options

Allowing:

// Blanket logging of all DOM mutations
muty(muty.options,document,function(records){console.log(records)})

// In application code, maybe something like this
vareditor=document.querySelector('[contenteditable]')

muty(
{characterData:true,subtree:true},
editor,
function(mutations,observer){
editor.classList.add('changed')

observer.disconnect()
}
)

What not?

• A MutationRecord processor, or any kind of higher-level abstraction. UseMutation Summaryinstead.
• A MutationObserver polyfill for non-supporting browsers. UseMutation Watcherinstead.
• A perfect API:
  • Curryit if you want intermediary partially applied observers.
  • Useflyd(forFantasy Landstreams) orBluebird(for Promises) if you have opinionated async data flow requirements.