color-blend - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

package.json

 {
   "name": "color-blend",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "Blends RGBA colors with different blend modes",
-  "main": "src/blend.js",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "source": "src/index.js",
   "keywords": [
@@ -11,2 +14,7 @@ "color",
   ],
+  "files": [
+    "dist",
+    "unit",
+    "explanation.png"
+  ],
   "author": "Florian Reuschel <[e-mail]>",
@@ -16,9 +24,13 @@ "license": "MIT",
   "scripts": {
-    "pretest": "standard",
-    "test": "mocha"
+    "build": "microbundle --entry src/index.ts --output dist/index.js && microbundle --entry src/unit.ts --output unit/index.js",
+    "pretest": "tslint 'src/*.ts' && npm run build",
+    "test": "jest"
   },
   "devDependencies": {
-    "mocha": "^5.2.0",
-    "standard": "^12.0.1"
+    "jest": "^23.6.0",
+    "microbundle": "^0.6.0",
+    "tslint": "^5.11.0",
+    "tslint-config-standard": "^8.0.1",
+    "typescript": "^3.0.3"
   }
 }

README.md

@@ -12,15 +12,18 @@ <div align="center">
 
+[![Travis](https://img.shields.io/travis/Loilo/color-blend.svg?label=unix&logo=travis)](https://travis-ci.org/Loilo/color-blend)
+[![AppVeyor](https://img.shields.io/appveyor/ci/Loilo/color-blend.svg?label=windows&logo=appveyor)](https://ci.appveyor.com/project/Loilo/color-blend)
 [![Greenkeeper badge](https://badges.greenkeeper.io/Loilo/color-blend.svg)](https://greenkeeper.io/)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-[![Travis](https://img.shields.io/travis/Loilo/color-blend.svg?label=unix&logo=travis)](https://travis-ci.org/Loilo/color-blend)
-[![AppVeyor](https://img.shields.io/appveyor/ci/Loilo/color-blend.svg?label=windows&logo=appveyor)](https://ci.appveyor.com/project/Loilo/color-blend)
 [![npm](https://img.shields.io/npm/v/color-blend.svg)](https://npmjs.com/package/color-blend)
+![ES modules](https://img.shields.io/badge/style-tree--shakeable-green.svg?style=flat&label=esm)
 
 > Blends RGBA colors with different blend modes
 
-JavaScript implementation of the blend modes introduced in the [W3C Compositing and Blending spec](https://www.w3.org/TR/compositing-1/).
+This is a JavaScript implementation of the blend modes introduced in the [W3C Compositing and Blending spec](https://www.w3.org/TR/compositing-1/).
 
+Altogether it's a whopping 1.1 KB small (minified & gzipped), going down to as far as 0.4 KB if you use just one blending method and a [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking) bundler.
+
 ## Install
 ```console
-$ npm install color-blend --save
+$ npm install --save color-blend
 ```
@@ -31,42 +34,68 @@
 ### Example
-It's simple to wrap your head around, you should get it after just reading this:
+It's really easy to wrap your head around. Consider the following simple example:
 
 ```js
-var blender = require('color-blend')
+// Using vanilla Node.js
+const { normal } = require('color-blend')
 
-// Mix some green and pink tones
-// By the way, those are the colors from the logo above
-var backdrop = { r: 255, g:   0, b: 87, a: 0.42 }
-var source   = { r:  70, g: 217, b: 98, a: 0.6  }
+// Using a bundler? It will automatically pick up a
+// tree-shakeable ES modules version of color-blend:
+import { normal } from 'color-blend'
 
-blender.normal(backdrop, source)
-// Returns { r: 110, g: 170, b: 96, a: 0.768 }
+
+// Mix some green and pink
+const background = { r: 255, g:   0, b: 87, a: 0.42 }
+const foreground = { r:  70, g: 217, b: 98, a: 0.6  }
+
+normal(background, foreground)
+// returns { r: 110, g: 170, b: 96, a: 0.768 }
 ```
 
+Be the way, those are the colors from the logo above. See?
+
+![Visual representation of the example code](explanation.png)
+
 ### Explanation
-This module exports an object—let's agree on calling it `blender` in this guide—which provides all blend modes listed in the W3C document as methods. Those are:
-`normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `colorDodge`, `colorBurn`, `hardLight`, `softLight`, `difference`, `exclusion`, `hue`, `saturation`, `color` and `luminosity`.
+This module provides an implementation for all blend modes listed in the aforementioned W3C document, which are:
 
-They all work the same: Each of these methods takes a `backdrop` color and a `source` color as arguments. Those parameters are expected to be RGBA colors represented as plain objects containing the keys `r`, `g`, `b` (each ranging from 0 to 255) and `a` (ranging from 0 to 1).
+* `normal`
+* `multiply`
+* `screen`
+* `overlay`
+* `darken`
+* `lighten`
+* `colorDodge`
+* `colorBurn`
+* `hardLight`
+* `softLight`
+* `difference`
+* `exclusion`
+* `hue`
+* `saturation`
+* `color`
+* `luminosity`
 
-The result of the blending operation will be returned as such an RGBA object as well.
+All those methods have the same API: they take a `background` and a `foreground` color as arguments.
+Those are expected to be RGBA colors, similar to how they appear in CSS — represented as plain objects containing the keys
 
-### Options
-The `blender` also has an `options` property containing the default blending settings. Change those if you'd like to alter the behaviour of the module.
+* `r`, `g`, `b` (each ranging from 0 to 255)
+* `a` (ranging from 0 to 1)
 
-Here's the default options:
+The result of the blending operation will be returned as such an RGBA object as well.
 
-```js
-{
+### Unit Colors
+If you need higher precision (resulting RGB channels will be rounded to integers!) or just have a different flavor, this package offers an entry point `/unit`, where all accepted and returned color channels are values between 0 and 1:
 
-  // Set this to true if you want to provide color channel values from 0 to 1 instead of 0 to 255
-  unitInput: false,
+```javascript
+import { normal } from 'color-blend/unit'
 
-  // As in the above, but for the result
-  unitOutput: false,
+// Still mix some green and pink
+const background = { r:  1,    g: 0,    b: 0.34, a: 0.42 }
+const foreground = { r:  0.27, g: 0.85, b: 0.38, a: 0.6  }
 
-  // Set this to false if the result color channel values should not be rounded (only applies if `unitOutput` is false)
-  roundOutput: true
+normal(background, foreground)
+// returns { r: 0.43, g: 0.665, b: 0.372, a: 0.768 } (rounded to 3 decimals)
+```
 
-}
-```
+## Thanks
+A special "thank you" goes to [Christos Lytras](https://github.com/clytras) who helped me [digging deep](https://stackoverflow.com/questions/40796852/mix-two-non-opaque-colors-with-hue-blend-mode) into the rabbit hole of color blending.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139074

increased by472.44%

Number of package files

30

increased by150%

Number of lines in readme file

100

increased by40.85%

Worsened metrics

Dev dependency count

5

increased by150%

Lines of code

301

decreased by-42.23%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes