Run results for: ClassList v7

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 flatten v1	212.3 Ops/sec
Recursive flatten v2	225.9 Ops/sec
Recursive flatten v3 (no spread)	203.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 flatten v1
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);
Recursive flatten v2
function ClassList(collection = {}) { const result = {}; function flatten(node, arr) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { arr.push(node); break; } case '[object Array]': { arr.push(...node); break; } case '[object Object]': { for (const key in node) { flatten(node[key], arr); } break; } } return arr; } for (const key in collection) { result[key] = flatten(collection[key], []).join(' '); } return result; } ClassList(obj);
Recursive flatten v3 (no spread)
function ClassList(collection = {}) { const result = {}; function flatten(node, arr) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { arr.push(node); break; } case '[object Array]': { arr.push(node); break; } case '[object Object]': { for (const key in node) { flatten(node[key], arr); } break; } } return arr; } for (const key in collection) { result[key] = flatten(collection[key], []).join(' '); } return result; } ClassList(obj);

Run results for: ClassList v7

Recursive flatten v1

Recursive flatten v2

Recursive flatten v3 (no spread)