cloudinary-react - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

CHANGELOG.md

@@ -0,14 +1,14 @@
+1.2.0 / 2019-09-26
+==================
 
+  * Feature/upgrade to react 16.3.3 (#120)
+    * Use new context api in CloudinaryContext
+    * Remove usage of componentWillReceiveProps and componentWillUpdate in Image 
+  * Add test for custom function invocation
+  * Add test for dynamic context
+  * Bump webpack-dev-server from 2.9.4 to 3.1.11 in /samples/photo_album
+
 1.1.4 / 2019-07-25
 =============
 
-  * Update changelog
-
-1.1.3 / 2019-07-25
-==================
-  * Update CHANGELOG.md
-
-1.1.2 / 2019-07-25
-==================
-
   * Fix responsiveUseBreakpoints not affecting image size
@@ -15,0 +15,0 @@ * Fix build & console errors

lib/components/CloudinaryComponent/CloudinaryComponent.js

@@ -14,6 +14,10 @@ "use strict";
 
+var _CloudinaryContextType = require("../CloudinaryContext/CloudinaryContextType");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -42,3 +46,2 @@
 var camelCase = _cloudinaryCore.Util.camelCase;
-var snakeCase = _cloudinaryCore.Util.snakeCase;
 /**
@@ -70,4 +73,4 @@ * Return a new object containing keys and values where keys are in the keys list
 /*#__PURE__*/
-function (_Component) {
-  _inherits(CloudinaryComponent, _Component);
+function (_PureComponent) {
+  _inherits(CloudinaryComponent, _PureComponent);
 
@@ -81,7 +84,2 @@ function CloudinaryComponent(props, context) {
   _createClass(CloudinaryComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {};
-    }
-  }, {
     key: "render",
@@ -196,10 +194,8 @@ value: function render() {
   return CloudinaryComponent;
-}(_react.Component);
+}(_react.PureComponent);
 
-CloudinaryComponent.VALID_OPTIONS = _cloudinaryCore.Transformation.PARAM_NAMES.map(camelCase);
-CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
-CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes;
+CloudinaryComponent.contextType = _CloudinaryContextType.CloudinaryContextType;
+CloudinaryComponent.propTypes = typesFrom(_cloudinaryCore.Transformation.PARAM_NAMES.map(camelCase));
 CloudinaryComponent.propTypes.publicId = _propTypes["default"].string;
 CloudinaryComponent.propTypes.responsive = _propTypes["default"].bool;
-CloudinaryComponent.childContextTypes = {};
 /**
@@ -206,0 +202,0 @@ * Create a React type definition object. All items are PropTypes.string or [string] or object or [object].

lib/components/CloudinaryContext/CloudinaryContext.js

@@ -14,16 +14,16 @@ "use strict";
 
-var _cloudinaryCore = require("cloudinary-core");
+var _Util = require("../../Util");
 
+var _CloudinaryContextType = require("./CloudinaryContextType");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -47,3 +47,3 @@
  * Provides a container for Cloudinary components. Any option set in CloudinaryContext will be passed to the children.
- * 
+ *
  * @example
@@ -62,48 +62,23 @@ *<CloudinaryContext cloudName="mycloud" dpr="auto">
   function CloudinaryContext(props, context) {
-    var _this;
-
     _classCallCheck(this, CloudinaryContext);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(CloudinaryContext).call(this, props, context));
-    _this.state = {};
-    return _this;
+    return _possibleConstructorReturn(this, _getPrototypeOf(CloudinaryContext).call(this, props, context));
   }
 
   _createClass(CloudinaryContext, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      var _this2 = this;
-
-      var context = {};
-
-      var camelProps = _cloudinaryCore.Util.withCamelCaseKeys(this.props); // only pass valid Cloudinary options
-
-
-      _CloudinaryComponent2["default"].VALID_OPTIONS.forEach(function (key) {
-        var val = camelProps[key] || _this2.context[key];
-
-        if (val !== undefined && val !== null) {
-          context[key] = val;
-        }
-      });
-
-      return context;
-    }
-  }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var context = this.context || {};
 
-      // Remove Cloudinary custom props that don't belong to div
-      var nonCloudinaryProps = Object.keys(this.props).filter(function (propName) {
-        return !CloudinaryContext.CLOUDINARY_PROPS[propName];
-      }).reduce(function (allowedProps, currentProp) {
-        allowedProps[currentProp] = _this3.props[currentProp];
-        return allowedProps;
-      }, {});
+      var props = _objectSpread({}, context, {}, this.props);
 
-      var includeOwnBody = nonCloudinaryProps.includeOwnBody,
-          props = _objectWithoutProperties(nonCloudinaryProps, ["includeOwnBody"]);
+      var _extractCloudinaryPro = (0, _Util.extractCloudinaryProps)(props),
+          children = _extractCloudinaryPro.children,
+          cloudinaryProps = _extractCloudinaryPro.cloudinaryProps,
+          nonCloudinaryProps = _extractCloudinaryPro.nonCloudinaryProps,
+          cloudinaryReactProps = _extractCloudinaryPro.cloudinaryReactProps;
 
-      return includeOwnBody ? this.props.children : _react["default"].createElement("div", props, this.props.children);
+      return _react["default"].createElement(_CloudinaryContextType.CloudinaryContextType.Provider, {
+        value: cloudinaryProps
+      }, cloudinaryReactProps.includeOwnBody ? children : _react["default"].createElement("div", nonCloudinaryProps, children));
     }
@@ -113,9 +88,4 @@ }]);
   return CloudinaryContext;
-}(_CloudinaryComponent2["default"]); // Map Cloudinary props from array to object for efficient lookup
+}(_CloudinaryComponent2["default"]);
 
-
-CloudinaryContext.CLOUDINARY_PROPS = _CloudinaryComponent2["default"].VALID_OPTIONS.reduce(function (accumulator, cloudinaryPropName) {
-  accumulator[cloudinaryPropName] = true;
-  return accumulator;
-}, {});
 CloudinaryContext.propTypes = _objectSpread({}, _CloudinaryComponent2["default"].propTypes, {
@@ -127,4 +97,4 @@ includeOwnBody: _propTypes["default"].bool
 };
-CloudinaryContext.childContextTypes = _CloudinaryComponent2["default"].contextTypes;
+CloudinaryContext.contextType = _CloudinaryContextType.CloudinaryContextType;
 var _default = CloudinaryContext;
 exports["default"] = _default;

lib/components/Image/Image.js

@@ -16,4 +16,6 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,8 +85,2 @@
   _createClass(Image, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps, nextContext) {
-      var state = this.prepareState(nextProps, nextContext);
-      this.setState(state);
-    }
-  }, {
     key: "prepareState",
@@ -155,7 +151,9 @@ value: function prepareState() {
   }, {
-    key: "componentWillUpdate",
-    value: function componentWillUpdate(nextProps, nextState, nextContext) {
-      if (nextState.responsive) {
-        var wait = (0, _Util.firstDefined)(nextProps.responsiveDebounce, nextContext.responsiveDebounce, 100);
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      this.setState(this.prepareState());
 
+      if (this.state.responsive) {
+        var wait = (0, _Util.firstDefined)(this.props.responsiveDebounce, this.context.responsiveDebounce, 100);
+
         if (this.listener) {
@@ -183,4 +181,5 @@ this.window && this.window.removeEventListener('resize', this.listener);
 
+      var url = this.state.url;
       return _react["default"].createElement("img", _extends({}, attributes, {
-        src: this.state.url,
+        src: url,
         ref: function ref(e) {
@@ -334,5 +333,4 @@ _this3.element = e;
 Image.defaultProps = {};
-Image.contextTypes = _CloudinaryComponent2["default"].contextTypes;
 Image.propTypes = _CloudinaryComponent2["default"].propTypes;
 var _default = Image;
 exports["default"] = _default;

lib/components/Transformation/Transformation.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -15,4 +15,2 @@ var _CloudinaryComponent2 = _interopRequireDefault(require("../CloudinaryComponent"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -44,6 +42,6 @@
 
-  function Transformation(props) {
+  function Transformation(props, context) {
     _classCallCheck(this, Transformation);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Transformation).call(this, props));
+    return _possibleConstructorReturn(this, _getPrototypeOf(Transformation).call(this, props, context));
   }
@@ -63,5 +61,4 @@
 Transformation.defaultProps = {};
-Transformation.contextTypes = {};
 Transformation.exposesProps = true;
 var _default = Transformation;
 exports["default"] = _default;

lib/components/Video/Video.js

@@ -53,3 +53,3 @@ "use strict";
 
-  function Video(props) {
+  function Video(props, context) {
     var _this;
@@ -59,3 +59,3 @@
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Video).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Video).call(this, props, context));
     _this.state = {};
@@ -62,0 +62,0 @@ return _this;

lib/Util/firstDefined.js

@@ -15,7 +15,11 @@ "use strict";
 function firstDefined() {
-  for (var i = 0; i < arguments.length; i++) {
-    if ((i < 0 || arguments.length <= i ? undefined : arguments[i]) !== undefined) return i < 0 || arguments.length <= i ? undefined : arguments[i];
+  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+    values[_key] = arguments[_key];
   }
 
+  for (var i = 0; i < values.length; i++) {
+    if (values[i] !== undefined) return values[i];
+  }
+
   return undefined;
 }

lib/Util/Util.js

@@ -42,2 +42,8 @@ "use strict";
 });
+Object.defineProperty(exports, "extractCloudinaryProps", {
+  enumerable: true,
+  get: function get() {
+    return _extractCloudinaryProps2["default"];
+  }
+});
 
@@ -54,2 +60,4 @@ var _debounce2 = _interopRequireDefault(require("./debounce"));
 
+var _extractCloudinaryProps2 = _interopRequireDefault(require("./extractCloudinaryProps"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package.json

 {
   "name": "cloudinary-react",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "Present Cloudinary images and videos using React components",
@@ -43,8 +43,8 @@ "main": "lib/index.js",
     "chai-string": "^1.4.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "jsdom": "^11.12.0",
     "mocha": "^4.0.1",
     "npm-run-all": "^4.1.5",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.3.3",
     "webpack": "4.27.1",
@@ -54,8 +54,8 @@ "webpack-cli": "^3.1.2"
   "dependencies": {
-    "cloudinary-core": "^2.6.2",
+    "cloudinary-core": "^2.7.4",
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
-    "react": "^16.2.0"
+    "react": "^16.3.3"
   }
 }

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -1,7 +0,7 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Cloudinary, Configuration, Transformation, Util} from 'cloudinary-core';
+import {Cloudinary, Transformation, Util} from 'cloudinary-core';
+import {CloudinaryContextType} from '../CloudinaryContext/CloudinaryContextType';
 
 const camelCase = Util.camelCase;
-const snakeCase = Util.snakeCase;
 
@@ -28,3 +28,3 @@ /**
  */
-class CloudinaryComponent extends Component {
+class CloudinaryComponent extends PureComponent {
   constructor(props, context) {
@@ -34,6 +34,2 @@ super(props, context);
 
-  getChildContext() {
-    return {};
-  }
-
   render() {
@@ -115,11 +111,8 @@ return null;
 }
-CloudinaryComponent.VALID_OPTIONS = Transformation.PARAM_NAMES.map(camelCase);
-CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
 
-CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes;
+CloudinaryComponent.contextType = CloudinaryContextType;
+CloudinaryComponent.propTypes = typesFrom(Transformation.PARAM_NAMES.map(camelCase));
 CloudinaryComponent.propTypes.publicId = PropTypes.string;
 CloudinaryComponent.propTypes.responsive = PropTypes.bool;
 
-CloudinaryComponent.childContextTypes = {};
-
 /**
@@ -141,2 +134,2 @@ * Create a React type definition object. All items are PropTypes.string or [string] or object or [object].
 
-export default CloudinaryComponent;
+export default CloudinaryComponent;

src/components/CloudinaryContext/CloudinaryContext.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import CloudinaryComponent from '../CloudinaryComponent';
-import { Util } from 'cloudinary-core';
+import {extractCloudinaryProps} from '../../Util';
+import {CloudinaryContextType} from './CloudinaryContextType';
 
 /**
  * Provides a container for Cloudinary components. Any option set in CloudinaryContext will be passed to the children.
- * 
+ *
  * @example
@@ -19,46 +20,22 @@ *<CloudinaryContext cloudName="mycloud" dpr="auto">
     super(props, context);
-    this.state = {};
   }
 
-  getChildContext() {
-    let context = {};
-    const camelProps = Util.withCamelCaseKeys(this.props);
+  render() {
+    const context = this.context || {};
+    const props = {...context, ...this.props};
 
-    // only pass valid Cloudinary options
-    CloudinaryComponent.VALID_OPTIONS.forEach(key => {
-      let val = camelProps[key] || this.context[key];
-      if (val !== undefined && val !== null) {
-        context[key] = val;
-      }
-    });
-    return context;
-  }
+    const {children, cloudinaryProps, nonCloudinaryProps, cloudinaryReactProps} = extractCloudinaryProps(props);
 
-  render() {
-    // Remove Cloudinary custom props that don't belong to div
-    const nonCloudinaryProps = Object.keys(this.props)
-      .filter(propName => !CloudinaryContext.CLOUDINARY_PROPS[propName])
-      .reduce((allowedProps, currentProp) => {
-        allowedProps[currentProp] = this.props[currentProp];
-        return allowedProps;
-      }, {});
-    const {includeOwnBody, ...props} = nonCloudinaryProps;
-
-  return includeOwnBody ? this.props.children : <div {...props}>{this.props.children}</div>;  
+    return (
+      <CloudinaryContextType.Provider value={cloudinaryProps}>
+        {cloudinaryReactProps.includeOwnBody ? children : <div {...nonCloudinaryProps}>{children}</div>}
+      </CloudinaryContextType.Provider>
+    );
   }
 }
 
-// Map Cloudinary props from array to object for efficient lookup
-CloudinaryContext.CLOUDINARY_PROPS = CloudinaryComponent.VALID_OPTIONS.reduce(
-  (accumulator, cloudinaryPropName) => {
-    accumulator[cloudinaryPropName] = true;
-    return accumulator;
-  },
-  {}
-);
-
 CloudinaryContext.propTypes = {...CloudinaryComponent.propTypes, includeOwnBody: PropTypes.bool};
-CloudinaryContext.defaultProps = {includeOwnBody: false };
-CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;
+CloudinaryContext.defaultProps = {includeOwnBody: false};
+CloudinaryContext.contextType = CloudinaryContextType;
 
 export default CloudinaryContext;

src/components/Image/Image.js

@@ -37,7 +37,2 @@ import React from 'react';
 
-  componentWillReceiveProps(nextProps, nextContext) {
-    let state = this.prepareState(nextProps, nextContext);
-    this.setState(state);
-  }
-
   prepareState(props = this.props, context = this.context) {
@@ -66,3 +61,2 @@ let extendedProps = CloudinaryComponent.normalizeOptions(context, props);
 
-
     return state;
@@ -96,5 +90,6 @@ }
 
-  componentWillUpdate(nextProps, nextState, nextContext) {
-    if (nextState.responsive) {
-      const wait = firstDefined(nextProps.responsiveDebounce, nextContext.responsiveDebounce, 100);
+  componentDidUpdate(prevProps) {
+    this.setState(this.prepareState());
+    if (this.state.responsive) {
+      const wait = firstDefined(this.props.responsiveDebounce, this.context.responsiveDebounce, 100);
       if (this.listener) {
@@ -109,7 +104,10 @@ this.window && this.window.removeEventListener('resize', this.listener);
   render() {
-    var {publicId, responsive, responsiveDebounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
-      this.context);
-    var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
+    const {publicId, responsive, responsiveDebounce, children, ...options} =
+      CloudinaryComponent.normalizeOptions(this.props, this.context);
+    const attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
+    const {url} = this.state;
     return (
-      <img {...attributes} src={this.state.url} ref={(e)=> {this.element = e;}}/>
+      <img {...attributes} src={url} ref={(e) => {
+        this.element = e;
+      }}/>
     );
@@ -219,5 +217,4 @@ }
 Image.defaultProps = {};
-Image.contextTypes = CloudinaryComponent.contextTypes;
 Image.propTypes = CloudinaryComponent.propTypes;
 
 export default Image;

src/components/Transformation/Transformation.js

@@ -1,2 +0,2 @@
-import React, {Component} from 'react';
+import React from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
@@ -8,4 +8,4 @@
 class Transformation extends CloudinaryComponent {
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
   }
@@ -17,7 +17,7 @@
 }
+
 Transformation.propTypes = CloudinaryComponent.propTypes;
 Transformation.defaultProps = {};
-Transformation.contextTypes = {};
 Transformation.exposesProps = true;
 
-export default Transformation;
+export default Transformation;

src/components/Video/Video.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import {Cloudinary, Configuration, Transformation, Util} from 'cloudinary-core';
+import {Cloudinary, Transformation, Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
@@ -15,4 +15,4 @@
 class Video extends CloudinaryComponent {
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
     this.state = {};
@@ -69,2 +69,2 @@ }
 
-export default Video;
+export default Video;

src/Util/Util.js

@@ -5,2 +5,3 @@ export debounce from './debounce';
 export {requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame';
-export isElement from './isElement';
+export isElement from './isElement';
+export extractCloudinaryProps from './extractCloudinaryProps';

No alert changes

Improved metrics

Number of package files

51

increased by2%

Lines of code

2265

increased by0.85%

Worsened metrics

Total package byte prevSize

260960

decreased by-63.35%

Dependency changes

• Updatedcloudinary-core@^2.7.4