Run results for: Classnames vs CLSX vs Alternatives vs custom

Test name	Executions per second
✓ clsx	4,222,923 Ops/sec
String based (return struct)	3,941,094 Ops/sec
String based (if-else struct)	3,930,230 Ops/sec
Entries, filter, map, join	3,509,383 Ops/sec
Array based	3,022,913 Ops/sec
classnames	2,927,830 Ops/sec
Flat array join	2,882,309 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`

Flat array join

const cn = (...classnames) => classnames.flat().filter(Boolean).join(" ");

let result = cn('style', true, false, null, 'style-4', ['style-5', 'style-6'])

Run results for: Classnames vs CLSX vs Alternatives vs custom

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

Flat array join