Show HN: Auto-generate vanilla JavaScript alternatives for jQuery methods
I made a tiny jQuery alternative a while back called Umbrella JS: <a href="https:&#x2F;&#x2F;umbrellajs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;umbrellajs.com&#x2F;</a><p>Seeing methods like addClass in &quot;replace-jquery&quot;, I&#x27;m not fully satisfied. I could make Umbrella JS tiny (1&#x2F;2 of the alternative listed elsewhere in the thread, Cash, and 10% the size of jQuery) because of heavy method reusal. For instance, in Umbrella JS addClass is just:<p><pre><code>    u.prototype.addClass = function () {
      return this.eacharg(arguments, function (el, name) {
        el.classList.add(name);
      });
    };
</code></pre>
In &quot;replace-jquery&quot; you are already depending on `this.`, so why not making a couple of useful utils? Right now it is more verbose, and doesn&#x27;t accept e.g. an array of classes or classes as arguments:<p><pre><code>    addClass(classNames = &#x27;&#x27;) {
      this.each((el) =&gt; {
        classNames.split(&#x27; &#x27;).forEach((className) =&gt; {
          el.classList.add(className);
        });
      });
      return this;
    }
</code></pre>
Cash JS&#x27;s addClass (which is hidden behind toggleClass(cls, true)) is nice, it&#x27;s bigger BUT that&#x27;s because it&#x27;s 3 implementations at once (addClass, removeClass, toggleClass). It properly uses a method to getSplitValues, which is very helpful and flexible:<p><pre><code>    fn.toggleClass = function ( this: Cash, cls: string, force?: boolean ) {
      const classes = getSplitValues ( cls ),
            isForce = !isUndefined ( force );
      return this.each ( ( i, ele ) =&gt; {
        if ( !isElement ( ele ) ) return;
        each ( classes, ( i, c ) =&gt; {
          if ( isForce ) {
            force ? ele.classList.add ( c ) : ele.classList.remove ( c );
          } else {
            ele.classList.toggle ( c );
          }
        });
      });
    };
</code></pre>
And I will spare you all jQuery&#x27;s implementation, which is huge, but it can be seen here:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;jquery&#x2F;jquery&#x2F;blob&#x2F;main&#x2F;src&#x2F;attributes&#x2F;classes.js#L22-L57" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jquery&#x2F;jquery&#x2F;blob&#x2F;main&#x2F;src&#x2F;attributes&#x2F;cl...</a>