class-name-prop - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

package.json

 {
   "name": "class-name-prop",
-  "version": "3.0.0",
-  "description": "A lightweight utility function to create a React className prop value for multiple classes.",
+  "version": "4.0.0",
+  "description": "A lightweight utility function to create a React className prop value for multiple class names.",
   "license": "MIT",
@@ -23,40 +23,40 @@ "author": {
   "files": [
-    "index.js"
+    "classNameProp.mjs"
   ],
   "sideEffects": false,
-  "main": "index.js",
+  "main": "./classNameProp.mjs",
   "exports": {
-    ".": "./index.js",
-    "./package": "./package.json",
+    ".": "./classNameProp.mjs",
+    "./classNameProp.mjs": "./classNameProp.mjs",
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": "^12.20 || >= 14.13"
+    "node": "^12.22.0 || ^14.17.0 || >= 16.0.0"
   },
-  "browserslist": "> 0.5%, not dead",
+  "browserslist": "Node 12.22 - 13 and Node < 13, Node 14.17 - 15 and Node < 15, Node >= 16, > 0.5%, not OperaMini all, not IE > 0, not dead",
   "devDependencies": {
     "coverage-node": "^5.0.1",
-    "esbuild": "^0.11.17",
-    "eslint": "^7.25.0",
-    "eslint-config-env": "^19.0.2",
+    "esbuild": "^0.14.0",
+    "eslint": "^8.3.0",
+    "eslint-config-env": "^23.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-compat": "^3.9.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^33.0.0",
+    "eslint-plugin-compat": "^4.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsdoc": "^37.0.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "gzip-size": "^6.0.0",
-    "jsdoc-md": "^10.1.0",
-    "prettier": "^2.2.1",
-    "test-director": "^6.0.0"
+    "eslint-plugin-prettier": "^4.0.0",
+    "gzip-size": "^7.0.0",
+    "jsdoc-md": "^11.0.2",
+    "prettier": "^2.5.0",
+    "test-director": "^7.0.0"
   },
   "scripts": {
-    "jsdoc": "jsdoc-md",
-    "test": "npm run test:eslint && npm run test:prettier && npm run test:jsdoc && npm run test:api",
-    "test:eslint": "eslint --ext mjs,js .",
-    "test:prettier": "prettier -c .",
-    "test:jsdoc": "jsdoc-md -c",
-    "test:api": "coverage-node test.mjs",
+    "docs-update": "jsdoc-md",
+    "docs-check": "jsdoc-md -c",
+    "eslint": "eslint .",
+    "prettier": "prettier -c .",
+    "tests": "coverage-node test.mjs",
+    "test": "npm run eslint && npm run prettier && npm run docs-check && npm run tests",
     "prepublishOnly": "npm test"
   }
 }

readme.md

@@ -5,10 +5,9 @@ # class-name-prop
 
-A lightweight utility function to create a [React](https://reactjs.org) `className` prop value for multiple classes.
+A lightweight utility function to create a [React](https://reactjs.org) `className` prop value for multiple class names.
 
 - 📦 [Tiny bundle size](https://bundlephobia.com/result?p=class-name-prop), tested.
-- 💪 Supports ancient browsers.
 - ⚡️ Simple and fast API.
-- 🧠 Returns `undefined` if there are no classes, to prevent rendering a redundant `class` attribute; unlike packages like [`classnames`](https://github.com/JedWatson/classnames).
+- 🧠 Returns `undefined` if there are no class names, to prevent rendering a redundant `class` attribute; unlike packages like [`classnames`](https://github.com/JedWatson/classnames).
 
-## Setup
+## Installation
 
@@ -23,38 +22,28 @@ To install with [npm](https://npmjs.com/get-npm), run:
 
-### Table of contents
-
-- [function classNameProp](#function-classnameprop)
-
 ### function classNameProp
 
-Creates a [React](https://reactjs.org) `className` prop value for multiple classes.
+Creates a [React](https://reactjs.org) `className` prop value for multiple class names.
 
 | Parameter | Type | Description |
 | :-- | :-- | :-- |
-| `classes` | …\* | A parameter for each class; only non empty strings are added to the final string. |
+| `classNames` | …any | Class name strings to merge; only non empty
strings are added to the final string. |
 
-**Returns:** string | `undefined` — A `className` prop value; either a string of classes or `undefined` to prevent rendering an empty `class` attribute.
+**Returns:** string | `undefined` — A `className` prop value; either a string of 1 or more space separated class names or `undefined` to prevent rendering an empty `class` attribute.
 
 #### Examples
 
-_How to `import`._
+_How to import._
 
 > ```js
-> import classNameProp from 'class-name-prop';
+> import classNameProp from "class-name-prop";
 > ```
 
-_How to `require`._
+_A [React](https://reactjs.org) component for a link that can be declared active, whilst supporting custom class names._
 
-> ```js
-> const classNameProp = require('class-name-prop');
-> ```
-
-_A [React](https://reactjs.org) component for a link that can be declared active, whilst supporting custom classes._
-
 > ```jsx
 > function Link({ className, active, ...props }) {
 >   return (
->     <a className={classNameProp(className, active && 'active')} {...props} />
+>     <a className={classNameProp(className, active && "active")} {...props} />
 >   );
 > }
 > ```

No alert changes

Worsened metrics

Total package byte prevSize

4654

decreased by-33.58%

Number of package files

3

decreased by-25%

Lines of code

29

decreased by-14.71%

Number of lines in readme file

48

decreased by-18.64%

No dependency changes