Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
class-name-prop
Advanced tools
class-name-prop - npm Package Compare versions
Comparing version 2.0.0 to 3.0.0
| # class-name-prop changelog | ||
| ## 3.0.0 | ||
| ### Major | ||
| - Updated Node.js support to `^12.20 || >= 14.13`. | ||
| - Updated dev dependencies, some of which require newer Node.js versions than were previously supported. | ||
| - Added a package `exports` field. | ||
| - Added a package `sideEffects` field. | ||
| - The tests are now ESM in an `.mjs` file instead of CJS in a `.js` file. | ||
| ### Patch | ||
| - Updated GitHub Actions CI config: | ||
| - Also run on pull request. | ||
| - Also run tests with Node.js v15, v16. | ||
| - Updated `actions/checkout` to v2. | ||
| - Updated `actions/setup-node` to v2. | ||
| - Use the simpler [`npm install-test`](https://docs.npmjs.com/cli/v7/commands/npm-install-test) command. | ||
| - Don’t specify the `CI` environment variable as it’s set by default. | ||
| - Test the bundle size manually using [`esbuild`](https://npm.im/esbuild) and [`gzip-size`](https://npm.im/gzip-size), removing [`size-limit`](https://npm.im/size-limit) related dev dependencies, config, and scripts. | ||
| - Updated the package scripts: | ||
| - Simpler JSDoc related scripts now that [`jsdoc-md`](https://npm.im/jsdoc-md) v10 automatically generates a Prettier formatted readme. | ||
| - Added a `test:jsdoc` script that checks the readme API docs are up to date with the source JSDoc. | ||
| - Simpler `test:prettier` script arguments. | ||
| - Configured Prettier option `semi` to the default, `true`. | ||
| - Updated the EditorConfig. | ||
| - Updated code examples. | ||
| - Readme tweaks. | ||
| - Link [React](https://reactjs.org) in docs. | ||
| ## 2.0.0 | ||
@@ -4,0 +34,0 @@ |
40
index.js
@@ -1,2 +0,2 @@ | ||
| 'use strict' | ||
| 'use strict'; | ||
@@ -6,3 +6,4 @@ /* eslint-disable jsdoc/check-param-names */ | ||
| /** | ||
| * Creates a React `className` prop value for multiple classes. | ||
| * Creates a [React](https://reactjs.org) `className` prop value for multiple | ||
| * classes. | ||
| * @kind function | ||
@@ -12,15 +13,16 @@ * @name classNameProp | ||
| * @returns {string|undefined} A `className` prop value; either a string of classes or `undefined` to prevent rendering an empty `class` attribute. | ||
| * @example <caption>A React component for a link that can be declared active, whilst supporting custom classes.</caption> | ||
| * @example <caption>How to `import`.</caption> | ||
| * ```js | ||
| * import classNameProp from 'class-name-prop'; | ||
| * ``` | ||
| * @example <caption>How to `require`.</caption> | ||
| * ```js | ||
| * const classNameProp = require('class-name-prop'); | ||
| * ``` | ||
| * @example <caption>A [React](https://reactjs.org) component for a link that can be declared active, whilst supporting custom classes.</caption> | ||
| * ```jsx | ||
| * const classNameProp = require('class-name-prop') | ||
| * const PropTypes = require('prop-types') | ||
| * const React = require('react') | ||
| * | ||
| * const Link = ({ className, active, ...props }) => ( | ||
| * <a className={classNameProp(className, active && 'active')} {...props} /> | ||
| * ) | ||
| * | ||
| * Link.propTypes = { | ||
| * className: PropTypes.string, | ||
| * active: PropTypes.bool | ||
| * function Link({ className, active, ...props }) { | ||
| * return ( | ||
| * <a className={classNameProp(className, active && 'active')} {...props} /> | ||
| * ); | ||
| * } | ||
@@ -30,10 +32,10 @@ * ``` | ||
| module.exports = function classNameProp() { | ||
| var className = '' | ||
| var className = ''; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var name = arguments[i] | ||
| if (name && typeof name === 'string') className += ' ' + name | ||
| var name = arguments[i]; | ||
| if (name && typeof name === 'string') className += ' ' + name; | ||
| } | ||
| return className.trim() || undefined | ||
| } | ||
| return className.trim() || undefined; | ||
| }; |
| { | ||
| "name": "class-name-prop", | ||
| "version": "2.0.0", | ||
| "version": "3.0.0", | ||
| "description": "A lightweight utility function to create a React className prop value for multiple classes.", | ||
@@ -25,33 +25,38 @@ "license": "MIT", | ||
| ], | ||
| "sideEffects": false, | ||
| "main": "index.js", | ||
| "exports": { | ||
| ".": "./index.js", | ||
| "./package": "./package.json", | ||
| "./package.json": "./package.json" | ||
| }, | ||
| "engines": { | ||
| "node": ">=10" | ||
| "node": "^12.20 || >= 14.13" | ||
| }, | ||
| "browserslist": "> 0.5%, not dead", | ||
| "devDependencies": { | ||
| "@size-limit/preset-small-lib": "^2.1.6", | ||
| "coverage-node": "^2.0.0", | ||
| "eslint": "^6.5.1", | ||
| "eslint-config-env": "^12.0.1", | ||
| "eslint-config-prettier": "^6.4.0", | ||
| "eslint-plugin-compat": "^3.3.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-jsdoc": "^18.4.3", | ||
| "eslint-plugin-node": "^10.0.0", | ||
| "eslint-plugin-prettier": "^3.1.1", | ||
| "jsdoc-md": "^4.0.1", | ||
| "prettier": "^1.18.2", | ||
| "test-director": "^3.0.0" | ||
| "coverage-node": "^5.0.1", | ||
| "esbuild": "^0.11.17", | ||
| "eslint": "^7.25.0", | ||
| "eslint-config-env": "^19.0.2", | ||
| "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-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" | ||
| }, | ||
| "scripts": { | ||
| "prepare": "npm run prepare:jsdoc && npm run prepare:prettier", | ||
| "prepare:jsdoc": "jsdoc-md", | ||
| "prepare:prettier": "prettier readme.md --write", | ||
| "test": "npm run test:eslint && npm run test:prettier && npm run test:api && npm run test:size", | ||
| "test:eslint": "eslint .", | ||
| "test:prettier": "prettier '**/*.{json,yml,md}' -l", | ||
| "test:api": "coverage-node test", | ||
| "test:size": "size-limit", | ||
| "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", | ||
| "prepublishOnly": "npm test" | ||
| } | ||
| } |
@@ -5,6 +5,6 @@ # class-name-prop | ||
| A lightweight utility function to create a React `className` prop value for multiple classes. | ||
| A lightweight utility function to create a [React](https://reactjs.org) `className` prop value for multiple classes. | ||
| - 📦 [< 70 B](https://bundlephobia.com/result?p=class-name-prop), [Size Limit](https://github.com/ai/size-limit) tested. | ||
| - 💪 Supports ancient browsers and Node.js. | ||
| - 📦 [Tiny bundle size](https://bundlephobia.com/result?p=class-name-prop), tested. | ||
| - 💪 Supports ancient browsers. | ||
| - ⚡️ Simple and fast API. | ||
@@ -15,3 +15,3 @@ - 🧠 Returns `undefined` if there are no classes, to prevent rendering a redundant `class` attribute; unlike packages like [`classnames`](https://github.com/JedWatson/classnames). | ||
| To install from [npm](https://npmjs.com) run: | ||
| To install with [npm](https://npmjs.com/get-npm), run: | ||
@@ -30,3 +30,3 @@ ```sh | ||
| Creates a React `className` prop value for multiple classes. | ||
| Creates a [React](https://reactjs.org) `className` prop value for multiple classes. | ||
@@ -41,17 +41,22 @@ | Parameter | Type | Description | | ||
| _A React component for a link that can be declared active, whilst supporting custom classes._ | ||
| _How to `import`._ | ||
| > ```js | ||
| > import classNameProp from 'class-name-prop'; | ||
| > ``` | ||
| _How to `require`._ | ||
| > ```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 | ||
| > const classNameProp = require('class-name-prop') | ||
| > const PropTypes = require('prop-types') | ||
| > const React = require('react') | ||
| > | ||
| > const Link = ({ className, active, ...props }) => ( | ||
| > <a className={classNameProp(className, active && 'active')} {...props} /> | ||
| > ) | ||
| > | ||
| > Link.propTypes = { | ||
| > className: PropTypes.string, | ||
| > active: PropTypes.bool | ||
| > function Link({ className, active, ...props }) { | ||
| > return ( | ||
| > <a className={classNameProp(className, active && 'active')} {...props} /> | ||
| > ); | ||
| > } | ||
| > ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by28.01%
7007
- Lines of code
- increased by6.25%
34
- Number of lines in readme file
- increased by9.26%
59
Worsened metrics
- Dev dependency count
- increased by7.69%
14
No dependency changes