Benchmark: test dynamic classes assignment

Script Preparation code:

const CLS_RUNS = 1000;

const CLASS_OBJECT_PRIMARY = {
    active: true,
    disabled: false,
    loading: false,
};

const CLASS_OBJECT_STATUS = {
    focused: true,
    invalid: false,
    compact: true,
};

const CLASS_OBJECT_VARIANT = {
    success: true,
    danger: false,
    muted: true,
};

const CLASS_LIST_PRIMARY = ['panel', ['corners_rad2', false, 'elevated']];
const CLASS_LIST_STATUS = ['input_field', [null, 'with_icon', ['large']]];
const CLASS_LIST_VARIANT = ['tag', ['filled', undefined, ['interactive']]];

let clsSink = 0;

async function globalMeasureThatScriptPrepareFunction() {
    const response = await fetch('https://raw.githubusercontent.com/lukeed/clsx/refs/heads/master/src/index.js');
    const source = await response.text();
    const runnableSource = source
        .replace('export function clsx()', 'function clsxIndex()')
        .replace('export default clsx;', 'window.clsxIndex = clsxIndex;');

    (0, eval)(runnableSource);
}

function clsV1() {

    let output = "";

    for (let index = 0; index < arguments.length; index += 1) {
        const resolved = clsV1Resolver(arguments[index]);

        if (resolved) {
            if (output) output += " ";
            output += resolved;
        }
    }

    return output;
}

function clsV1Resolver(value) {

    if (typeof value === "string") return value;
    if (!value || typeof value !== "object") return "";

    let output = "";

    if (Array.isArray(value)) {
        for (let index = 0; index < value.length; index += 1) {
            const resolved = clsV1Resolver(value[index]);

            if (resolved) {
                if (output) output += " ";
                output += resolved;
            }
        }

        return output;
    }

    for (const key in value) {
        if (value[key]) {
            if (output) output += " ";
            output += key;
        }
    }

    return output;
}

function clsV2() {

    let output = "";
    let value;

    for (let index = 0, length = arguments.length; index < length; index += 1) {
        value = arguments[index];

        if (!value) continue;

        if (typeof value === "string") {
            output = output ? output + " " + value : value;
            continue;
        }

        if (typeof value === "object") {
            output = appendClsV2Value(output, value);
        }
    }

    return output;
}

function appendClsV2Value(output, value) {

    if (!value) return output;

    if (typeof value === "string") {
        return output ? output + " " + value : value;
    }

    if (typeof value !== "object") return output;

    let key;

    if (Array.isArray(value)) {
        for (let index = 0, length = value.length; index < length; index += 1) {
            output = appendClsV2Value(output, value[index]);
        }

        return output;
    }

    for (key in value) {
        if (value[key]) {
            output = output ? output + " " + key : key;
        }
    }

    return output;
}

function runClsxIndex(current) {

    for (let index = 0; index < CLS_RUNS; index += 1) {
        current += window.clsxIndex('button', 'primary', 'compact').length;
        current += window.clsxIndex('button', CLASS_OBJECT_PRIMARY, 'corners_rad1').length;
        current += window.clsxIndex(CLASS_LIST_PRIMARY, CLASS_OBJECT_STATUS, 'visible').length;
        current += window.clsxIndex(false, 'segment_button', CLASS_LIST_STATUS, CLASS_OBJECT_VARIANT).length;
        current += window.clsxIndex(true, null, undefined, 'notification', CLASS_LIST_VARIANT).length;
    }

    return current;
}

function runClsV1(current) {

    for (let index = 0; index < CLS_RUNS; index += 1) {
        current += clsV1('button', 'primary', 'compact').length;
        current += clsV1('button', CLASS_OBJECT_PRIMARY, 'corners_rad1').length;
        current += clsV1(CLASS_LIST_PRIMARY, CLASS_OBJECT_STATUS, 'visible').length;
        current += clsV1(false, 'segment_button', CLASS_LIST_STATUS, CLASS_OBJECT_VARIANT).length;
        current += clsV1(true, null, undefined, 'notification', CLASS_LIST_VARIANT).length;
    }

    return current;
}

function runClsV2(current) {

    for (let index = 0; index < CLS_RUNS; index += 1) {
        current += clsV2('button', 'primary', 'compact').length;
        current += clsV2('button', CLASS_OBJECT_PRIMARY, 'corners_rad1').length;
        current += clsV2(CLASS_LIST_PRIMARY, CLASS_OBJECT_STATUS, 'visible').length;
        current += clsV2(false, 'segment_button', CLASS_LIST_STATUS, CLASS_OBJECT_VARIANT).length;
        current += clsV2(true, null, undefined, 'notification', CLASS_LIST_VARIANT).length;
    }

    return current;
}

Tests:

clsx
// clsx src/index.js clsSink = runClsxIndex(clsSink);
cls-v1
// cls-v1.js clsSink = runClsV1(clsSink);
cls-v2
// cls-v2.js clsSink = runClsV2(clsSink);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clsx
cls-v1
cls-v2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
clsx	4441.0 Ops/sec
cls-v1	4385.4 Ops/sec
cls-v2	4807.0 Ops/sec

Related benchmarks:

test dynamic classes assignment (version: 1)

Comparing performance of: clsx vs cls-v1 vs cls-v2

Created: 9 days ago by: Guest

Jump to the latest result

clsx

cls-v1

cls-v2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A