react-measure - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

 ## CHANGELOG
+### 1.4.0
+Moved away from element-resize-detector in favor of [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) 🎉
+
 ### 1.3.1
@@ -3,0 +6,0 @@ Fixes exception when changing key of rendered child [#19](https://github.com/souporserious/react-measure/issues/19)

dist/react-measure.js

 /*!
- * React Measure 1.3.1
+ * React Measure 1.4.0
  * https://github.com/souporserious/react-measure
@@ -8,10 +8,10 @@ * Copyright (c) 2016 React Measure Authors
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("react-dom"), require("get-node-dimensions"), require("element-resize-detector"));
+		module.exports = factory(require("react"), require("react-dom"), require("resize-observer-polyfill"), require("get-node-dimensions"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react", "react-dom", "get-node-dimensions", "element-resize-detector"], factory);
+		define(["react", "react-dom", "resize-observer-polyfill", "get-node-dimensions"], factory);
 	else if(typeof exports === 'object')
-		exports["Measure"] = factory(require("react"), require("react-dom"), require("get-node-dimensions"), require("element-resize-detector"));
+		exports["Measure"] = factory(require("react"), require("react-dom"), require("resize-observer-polyfill"), require("get-node-dimensions"));
 	else
-		root["Measure"] = factory(root["React"], root["ReactDOM"], root["getNodeDimensions"], root["elementResizeDetectorMaker"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_6__) {
+		root["Measure"] = factory(root["React"], root["ReactDOM"], root["ResizeObserver"], root["getNodeDimensions"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -101,9 +101,9 @@ /******/ 	// The module cache
 
-	var _getNodeDimensions = __webpack_require__(4);
+	var _resizeObserverPolyfill = __webpack_require__(4);
 
-	var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
+	var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
 
-	var _resizeDetector = __webpack_require__(5);
+	var _getNodeDimensions = __webpack_require__(5);
 
-	var _resizeDetector2 = _interopRequireDefault(_resizeDetector);
+	var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
 
@@ -187,6 +187,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	      // add component to resize detector to detect changes on resize
-	      (0, _resizeDetector2.default)().listenTo(this._node, function () {
+	      // add component to resize observer to detect changes on resize
+	      this.resizeObserver = new _resizeObserverPolyfill2.default(function () {
 	        return _this2.measure();
 	      });
+	      this.resizeObserver.observe(this._node);
 	    }
@@ -209,4 +210,4 @@ }, {
 	    value: function componentWillUnmount() {
-	      (0, _resizeDetector2.default)().removeAllListeners(this._node);
-	      (0, _resizeDetector2.default)().uninstall(this._node);
+	      resizeDetector().removeAllListeners(this._node);
+	      resizeDetector().uninstall(this._node);
 	      this._node = null;
@@ -297,34 +298,5 @@ }
 /* 5 */
-/***/ function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-	exports.default = resizeDetector;
-
-	var _elementResizeDetector = __webpack_require__(6);
-
-	var _elementResizeDetector2 = _interopRequireDefault(_elementResizeDetector);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-	var instance = null;
-
-	function resizeDetector() {
-	  if (!instance) {
-	    instance = (0, _elementResizeDetector2.default)({
-	      strategy: 'scroll'
-	    });
-	  }
-	  return instance;
-	}
-	module.exports = exports['default'];
-
-/***/ },
-/* 6 */
 /***/ function(module, exports) {
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
+	module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
 
@@ -331,0 +303,0 @@ /***/ }

dist/react-measure.min.js

 /*!
- * React Measure 1.3.1
+ * React Measure 1.4.0
  * https://github.com/souporserious/react-measure
  * Copyright (c) 2016 React Measure Authors
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("get-node-dimensions"),require("element-resize-detector")):"function"==typeof define&&define.amd?define(["react","react-dom","get-node-dimensions","element-resize-detector"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("react-dom"),require("get-node-dimensions"),require("element-resize-detector")):e.Measure=t(e.React,e.ReactDOM,e.getNodeDimensions,e.elementResizeDetectorMaker)}(this,function(e,t,o,n){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),a=o(2),p=(n(a),o(3)),c=n(p),f=o(4),d=n(f),h=o(5),y=n(h),Measure=function(e){function Measure(e){r(this,Measure);var t=i(this,(Measure.__proto__||Object.getPrototypeOf(Measure)).call(this,e));return t.measure=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.props.includeMargin,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.props.useClone;if(t.props.shouldMeasure){t._node.parentNode||t._setDOMNode();var n=t.getDimensions(t._node,e,o),r="function"==typeof t.props.children;t._propsToMeasure.some(function(e){if(n[e]!==t._lastDimensions[e])return t.props.onMeasure(n),r&&"undefined"!=typeof t&&t.setState({dimensions:n}),t._lastDimensions=n,!0})}},t.state={dimensions:{width:0,height:0,top:0,right:0,bottom:0,left:0}},t._node=null,t._propsToMeasure=t._getPropsToMeasure(e),t._lastDimensions={},t}return s(Measure,e),l(Measure,[{key:"componentDidMount",value:function(){var e=this;this._setDOMNode(),this.measure(),(0,y["default"])().listenTo(this._node,function(){return e.measure()})}},{key:"componentWillReceiveProps",value:function(e){var t=(e.config,e.whitelist),o=e.blacklist;this.props.whitelist===t&&this.props.blacklist===o||(this._propsToMeasure=this._getPropsToMeasure({whitelist:t,blacklist:o}))}},{key:"componentWillUnmount",value:function(){(0,y["default"])().removeAllListeners(this._node),(0,y["default"])().uninstall(this._node),this._node=null}},{key:"_setDOMNode",value:function(){this._node=c["default"].findDOMNode(this)}},{key:"getDimensions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this._node,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.props.includeMargin,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props.useClone,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.props.cloneOptions;return(0,d["default"])(e,u({margin:t,clone:o},n))}},{key:"_getPropsToMeasure",value:function(e){var t=e.whitelist,o=e.blacklist;return t.filter(function(e){return o.indexOf(e)<0})}},{key:"render",value:function(){var e=this.props.children;return a.Children.only("function"==typeof e?e(this.state.dimensions):e)}}]),Measure}(a.Component);Measure.propTypes={whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,includeMargin:a.PropTypes.bool,useClone:a.PropTypes.bool,cloneOptions:a.PropTypes.object,shouldMeasure:a.PropTypes.bool,onMeasure:a.PropTypes.func},Measure.defaultProps={whitelist:["width","height","top","right","bottom","left"],blacklist:[],includeMargin:!0,useClone:!1,cloneOptions:{},shouldMeasure:!0,onMeasure:function(){return null}},t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(){return u||(u=(0,s["default"])({strategy:"scroll"})),u}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var i=o(6),s=n(i),u=null;e.exports=t["default"]},function(e,t){e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("resize-observer-polyfill"),require("get-node-dimensions")):"function"==typeof define&&define.amd?define(["react","react-dom","resize-observer-polyfill","get-node-dimensions"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("react-dom"),require("resize-observer-polyfill"),require("get-node-dimensions")):e.Measure=t(e.React,e.ReactDOM,e.ResizeObserver,e.getNodeDimensions)}(this,function(e,t,o,n){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),a=o(2),p=(n(a),o(3)),c=n(p),f=o(4),d=n(f),h=o(5),y=n(h),Measure=function(e){function Measure(e){r(this,Measure);var t=i(this,(Measure.__proto__||Object.getPrototypeOf(Measure)).call(this,e));return t.measure=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t.props.includeMargin,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.props.useClone;if(t.props.shouldMeasure){t._node.parentNode||t._setDOMNode();var n=t.getDimensions(t._node,e,o),r="function"==typeof t.props.children;t._propsToMeasure.some(function(e){if(n[e]!==t._lastDimensions[e])return t.props.onMeasure(n),r&&"undefined"!=typeof t&&t.setState({dimensions:n}),t._lastDimensions=n,!0})}},t.state={dimensions:{width:0,height:0,top:0,right:0,bottom:0,left:0}},t._node=null,t._propsToMeasure=t._getPropsToMeasure(e),t._lastDimensions={},t}return s(Measure,e),l(Measure,[{key:"componentDidMount",value:function(){var e=this;this._setDOMNode(),this.measure(),this.resizeObserver=new d["default"](function(){return e.measure()}),this.resizeObserver.observe(this._node)}},{key:"componentWillReceiveProps",value:function(e){var t=(e.config,e.whitelist),o=e.blacklist;this.props.whitelist===t&&this.props.blacklist===o||(this._propsToMeasure=this._getPropsToMeasure({whitelist:t,blacklist:o}))}},{key:"componentWillUnmount",value:function(){resizeDetector().removeAllListeners(this._node),resizeDetector().uninstall(this._node),this._node=null}},{key:"_setDOMNode",value:function(){this._node=c["default"].findDOMNode(this)}},{key:"getDimensions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this._node,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.props.includeMargin,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props.useClone,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.props.cloneOptions;return(0,y["default"])(e,u({margin:t,clone:o},n))}},{key:"_getPropsToMeasure",value:function(e){var t=e.whitelist,o=e.blacklist;return t.filter(function(e){return o.indexOf(e)<0})}},{key:"render",value:function(){var e=this.props.children;return a.Children.only("function"==typeof e?e(this.state.dimensions):e)}}]),Measure}(a.Component);Measure.propTypes={whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,includeMargin:a.PropTypes.bool,useClone:a.PropTypes.bool,cloneOptions:a.PropTypes.object,shouldMeasure:a.PropTypes.bool,onMeasure:a.PropTypes.func},Measure.defaultProps={whitelist:["width","height","top","right","bottom","left"],blacklist:[],includeMargin:!0,useClone:!1,cloneOptions:{},shouldMeasure:!0,onMeasure:function(){return null}},t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t){e.exports=n}])});

lib/Measure.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _resizeObserverPolyfill = require('resize-observer-polyfill');
+
+var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
+
 var _getNodeDimensions = require('get-node-dimensions');
@@ -24,6 +28,2 @@
 
-var _resizeDetector = require('./resize-detector');
-
-var _resizeDetector2 = _interopRequireDefault(_resizeDetector);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -106,6 +106,7 @@
 
-      // add component to resize detector to detect changes on resize
-      (0, _resizeDetector2.default)().listenTo(this._node, function () {
+      // add component to resize observer to detect changes on resize
+      this.resizeObserver = new _resizeObserverPolyfill2.default(function () {
         return _this2.measure();
       });
+      this.resizeObserver.observe(this._node);
     }
@@ -128,4 +129,4 @@ }, {
     value: function componentWillUnmount() {
-      (0, _resizeDetector2.default)().removeAllListeners(this._node);
-      (0, _resizeDetector2.default)().uninstall(this._node);
+      resizeDetector().removeAllListeners(this._node);
+      resizeDetector().uninstall(this._node);
       this._node = null;
@@ -132,0 +133,0 @@ }

package.json

 {
   "name": "react-measure",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Compute measurements of React components.",
@@ -13,3 +13,3 @@ "main": "lib/react-measure.js",
     "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
-    "dev": "webpack-dev-server --devtool eval --hot --progress --colors",
+    "dev": "webpack-dev-server --devtool eval --hot --progress --colors --host 0.0.0.0",
     "postbuild": "NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js",
@@ -44,4 +44,4 @@ "prebuild": "rm -rf dist && mkdir dist",
   "dependencies": {
-    "element-resize-detector": "^1.1.9",
-    "get-node-dimensions": "^1.2.0"
+    "get-node-dimensions": "^1.2.0",
+    "resize-observer-polyfill": "^1.2.1"
   },
@@ -48,0 +48,0 @@ "devDependencies": {

README.md

@@ -6,3 +6,3 @@ ## React Measure
 
-Compute measurements of React components. Uses [element-resize-detector](https://github.com/wnr/element-resize-detector) to detect changes of an element and return the new dimensions.
+Compute measurements of React components. Uses [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) to detect changes of an element and return the new dimensions.
 
@@ -9,0 +9,0 @@ ## Install

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

Worsened metrics

Total package byte prevSize

34921

decreased by-1.77%

Lines of code

423

decreased by-4.3%

Dependency changes

• + Addedresize-observer-polyfill@^1.2.1

• + Addedresize-observer-polyfill@1.5.1(transitive)

• - Removedelement-resize-detector@^1.1.9

• - Removedbatch-processor@1.0.0(transitive)

• - Removedelement-resize-detector@1.2.4(transitive)