add some sugar to bling dot js

blingbling.js

const sugar = {
  on: function(names, fn) {
    names
      .split(' ')
      .forEach(name =>
        this.addEventListener(name, fn))
  },
  setAttributes: function(attrs) {
    Object.entries(attrs)
      .forEach(([key, val]) =>
        this.setAttribute(key, val))
  }
}

// shorthand querySelector: $('.foo') $('.child', context_node)
export const $ = (query, $context = document) =>
  Object.assign($context.querySelector(query), sugar)

// shorthand querySelectorAll: $$('.foo') $$('.child', context_node)
export const $$ = (query, $context = document) =>
  Object.assign(
    [...$context.querySelectorAll(query)]
    .map($el => Object.assign($el, sugar))
  , {
    on: function(names, fn) {
      this.forEach($el => $el.on(names, fn))
    },
    setAttributes: function(attrs) {
      this.forEach($el => $el.setAttributes(attrs))
    }
  })

the above, with some other extras, is now available from npm https://www.npmjs.com/package/blingblingjs

npm i blingblingjs