Run results for: Classnames vs CLSX vs Alternatives 2024-05-20

Test name	Executions per second
✓ clsx	2,444,438 Ops/sec
String based (if-else struct)	2,387,696 Ops/sec
String based (return struct)	2,384,290 Ops/sec
classnames	2,254,983 Ops/sec
Entries, filter, map, join	1,995,432 Ops/sec
Array based	1,716,030 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`

Run results for: Classnames vs CLSX vs Alternatives 2024-05-20

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