classix 1.0.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -4
- package/dist/index.js +5 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# classix
|
|
2
2
|
|
|
3
|
+
The [fastest](#comparison) and [tiniest](#comparison) utility for conditionally joining classNames.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
```bash
|
|
@@ -8,6 +10,8 @@ npm install classix
|
|
|
8
10
|
|
|
9
11
|
## Usage
|
|
10
12
|
|
|
13
|
+
Use any amount of string expressions and classix will join them like so:
|
|
14
|
+
|
|
11
15
|
```js
|
|
12
16
|
import cx from "classix";
|
|
13
17
|
// or
|
|
@@ -31,6 +35,9 @@ cx(true ? "class1" : "class2");
|
|
|
31
35
|
cx("class1", false ? "class2" : "class3");
|
|
32
36
|
// => "class1 class3"
|
|
33
37
|
|
|
38
|
+
cx(...["class1", "class2", "class3"]);
|
|
39
|
+
// => class1 class2 class3
|
|
40
|
+
|
|
34
41
|
cx(
|
|
35
42
|
"flex",
|
|
36
43
|
isPrimary ? "bg-primary-100" : "bg-secondary-100",
|
|
@@ -39,13 +46,35 @@ cx(
|
|
|
39
46
|
// => "flex bg-primary-100 m-2 p-2" *assuming isPrimary is true and isLarge is false
|
|
40
47
|
```
|
|
41
48
|
|
|
49
|
+
## Comparison
|
|
50
|
+
|
|
51
|
+
| | classix | clsx | classnames |
|
|
52
|
+
| ------------ | ------------------------------------------------ | --------------------------------------------- | --------------------------------------------------- |
|
|
53
|
+
| **Size** | [281B](https://bundlephobia.com/package/classix) | [330B](https://bundlephobia.com/package/clsx) | [454B](https://bundlephobia.com/package/classnames) |
|
|
54
|
+
| **Ops/s\*** | 29M | 28M | 7M |
|
|
55
|
+
| **Strings** | Yes | Yes | Yes |
|
|
56
|
+
| **Numbers** | Yes | Yes | Yes |
|
|
57
|
+
| **Booleans** | Yes | Yes | Yes |
|
|
58
|
+
| **Arrays** | Yes with spreading | Yes | Yes |
|
|
59
|
+
| **Objects** | No\*\* | Yes | Yes |
|
|
60
|
+
|
|
61
|
+
\*Operations per second on an AMD Ryzen 5 5600x
|
|
62
|
+
|
|
63
|
+
\*\*classix aims to provide the fastest and tiniest utility by ommiting the object API, which it considers less ergonomic than standard function arguments:
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
// 🚫
|
|
67
|
+
cx({ class1: isPrimary && isLarge, class2: !isPrimary || !isLarge });
|
|
68
|
+
// ✅
|
|
69
|
+
cx(isPrimary && isLarge ? "class1" : "class2");
|
|
70
|
+
```
|
|
71
|
+
|
|
42
72
|
## Highlights
|
|
43
73
|
|
|
44
|
-
-
|
|
45
|
-
- Under 1 kB minified & gzipped
|
|
46
|
-
- Typed with TypeScript
|
|
47
|
-
- Fully tested
|
|
74
|
+
- Fastest & tiniest
|
|
48
75
|
- Zero dependencies
|
|
76
|
+
- Fully typed (with TypeScript)
|
|
77
|
+
- Fully tested
|
|
49
78
|
- Follows [semantic versioning](https://semver.org/)
|
|
50
79
|
|
|
51
80
|
## Changelog
|
package/dist/index.js
CHANGED
|
@@ -2,13 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.cx = void 0;
|
|
4
4
|
function cx() {
|
|
5
|
-
var str = "", i = 0, arg
|
|
5
|
+
var str = "", i = 0, arg;
|
|
6
6
|
while (i < arguments.length) {
|
|
7
|
-
if ((arg = arguments[i++])
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
7
|
+
if ((arg = arguments[i++]) &&
|
|
8
|
+
(typeof arg === "string" || typeof arg === "number")) {
|
|
9
|
+
str && (str += " ");
|
|
10
|
+
str += arg;
|
|
12
11
|
}
|
|
13
12
|
}
|
|
14
13
|
return str;
|