Run results for: Classnames vs CLSX vs Alternatives vs Template Literals vs Template Literals (recursive)

Test name	Executions per second
✓ String literally	173,029,520 Ops/sec
clsx	11,768,855 Ops/sec
String based (if-else struct)	10,590,971 Ops/sec
String based (return struct)	10,588,022 Ops/sec
Entries, filter, map, join	7,766,149 Ops/sec
Array based	5,817,696 Ops/sec
classnames	5,310,856 Ops/sec
Recursive tagged template literal	3,842,798 Ops/sec

classnames

let result = window.classNames(str, obj, arr, 'test classname')

clsx

let result = window.clsx(str, obj, arr, 'test classname')

Array based

function ts(...args){
  let template = [];
  args.forEach(arg => {
  	if (typeof arg === 'string') {
      template.push(arg); 
      return; 
    }
    
  	if (arg.join) {
      template = [...template, ...arg]; 
      return;
    }
    
    let entries = Object.entries(arg);
    if (entries.length) {
      entries.forEach(entry => {
       if(entry[1]) template.push(entry[0]) 
      })
    }
  })
  return template.join(' ');
}
let result = ts(str, obj, arr, 'test classname')

String based (return struct)

function ts(...args){
  let template = '';
  args.forEach(arg => {
  	if (typeof arg === 'string') { 
      template += ' '+arg;
      return; 
    }
  	if (arg.join) { 
      arg.forEach((e) => { 
        template += ' ' + e; 
      }) 
      return;
    }
    let entries = Object.entries(arg);
    if (entries.length) {
      entries.forEach(entry => {
       if(entry[1]) template += ' ' + entry[0]
      })
    }
  })
  return template;
}
let result = ts(str, obj, arr, 'test classname')

String based (if-else struct)

function ts(...args){
  let template = '';
  args.forEach(arg => {
  	if (typeof arg === 'string') { 
      template += ' '+arg;
    } else if (arg.join) { 
      arg.forEach((e) => { 
        template += ' ' + e; 
      }) 
    } else {
      let entries = Object.entries(arg);
      if (entries.length) {
        entries.forEach(entry => {
         if(entry[1]) template += ' ' + entry[0]
        })
      }
    }
  })
  return template;
}
let result = ts(str, obj, arr, 'test classname')

Entries, filter, map, join

let objStyle = Object.entries(obj).filter((style)=>style[1]).map(style => style[0]).join(' ');
let arrComb = arr.join(' ')
let result = `${str} ${objStyle} ${arrComb} test classname`

String literally

var literal = `style ${true ? "style-2" : ""} ${false ? "style-3" : ""} ${true ? "style-4" : ""} style-5 style-6`

Recursive tagged template literal

const toCls = (arg) => {
    if (typeof arg === 'boolean')
        return "";
    if (typeof arg === 'string')
        return ` ${arg}`;
    if (Array.isArray(arg))
        return arg.map(a => toCls(a));
    if (typeof arg === 'object')
        return toCls(Object.entries(arg).filter(e => e[1]).map(e => e[0]));
    throw new Error("Invalid arg: `${arg}`");
};
const cls = (s, ...args) => {
    //console.log(s)
    //console.log(args)
    let classNames = "";
    args.forEach((expr, i) => {
        if (s[i] != "" && s[i] != " ")
            classNames += ` ${s[i]}`;
        classNames += toCls(expr);
    });
    classNames += s[s.length - 1];
    return classNames;
};

let result = cls`${str} ${obj} ${arr} test classname`;

Run results for: Classnames vs CLSX vs Alternatives vs Template Literals vs Template Literals (recursive)

Compare CLSX vs Classnames vs an own implementation of creating a template string

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

String literally

Recursive tagged template literal