Merge pull request #34 from jorgebucaran/5.0.0

- Use ES modules.
  - Include CJS fallback for Node 10 and below.
- Remove hasOwnProperty check.
- Allow using a number as a class
- Modernize benchmarks.

Author: jorgebucaran

.github/workflows/test.yml

@@ -1,25 +1,23 @@
-name: Run tests
-
+name: CI
 on: push
-
 jobs:
   test:
-    env: 
+    env:
       NODE_ENV: development
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [6.x, 8.x, 10.x, 12.x]
+        node-version: [12.x, 14.x]
     steps:
-    - name: Checkout
-      uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Test
-      run: |
-        npm install -g codecov
-        npm install
-        npm test
-        codecov
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Test
+        run: |
+          npm install -g codecov
+          npm install
+          npm test
+          codecov

.gitignore

@@ -1,21 +1,10 @@
-# IDE
-.idea
-.vscode
-
-# Logs
-*.log*
-yarn.lock
-package-lock.json
+*.map
+*.br
+*.gz
 
-# Coverage
-coverage
-.nyc_output
+*.cjs
+*.min.js
 
-# Misc
+package-lock.json
 node_modules
-*.xml
-.DS_Store
-
-# Dist
-*.gz
-dist
+coverage

README.md

@@ -1,99 +1,86 @@
-# Classcat [![npm](https://img.shields.io/npm/v/classcat.svg?label=&color=0080FF)](https://github.com/jorgebucaran/classcat/releases/latest)
+# Classcat
 
-> Build a space-separated [class attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) quickly.
+> Build a [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute string quickly.
 
-- Easily add and remove class names based on a truthy or falsy value.
-- Works best when paired with a view framework. which will it be?
-- Up to 2.5x faster than the alternatives ([run the benchmarks](#run-the-benchmarks)).
-- Ridiculously tiny at [260B](http://bundlephobia.com/result?p=classcat). No dependencies.
+- Framework agnostic, reusable, plain vanilla JavaScript.
+- Up to [2.5x faster]() than alternatives.
+- [217 B](http://bundlephobia.com/result?p=classcat) (minified+gzipped). 👌
 
-## Quickstart
+This module makes it easy to build a space-delimited `class` attribute string from an object or array of CSS class names. Just pair each class with a boolean value to add or remove them conditionally.
 
-```console
-npm i classcat
-```
-
-Don't want to set up a build step? Import it inside a `<script>` tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
-
-```html
-<script type="module">
-  import cc from "https://unpkg.com/classcat"
-</script>
-```
-
-Classcat takes an array of strings or name-value object and joins all the [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) values into a space-separated string. Arrays may be nested too. That's really all there is to it. Here's the [first example](https://codepen.io/jorgebucaran/pen/NYgLwG?editors=0010) to get you started.
-
-```jsx
+```js
 import cc from "classcat"
 
-export const ToggleButton = ({ isOn }) => (
-  <div class="btn">
+export const ToggleButton = ({ isOn, toggle }) => (
+  <div className="btn" onClick={() => toggle(!isOn)}>
     <div
-      class={cc({
+      className={cc({
         circle: true,
         off: !isOn,
         on: isOn,
       })}
     />
-    <span class={cc({ textOff: !isOn })}>{isOn ? "ON" : "OFF"}</span>
+    <span className={cc({ textOff: !isOn })}>{isOn ? "ON" : "OFF"}</span>
   </div>
 )
 ```
 
-## API
+[Try with React](https://codepen.io/jorgebucaran/pen/NYgLwG?editors=0010), [lit-html](https://codepen.io/jorgebucaran/pen/LjPJEp?editors=1000), [Mithril](https://codepen.io/jorgebucaran/pen/JjjOjwB?editors=1100), [Superfine](https://codepen.io/jorgebucaran/pen/wrMvjz?editors=1000)
 
-### `cc(string | number | object | array)`
+## Installation
 
-```js
-import cc from "classcat"
+```console
+npm install classcat
+```
 
-cc("foo") //=> "foo"
+Or without a build step—import it right in your browser.
 
-cc(["foo", "bar", "baz"]) //=> "foo bar baz"
+```html
+<script type="module">
+  import cc from "https://unpkg.com/classcat"
+</script>
+```
 
-cc({ foo: false, bar: null, baz: undefined }) //=> ""
+## API
 
-cc({ foo: true, bar: false, baz: true }) //=> "foo baz"
+### `cc(names)`
 
-cc([{ foo: true, bar: false }, "baz"]) //=> "foo baz"
+```ps
+cc(names: string | number | object | array): string
 ```
 
-## Run the benchmarks
+```js
+import cc from "classcat"
 
-```console
-npm run build && npm i -C bench && npm -C bench start
+cc("elf") //=> "elf"
+
+cc(["elf", "orc", "gnome"]) //=> "elf orc gnome"
+
+cc({
+  elf: false,
+  orc: null,
+  gnome: undefined,
+}) //=> ""
+
+cc({
+  elf: true,
+  orc: false,
+  gnome: true,
+}) //=> "elf gnome"
+
+cc([
+  {
+    elf: true,
+    orc: false,
+  },
+  "gnome",
+]) //=> "elf gnome"
 ```
 
+## Benchmarks
+
 ```console
-# Strings
-classcat × 15,927,163 ops/sec
-classnames × 2,694,533 ops/sec
-clsx × 8,542,847 ops/sec
-
-# Objects
-classcat × 15,205,051 ops/sec
-classnames × 2,873,497 ops/sec
-clsx × 8,806,231 ops/sec
-
-# Strings/Objects
-classcat × 13,834,475 ops/sec
-classnames × 3,013,424 ops/sec
-clsx × 5,890,821 ops/sec
-
-# Arrays
-classcat × 3,649,723 ops/sec
-classnames × 709,177 ops/sec
-clsx × 2,513,014 ops/sec
-
-# Arrays/Objects
-classcat × 4,290,009 ops/sec
-classnames × 1,856,967 ops/sec
-clsx × 3,099,573 ops/sec
-
-# Arguments vs Array
-classcat × 3,089,353 ops/sec
-classnames × 828,906 ops/sec
-clsx × 3,057,879 ops/sec
+npm --prefix bench start
 ```
 
 ## License

bench/src/index.js bench/index.jsbench/src/index.js renamed to bench/index.js

@@ -1,7 +1,7 @@
-import classcat from "../../src/index"
+import { runBenchmark } from "./runBenchmark.js"
+import classcat from "../index.js"
 import classnames from "classnames"
 import clsx from "clsx"
-import { runBenchmark } from "./runBenchmark"
 
 runBenchmark(
   [

bench/package.json

@@ -1,10 +1,10 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "rollup -i src/index.js -o dist/index.js -f cjs -g benchmark,classnames && node dist/index.js"
+    "start": "npm install && node index.js"
   },
   "devDependencies": {
-    "rollup": "*",
     "benchmark": "^2.1.4",
     "classnames": "*",
     "clsx": "*"

bench/src/runBenchmark.js bench/runBenchmark.jsbench/src/runBenchmark.js renamed to bench/runBenchmark.js

@@ -1,12 +1,12 @@
-import { Suite } from "benchmark"
+import bench from "benchmark"
 
 export const runBenchmark = (tests, modules) =>
   Object.keys(tests).map((name, i) => {
     console.log(`${i > 0 ? "\n" : ""}${name}`)
     Object.keys(modules)
       .reduce(
         (bench, id) => bench.add(id, tests[name].bind({}, modules[id], id)),
-        new Suite().on("cycle", ({ target: { name, hz } }) =>
+        new bench.Suite().on("cycle", ({ target: { name, hz } }) =>
           console.log(`${name} × ${Math.floor(hz).toLocaleString()} ops/sec`)
         )
       )

index.js

@@ -0,0 +1,19 @@
+export default function cc(names) {
+  if (typeof names === "string" || typeof names === "number") return "" + names
+
+  let out = ""
+
+  if (Array.isArray(names)) {
+    for (let i = 0, tmp; i < names.length; i++) {
+      if ((tmp = cc(names[i])) !== "") {
+        out += (out && " ") + tmp
+      }
+    }
+  } else {
+    for (let k in names) {
+      if (names[k]) out += (out && " ") + k
+    }
+  }
+
+  return out
+}

package.json

@@ -1,18 +1,21 @@
 {
   "name": "classcat",
-  "description": "Build a space-separated class attribute quickly.",
   "version": "4.1.0",
   "type": "module",
-  "main": "dist/classcat.js",
-  "module": "src/index.js",
-  "unpkg": "src/index.js",
+  "main": "index.cjs",
   "typings": "classcat.d.ts",
-  "license": "MIT",
+  "description": "Build a class attribute string quickly.",
   "repository": "jorgebucaran/classcat",
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": "./index.cjs",
+      "import": "./index.js"
+    }
+  },
   "files": [
-    "src",
-    "dist",
-    "classcat.d.ts"
+    "*.*(c)[tj]s*"
   ],
   "author": "Jorge Bucaran",
   "keywords": [
@@ -23,16 +26,13 @@
   ],
   "scripts": {
     "test": "c8 twist tests/*.js",
-    "build": "export pkg=$npm_package_name; npm run bundle && npm run minify",
-    "bundle": "rollup -i src/index.js -o dist/$pkg.js --no-strict -mf umd -n $pkg",
-    "minify": "terser dist/$pkg.js -o dist/$pkg.js -mc --source-map includeSources,url=$pkg.js.map",
-    "prepare": "npm run build",
-    "release": "v=$npm_package_version; npm run build && git commit -am $v && git tag -s $v -m $v && git push && git push --tags && npm publish"
+    "build": "node -e \"fs.writeFileSync('index.cjs',fs.readFileSync('index.js','utf8').replace(/export default/,'module.exports ='),'utf8')\"",
+    "deploy": "npm test && git commit --all --message $tag && git tag --sign $tag --message $tag && git push && git push --tags",
+    "release": "tag=$npm_package_version npm run deploy && npm publish --access public",
+    "prepare": "npm run build"
   },
   "devDependencies": {
     "c8": "*",
-    "rollup": "*",
-    "terser": "*",
     "twist": "*"
   }
 }