Refactor utility methods.

* Replace compareObject with equals and move to Util
* Move isElement and isObjectLike to Util
* Add Util tests

src/Util/Util.js

@@ -1,4 +1,6 @@
 export debounce from './debounce';
 export firstDefined from './firstDefined';
 export closestAbove from './closestAbove';
-export {requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame';
+export {requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame';
+export equals from './equals';
+export isElement from './isElement';

src/Util/equals.js

@@ -0,0 +1,207 @@
+/*
+ Source: https://github.com/ReactiveSets/toubkal
+
+ The MIT License (MIT)
+
+ Copyright (c) 2013-2016, Reactive Sets
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ */
+'use strict';
+
+var toString = Object.prototype.toString;
+
+/* -----------------------------------------------------------------------------------------
+ equals( a, b [, enforce_properties_order, cyclic] )
+
+ Returns true if a and b are deeply equal, false otherwise.
+
+ Parameters:
+ - a (Any type): value to compare to b
+ - b (Any type): value compared to a
+
+ Optional Parameters:
+ - enforce_properties_order (Boolean): true to check if Object properties are provided
+ in the same order between a and b
+
+ - cyclic (Boolean): true to check for cycles in cyclic objects
+
+ Implementation:
+ 'a' is considered equal to 'b' if all scalar values in a and b are strictly equal as
+ compared with operator '===' except for these two special cases:
+ - 0 === -0 but are not equal.
+ - NaN is not === to itself but is equal.
+
+ RegExp objects are considered equal if they have the same lastIndex, i.e. both regular
+ expressions have matched the same number of times.
+
+ Functions must be identical, so that they have the same closure context.
+
+ "undefined" is a valid value, including in Objects
+
+ 106 automated tests.
+
+ Provide options for slower, less-common use cases:
+
+ - Unless enforce_properties_order is true, if 'a' and 'b' are non-Array Objects, the
+ order of occurence of their attributes is considered irrelevant:
+ { a: 1, b: 2 } is considered equal to { b: 2, a: 1 }
+
+ - Unless cyclic is true, Cyclic objects will throw:
+ RangeError: Maximum call stack size exceeded
+ */
+export default function equals(a, b, enforce_properties_order, cyclic) {
+  return a === b       // strick equality should be enough unless zero
+    && a !== 0         // because 0 === -0, requires test by _equals()
+    || _equals(a, b) // handles not strictly equal or zero values
+    ;
+
+  function _equals(a, b) {
+    // a and b have already failed test for strict equality or are zero
+
+    var s, l, p, x, y;
+
+    // They should have the same toString() signature
+    if (( s = toString.call(a) ) !== toString.call(b)) return false;
+
+    switch (s) {
+      default: // Boolean, Date, String
+        return a.valueOf() === b.valueOf();
+
+      case '[object Number]':
+        // Converts Number instances into primitive values
+        // This is required also for NaN test bellow
+        a = +a;
+        b = +b;
+
+        return a ?         // a is Non-zero and Non-NaN
+        a === b
+          :                // a is 0, -0 or NaN
+          a === a ?      // a is 0 or -O
+          1 / a === 1 / b    // 1/0 !== 1/-0 because Infinity !== -Infinity
+            : b !== b        // NaN, the only Number not equal to itself!
+          ;
+      // [object Number]
+
+      case '[object RegExp]':
+        return a.source == b.source
+          && a.global == b.global
+          && a.ignoreCase == b.ignoreCase
+          && a.multiline == b.multiline
+          && a.lastIndex == b.lastIndex
+          ;
+      // [object RegExp]
+
+      case '[object Function]':
+        return false; // functions should be strictly equal because of closure context
+      // [object Function]
+
+      case '[object Array]':
+        if (cyclic && ( x = reference_equals(a, b) ) !== null) return x; // intentionally duplicated bellow for [object Object]
+
+        if (( l = a.length ) != b.length) return false;
+        // Both have as many elements
+
+        while (l--) {
+          if (( x = a[l] ) === ( y = b[l] ) && x !== 0 || _equals(x, y)) continue;
+
+          return false;
+        }
+
+        return true;
+      // [object Array]
+
+      case '[object Object]':
+        if (cyclic && ( x = reference_equals(a, b) ) !== null) return x; // intentionally duplicated from above for [object Array]
+
+        l = 0; // counter of own properties
+
+        if (enforce_properties_order) {
+          var properties = [];
+
+          for (p in a) {
+            if (a.hasOwnProperty(p)) {
+              properties.push(p);
+
+              if (( x = a[p] ) === ( y = b[p] ) && x !== 0 || _equals(x, y)) continue;
+
+              return false;
+            }
+          }
+
+          // Check if 'b' has as the same properties as 'a' in the same order
+          for (p in b)
+            if (b.hasOwnProperty(p) && properties[l++] != p)
+              return false;
+        } else {
+          for (p in a) {
+            if (a.hasOwnProperty(p)) {
+              ++l;
+
+              if (( x = a[p] ) === ( y = b[p] ) && x !== 0 || _equals(x, y)) continue;
+
+              return false;
+            }
+          }
+
+          // Check if 'b' has as not more own properties than 'a'
+          for (p in b)
+            if (b.hasOwnProperty(p) && --l < 0)
+              return false;
+        }
+
+        return true;
+      // [object Object]
+    } // switch toString.call( a )
+  } // _equals()
+
+  /* -----------------------------------------------------------------------------------------
+   reference_equals( a, b )
+
+   Helper function to compare object references on cyclic objects or arrays.
+
+   Returns:
+   - null if a or b is not part of a cycle, adding them to object_references array
+   - true: same cycle found for a and b
+   - false: different cycle found for a and b
+
+   On the first call of a specific invocation of equal(), replaces self with inner function
+   holding object_references array object in closure context.
+
+   This allows to create a context only if and when an invocation of equal() compares
+   objects or arrays.
+   */
+  function reference_equals(a, b) {
+    var object_references = [];
+
+    return ( reference_equals = _reference_equals )(a, b);
+
+    function _reference_equals(a, b) {
+      var l = object_references.length;
+
+      while (l--)
+        if (object_references[l--] === b)
+          return object_references[l] === a;
+
+      object_references.push(a, b);
+
+      return null;
+    } // _reference_equals()
+  } // reference_equals()
+} // equals()

src/Util/isElement.js

@@ -0,0 +1,27 @@
+// Originally from lodash
+
+/**
+ * Checks if `value` is a DOM element.
+ *
+ * @static
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
+ * @example
+ *
+ * _.isElement(document.body);
+ * // => true
+ *
+ * _.isElement('<body>');
+ * // => false
+ */
+export default function isElement(value) {
+  return value != null && value.nodeType === 1 && isObjectLike(value);
+}
+
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+

src/components/Image/Image.js

@@ -1,43 +1,11 @@
 import React, {Component, PropTypes} from 'react';
 import cloudinary, {Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
-import {debounce, firstDefined, closestAbove, requestAnimationFrame} from '../../Util';
-
-function compareObjects(o, p) {
-  let i,
-    keysO = Object.keys(o).sort(),
-    keysP = Object.keys(p).sort();
-  if (keysO.length !== keysP.length) return false;
-  if (keysO.join('') !== keysP.join('')) return false;
-  for (i = 0; i < keysO.length; ++i) {
-    if (o[keysO[i]] instanceof Array) {
-      if (!(p[keysO[i]] instanceof Array)) return false;
-      if (p[keysO[i]].sort().join('') !== o[keysO[i]].sort().join('')) return false;
-    }
-    else if (o[keysO[i]] instanceof Function) {
-      if (!(p[keysO[i]] instanceof Function)) return false;
-    }
-    else if (o[keysO[i]] instanceof Object) {
-      if (!(p[keysO[i]] instanceof Object)) return false;
-      if (o[keysO[i]] === o) {
-        if (p[keysO[i]] !== p) return false;
-      } else if (compareObjects(o[keysO[i]], p[keysO[i]]) === false) {
-        return false;//WARNING: does not deal with circular refs other than ^^
-      }
-    }
-    if (o[keysO[i]] != p[keysO[i]]) return false;//not the same value
-  }
-  return true;
-}
-
-function isElement(value) {
-  return value != null && value.nodeType === 1 && isObjectLike(value);
-}
-
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
+import {debounce, firstDefined, closestAbove, requestAnimationFrame, equals, isElement} from '../../Util';
 
+/**
+ * An element representing a Cloudinary served image
+ */
 export default class Image extends CloudinaryComponent {
   constructor(props, context) {
     function defaultBreakpoints(width, steps = 100) {
@@ -51,22 +19,33 @@ export default class Image extends CloudinaryComponent {
     this.state = Object.assign(state, this.prepareState(props, context));
   }
 
+  /**
+   * Retrieve the window or default view of the current element
+   * @returns {DocumentView|*}
+   */
   get window() {
     let windowRef = null;
     if(typeof window !== "undefined"){
       windowRef = window
     }
     return (this.element && this.element.ownerDocument) ? (this.element.ownerDocument.defaultView || windowRef) : windowRef;
   }
+
   shouldComponentUpdate( nextProps, nextState){
-    return !( compareObjects(this.props, nextProps) && compareObjects(this.state, nextState));
+    return !( equals(this.props, nextProps) && equals(this.state, nextState));
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     let state = this.prepareState(nextProps, nextContext);
     this.setState(state);
   }
 
+  /**
+   * Generate update state of this element
+   * @param {Object} [props=this.props]
+   * @param {Object} [context=this.context]
+   * @returns {Object} state updates
+   */
   prepareState(props = this.props, context = this.context) {
     let options = CloudinaryComponent.normalizeOptions(context, props);
     let url = this.getUrl(options);
@@ -238,4 +217,3 @@ export default class Image extends CloudinaryComponent {
 Image.defaultProps = {};
 Image.contextTypes = CloudinaryComponent.contextTypes;
 Image.propTypes = CloudinaryComponent.propTypes;
-

test/Util.js

@@ -0,0 +1,31 @@
+import {expect} from 'chai';
+import {firstDefined, closestAbove} from '../src/Util';
+
+describe('Util', () => {
+  describe('firstDefined', () => {
+    it("should return the first argument that is defined", function () {
+
+      expect(firstDefined(1,2)).to.equal(1);
+      expect(firstDefined(0,1,2)).to.equal(0);
+      expect(firstDefined(undefined,1,2)).to.equal(1);
+      expect(firstDefined(undefined,undefined,2)).to.equal(2);
+      expect(firstDefined(undefined,undefined,undefined)).to.equal(undefined);
+      expect(firstDefined(undefined,undefined,null)).to.equal(null);
+      expect(firstDefined('1','2')).to.equal('1');
+      expect(firstDefined('0','1','2')).to.equal('0');
+      expect(firstDefined(undefined,'1','2')).to.equal('1');
+      expect(firstDefined(undefined,undefined,'2')).to.equal('2');
+      expect(firstDefined(undefined,'undefined',undefined)).to.equal('undefined');
+      expect(firstDefined(undefined,undefined,'null')).to.equal('null');
+    });
+  });
+  describe('closestAbove()', () => {
+    it('should return the first item in list that is greater or equal to the given value', () => {
+      expect(closestAbove([1,10,100], 5)).to.equal(10);
+      expect(closestAbove([1,10,100], undefined)).to.equal(100);
+      expect(closestAbove([1,10,100], 500)).to.equal(100);
+      expect(closestAbove([100,10,1], 5)).to.equal(100);
+      expect(closestAbove([], 5)).to.equal(undefined);
+    })
+  });
+});