DEV Community

Cover image for Introduce the new Lightweight JS Library for DOM Manipulation called AmiraJS, which has only 0.4kb compressed size!
Muhammad Fauzan
Muhammad Fauzan

Posted on

Introduce the new Lightweight JS Library for DOM Manipulation called AmiraJS, which has only 0.4kb compressed size!

I am developing a library like jQuery but with more minimal features and size called AmiraJS.

It's released version 1.0.2 on github with the most commonly used APIs like innerHTML, value property, setAttribute, removeAttibute, show and hide elements.

AmiraJS reinvent the jquery but with only had a compressed size of 0.4kb, this is the reason why it's lightweight!

PoC : https://github.com/fauzan121002/amirajs/issues/1

AmiraJS APIs

insert

You can insert both value or text in single function.

$(".amira").insert("Hello World");
Enter fullscreen mode Exit fullscreen mode

empty

You can empty both value or text in single function.

$(".amira").empty();
Enter fullscreen mode Exit fullscreen mode

setAttr

You can set elements attribute by using setAttr function.

$(".amira").setAttr("id", "11");
Enter fullscreen mode Exit fullscreen mode

Also supports fluent design

$(".amira").setAttr("id", "11").setAttr("style", "color: red;");
Enter fullscreen mode Exit fullscreen mode

removeAttr

You can remove elements attribute by using removeAttr function.

$(".amira").removeAttr("id");
Enter fullscreen mode Exit fullscreen mode

show

You can show elements by using show function.

$(".amira").show();
Enter fullscreen mode Exit fullscreen mode

hide

You can hide elements by using hide function.

$(".amira").hide();
Enter fullscreen mode Exit fullscreen mode

jQuery is more complete in terms of features, but if you want to use a dom manipulation library with minimal size and features, AmiraJS could help.

Github Link : https://github.com/fauzan121002/amirajs

Discussion (2)

Collapse
inhuofficial profile image
InHuOfficial • Edited

I love tiny libraries like this, have a ❤🦄

I hope the below gives you some inspiration, as if you want tiny and powerful (with support for IE!) my modified version of ki.js is pretty sweet:-

!function (b, c, d, e, f) {
  f = b['add' + e]

  function i(a, d, i) {
    for(d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]));
  }

  $ = function (a) {
    return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function() { $(a); }, 9) : a() : new i(a);
};

  $[d] = i[d] = {
    on: function (a, b) {
      return this.each(function (c) {
        f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
      })
    },
    off: function (a, b) {
      return this.each(function (c) {
        f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
      })
    },
    each: function (a, b) {
      for (var c = this, d = 0, e = c.length; d < e; ++d) {
        a.call(b || c[d], c[d], d, c)
      }
      return c
    },
    splice: c.splice
  }
}(document, [], 'prototype', 'EventListener');
Enter fullscreen mode Exit fullscreen mode

This gives you:
$('button').on('click', someAction); for event listeners (and .off to remove them)

$('div').each(function (elem, i) { to iterate over items

$(function () { for document ready

All for 150 bytes gzipped!

And for extra features:-

var props = ['add', 'remove', 'toggle', 'has'],
maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function(prop, index) {
  $.prototype[prop + 'Class'] = function(a) {
    return this.each(function(b) {
        if(a){
            b.classList[maps[index]](a);
        }
    });
  };
});
Enter fullscreen mode Exit fullscreen mode

That gives us addClass removeClass toggleClass and hasClass.

And if you want the kitchen sink:-

$.prototype.css = function(a, b) {
  if (typeof(a) === 'object') {
    for(var prop in a) {
      this.each(function(c) {
        c.style[prop] = a[prop];
      });
    }
    return this;
  } else {

    return b === []._ ? this[0].style[a] : this.each(function(c) {
      c.style[a] = b;
    });
  }
};
$.prototype.text = function(a) {
    console.log(a);
  return a === []._ ? this[0].textContent : this.each(function(b) {
    b.textContent = a;
  });
};
$.prototype.html = function(a) {
  return a === []._ ? this[0].innerHTML : this.each(function(b) {
    b.innerHTML = a;
  });
};
$.prototype.attr = function(a, b) {
  return b === []._ ? this[0].getAttribute(a) : this.each(function(c) {
    c.setAttribute(a, b);
  });
};
$.param = function(obj, prefix) {
  var str = [];
  for(var p in obj) {
    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
    str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
  }
  return str.join("&");
};
$.prototype.append = function(a) {
  return this.each(function(b) {
    b.appendChild(a[0]);
  });
  };
Enter fullscreen mode Exit fullscreen mode

Although that would be 750 bytes gzipped so it might be a little large!

Collapse
fncolon profile image
Muhammad Fauzan Author

this library is even smaller, the open source world is really beautiful!