Run results for: ClassList v6

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Browser: Safari 13

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Recursive outer	112.9 Ops/sec
Recursive flatten (no trim)	213.5 Ops/sec

Script Preparation code:

var obj = {};

for (i = 1000; i > 0; i--) {
 	obj[i] = {
    container: {
      sm: {
        layout: ['p-4'],
        presentation: 'bg-blue-100',
      },
      md: ['md:bg-green-100', 'md:p-6'],
      lg: ['lg:bg-yellow-100', 'lg:p-8'],
      xl: ['xl:bg-red-100', 'xl:p-10'],
      xxl: 'xxl:bg-gray-100 xxl:p-12',
    },
    heading: {
      sm: [ 'bg-yellow-200', 'md:bg-green-200' ],
      md: ( ()=> 'md:bg-yellow-200' )(),
    },
    paragraph: ['bg-gray-300','p-12'],
    box: 'bg-yellow-400',
    button: {},
  };
}

Tests:

Recursive outer
function rec(classList, key, collection = {} ) { return Object.values( collection ).reduce( (acc, col) => { const colCheck = Object.prototype.toString.call(col); switch (colCheck) { case '[object Object]': { if ( Object.keys(col).length === 0 ) { acc[key] = ''; break; } rec(classList, key, col ); break; } case '[object Array]': acc[key] += col.join(' ') + ' '; break; case '[object String]': acc[key] += col + ' '; break; } return acc; }, classList ); } function ClassList(collection = {}) { const keys = Object.keys(collection); return keys.reduce( (classList, key) => { switch (Object.prototype.toString.call(collection[key]) ) { case '[object Object]': { classList[key] = ''; if ( Object.keys(collection[key]).length === 0 ) { break; } rec(classList, key, collection[key] ); break; } case '[object Array]': classList[key] = collection[key].join(' ') + ' '; break; case '[object String]': classList[key] = collection[key] + ' '; break; } return classList; }, {} ); } ClassList( obj );
Recursive flatten (no trim)
function ClassList(collection = {}) { const result = {}; function flatten(node, str) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { str += node + ' '; break; } case '[object Array]': { str += node.join(' ') + ' '; break; } case '[object Object]': { for (const key in node) { str += flatten(node[key], ''); } break; } } return str; } for (const key in collection) { result[key] = flatten(collection[key], ''); } return result; } ClassList(obj);

Run results for: ClassList v6

Recursive outer

Recursive flatten (no trim)