Noosphere Possibilities Maximized

    qsa-observer

    2.0.2 • Public • Published

    qsa-observer

    bird watch

    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

    Install

    npm i qsa-observer

    DownloadsWeekly Downloads

    690

    Version

    2.0.2

    License

    ISC

    Unpacked Size

    15.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • webreflection