Skip to content
Search Create account

DEV Community

DEV Community is a community of 890,377 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Twitter Facebook Github Instagram Twitch
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!

#showdev #webdev #opensource #javascript

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
grahamthedev profile image
GrahamTheDev • • Edited on

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
fzn0x profile image
Muhammad Fauzan Author •

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

Read next

techsolutionstuff profile image

How To Get Current Date And Time In Node.js

Techsolutionstuff -

smpnjn profile image

How to install nvm, the Node Version Manager

Johnny Simpson -

cjreads665 profile image

useNavigate,Navigate and useLocation in React Router v6

Shahid Alam -

muhammadshakirdev profile image

Introduction to Linux

Muhammad Shakir -