finom / bala

A function for elements selection

tsimmes

A function for elements selection in 226 ASCII chars (less than ¼ KB)!

tsimmes is a function that allows you to select elements on a web page. Think of it as of document.querySelectorAll on steroids.

const buttons = $('.button');

You can use it as a global variable

<script>
$=((a,b,c)=>(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll");
</script>

If you don't want to use $ variable just rename it.

foo=...
// instead of
$=...

And you can use it as a local variable in a script you make

((win, $) => {
    // your code starts here
    const divs = $('div');
    console.log(divs);
    // your code ends here
})(window, ((a,b,c)=>(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll"));

The function is also published on NPM

npm install tsimmes

tsimmes is inherited from Array.prototype which means it has the same set of methods as the native array has.

• concat
• join
• pop
• push
• reverse
• shift
• slice
• sort
• splice
• toString
• unshift
• every
• filter
• forEach
• indexOf
• lastIndexOf
• map
• some
• copyWithin
• entries
• fill
• find
• findIndex
• includes
• keys
• values
• [Symbol.iterator]

More features?

Various types support

tsimmes accepts many kinds of first argument and converts everything into array

$('.one, #two')
$(document.querySelectorAll('.selector'));
$(document.body);
$(element.children);
$(jQuery('.selector'));
$([document.querySelector('.one'), document.querySelector('.two')])

That means when you make your own library (VanillaJS "plugin") you can use tsimmes in case if you don't know which arg type will be passed by a programmer.

const myCoolLibrary = (el) => {
  el = $(el);
  // ...
};

$.one

Getting zero-indexed element in DOM libraries is annoying. tsimmes has one little static method called $.one which selects only one element.

$.one('.button');
//vs
$('.button')[0];

This function is also created to get rid of extra variables (usually DOM libraries make two vars: $$ and $). It means you can import tsimmes nicely via module system.

AMD

require(['path/to/tsimmes/umd/tsimmes.umd.js'], ($) => {
	// ...
});

CommonJS

const $ = require('path/to/tsimmes/tsimmes.umd.js');

CommonJS + NPM

const $ = require('tsimmes');

ECMAScript 2015

import $ from 'tsimmes';

Find elements inside another element

const elements = $('.my-selector', someParent);
// or
const element = $.one('.my-selector', someParent);

Parse HTML

Simple parsing.

const div = $('<div><span class="yeah"></span></div>');

Contextual HTML parsing

In case if you need to parse HTML which contains contextual elements (td, tr, option) you can pass a context tag name as a second argument.

const cells = $('<td>foo</td><td>bar</td>', 'tr')

I need more examples!

Add style

for(let element of $('.my-selector')) {
    element.style.color = 'red';
}

In case if you need to set style only for one element you can use $.one.

$.one('.my-selector').style.color = 'red';

Events delegation

for(let element of $('.my-selector')) {
    element.addEventListener('click', function ({ target }) {
        if (this.contains(target.closest('.delegated-selector'))) {
            alert('yep!');
        }
    });
}

Or

$.one('.my-selector').addEventListener('click', function ({ target }) {
    if (this.contains(target.closest('.delegated-selector'))) {
        alert('yep!');
    }
});

Elements removal

for(let element of $('.my-selector')) {
    element.remove();
}

Or

$.one('.my-selector').remove();

Animations

Use element.animate for smooth GPU-accelerated animations. You may need polyfill for Web Animations API.

$.one('.my-selector').animate({
    opacity: [0.5, 1],
    transform: ['scale(0.5)', 'scale(1)'],
}, {
    direction: 'alternate',
    duration: 500,
    iterations: Infinity,
});

Do you still need jQuery?

bala's Issues

v1

• Get rid of DOM ready feature (describe defer attr at readme)
• Build UMD version automatically
• Minify automatically
• Source code should include a single version: es2015 (but still think about to manually create es5 version as well in case if Babel generates too big code)
• Add semantic-release and all requires stuff (Travis etc.)
• Add ESLint
• Add .npmignore

balajs can not minify by uglifyJs

Hi, I'm getting the following error when I npm run build

ERROR in static/js/1.d5d07df3cdfb67f13252.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/balajs/bala.umd.js:2,0]

I searched for a bit, it's related to uglify not being able to minify es6, balajs use es6, so the build fails, @finom can you help solve this problem, thank you very much !

Do you really need $.fn?

Since I've developed the library I've never used $.fn. I'm thinking to get rid of it and since the project has some users (by the time being its around 2K downloads on NPM per week) I'd like to hear your opinion. Getting rid of it also will save some additional bytes.

Please upvote 👍 if $.fn isn't needed.
Downvote 👎 if you do use it.