Skip to content

Commit de0c7fe

Browse files
committed
rename to classcat, meow.
1 parent b875435 commit de0c7fe

File tree

10 files changed

+90
-102
lines changed

10 files changed

+90
-102
lines changed

README.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
# Classwrap
2-
[![Travis CI](https://img.shields.io/travis/JorgeBucaran/classwrap/master.svg)](https://travis-ci.org/JorgeBucaran/classwrap)
3-
[![Codecov](https://img.shields.io/codecov/c/github/JorgeBucaran/classwrap/master.svg)](https://codecov.io/gh/JorgeBucaran/classwrap)
4-
[![npm](https://img.shields.io/npm/v/classwrap.svg)](https://www.npmjs.org/package/classwrap)
1+
# Catclass
2+
[![Travis CI](https://img.shields.io/travis/JorgeBucaran/classcat/master.svg)](https://travis-ci.org/JorgeBucaran/classcat)
3+
[![Codecov](https://img.shields.io/codecov/c/github/JorgeBucaran/classcat/master.svg)](https://codecov.io/gh/JorgeBucaran/classcat)
4+
[![npm](https://img.shields.io/npm/v/classcat.svg)](https://www.npmjs.org/package/classcat)
55

6-
Classwrap is a 0.3 KB JavaScript utility for conditionally concatenating [class names](https://developer.mozilla.org/en-US/docs/Web/API/Element/className).
6+
Classcat is a 0.3 KB JavaScript utility for conditionally concatenating [class names](https://developer.mozilla.org/en-US/docs/Web/API/Element/className).
77

88
[Try it Online](https://codepen.io/JorgeBucaran/pen/GMRjRB)
99

1010
```js
11-
import cw from "classwrap"
11+
import cc from "classcat"
1212

1313
export function ToggleButton({ toggle, isOn }) {
1414
return (
1515
<div class="btn" onclick={toggle}>
1616
<div
17-
class={cw({
17+
class={cc({
1818
circle: true,
1919
off: !isOn,
2020
on: isOn
2121
})}
2222
/>
2323
<span
24-
class={cw({
24+
class={cc({
2525
textOff: !isOn
2626
})}
2727
>
@@ -32,38 +32,38 @@ export function ToggleButton({ toggle, isOn }) {
3232
}
3333
```
3434

35-
Classwrap works in all browsers >=IE9. Use it with your favorite JavaScript view library.
35+
classcat works in all browsers >=IE9. Use it with your favorite JavaScript view library.
3636

37-
[![Classwrap](https://user-images.githubusercontent.com/56996/30416101-cda83bd4-9965-11e7-9db5-230ba3fc83fd.gif)](https://codepen.io/JorgeBucaran/full/GMRjRB/)
37+
[![classcat](https://user-images.githubusercontent.com/56996/30416101-cda83bd4-9965-11e7-9db5-230ba3fc83fd.gif)](https://codepen.io/JorgeBucaran/full/GMRjRB/)
3838

3939
## Installation
4040

4141
Install with npm / Yarn.
4242

4343
<pre>
44-
npm i <a href="https://www.npmjs.com/package/classwrap">classwrap</a>
44+
npm i <a href="https://www.npmjs.com/package/classcat">classcat</a>
4545
</pre>
4646

4747
Then with a module bundler like [Rollup](https://github.com/rollup/rollup) or [Webpack](https://github.com/webpack/webpack), use as you would anything else.
4848

4949
```js
50-
import cw from "classwrap"
50+
import cc from "classcat"
5151
```
5252

53-
Or download the minified library from a [unpkg](https://unpkg.com/classwrap@latest/dist/classwrap.js) or [jsDelivr](https://cdn.jsdelivr.net/npm/classwrap@latest/dist/classwrap.js).
53+
Or download the minified library from a [unpkg](https://unpkg.com/classcat@latest/dist/classcat.js) or [jsDelivr](https://cdn.jsdelivr.net/npm/classcat@latest/dist/classcat.js).
5454

5555
```html
56-
<script src="https://unpkg.com/classwrap"></script>
56+
<script src="https://unpkg.com/classcat"></script>
5757
```
5858

59-
Then find it on `window.classwrap`.
59+
Then find it on `window.classcat`.
6060

6161
## Usage
6262

63-
Classwrap joins all elements of an array or keys of an object into a string. If the value associated with a given key is falsy, the key will be ignored.
63+
classcat joins all elements of an array or keys of an object into a string. If the value associated with a given key is falsy, the key will be ignored.
6464

6565
```js
66-
cw([
66+
cc([
6767
"btn",
6868
{
6969
"btn-active": true,
@@ -75,7 +75,7 @@ cw([
7575
Nested arrays or objects are supported too. Use this feature to assemble classes with a common prefix.
7676

7777
```js
78-
cw([
78+
cc([
7979
"tab",
8080
{
8181
tab: {
@@ -89,18 +89,18 @@ cw([
8989

9090
## Credits
9191

92-
Classwrap was inspired by [JedWatson/classnames](https://github.com/JedWatson/classnames) with support for nested objects and [improved](/bench/README.md) performance. It differs from classnames in that it does not accept [variable arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments).
92+
classcat was inspired by [JedWatson/classnames](https://github.com/JedWatson/classnames) with support for nested objects and [improved](/bench/README.md) performance. It differs from classnames in that it does not accept [variable arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments).
9393

9494
```js
95-
cw("foo", "bar", "baz") // => foo
95+
cc("foo", "bar", "baz") // => foo
9696
```
9797

9898
To solve this, wrap the arguments inside an array.
9999

100100
```js
101-
cw(["foo", "bar", "baz"]) // => foo bar baz
101+
cc(["foo", "bar", "baz"]) // => foo bar baz
102102
```
103103

104104
## License
105105

106-
Classwrap is MIT licensed. See [LICENSE](LICENSE.md).
106+
classcat is MIT licensed. See [LICENSE](LICENSE.md).

bench/README.md

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Benchmarks
22

3-
[Classwrap](../README.md) vs. [JedWatson/classnames](https://github.com/JedWatson/classnames) benchmarks.
3+
[Classcat](../README.md) vs. [classNames](https://github.com/JedWatson/classnames) benchmarks.
44

55
## Run
66

@@ -10,31 +10,26 @@ npm i && node .
1010

1111
## Results
1212

13-
Please be aware that results may vary across browsers and Node.js runtimes. All results run on a 2.4GHz Intel Core i7 CPU with 16 GB memory.
13+
Please be aware that results may vary across browsers and Node.js runtimes. All tests run on a 2.4GHz Intel Core i7 CPU with 16 GB memory.
1414

1515
<pre>
16-
classwrap – Strings x <b>31,989,110</b> ops/sec ±0.88% (95 runs sampled)
17-
classnames – Strings x 4,023,323 ops/sec ±0.84% (93 runs sampled)
16+
<b>Classcat – Strings × 31,836,467 ops/sec</b>
17+
classNames – Strings × 3,751,299 ops/sec
18+
Fastest is Classcat – Strings
1819

19-
<b>Fastest is classwrap – Strings</b>
20+
<b>Classcat – Objects × 6,385,707 ops/sec</b>
21+
classNames – Objects × 3,260,164 ops/sec
22+
Fastest is Classcat – Objects
2023

21-
classwrap – Objects x <b>5,153,511</b> ops/sec ±0.85% (98 runs sampled)
22-
classnames – Objects x 3,840,956 ops/sec ±0.86% (97 runs sampled)
24+
<b>Classcat – Strings & Objects × 31,213,754 ops/sec</b>
25+
classNames – Strings & Objects × 3,000,682 ops/sec
26+
Fastest is Classcat – Strings & Objects
2327

24-
<b>Fastest is classwrap – Objects</b>
28+
<b>Classcat – Mixed × 29,953,843 ops/sec</b>
29+
classNames – Mixed × 2,126,420 ops/sec
30+
Fastest is Classcat – Mixed
2531

26-
classwrap – Strings & Objects x <b>30,230,884</b> ops/sec ±0.89% (94 runs sampled)
27-
classnames – Strings & Objects x 2,697,613 ops/sec ±0.99% (97 runs sampled)
28-
29-
<b>Fastest is classwrap – Strings & Objects</b>
30-
31-
classwrap – Mixed x <b>29,473,452</b> ops/sec ±0.96% (91 runs sampled)</b>
32-
classnames – Mixed x 1,577,708 ops/sec ±0.93% (94 runs sampled)
33-
34-
<b>Fastest is classwrap – Mixed</b>
35-
36-
classwrap – Arrays x <b>2,488,897</b> ops/sec ±0.83% (95 runs sampled)
37-
classnames – Arrays x 754,558 ops/sec ±0.82% (95 runs sampled)
38-
39-
<b>Fastest is classwrap – Arrays</b>
32+
<b>Classcat – Arrays × 3,628,801 ops/sec</b>
33+
classNames – Arrays × 915,020 ops/sec
34+
Fastest is Classcat – Arrays
4035
</pre>

bench/index.js

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
1-
const benchmark = require("benchmark")
2-
const classnames = require("classnames")
3-
const classwrap = require("../")
1+
const { Suite } = require("benchmark")
2+
const cx = require("classnames")
3+
const cc = require("../")
44

5-
require("./fixtures").map(fixed => {
6-
const suite = new benchmark.Suite()
7-
8-
suite.add(`classwrap – ${fixed.description}`, () => {
9-
classwrap.apply({}, fixed.args)
10-
})
11-
12-
suite.add(`classnames – ${fixed.description}`, () => {
13-
classnames.apply({}, fixed.args)
14-
})
15-
16-
suite.on("cycle", event => console.log(event.target + ""))
17-
18-
suite.on("complete", function() {
19-
console.log(`\nFastest is ${this.filter("fastest").pluck("name")} \n`)
20-
})
21-
22-
suite.on("error", ({ target }) => {
23-
console.log(target.error.message)
24-
throw target.error
25-
})
26-
27-
suite.run()
5+
require("./fixtures").map((fixed, index, { length }) => {
6+
const suite = new Suite()
7+
suite
8+
.add(`Classcat – ${fixed.description}`, () => cc.apply({}, fixed.args))
9+
.add(`classNames – ${fixed.description}`, () => cx.apply({}, fixed.args))
10+
.on("cycle", ({ target: { name, hz, stats } }) =>
11+
console.log(`${name} × ${Math.floor(hz).toLocaleString()} ops/sec`)
12+
)
13+
.on("complete", function() {
14+
console.log(
15+
`Fastest is ${this.filter("fastest").map("name")}${index + 1 < length
16+
? "\n"
17+
: ""}`
18+
)
19+
})
20+
.run()
2821
})

bench/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"name": "classwrap-benchmarks",
2+
"name": "classcat-benchmarks",
33
"version": "1.0.0",
44
"private": true,
5-
"description": "Classwrap vs JedWatson/classnames benchmarks.",
5+
"description": "Classcat vs JedWatson/classnames benchmarks.",
66
"main": "index.js",
77
"scripts": {},
88
"author": "Jorge Bucaran",
99
"license": "MIT",
1010
"devDependencies": {
1111
"benchmark": "^2.1.4",
12-
"classnames": "2.2.5"
12+
"classnames": "*"
1313
}
1414
}

classwrap.d.ts renamed to classcat.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export as namespace classwrap
1+
export as namespace classcat
22

33
export interface ClassSet {
44
[key: string]: boolean | any | ClassSet

package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
2-
"name": "classwrap",
2+
"name": "classcat",
33
"description": "0.3 KB JavaScript utility for conditionally concatenating class names.",
4-
"version": "1.2.3",
5-
"main": "dist/classwrap.js",
4+
"version": "1.0.0",
5+
"main": "dist/classcat.js",
66
"jsnext:main": "src/index.js",
77
"module": "src/index.js",
8-
"typings": "classwrap.d.ts",
8+
"typings": "classcat.d.ts",
99
"license": "MIT",
10-
"repository": "JorgeBucaran/classwrap",
10+
"repository": "JorgeBucaran/classcat",
1111
"files": [
1212
"src",
1313
"dist",
14-
"classwrap.d.ts"
14+
"classcat.d.ts"
1515
],
1616
"author": "Jorge Bucaran",
1717
"keywords": [
@@ -23,8 +23,8 @@
2323
"scripts": {
2424
"test": "jest --coverage --no-cache && tsc -p tests/ts",
2525
"build": "npm run bundle && npm run minify",
26-
"bundle": "rollup -i src/index.js -o dist/classwrap.js -m -f umd -n classwrap",
27-
"minify": "uglifyjs dist/classwrap.js -o dist/classwrap.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --source-map dist/classwrap.js.map",
26+
"bundle": "rollup -i src/index.js -o dist/classcat.js -m -f umd -n classcat",
27+
"minify": "uglifyjs dist/classcat.js -o dist/classcat.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --source-map dist/classcat.js.map",
2828
"bench": "node bench",
2929
"prepare": "npm run build",
3030
"format": "prettier --semi false --write 'src/**/*.js' '{,tests/ts/}*.ts'",

src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default function wrap(classes, prefix) {
1+
export default function cat(classes, prefix) {
22
var value
33
var className = ""
44
var type = typeof classes
@@ -11,7 +11,7 @@ export default function wrap(classes, prefix) {
1111

1212
if (Array.isArray(classes) && classes.length) {
1313
for (var i = 0, len = classes.length; i < len; i++) {
14-
if ((value = wrap(classes[i], prefix))) {
14+
if ((value = cat(classes[i], prefix))) {
1515
className += (className && prefix) + value
1616
}
1717
}
@@ -21,7 +21,7 @@ export default function wrap(classes, prefix) {
2121
className +=
2222
(className && prefix) +
2323
i +
24-
(typeof value === "object" ? wrap(value, prefix + i) : "")
24+
(typeof value === "object" ? cat(value, prefix + i) : "")
2525
}
2626
}
2727
}

tests/index.test.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import cw from "../src"
1+
import cc from "../src"
22

33
test("falsy", () => {
4-
expect(cw({})).toBe("")
5-
expect(cw([])).toBe("")
6-
expect(cw(["", null, false, undefined, 0, NaN])).toBe("")
4+
expect(cc({})).toBe("")
5+
expect(cc([])).toBe("")
6+
expect(cc(["", null, false, undefined, 0, NaN])).toBe("")
77
})
88

99
test("arrays", () => {
10-
expect(cw(["foo", "bar", false, "baz"])).toBe("foo bar baz")
10+
expect(cc(["foo", "bar", false, "baz"])).toBe("foo bar baz")
1111
})
1212

1313
test("objects", () => {
1414
expect(
15-
cw({
15+
cc({
1616
foo: true,
1717
bar: true,
1818
quux: false,
@@ -24,7 +24,7 @@ test("objects", () => {
2424
test("mix", () => {
2525
const baz = "baz"
2626
expect(
27-
cw([
27+
cc([
2828
"foo",
2929
"foo-bar",
3030
{
@@ -36,7 +36,7 @@ test("mix", () => {
3636

3737
test("prefix", () => {
3838
expect(
39-
cw(
39+
cc(
4040
{
4141
foo: true,
4242
bar: true,
@@ -50,7 +50,7 @@ test("prefix", () => {
5050

5151
test("deep", () => {
5252
expect(
53-
cw([
53+
cc([
5454
"foo",
5555
{
5656
foo: {
@@ -68,7 +68,7 @@ test("deep", () => {
6868
test("not owned props", () => {
6969
Object.prototype.myFunction = () => {}
7070

71-
expect(cw({})).toBe("")
71+
expect(cc({})).toBe("")
7272

7373
delete Object.prototype.myFunction
7474
})

tests/ts/index.test.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import classwrap from "classwrap"
1+
import cc from "classcat"
22

33
let className: string
44

5-
className = classwrap("btn")
5+
className = cc("btn")
66

7-
className = classwrap(12)
7+
className = cc(12)
88

9-
className = classwrap({
9+
className = cc({
1010
btn: true
1111
})
1212

13-
className = classwrap(["btn", "btn-active"])
13+
className = cc(["btn", "btn-active"])
1414

15-
className = classwrap([
15+
className = cc([
1616
"btn",
1717
{
1818
btn: {

tests/ts/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"noEmit": true,
55
"baseUrl": "../..",
66
"paths": {
7-
"classwrap": ["src", "classwrap.d.ts"]
7+
"classcat": ["src", "classcat.d.ts"]
88
}
99
},
1010
"include": ["*.ts", "**/*.ts"]

0 commit comments

Comments
 (0)