// 'idroscalo/modern' is a 0.1K smaller export
// but it doesn't work in IE11 or legacy Edge
import {hydrate, init} from 'idroscalo';

// returns the MutationObserver with a special
// disconnect behavior (described later on)
// hydrate(root:Node, {...selectors}[, {...overrides}]):MutationObserver
const mo = hydrate(document, {

  // one or more CSS selectors
  '.specific-element': {

    // if specified, the init key is invoked when new
    // elements matching the selector are found
    [init]({target, selector}) {
      // selector here will be '.specific-element'
      // target is the element that is being initiated
      // this callback happens only *once* per element
      target.textContent = 'idroscalo';
    },

    // every other property will be attached as listener
    click({target}) {
      // by default, events are attached with options = false
      alert(`You clicked ${target.localName}`);
    },

    // if passed as Array, it is possible to specify options too
    mouseover: [
      ({target}) => {
        console.log(`hovered ${target.localName}`);
      },
      // every option can be passed around,
      // including `true` for capturing
      {once: true}
    ]
  },

  // selectors could be grouped too
  [['#special', '#popup']]: {
    click() {}
  }

  // an optional overrides object can be passed
  // by default, options is {subtree: true, childList: tree}
  // pass {attributes: true} with optional filters in case
  // selectors want to observe attributes changes as well
});

// if invoked, all listeners will be dropped *except*
// those attached as `{once: true}`, in case these
// haven't triggered already before.
mo.disconnect();