Run results for: clsx or classList

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser: Firefox 135

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

use_clsx

837K/s

use_toggle

408K/s

use_classlist

331K/s

View exact numbers

Test name	Executions per second
✓ use_clsx	837,421 Ops/sec
use_toggle	408,347 Ops/sec
use_classlist	330,898 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->
<div id="dom" class="foo bar baz hello hello-world hi"></div>

Script Preparation code:

// clsx
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.clsx=n()}(this,(function(){function e(n){var t,f,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var r=n.length;for(t=0;t<r;t++)n[t]&&(f=e(n[t]))&&(o&&(o+=" "),o+=f)}else for(f in n)n[f]&&(o&&(o+=" "),o+=f);return o}function n(){for(var n,t,f=0,o="",r=arguments.length;f<r;f++)(n=arguments[f])&&(t=e(n))&&(o&&(o+=" "),o+=t);return o}return n.clsx=n,n}));


const dom = document.getElementById("dom");


function use_clsx(dom, ...next) {
  	const className = clsx(...next);
 	if (dom.__className !== className) {
      dom.className = dom.__className = className;
    }
}

function use_classlist(dom, prev = {}, next) {
  for (const k in next) {
   if (prev[k] !== next[k]) {
     if (next[k]) {
       dom.classList.add(k);
     } else {
       dom.classList.remove(k);
     }
   }
  }
  return next;
}


function use_toggle(dom, prev = {}, next) {
  for (const k in next) {
   if (prev[k] !== next[k]) {
     dom.classList.toggle(k, next[k]);
   }
  }
  return next;
}

Tests:

use_clsx
use_clsx(dom, "foo bar baz", { hello: true, 'hello-world': true, hi: true }); use_clsx(dom, "foo bar baz", { hello: false, 'hello-world': true, hi: false }); use_clsx(dom, "foo bar baz", { hello: true, 'hello-world': true, hi: true });
use_classlist
var prev; prev = use_classlist(dom, prev, { hello: true, 'hello-world': true, hi: true }); prev = use_classlist(dom, prev, { hello: false, 'hello-world': true, hi: false }); prev = use_classlist(dom, prev, { hello: true, 'hello-world': true, hi: true });
use_toggle
var prev; prev = use_toggle(dom, prev, { hello: true, 'hello-world': true, hi: true }); prev = use_toggle(dom, prev, { hello: false, 'hello-world': true, hi: false }); prev = use_toggle(dom, prev, { hello: true, 'hello-world': true, hi: true });