10a63377c7b9a139a5edffd8bf030fec_use

Benchmark created on

Setup

'use strict';
// @bem-react/classname
function r(r){function t(t,i,a,o){var f=i?e+t+r.e+i:e+t,v=f;if(a){var s=' '+v+r.m;for(var u in a)if(a.hasOwnProperty(u)){var p=a[u];!0===p?v+=s+u:p&&(v+=s+u+n+p)}}if(void 0!==o)for(var y=0,c=(o=Array.isArray(o)?o:[o]).length;y<c;y++){var l=o[y];if(l&&'string'==typeof l.valueOf())for(var g=l.valueOf().split(' '),d=0;d<g.length;d++){var h=g[d];h!==f&&(v+=' '+h)}}return v}var e=r.n||'',n=r.v||r.m;return function(r,e){return function(n,i,a){return'string'==typeof n?'string'==typeof i||Array.isArray(i)?t(r,n,void 0,i):t(r,n,i,a):t(r,e,n,i)}}}var cn=r({e:'-',m:'_'});

// common
const isMix = (val) => Array.isArray(val) || typeof val === 'string';

const getMod = (arg0) => isMix(arg0) ? {} : (arg0 || {});

const getMix = (arg0, arg1) => isMix(arg0) ? arg0 : (arg1 || []);

//////////////////////////////////// v1 ////////////////////////////////////

const getKeyMeta = (key) => {
    const chunks = key.split('-');
    const [blockOriginal, elementOriginal = '', blockIncorrect] = chunks;
    const [block, blockMod, blockModValue] = blockOriginal.split('_');
    const [element, elementMod, elementModValue] = elementOriginal.split('_');
    if (block && !element && !blockIncorrect) {
        if (blockMod)
            return { type: 'block-mod', block, mod: [blockMod, blockModValue] };
        return { type: 'block', block };
    } else if (!blockMod && element && !blockIncorrect) {
        if (elementMod)
            return { type: 'element-mod', block, element, mod: [elementMod, elementModValue] };
        return { type: 'element', block, element };
    }
    return { type: 'exception' };
};

const createBlockApiV1 = (block, element) => ((mod, mix) => cn(block, element)(getMod(mod), getMix(mod, mix)));

const getClassesApiV1 = (classes) => {
    return Object.values(classes).reduce((classesApi, key) => {
        const keyMeta = getKeyMeta(key);
        const type = keyMeta.type;

        if (type === 'exception') return classesApi;

        const blockKey = keyMeta.block;
        classesApi[blockKey] = classesApi[blockKey] || createBlockApiV1(blockKey);

        if (type === 'element' || type === 'element-mod') {
            const elementKey = keyMeta.element;

            classesApi[blockKey][elementKey] = createBlockApiV1(blockKey, elementKey);
        }

        return classesApi;
    }, {});
};

//////////////////////////////////// v2 ////////////////////////////////////
function createBlockApiV2(cnBlock) {
    return ((mod, mix) => cnBlock(getMod(mod), getMix(mod, mix)));
}

function createElementApi(cnBlock, element) {
    return ((mod, mix) => cnBlock(element, getMod(mod), getMix(mod, mix)));
}

function getClassesApiV2(blocks) {
    const api = {};

    for (const blockName in blocks) {
        const cnBlock = cn(blockName);
        const blockApi = api[blockName] = createBlockApiV2(cnBlock);

        blocks[blockName].forEach(elementName => {
            blockApi[elementName] ??= createElementApi(cnBlock, elementName);
        });
    }

    return api;
}


const v1 = getClassesApiV1({
	"WeatherForecast-Tile": "WeatherForecast-Tile",
    "i-ua_skin_dark": "i-ua_skin_dark",
    "WeatherForecast-TileDay": "WeatherForecast-TileDay",
    "WeatherForecast-TileNight": "WeatherForecast-TileNight",
    "WeatherForecast-Icon": "WeatherForecast-Icon",
	"WeatherForecast-Icon_size_s": "WeatherForecast-Icon_size_s",
	"WeatherForecast-Icon_size_m": "WeatherForecast-Icon_size_m",
	"ShopOfflineRegion-Pin": "ShopOfflineRegion-Pin",
	"OneOrgChainsModal-Pin_active": "OneOrgChainsModal-Pin_active",
	"OneOrgChainsModal-PinOnly": "OneOrgChainsModal-PinOnly",
	"OneOrgChainsModal-Pin_opened": "OneOrgChainsModal-Pin_opened",
});

const v2 = getClassesApiV2({
	WeatherForecast: ["Tile", "TileDay", "TileNight", "Icon"],
    i: ["ua"],
    ShopOfflineRegion: ["Pin"],
	OneOrgChainsModal: ["Pin", "PinOnly"],
})

Test runner

Ready to run.

Testing in
TestOps/sec
Old
v1.WeatherForecast();
v1.WeatherForecast.Tile();
v1.WeatherForecast({ color: 'red' });
v1.WeatherForecast.Tile({ type: 'mini' });
v1.OneOrgChainsModal(["mix1", "mix2"]);
v1.OneOrgChainsModal({ color: 'red' }, ['mix']);
v1.OneOrgChainsModal.Pin({ type: 'mini' }, ['mix']);
ready
New
v2.WeatherForecast();
v2.WeatherForecast.Tile();
v2.WeatherForecast({ color: 'red' });
v2.WeatherForecast.Tile({ type: 'mini' });
v2.OneOrgChainsModal(["mix1", "mix2"]);
v2.OneOrgChainsModal({ color: 'red' }, ['mix']);
v2.OneOrgChainsModal.Pin({ type: 'mini' }, ['mix']);
ready

Revisions

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