node package manager

avris-vanillin

Vanillin.js – Almost like vanilla JavaScript

Logo

jQuery used to be virtually indispensable, if you wanted to develop a cross-browser website without getting a headache.

Today, however, you might not need jQuery, especially, if you're developing a library and want to avoid unnecessary dependencies.

Still, some helpers could be useful... Vanillin is an opinionated set of helpers that I find most useful, a bare minimum to make life easier.

Installation

You can either install Vanillin as a node module:

$ npm i --save avris-vanillin

or

$ yarn add avris-vanillin

require('avris-vanillin');

Use a CDN:

<script src="https://gitlab.com/Avris/Vanillin/raw/v0.0.1/dist/Vanillin.min.js"></script>

Or simply copy-paste whatever filters you need from the source code.

Usage

_each(iterable, function (el, i))

Iterate in a consistent way, whether it's over an array or an object, without having to check for hasOwnProperty in every loop.

each(object, function (val, key) {
    // ...
}); 

_el(html)

Convert an HTML string into a DOM element with one simple helper.

const el = _el('<div class="lorem"><a href="/test">OK</a></div>');

_findParent(el, selector)

Finds the first parent of el that matches selector.

parent = _el(el, 'section.important')

_on(selector, event, handler (e))

Attaches the handler as an event listener or event for all elements that match selector, even if they don't exist yet at that moment.

_on('a.foo', 'click', function (e) {
    console.log('foo link clicked', this.attributes.href.value)
});

_request(method, url, data, headers)

Performs an AJAX request to url using a specified HTTP method, attaching data (they can be either FormData, an object, or a DOM element containing form data) and using specified headers. Returns a Promise.

_request('POST', '/document/create', document.querySelector('form'), {Authorization: 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'})
    .then((data) => {
        alert('Document created with ID: ' + JSON.parse(data).id);
    })
    .catch((xhr) => {
        console.log(xhr);
        alert('Error while creating a document');
    };

_extend = (out, ...args)

Extends out with data from ...args, useful for resolving configs:

function Helper(options) {
    this.config = _extend({}, defaultOptions, options);
}

Development

To install dev dependencies:

yarn

To build a minified, babel-ified version:

yarn build

To run tests:

yarn test

and open http://localhost:8777.

Copyright