<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script><script src='https://unpkg.com/clsx@1.2.1/dist/clsx.min.js'></script>var str = 'style';var obj = { 'style-2': true, 'style-3': false, 'style-4': true,}var arr = ['style-5', 'style-6']const isArray = (value) => Array.isArray(value)const isUndefined = (value) => typeof value === "undefined"const isString = (value) => typeof value === "string"const isNumber = (value) => !Number.isNaN(value) && typeof value === "number"const isObject = (value) => !isArray(value) && value !== null && typeof value === "object"function composeClass(values) { if (!values.length) { return } const classNameStack = [] for (const value of values) { switch (true) { case !value: { continue } case isString(value): case isNumber(value): { classNameStack.push(value) continue } case isArray(value) && value.length > 0: { const valueFromArray = Reflect.apply(composeClass, undefined, value) if (!isUndefined(valueFromArray)) { classNameStack.push(valueFromArray) } continue } case isObject(value): { for (const key in value) { if (value[key]) { classNameStack.push(key) } } continue } } } return classNameStack.length > 0 ? classNameStack.join(" ") : undefined}let result = window.classNames(str, obj, arr, 'test classname')let result = window.clsx(str, obj, arr, 'test classname')let result = composeClass(str, obj, arr, 'test classname')--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| classnames | |
| clsx | |
| custom implemenatation |
| Test name | Executions per second |
|---|---|
| classnames | 2602847.5 Ops/sec |
| clsx | 3746647.0 Ops/sec |
| custom implemenatation | 1197065.0 Ops/sec |
Let's break down the provided benchmark and explain what's being tested.
Benchmark Purpose:
The benchmark is designed to compare three approaches for generating class names:
classnames: A popular JavaScript library that takes an array of strings as input and returns a single string containing all the classes.clsx: Another JavaScript library that provides a similar functionality, but with some differences in syntax and behavior compared to classnames.Options being compared:
The benchmark compares the performance of three approaches:
classnamesclsxEach approach takes an array of strings (arr) and some string literals (str and obj) as input, and generates a class name by concatenating all the classes. The order of concatenation is determined by the library's logic.
Pros and Cons:
Here are some pros and cons for each approach:
classnames:clsx:classnames, and some users might find the syntax unfamiliar.Library explanation (if applicable):
In this benchmark, two JavaScript libraries are used:
classnames: A popular library developed by Kyle Mathews that provides a simple and efficient way to generate class names. It's widely used in the industry and has good community support.clsx: A library developed by Alex Strooper that offers more features and flexibility compared to classnames. While it's not as widely used, it still has a dedicated user base.Special JS feature or syntax:
The benchmark uses some JavaScript features, such as:
=>)...)These features are supported by most modern JavaScript engines, but may not be compatible with older browsers or versions of Node.js.
Now that we've gone through the explanation, let's discuss other alternatives. There might be other libraries or approaches available for generating class names in JavaScript, such as:
lodashclassnames: A version of classnames maintained by the Lodash library.dom-calc: Another approach to generate class names using a more declarative syntax.Keep in mind that these alternatives might not be as widely used or optimized as the libraries mentioned earlier, but they can still provide good performance and functionality for specific use cases.
