klsx 0.1.0 → 0.1.2

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.
Files changed (4) hide show
  1. package/README.md +88 -73
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +38 -36
package/README.md CHANGED
@@ -1,40 +1,35 @@
1
1
  # KLSX
2
2
 
3
- A simple replacement for [clsx](https://github.com/lukeed/clsx) **_you may not actually need_** (see [benchmark](#benchmark)).
3
+ A simple replacement for [clsx](https://github.com/lukeed/clsx) **_you may not actually need_** (see the [benchmark](https://github.com/vuolter/klsx/blob/main/BENCHMARK.md))
4
4
 
5
- Developed as a case study.
5
+ Developed as a case study, [Bun](https://bun.com) friendly.
6
6
 
7
- ## Installation
7
+ ## Features
8
8
 
9
- To install dependencies:
9
+ - Unnecessarily fast
10
+ - Same functionality and API of clsx
11
+ - Modern ESM syntax
12
+ - Zero dependencies
13
+ - No "lite" mode (simply doesn't make any sense)
14
+ - Only 277B (~190B compressed)
15
+ - Deeply typed and tested
16
+ - Experimental WASM variant (for research purposes, do not use it!)
10
17
 
11
- ```bash
12
- bun install
13
- ```
14
-
15
- To build:
18
+ ## Installation
16
19
 
17
20
  ```bash
18
- bun run build
21
+ bun add klsx
19
22
  ```
20
23
 
21
- ## Testing
22
-
23
- To run test suite:
24
+ or with `npm`:
24
25
 
25
26
  ```bash
26
- bun test
27
+ npm install klsx
27
28
  ```
28
29
 
29
- To run benchmark suite:
30
-
31
- ```bash
32
- bun bench
33
- ```
30
+ _(or with whatever package manager you prefer)_
34
31
 
35
- ## Usage
36
-
37
- Using the function name `klsx`:
32
+ ## Quick Start
38
33
 
39
34
  ```typescript
40
35
  import { klsx } from 'klsx'
@@ -44,7 +39,7 @@ klsx('foo', { bar: true, bux: false }, 'baz') // -> "foo bar baz"
44
39
  klsx('foo', [0, 'bar', [{ bux: null, baz: 'I am not empty' }, undefined], 'bax']) // -> "foo bar baz bax"
45
40
  ```
46
41
 
47
- Using its short alias `cn`:
42
+ or with the short alias `cn`:
48
43
 
49
44
  ```typescript
50
45
  import { cn } from 'klsx'
@@ -54,59 +49,79 @@ cn('foo', { bar: true, bux: false }, 'baz') // -> "foo bar baz"
54
49
  cn('foo', [0, 'bar', [{ bux: null, baz: 'I am not empty' }, undefined], 'bax']) // -> "foo bar baz bax"
55
50
  ```
56
51
 
57
- ## Case Study
52
+ ## Integrations
58
53
 
59
- _Coming soon..._
54
+ ### Tailwind CSS
55
+
56
+ <details open>
57
+ <summary>
58
+ Visual Studio Code
59
+ </summary>
60
+
61
+ 1. Install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension.
62
+
63
+ 2. Update your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings) configuration with:
64
+
65
+ ```json
66
+ {
67
+ "tailwindCSS.classFunctions": ["klsx", "cn"]
68
+ }
69
+ ```
70
+
71
+ </details>
72
+
73
+ ### ESLint
74
+
75
+ 1. Install the [eslint-plugin-clsx](https://www.npmjs.com/package/eslint-plugin-clsx) plugin:
76
+
77
+ ```bash
78
+ bun add -D eslint eslint-plugin-clsx
79
+ ```
80
+
81
+ 2. Update your `eslint.config.js` configuration to handle `klsx`:
82
+
83
+ ```typescript
84
+ import { defineConfig } from 'eslint/config'
85
+ import clsx from 'eslint-plugin-clsx'
86
+
87
+ export default defineConfig({
88
+ plugins: { clsx },
89
+ settings: {
90
+ clsxOptions: {
91
+ klsx: ['default', 'klsx', 'cn'],
92
+ },
93
+ },
94
+ })
95
+ ```
96
+
97
+ ## Development
98
+
99
+ Install dependencies:
60
100
 
61
- ## Benchmark
101
+ ```bash
102
+ bun install
103
+ ```
62
104
 
63
- Results of 10ms tests in [Bun](https://bun.com) v1.3.2 _(tl;dr: **KLSX is the fastest, but the gap is negligible**)_:
105
+ Build dist files:
64
106
 
65
107
  ```bash
66
- Benchmark (short strings)
67
- ┌───┬────────────┬──────────────────┬──────────────────┬────────────────────────┬────────────────────────┬─────────┐
68
- │ │ Task name │ Latency avg (ns) │ Latency med (ns) │ Throughput avg (ops/s) │ Throughput med (ops/s) │ Samples │
69
- ├───┼────────────┼──────────────────┼──────────────────┼────────────────────────┼────────────────────────┼─────────┤
70
- │ 0 │ KLSX │ 56.46 ± 0.68% │ 42.00 ± 1.00 │ 20554389 ± 0.13% │ 23809524 ± 580720 │ 177109 │
71
- │ 1 │ classix │ 58.41 ± 4.33% │ 42.00 ± 1.00 │ 20227141 ± 0.13% │ 23809524 ± 580720 │ 171195 │
72
- │ 2 │ clsx │ 55.72 ± 0.28% │ 42.00 ± 1.00 │ 20357130 ± 0.13% │ 23809524 ± 580720 │ 179455 │
73
- │ 3 │ classnames │ 58.06 ± 4.55% │ 42.00 ± 1.00 │ 20150251 ± 0.13% │ 23809524 ± 580720 │ 172248 │
74
- └───┴────────────┴──────────────────┴──────────────────┴────────────────────────┴────────────────────────┴─────────┘
75
-
76
- Benchmark (long strings)
77
- ┌───┬────────────┬──────────────────┬──────────────────┬────────────────────────┬────────────────────────┬─────────┐
78
- │ │ Task name │ Latency avg (ns) │ Latency med (ns) │ Throughput avg (ops/s) │ Throughput med (ops/s) │ Samples │
79
- ├───┼────────────┼──────────────────┼──────────────────┼────────────────────────┼────────────────────────┼─────────┤
80
- │ 0 │ KLSX │ 135.32 ± 5.93% │ 125.00 ± 0.00 │ 9377312 ± 0.19% │ 8000000 ± 0 │ 73900 │
81
- │ 1 │ classix │ 174.34 ± 0.75% │ 125.00 ± 0.00 │ 6765287 ± 0.20% │ 8000000 ± 0 │ 57360 │
82
- │ 2 │ clsx │ 222.94 ± 6.05% │ 167.00 ± 1.00 │ 5421387 ± 0.20% │ 5988024 ± 36072 │ 44855 │
83
- │ 3 │ classnames │ 147.47 ± 0.53% │ 125.00 ± 0.00 │ 7482902 ± 0.13% │ 8000000 ± 0 │ 67812 │
84
- └───┴────────────┴──────────────────┴──────────────────┴────────────────────────┴────────────────────────┴─────────┘
85
-
86
- Benchmark (objects)
87
- ┌───┬────────────┬──────────────────┬──────────────────┬────────────────────────┬────────────────────────┬─────────┐
88
- │ │ Task name │ Latency avg (ns) │ Latency med (ns) │ Throughput avg (ops/s) │ Throughput med (ops/s) │ Samples │
89
- ├───┼────────────┼──────────────────┼──────────────────┼────────────────────────┼────────────────────────┼─────────┤
90
- │ 0 │ KLSX │ 98.96 ± 1.29% │ 83.00 ± 0.00 │ 11274574 ± 0.10% │ 12048193 ± 0 │ 101049 │
91
- │ 1 │ clsx │ 105.39 ± 0.68% │ 83.00 ± 0.00 │ 10986267 ± 0.13% │ 12048193 ± 0 │ 94887 │
92
- │ 2 │ classnames │ 97.48 ± 0.42% │ 83.00 ± 0.00 │ 11183838 ± 0.11% │ 12048193 ± 0 │ 102591 │
93
- └───┴────────────┴──────────────────┴──────────────────┴────────────────────────┴────────────────────────┴─────────┘
94
-
95
- Benchmark (arrays)
96
- ┌───┬────────────┬──────────────────┬──────────────────┬────────────────────────┬────────────────────────┬─────────┐
97
- │ │ Task name │ Latency avg (ns) │ Latency med (ns) │ Throughput avg (ops/s) │ Throughput med (ops/s) │ Samples │
98
- ├───┼────────────┼──────────────────┼──────────────────┼────────────────────────┼────────────────────────┼─────────┤
99
- │ 0 │ KLSX │ 91.37 ± 0.71% │ 83.00 ± 0.00 │ 11628447 ± 0.08% │ 12048193 ± 0 │ 109448 │
100
- │ 1 │ clsx │ 140.18 ± 9.28% │ 125.00 ± 0.00 │ 8325415 ± 0.16% │ 8000000 ± 0 │ 71340 │
101
- │ 2 │ classnames │ 137.70 ± 0.34% │ 125.00 ± 0.00 │ 7673930 ± 0.11% │ 8000000 ± 0 │ 72624 │
102
- └───┴────────────┴──────────────────┴──────────────────┴────────────────────────┴────────────────────────┴─────────┘
103
-
104
- Benchmark (mixed)
105
- ┌───┬────────────┬──────────────────┬──────────────────┬────────────────────────┬────────────────────────┬─────────┐
106
- │ │ Task name │ Latency avg (ns) │ Latency med (ns) │ Throughput avg (ops/s) │ Throughput med (ops/s) │ Samples │
107
- ├───┼────────────┼──────────────────┼──────────────────┼────────────────────────┼────────────────────────┼─────────┤
108
- │ 0 │ KLSX │ 120.19 ± 6.40% │ 125.00 ± 41.00 │ 9823538 ± 0.16% │ 8000000 ± 3904762 │ 83200 │
109
- │ 1 │ clsx │ 150.46 ± 6.24% │ 125.00 ± 0.00 │ 7441597 ± 0.13% │ 8000000 ± 0 │ 66465 │
110
- │ 2 │ classnames │ 179.99 ± 5.99% │ 167.00 ± 0.00 │ 6080521 ± 0.13% │ 5988024 ± 0 │ 55558 │
111
- └───┴────────────┴──────────────────┴──────────────────┴────────────────────────┴────────────────────────┴─────────┘
108
+ bun run build
112
109
  ```
110
+
111
+ ## Testing
112
+
113
+ Run test suite:
114
+
115
+ ```bash
116
+ bun test
117
+ ```
118
+
119
+ Run benchmark suite:
120
+
121
+ ```bash
122
+ bun bench
123
+ ```
124
+
125
+ ## Case Study
126
+
127
+ _Coming soon..._
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  //#region src/cn.d.ts
2
2
  declare function cn(...args: ClsnValue[]): string;
3
3
  //#endregion
4
- export { cn as clsn, cn, cn as default };
4
+ export { cn, cn as default, cn as klsx };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- function e(t){let n=``;for(let r of t)if(r){if(typeof r==`string`)n=n?n+` `+r:r;else if(typeof r==`object`)if(Array.isArray(r)){let t=e(r);t&&(n=n?n+` `+t:t)}else for(let e in r)r[e]&&(n=n?n+` `+e:e)}return n}function t(...t){return e(t)}export{t as clsn,t as cn,t as default};
1
+ function e(t){let n=``;for(let r of t)if(r){if(typeof r==`string`)n=n?n+` `+r:r;else if(typeof r==`object`)if(Array.isArray(r)){let t=e(r);t&&(n=n?n+` `+t:t)}else for(let e in r)r[e]&&(n=n?n+` `+e:e)}return n}function t(...t){return e(t)}export{t as cn,t as default,t as klsx};
package/package.json CHANGED
@@ -1,55 +1,22 @@
1
1
  {
2
2
  "name": "klsx",
3
- "type": "module",
4
- "version": "0.1.0",
5
- "description": "Same as clsx but \"maybe\" better",
3
+ "version": "0.1.2",
6
4
  "author": {
7
5
  "name": "Walter Purcaro",
8
6
  "url": "https://github.com/vuolter"
9
7
  },
10
- "license": "MIT",
11
8
  "repository": {
12
9
  "type": "git",
13
10
  "url": "git+https://github.com/vuolter/klsx.git"
14
11
  },
15
- "keywords": [
16
- "cn",
17
- "cx",
18
- "klsx",
19
- "clsx",
20
- "classix",
21
- "classname",
22
- "classnames",
23
- "bun"
24
- ],
25
- "exports": {
26
- ".": "./dist/index.js",
27
- "./package.json": "./package.json"
28
- },
29
12
  "main": "./dist/index.js",
30
13
  "module": "./dist/index.js",
31
- "types": "./dist/index.d.ts",
32
- "files": [
33
- "dist"
34
- ],
35
- "engines": {
36
- "node": ">=18"
37
- },
38
- "url": "https://github.com/vuolter/klsx",
39
- "scripts": {
40
- "build": "bun typecheck && tsdown",
41
- "format": "prettier . --cache --experimental-cli --write",
42
- "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint --cache-strategy content --concurrency auto --fix .",
43
- "typecheck": "tsgo",
44
- "bench": "bun ./tests/bench",
45
- "postinstall": "npm install --force --ignore-scripts --package-lock-only --silent"
46
- },
47
14
  "devDependencies": {
48
15
  "@eslint/js": "^9.39.1",
49
16
  "@prettier/plugin-oxc": "^0.0.5",
50
17
  "@socketsecurity/bun-security-scanner": "^1.1.1",
51
18
  "@types/bun": "^1.3.2",
52
- "@typescript/native-preview": "^7.0.0-dev.20251120.1",
19
+ "@typescript/native-preview": "^7.0.0-dev.20251121.1",
53
20
  "classix": "^2.2.6",
54
21
  "classnames": "^2.5.1",
55
22
  "clsx": "^2.1.1",
@@ -68,5 +35,40 @@
68
35
  "tinybench": "^5.1.0",
69
36
  "tsdown": "^0.16.6",
70
37
  "typescript-eslint": "^8.47.0"
71
- }
38
+ },
39
+ "exports": {
40
+ ".": "./dist/index.js",
41
+ "./package.json": "./package.json"
42
+ },
43
+ "description": "Same as clsx but \"maybe\" better",
44
+ "engines": {
45
+ "node": ">=18"
46
+ },
47
+ "files": [
48
+ "dist"
49
+ ],
50
+ "keywords": [
51
+ "cn",
52
+ "cx",
53
+ "klsx",
54
+ "clsx",
55
+ "class",
56
+ "classix",
57
+ "classname",
58
+ "classnames",
59
+ "bun"
60
+ ],
61
+ "license": "MIT",
62
+ "scripts": {
63
+ "build": "bun typecheck && tsdown",
64
+ "format": "prettier . --cache --experimental-cli --write",
65
+ "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint --cache-strategy content --concurrency auto --fix .",
66
+ "typecheck": "tsgo",
67
+ "bench": "bun ./tests/bench",
68
+ "postinstall": "npm install --force --ignore-scripts --package-lock-only --silent"
69
+ },
70
+ "sideEffects": false,
71
+ "type": "module",
72
+ "types": "./dist/index.d.ts",
73
+ "url": "https://github.com/vuolter/klsx"
72
74
  }