bling dot js

readme.md

bling.js

Because you want the $ of jQuery without the jQuery.

---

You may be interested in bling.js if you get tired of the Array.from(document.querySelectorAll('.foo')).forEach(… rodeo. It does this:

// forEach over the qSA result, directly.
document.querySelectorAll('input').forEach(el => /* ... */);

// on() rather than addEventListener()
document.body.on('dblclick', evt => /* ... */);

// classic jQuery + on()
$$('p').on('click', el => /* ... */);

It doesn't do anything else. This is not a jQuery equivalent.

Notes:

• on() works on elements, document, window, and results from querySelector & querySelectorAll.
• $ is qSA so if you're grabbing a single element you'll have to [0] it.
  • In Nov 2024 I made a breaking change (ya know, 10yrs later) where $$ is qSA and $ is qS. This matches how these symbols are defined within DevTools Console.
• Bling plays well with authoring ES6 (and beyond!)
• Resig explored this stuff a while ago: github.com/jeresig/nodelist
• Bling works everywhere.

Nerdy implementation notes:

• The NodeList prototype usually inherits from Object, so we move it to Array.
• I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget. 2024 Paul here: whelp, they added iterable to NodeList but not EventTarget. seems good.
• Setting Node.prototype.on = EventTarget.prototype.addEventListener is awesome. It works in Chrome/FF but not yet in IE/Safari.
• I haven't set up any off() or trigger() to map to dispatchEvent & removeEventListener. I'm OK with that.
  • See comments for alternatives where folks have more fleshed out editions of this.

Typescript declaration

(Added 2024..)

declare global {
  interface Node {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
  }

  interface Window {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
    $(selector: string): Element | null;
    $$(selector: string): NodeListOf<Element>;
  }

  interface NodeList extends Array<Node> {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
  }
}

bling.js

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

Updated the impl today (just slightly). $ was qSA but.. I made it qS and introduced $$ as qSA. This matches the behavior that's in our browser devtools' console. (And what I typically manually change whenever I grab this script).

Also, obviously the comments are full of far more fully featured and well packaged scripts that are similar, but more.

Apologies for the email on something you commented on 10 years ago. <3 have a nice friday!