qsa-observer

qsa-observer

A way to be notified about any element that was connected, or disconnected, from a container.

Differently from MutationObserver

• each element is granted to be passed along utilities, whenever it's observed via one, or more, selectors
• an element will pass through a setup(element, selector) utility, and per each matching selector
• elements injected through innerHTML, within nested elements, will be parsed too
• all elements that had a setup will pass through an update(element, connected) utility

Example

import QSAO from 'qsa-observer';

// an Array of CSS selectors to observe
const query = ['div'];

// where to observe mutations, document by default
const root = document;

const {
  matches,  // an utility to retrieve the matches method of a generic element
  observer, // the MutationObserver created by QSAO(...)
  parse     // an utility to parse new elements
            // (i.e. after adding a selector to the query list)
} = QSAO({
  query,  // list of selectors to observe
  root,   // optional, as it's document by default

  // either a (weak) Set or Map to flag elements as already setup
  cache: new WeakSet,

  // invoked when a new element (not in cache) is connected
  setup(element, selector) {
    // prevents the element from passing through a setup next time
    this.cache.add(element);
    console.log(element, selector, 'initialized');

    // pass through the connected dance, if necessary, as the setup
    // occurs only when an element is being connected, but no update
    // would happen in such case, as the setup can optionally take care of it
    this.update(element, true);
  },

  // invoked when a known element (in cache) changes state
  update(element, connected) {
    console.log(element, connected ? 'connected' : 'disconnected');
  }
});

// example: add another selector to observe and passes through the setup
const observeMore = selector => {
  if (!query.includes(selector)) {
    query.push(selector);
    parse(root.querySelectorAll(selector));
  }
};

// example: watch 'p' nodes too after a second
setTimeout(observeMore, 1000, 'p');