Use string concatenation to increase performance (#336)

benchmarks/benchmarks.js

@@ -1,11 +1,14 @@
 import { Bench } from 'tinybench';
+import { markdownTable } from 'markdown-table';
 
 import local from 'classnames-local';
+import bind from 'classnames-local/bind.js';
 import dedupe from 'classnames-local/dedupe.js';
 import localPackage from 'classnames-local/package.json' with { type: 'json' };
 
 import npm from 'classnames-npm';
 import npmDedupe from 'classnames-npm/dedupe.js';
+import npmBind from 'classnames-npm/bind.js';
 import npmPackage from 'classnames-npm/package.json' with { type: 'json' };
 
 if (localPackage.version !== npmPackage.version) {
@@ -40,9 +43,9 @@ const benchmarks = [
 
 export async function runBenchmarks () {
  for (const benchmark of benchmarks) {
- console.log(`Benchmarking '${benchmark.description}'.`);
+ console.log(`Benchmarking '${benchmark.description}'.\n`);
  const bench = await runBenchmark(benchmark);
- console.table(bench.table());
+ printTable(bench);
  }
 
  console.log('Finished!');
@@ -51,22 +54,23 @@ export async function runBenchmarks () {
 async function runBenchmark (benchmark) {
  const bench = new Bench();
 
- bench.add(`local#${benchmark.description}`, () => {
- local(...benchmark.args);
- });
+ bench.add('default/local', () => local(...benchmark.args));
+ bench.add('default/npm', () => npm(...benchmark.args));
 
- bench.add(`npm#${benchmark.description}`, () => {
- npm(...benchmark.args);
- });
+ bench.add('bind/local', () => bind(...benchmark.args));
+ bench.add('bind/npm', () => npmBind(...benchmark.args));
 
- bench.add(`local/dedupe#${benchmark.description}`, () => {
- dedupe(...benchmark.args);
- });
-
- bench.add(`npm/dedupe#${benchmark.description}`, () => {
- npmDedupe(...benchmark.args);
- });
+ bench.add('dedupe/local', () => dedupe(...benchmark.args));
+ bench.add('dedupe/npm', () => npmDedupe(...benchmark.args));
 
  await bench.run();
  return bench;
 }
+
+function printTable(bench) {
+ const table = bench.table();
+ const headers = Object.keys(table[0]);
+ const data = table.map((entry) => headers.map((header) => entry[header]));
+
+ console.log(markdownTable([headers, ...data]) + '\n');
+}

benchmarks/package.json

@@ -12,6 +12,7 @@
  "classnames-local": "file:../",
  "classnames-npm": "npm:classnames@*",
  "http-server": "^14.1.1",
+ "markdown-table": "^3.0.3",
  "rollup": "^4.9.1",
  "tinybench": "^2.5.1"
  }

bind.js

@@ -11,33 +11,56 @@
  var hasOwn = {}.hasOwnProperty;
 
  function classNames () {
- var classes = [];
+ var classes = '';
 
  for (var i = 0; i < arguments.length; i++) {
  var arg = arguments[i];
- if (!arg) continue;
-
- var argType = typeof arg;
-
- if (argType === 'string' || argType === 'number') {
- classes.push(this && this[arg] || arg);
- } else if (Array.isArray(arg)) {
- classes.push(classNames.apply(this, arg));
- } else if (argType === 'object') {
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
- classes.push(arg.toString());
- continue;
- }
-
- for (var key in arg) {
- if (hasOwn.call(arg, key) && arg[key]) {
- classes.push(this && this[key] || key);
- }
- }
+ if (arg) {
+ classes = appendClass(classes, parseValue.call(this, arg));
  }
  }
 
- return classes.join(' ');
+ return classes;
+ }
+
+ function parseValue (arg) {
+ if (typeof arg === 'string' || typeof arg === 'number') {
+ return this && this[arg] || arg;
+ }
+
+ if (typeof arg !== 'object') {
+ return '';
+ }
+
+ if (Array.isArray(arg)) {
+ return classNames.apply(this, arg);
+ }
+
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+ return arg.toString();
+ }
+
+ var classes = '';
+
+ for (var key in arg) {
+ if (hasOwn.call(arg, key) && arg[key]) {
+ classes = appendClass(classes, this && this[key] || key);
+ }
+ }
+
+ return classes;
+ }
+
+ function appendClass (value, newClass) {
+ if (!newClass) {
+ return value;
+ }
+
+ if (value) {
+ return value + ' ' + newClass;
+ }
+
+ return value + newClass;
  }
 
  if (typeof module !== 'undefined' && module.exports) {

index.js

@@ -10,39 +10,57 @@
 
  var hasOwn = {}.hasOwnProperty;
 
- function classNames() {
- var classes = [];
+ function classNames () {
+ var classes = '';
 
  for (var i = 0; i < arguments.length; i++) {
  var arg = arguments[i];
- if (!arg) continue;
-
- var argType = typeof arg;
-
- if (argType === 'string' || argType === 'number') {
- classes.push(arg);
- } else if (Array.isArray(arg)) {
- if (arg.length) {
- var inner = classNames.apply(null, arg);
- if (inner) {
- classes.push(inner);
- }
- }
- } else if (argType === 'object') {
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
- classes.push(arg.toString());
- continue;
- }
-
- for (var key in arg) {
- if (hasOwn.call(arg, key) && arg[key]) {
- classes.push(key);
- }
- }
+ if (arg) {
+ classes = appendClass(classes, parseValue(arg));
  }
  }
 
- return classes.join(' ');
+ return classes;
+ }
+
+ function parseValue (arg) {
+ if (typeof arg === 'string' || typeof arg === 'number') {
+ return arg;
+ }
+
+ if (typeof arg !== 'object') {
+ return '';
+ }
+
+ if (Array.isArray(arg)) {
+ return classNames.apply(null, arg);
+ }
+
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+ return arg.toString();
+ }
+
+ var classes = '';
+
+ for (var key in arg) {
+ if (hasOwn.call(arg, key) && arg[key]) {
+ classes = appendClass(classes, key);
+ }
+ }
+
+ return classes;
+ }
+
+ function appendClass (value, newClass) {
+ if (!newClass) {
+ return value;
+ }
+
+ if (value) {
+ return value + ' ' + newClass;
+ }
+
+ return value + newClass;
  }
 
  if (typeof module !== 'undefined' && module.exports) {