Run results for: Classnames vs CLSX vs Alternatives vs Template Literals

Test name	Executions per second
✓ String literally	497,544,000 Ops/sec
clsx	8,341,932 Ops/sec
String based (return struct)	6,418,157 Ops/sec
classnames	6,135,549 Ops/sec
String based (if-else struct)	6,052,686 Ops/sec
Entries, filter, map, join	5,411,776 Ops/sec
Array based	3,896,898 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`

Run results for: Classnames vs CLSX vs Alternatives vs Template Literals

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