muty

An attempt at a more intuitive API wrapper around W3C DOM MutationObserver

Usage no npm install needed!

<script type="module">
  import muty from 'https://cdn.skypack.dev/muty';
</script>

README

muty

Build Status

The W3C DOM MutationObserver API is verbose and unintuitive. This wrapper simply aims to make DOM observation terse and obvious.

What?

Exposes:

// 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
var editor = 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. Use Mutation Summary instead.
  • A MutationObserver polyfill for non-supporting browsers. Use Mutation Watcher instead.
  • A perfect API:
    • Curry it if you want intermediary partially applied observers.
    • Use flyd (for Fantasy Land streams) or Bluebird (for Promises) if you have opinionated async data flow requirements.