Run results for: clsx or classList

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser: Chrome 133

Operating system: Windows

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
use_clsx	1833940.8 Ops/sec
use_classlist	431474.6 Ops/sec
use_toggle	612282.2 Ops/sec

HTML Preparation code:

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

AخA
 
<!--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;
}

​x
 
// 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_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 });

 
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 });

 
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 });