react-color - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

CHANGELOG.md

 # Changelog
 
+## 2.9.0
+
+- Add Canvas Renderer for SSR [#301](https://github.com/casesandberg/react-color/pull/301)
+
 ## 2.8.0
@@ -4,0 +8,0 @@

lib/components/alpha/Alpha.js

@@ -33,3 +33,4 @@ 'use strict';
       direction = _ref.direction,
-      style = _ref.style;
+      style = _ref.style,
+      renderers = _ref.renderers;
 
@@ -57,2 +58,3 @@ var styles = (0, _reactcss2.default)({
       pointer: _AlphaPointer2.default,
+      renderers: renderers,
       onChange: onChange,
@@ -59,0 +61,0 @@ direction: direction

lib/components/alpha/spec.js

@@ -5,2 +5,4 @@ 'use strict';
 
+// import canvas from 'canvas'
+
 var _react = require('react');
@@ -31,2 +33,9 @@
 
+// test('Alpha renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Alpha renderers={{ canvas }} { ...red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
 test('Alpha renders vertically', function () {
@@ -33,0 +42,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Alpha2.default, _extends({}, _color.red, { width: 20, height: 200, direction: 'vertical' }))).toJSON();

lib/components/chrome/Chrome.js

@@ -38,3 +38,4 @@ 'use strict';
       hsv = _ref.hsv,
-      hex = _ref.hex;
+      hex = _ref.hex,
+      renderers = _ref.renderers;
 
@@ -149,3 +150,3 @@ var styles = (0, _reactcss2.default)({
             _react2.default.createElement('div', { style: styles.active }),
-            _react2.default.createElement(_common.Checkboard, null)
+            _react2.default.createElement(_common.Checkboard, { renderers: renderers })
           )
@@ -174,2 +175,3 @@ ),
               pointer: _ChromePointer2.default,
+              renderers: renderers,
               onChange: onChange
@@ -176,0 +178,0 @@ })

lib/components/chrome/spec.js

@@ -31,7 +31,18 @@ 'use strict';
 
+// import canvas from 'canvas'
+
 test('Chrome renders correctly', function () {
   var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Chrome2.default, _color.red)).toJSON();
   expect(tree).toMatchSnapshot();
-}); /* global test, expect */
+});
 
+// test('Chrome renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Chrome renderers={{ canvas }} { ...red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+/* global test, expect */
+
 test('ChromeFields renders correctly', function () {
@@ -38,0 +49,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_ChromeFields2.default, _color.red)).toJSON();

lib/components/common/Alpha.js

@@ -132,3 +132,3 @@ 'use strict';
           { style: styles.checkboard },
-          _react2.default.createElement(_Checkboard2.default, null)
+          _react2.default.createElement(_Checkboard2.default, { renderers: this.props.renderers })
         ),
@@ -135,0 +135,0 @@ _react2.default.createElement('div', { style: styles.gradient }),

lib/components/common/Checkboard.js

@@ -27,3 +27,4 @@ 'use strict';
       grey = _ref.grey,
-      size = _ref.size;
+      size = _ref.size,
+      renderers = _ref.renderers;
 
@@ -34,3 +35,3 @@ var styles = (0, _reactcss2.default)({
         absolute: '0px 0px 0px 0px',
-        background: 'url(' + checkboard.get(white, grey, size) + ') center left'
+        background: 'url(' + checkboard.get(white, grey, size, renderers.canvas) + ') center left'
       }
@@ -46,5 +47,6 @@ }
   white: 'transparent',
-  grey: 'rgba(0,0,0,.08)'
+  grey: 'rgba(0,0,0,.08)',
+  renderers: {}
 };
 
 exports.default = Checkboard;

lib/components/common/spec.js

@@ -39,7 +39,18 @@ 'use strict';
 
+// import canvas from 'canvas'
+
 test('Alpha renders correctly', function () {
   var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Alpha2.default, _color.red)).toJSON();
   expect(tree).toMatchSnapshot();
-}); /* global test, expect */
+});
 
+// test('Alpha renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Alpha renderers={{ canvas }} { ...red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+/* global test, expect */
+
 test('Checkboard renders correctly', function () {
@@ -50,2 +61,9 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Checkboard2.default, null)).toJSON();
 
+// test('Checkboard renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Checkboard renderers={{ canvas }} />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
 test('EditableInput renders correctly', function () {
@@ -52,0 +70,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_EditableInput2.default, { label: 'Hex', placeholder: '#fff' })).toJSON();

lib/components/sketch/Sketch.js

@@ -36,3 +36,4 @@ 'use strict';
       disableAlpha = _ref.disableAlpha,
-      presetColors = _ref.presetColors;
+      presetColors = _ref.presetColors,
+      renderers = _ref.renderers;
 
@@ -149,2 +150,3 @@ var styles = (0, _reactcss2.default)({
             hsl: hsl,
+            renderers: renderers,
             onChange: onChange
@@ -151,0 +153,0 @@ })

lib/components/sketch/spec.js

@@ -34,2 +34,11 @@ 'use strict';
 
+// test('Sketch renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Sketch renderers={{ canvas }} { ...red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+// import canvas from 'canvas'
+
 test('SketchFields renders correctly', function () {
@@ -36,0 +45,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_SketchFields2.default, _color.red)).toJSON();

lib/helpers/checkboard.js

@@ -10,5 +10,5 @@ 'use strict';
 
-function render(c1, c2, size) {
-  if (typeof document === 'undefined') return null; // Dont Render On Server
-  var canvas = document.createElement('canvas');
+function render(c1, c2, size, serverCanvas) {
+  if (typeof document === 'undefined' && !serverCanvas) return null;
+  var canvas = serverCanvas ? new serverCanvas() : document.createElement('canvas');
   canvas.width = canvas.height = size * 2;
@@ -26,5 +26,5 @@ var ctx = canvas.getContext('2d');
 
-function get(c1, c2, size) {
-  var key = c1 + ',' + c2 + ', ' + size;
-  var checkboard = render(c1, c2, size);
+function get(c1, c2, size, serverCanvas) {
+  var key = c1 + '-' + c2 + '-' + size + (serverCanvas ? '-server' : '');
+  var checkboard = render(c1, c2, size, serverCanvas);
 
@@ -31,0 +31,0 @@ if (checkboardCache[key]) {

package.json

 {
   "name": "react-color",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -16,3 +16,3 @@ "main": "lib/index.js",
   "scripts": {
-    "unit-test": "mocha \"test/**/*.test.js\" --compilers js:babel-register",
+    "unit-test": "node_modules/.bin/mocha \"test/**/*.test.js\" --compilers js:babel-register",
     "posttest": "npm run eslint",
@@ -19,0 +19,0 @@ "prepublish": "npm run lib",

New alerts

License Policy Violation

License

This 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

License

This 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

1035905

increased by0.16%

Lines of code

12846

increased by0.34%

No dependency changes