idr

idroscalo

Automatic events hydration through CSS selectors.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

8

Maintenance

Last Commit

3mos ago

Contributors

0

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

idroscalo

Social Media Photo by coolinmilan.it

Idroscalo name plays with the words "hydration" and "scale", bringing in ~0.5K everything it's needed to hydrate specific element within a document, or any other container.

// '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();

Differently from element-notifier and qsa-observer, this module goal is only to hydrate listeners and, optionally, initialize some element, without needing to care at all about elements lifecycle.

If you need anything fancier, you could also consider wicked-elements, which is just twice as big, but it has more features, in terms of components behavior.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100