Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries)
Setup JS 'use strict' ;
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 :'_' });
const isMix = (val ) => Array .isArray (val) || typeof val === 'string' ;
const getMod = (arg0 ) => isMix (arg0) ? {} : (arg0 || {});
const getMix = (arg0, arg1 ) => isMix (arg0) ? arg0 : (arg1 || []);
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;
}, {});
};
function createBlockApiV2 (cnBlock, element = '' ) {
return cnBlock.bind (null , element);
}
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] = createBlockApiV2 (cnBlock, elementName);
});
}
return api;
}
Teardown JS
Test cases
Test #1 Title *
Async
Code * const W = 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" ,
});
Test #2 Title *
Async
Code * const W = getClassesApiV2 ({
WeatherForecast : ["Tile" , "TileDay" , "TileNight" , "Icon" ],
i : ["ua" ],
ShopOfflineRegion : ["Pin" ],
OneOrgChainsModal : ["Pin" , "PinOnly" ],
})