twJoin vs clsx

Benchmark created on

Description

compare twJoin vs clsx

Setup

const someStyle = 'focus-visible:rounded-50 focus-visible:outline focus-visible:outline-200 focus-visible:outline-offset-25 focus-visible:outline-interactive-focus';

function twJoin() {
  let index = 0
  let argument
  let resolvedValue
  let string = ""

  while (index < arguments.length) {
    if ((argument = arguments[index++])) {
      if ((resolvedValue = toValue(argument))) {
        string && (string += " ")
        string += resolvedValue
      }
    }
  }
  return string
}

const toValue = mix => {
  if (typeof mix === "string") {
    return mix
  }

  let resolvedValue
  let string = ""

  for (let k = 0; k < mix.length; k++) {
    if (mix[k]) {
      if ((resolvedValue = toValue(mix[k]))) {
        string && (string += " ")
        string += resolvedValue
      }
    }
  }

  return string
}

function toVal(mix) {
	var k, y, str='';

	if (typeof mix === 'string' || typeof mix === 'number') {
		str += mix;
	} else if (typeof mix === 'object') {
		if (Array.isArray(mix)) {
			var len=mix.length;
			for (k=0; k < len; k++) {
				if (mix[k]) {
					if (y = toVal(mix[k])) {
						str && (str += ' ');
						str += y;
					}
				}
			}
		} else {
			for (y in mix) {
				if (mix[y]) {
					str && (str += ' ');
					str += y;
				}
			}
		}
	}

	return str;
}

function clsx() {
	var i=0, tmp, x, str='', len=arguments.length;
	for (; i < len; i++) {
		if (tmp = arguments[i]) {
			if (x = toVal(tmp)) {
				str && (str += ' ');
				str += x
			}
		}
	}
	return str;
}

Test runner

Ready to run.

Testing in
TestOps/sec
twJoin
const test = twJoin('prose-small h-full truncate text-interactive-neutral hover:text-interactive-neutral-hover active:text-interactive-neutral-active', someStyle);
ready
clsx
const test = clsx('prose-small h-full truncate text-interactive-neutral hover:text-interactive-neutral-hover active:text-interactive-neutral-active', someStyle);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.