[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": ".github/workflows/main.yml", "content": "name: Ava Tests\non: [push, pull_request]\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@master\n - name: Install\n uses: ianwalter/playwright-container@v3.0.0\n - name: Install NPM Deps\n uses: ianwalter/playwright-container@v3.0.0\n with:\n args: npm i\n - name: Test\n uses: ianwalter/playwright-container@v3.0.0\n with:\n args: npm test\n" }, { "path": ".gitignore", "content": "node_modules/\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 Adam Argyle\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "# BlingBlingJS\n

\n \"Build\n \"Total\n \"Latest\n \"License\"\n

\n\n> like [bling.js](https://gist.github.com/paulirish/12fb951a8b893a454b32), but more bling\n\n
\n\n###### Getting Started\n### Installation\n```bash\nnpm i blingblingjs\n```\n\n### Importing\n```js\n// import the blingbling y'all\nimport $ from 'blingblingjs' // es6 module\nconst $ = require('blingblingjs') // commonjs\n\n// or from Pika CDN! https://cdn.pika.dev/blingblingjs/v2\n```\n\n### [Bookmarklet](https://github.com/argyleink/blingblingjs/issues/42)\n```js\njavascript: fetch('https://cdn.jsdelivr.net/npm/blingblingjs@latest/dist/index.min.js').then((x) => x.text()).then((x) => {\n eval(x); $ = $.default;\n console.log(\"💲 BlingBlingJS ready 💲\");\n});\n```\n\n
\n\n###### Syntax\n\n### Quick Overview\n```js\n$() // select nodes in document or pass nodes in\n$().on // add multiple event listeners to multiple nodes\n$().off // remove multiple event listeners from multiple nodes\n$().attr // CRUD attributes on nodes\n$().map // use native array methods\n```\n\n
\n\n### Queries\n```js\n// get nodes from the document\nconst btns = $('button') // blingbling always returns an array\nconst [first_btn] = $('button[primary]') // destructure shortcut for 1st/only match\nconst btn_spans = $('span', btns) // provide a query context by passing a 2nd param of node/nodes\n\n// cover DOM nodes in bling\nconst [sugared_single] = $(document.querySelector('button'))\nconst sugared_buttons = $(document.querySelectorAll('button'))\n```\n\n
\n\n### Array Methods\n```js\n$('button').forEach(...)\n$('button').map(...)\n\nconst btns = $('button')\nbtns.filter(...)\nbtns.reduce(...)\nbtns.flatMap(...)\n...\n```\n\n
\n\n### Events\n```js\n// single events\nfirst_btn.on('click', ({target}) => console.log(target))\n$('button[primary]').on('click', e => console.log(e))\n\n// single events with options\nfirst_btn.on('click', ({target}) => console.log(target), {once: true})\n$('button[primary]').on('click', e => console.log(e), true) // useCapture\n\n// multiple events\n$('h1').on('click touchend', ({target}) => console.log(target))\n\n// remove events\nconst log_event = e => console.warn(e) // must have a reference to the original function\nmain_btn.on('contextmenu', log_event)\nmain_btn.off('contextmenu', log_event)\n```\n\n
\n\n### Attributes\n```js\n// set an attribute\n$('button.rad').attr('rad', true)\n\n// set multiple attributes\nconst [rad_btn] = $('button.rad')\nrad_btn.attr({\n test: 'foo',\n hi: 'bye',\n})\n\n// get an attribute\nrad_btn.attr('rad') // \"true\"\nrad_btn.attr('hi') // \"bye\"\n\n// get multiple attributes\n$('button').map(btn => ({\n tests: btn.attr('tests'),\n hi: btn.attr('hi'),\n}))\n\n// remove an attribute\nrad_btn.attr('hi', null) // set to null to remove\nrad_btn.attr('hi') // attribute not found\n\n// remove multiple attributes\nbtns.attr({\n test: null,\n hi: null,\n})\n```\n\n
\n\n### Convenience\n```js\nimport {rIC, rAF} from 'blingblingjs'\n\n// requestAnimationFrame\nrAF(_ => {\n // animation tick\n})\n\n// requestIdleCallback\nrIC(_ => {\n // good time to compute\n})\n```\n\n
\n
\n\n###### What for?\n**Developer ergonomics!** \nIf you agree with any of the following, you may appreciate this micro library:\n* Love vanilla js, want to keep your code close to it\n* Chaining is fun, Arrays are fun, essentially a functional programming fan\n* Hate typing `document.querySelector` over.. and over.. \n* Hate typing `addEventListener` over.. and over..\n* Really wish `document.querySelectorAll` had array methods on it..\n* Confused that there is no `node.setAttributes({...})` or even better `nodeList.setAttributes({...})`\n* Liked jQuery selector syntax\n\n###### Why BlingBling?\n- Minimal at 0.6kb (636 bytes)\n- BlingBling supports ES6 module importing and common module loading\n- Supports chaining\n- Worth it's weight (should save more characters than it loads)\n- Only enhances the nodes you query with it\n- ES6 version of popular [bling.js](https://gist.github.com/paulirish/12fb951a8b893a454b32) by Paul Irish\n- [Tested](https://github.com/argyleink/blingblingjs/blob/master/src/index.test.js)\n" }, { "path": "dist/index.js", "content": "(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n typeof define === 'function' && define.amd ? define(['exports'], factory) :\n (global = global || self, factory(global.$ = {}));\n}(this, function (exports) { 'use strict';\n\n const sugar = {\n on: function(names, fn, options) {\n names\n .split(' ')\n .forEach(name =>\n this.addEventListener(name, fn, options));\n return this\n },\n off: function(names, fn, options) {\n names\n .split(' ')\n .forEach(name =>\n this.removeEventListener(name, fn, options));\n return this\n },\n attr: function(attr, val) {\n if (val === undefined) return this.getAttribute(attr)\n\n val == null\n ? this.removeAttribute(attr)\n : this.setAttribute(attr, val);\n\n return this\n }\n };\n\n const rAF = typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame;\n const rIC = typeof requestIdleCallback !== 'undefined' && requestIdleCallback;\n\n function $(query, $context = document) {\n let $nodes = query instanceof NodeList || Array.isArray(query)\n ? query\n : query instanceof HTMLElement || query instanceof SVGElement\n ? [query]\n : $context.querySelectorAll(query);\n\n if (!$nodes.length) $nodes = [];\n\n return Object.assign(\n Array.from($nodes).map($el => Object.assign($el, sugar)), \n {\n on: function(names, fn, options) {\n this.forEach($el => $el.on(names, fn, options));\n return this\n },\n off: function(names, fn, options) {\n this.forEach($el => $el.off(names, fn, options));\n return this\n },\n attr: function(attrs, val) {\n if (typeof attrs === 'string' && val === undefined)\n return this[0].attr(attrs)\n\n else if (typeof attrs === 'object') \n this.forEach($el =>\n Object.entries(attrs)\n .forEach(([key, val]) =>\n $el.attr(key, val)));\n\n else if (typeof attrs == 'string')\n this.forEach($el => $el.attr(attrs, val));\n\n return this\n }\n }\n )\n }\n\n exports.default = $;\n exports.rAF = rAF;\n exports.rIC = rIC;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n}));\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n BlingBling\n \n\n \n \n \n \n \n \n \n \n" }, { "path": "package.json", "content": "{\n \"name\": \"blingblingjs\",\n \"version\": \"2.3.0\",\n \"description\": \"like bling.js, but more bling\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/argyleink/blingblingjs.git\"\n },\n \"main\": \"dist/index.js\",\n \"module\": \"src/index.js\",\n \"scripts\": {\n \"test\": \"npm run build && ava -v\",\n \"build\": \"rollup src/index.js --format umd --name \\\"$\\\" --file dist/index.js\"\n },\n \"author\": \"argyleink\",\n \"keywords\": [\n \"javascript\",\n \"utility\",\n \"jquery-like\",\n \"es6\"\n ],\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/argyleink/blingblingjs/issues\"\n },\n \"devDependencies\": {\n \"ava\": \"^1.4.1\",\n \"browser-env\": \"^3.2.6\",\n \"rollup\": \"^1.9.0\"\n }\n}\n" }, { "path": "playground.js", "content": "import $, {rAF, rIC} from './src/index.js'\nlet test = document.querySelectorAll('button')\nconsole.log($(test[0]).on)\nrAF(_ => console.log('rAF'))\nrIC(_ => console.log('rIC'))\n// ;(function repeatOften() {\n// console.log('requestAnimationFrame')\n// rAF(repeatOften);\n// })();" }, { "path": "src/index.js", "content": "const sugar = {\n on: function(names, fn, options) {\n names\n .split(' ')\n .forEach(name =>\n this.addEventListener(name, fn, options))\n return this\n },\n off: function(names, fn, options) {\n names\n .split(' ')\n .forEach(name =>\n this.removeEventListener(name, fn, options))\n return this\n },\n attr: function(attr, val) {\n if (val === undefined) return this.getAttribute(attr)\n\n val == null\n ? this.removeAttribute(attr)\n : this.setAttribute(attr, val)\n\n return this\n }\n}\n\nexport const rAF = typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame\nexport const rIC = typeof requestIdleCallback !== 'undefined' && requestIdleCallback\n\nexport default function $(query, $context = document) {\n let $nodes = query instanceof NodeList || Array.isArray(query)\n ? query\n : query instanceof HTMLElement || query instanceof SVGElement\n ? [query]\n : $context.querySelectorAll(query)\n\n if (!$nodes.length) $nodes = []\n\n return Object.assign(\n Array.from($nodes).map($el => Object.assign($el, sugar)), \n {\n on: function(names, fn, options) {\n this.forEach($el => $el.on(names, fn, options))\n return this\n },\n off: function(names, fn, options) {\n this.forEach($el => $el.off(names, fn, options))\n return this\n },\n attr: function(attrs, val) {\n if (typeof attrs === 'string' && val === undefined)\n return this[0].attr(attrs)\n\n else if (typeof attrs === 'object') \n this.forEach($el =>\n Object.entries(attrs)\n .forEach(([key, val]) =>\n $el.attr(key, val)))\n\n else if (typeof attrs == 'string')\n this.forEach($el => $el.attr(attrs, val))\n\n return this\n }\n }\n )\n}\n" }, { "path": "src/index.test.js", "content": "import test from 'ava'\nimport browserEnv from 'browser-env'\n\nimport $, {rAF, rIC} from '../dist/index.js'\n\nbrowserEnv()\n\ntest.afterEach.always(t => {\n document.body.innerHTML = ''\n})\n\ntest('$(\"div\")', t => {\n const div = document.createElement('div')\n document.body.appendChild(div)\n\n t.is($('div')[0], div)\n t.pass()\n})\n\ntest('$(node)', t => {\n const div = document.createElement('div')\n\n t.truthy($(div).on)\n t.truthy($(div).attr)\n t.pass()\n})\n\ntest('$(\"bad_query\")', t => {\n t.truthy($('bad').length == 0)\n t.pass()\n})\n\ntest('$(\"div\", parent)', t => {\n const div = document.createElement('div')\n const p = document.createElement('p')\n\n div.appendChild(p)\n div.appendChild(p)\n\n t.is($('p', div)[0], p)\n t.pass()\n})\n\ntest('$(\"div\") multiple', t => {\n const div = document.createElement('div')\n const len = 3\n\n for (var i = 0; i < len; i++)\n document.body.appendChild(div)\n\n t.is($('div').length, len - 1)\n t.pass()\n})\n\ntest('$(nodes)', t => {\n const div = document.createElement('div')\n const len = 3\n\n for (var i = 0; i < len; i++)\n document.body.appendChild(div)\n\n const nodes = document.querySelectorAll('div')\n\n t.truthy($(nodes).on)\n t.truthy($(nodes).attr)\n t.pass()\n})\n\ntest('$(\"div\", parent) multiple', t => {\n const div = document.createElement('div')\n const p = document.createElement('p')\n const len = 3\n\n for (var i = 0; i < len; i++)\n div.appendChild(p)\n\n t.is($('p', div).length, div.querySelectorAll('p').length)\n t.pass()\n})\n\ntest('$(\"p\").map(el => ...)', t => {\n const div = document.createElement('div')\n const p = document.createElement('p')\n const len = 3\n\n for (var i = 0; i < len; i++)\n document.body.appendChild(p)\n\n t.is($('p').map, Array.prototype.map)\n t.is($('p').filter, Array.prototype.filter)\n t.is($('p').reduce, Array.prototype.reduce)\n t.pass()\n})\n\ntest('$(\"button\").attr({...})', t => {\n const btn = document.createElement('button')\n\n document.body.appendChild(btn)\n\n t.falsy(btn.hasAttribute('foo'))\n $('button').attr({\n foo: 'bar'\n })\n t.truthy(btn.hasAttribute('foo'))\n\n t.pass()\n})\n\ntest('$(\"button\").attr({...}) multiple', t => {\n const btn = document.createElement('button')\n\n document.body.appendChild(btn)\n document.body.appendChild(btn)\n\n t.falsy(btn.hasAttribute('foo'))\n $('button').attr({\n foo: 'bar'\n })\n t.truthy(btn.hasAttribute('foo'))\n \n t.pass()\n})\n\ntest('$(\"button\").attr(\"foo\", falsy_value)', t => {\n const btn = document.createElement('button')\n\n document.body.appendChild(btn)\n\n t.falsy(btn.hasAttribute('foo'))\n const $btn = $('button')\n const value = 0\n $btn.attr('foo', value)\n t.is($btn.attr('foo'), value.toString())\n\n t.pass()\n})\n\ntest.cb('$(\"button\").on(\"click\", e => ...)', t => {\n const btn = document.createElement('button')\n btn.classList.add('test')\n document.body.appendChild(btn)\n\n $('.test').on('click', e => t.end())\n btn.click()\n})\n\ntest('$(\"button\").on(\"click ...\", e => ...) multiple', t => {\n t.plan(2)\n\n const btn = document.createElement('button')\n\n $(btn).on('click dblclick', e => t.pass())\n btn.click()\n btn.dispatchEvent(new window.MouseEvent('dblclick', {\n bubbles: true\n }))\n})\n\ntest.cb('$(node).on(\"click\", e => ...)', t => {\n const btn = document.createElement('button')\n\n $(btn).on('click', e => t.end())\n btn.click()\n})\n\ntest.cb('$(\"button\").on(\"click\", e => ...) multiple', t => {\n const btn = document.createElement('button')\n btn.classList.add('test')\n\n document.body.appendChild(btn)\n document.body.appendChild(btn)\n\n $('.test').on('click', e => t.end())\n btn.click()\n})\n\ntest('$(nodes).on(\"click ...\", e => ...) multiple', t => {\n t.plan(2)\n\n const btn = document.createElement('button')\n document.body.appendChild(btn)\n document.body.appendChild(btn)\n const list = document.querySelectorAll('button')\n\n $(list).on('click dblclick', e => t.pass())\n btn.click()\n btn.dispatchEvent(new window.MouseEvent('dblclick', {\n bubbles: true\n }))\n})\n\ntest.cb('$(node).on(\"click\", e => ...) multiple', t => {\n const btn = document.createElement('button')\n document.body.appendChild(btn)\n document.body.appendChild(btn)\n const list = document.querySelectorAll('button')\n\n $(list).on('click', e => t.end())\n btn.click()\n})\n\ntest.cb('$(\"button\").on(\"click\", e => ..., { once:true })', t => {\n t.plan(3)\n\n const btn = document.createElement('button')\n btn.classList.add('test')\n document.body.appendChild(btn)\n\n let eventCount = 0\n $('.test').on('click', e => {\n eventCount++\n t.end()\n }, { once:true })\n\n t.is(eventCount, 0)\n\n btn.click()\n t.is(eventCount, 1)\n\n btn.click()\n t.is(eventCount, 1)\n})\n\ntest('$(\"button\").on(\"click ...\", e => ..., { once:true }) multiple', t => {\n t.plan(5)\n\n const btn = document.createElement('button')\n\n let eventCount = 0\n $(btn).on('click dblclick', e => {\n eventCount++\n t.end()\n }, { once:true })\n\n t.is(eventCount, 0)\n\n btn.click()\n t.is(eventCount, 1)\n\n btn.dispatchEvent(new window.MouseEvent('dblclick', {\n bubbles: true\n }))\n t.is(eventCount, 2)\n\n btn.click()\n t.is(eventCount, 2)\n\n btn.dispatchEvent(new window.MouseEvent('dblclick', {\n bubbles: true\n }))\n t.is(eventCount, 2)\n})\n\ntest.serial('rAF', async (t) => {\n rAF ? rAF(_ => t.pass()) : t.pass()\n})\n\ntest.serial('rIC', async (t) => {\n rIC ? rIC(_ => t.pass()) : t.pass()\n})\n" } ]