qsa-observer

qsa-observer

^{Social Media Photo by Kevin Maillefer on Unsplash}

Given an array of selectors, handles any matching element that was either connected, or disconnected, from an observed element, or document.

Differently from MutationObserver

• each element is granted to be handled, whenever it's observed via one, or more, selectors
• all observed elements will pass through handle(element, connected, selector) utility, per each matching selector
• elements injected through innerHTML, or created offline, will be handled too once live

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 {
  drop,     // an utility to drop a list of elements from being considered live
  flush,    // an utility to flush synchronously all queued mutations
  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

  // the method that receives all elements that match one or more
  // selectors in the query, and are either connected or disconnected
  handle(element, connected, selector) {
    const event = connected ? 'connected' : 'disconnected';
    console.log(element, event, selector);
  }
});

// example: add another selector to observe and pass through the handle
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');

Libraries based on qsa-observer

• custom-elements-ie
• custom-elements-builtin
• as-custom-element
• wicked-elements
• hooked-elements