react-measure - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0-rc.0

lib/Measure.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -12,18 +16,111 @@
 
-var _withContentRect = require('./with-content-rect');
+var _resizeObserverPolyfill = require('resize-observer-polyfill');
 
-var _withContentRect2 = _interopRequireDefault(_withContentRect);
+var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
 
+var _utils = require('./utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function Measure(_ref) {
-  var measure = _ref.measure,
-      measureRef = _ref.measureRef,
-      contentRect = _ref.contentRect,
-      children = _ref.children;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  return children({ measure: measure, measureRef: measureRef, contentRect: contentRect });
-}
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-exports.default = (0, _withContentRect2.default)()(Measure);
-module.exports = exports['default'];
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Measure = function (_Component) {
+  _inherits(Measure, _Component);
+
+  function Measure() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Measure);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Measure.__proto__ || Object.getPrototypeOf(Measure)).call.apply(_ref, [this].concat(args))), _this), _this.firstResizeEvent = true, _this.nodes = {}, _this.refsById = {}, _this.state = { measurements: null }, _this.bind = function (id) {
+      if (!_this.refsById[id]) {
+        _this.refsById[id] = function (node) {
+          if (node) {
+            _this.nodes[id] = node;
+            _this.resizeObserver.observe(node);
+          } else {
+            _this.resizeObserver.unobserve(_this.nodes[id]);
+            delete _this.nodes[id];
+            delete _this.refsById[id];
+          }
+          _this.setState(function (state) {
+            var newMeasurements = _extends({}, state.measurements);
+            if (node) {
+              newMeasurements[id] = (0, _utils.getMeasurements)(node);
+            } else {
+              delete newMeasurements[id];
+            }
+            return { measurements: newMeasurements };
+          }, _this.fireOnMeasure);
+        };
+      }
+      return { ref: _this.refsById[id] };
+    }, _this.resizeObserver = new _resizeObserverPolyfill2.default(function (entries) {
+      if (_this.firstResizeEvent) {
+        _this.firstResizeEvent = false;
+      } else {
+        _this.setState(function (state) {
+          var newMeasurements = _extends({}, state.measurements);
+          entries.forEach(function (entry) {
+            var id = _this.getIdFromNode(entry.target);
+            newMeasurements[id] = (0, _utils.getMeasurements)(entry.target);
+          });
+          return { measurements: newMeasurements };
+        }, _this.fireOnMeasure);
+      }
+    }), _this.getIdFromNode = function (node) {
+      var id = null;
+      Object.keys(_this.nodes).some(function (key) {
+        if (_this.nodes[key] === node) {
+          return id = key;
+        }
+      });
+      return id;
+    }, _this.fireOnMeasure = function () {
+      if (_this.props.onMeasure) {
+        _this.props.onMeasure(_this.state.measurements);
+      }
+    }, _this.measure = function () {
+      _this.setState(function (state) {
+        var newMeasurements = _extends({}, state.measurements);
+        Object.keys(_this.nodes).some(function (key) {
+          newMeasurements[key] = (0, _utils.getMeasurements)(_this.nodes[key]);
+        });
+        return { measurements: newMeasurements };
+      }, _this.fireOnMeasure);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+  // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+
+
+  _createClass(Measure, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.resizeObserver.disconnect();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return this.props.children({
+        bind: this.bind,
+        measure: this.measure,
+        measurements: this.state.measurements
+      });
+    }
+  }]);
+
+  return Measure;
+}(_react.Component);
+
+exports.default = Measure;

package.json

 {
   "name": "react-measure",
-  "version": "2.0.2",
+  "version": "3.0.0-rc.0",
   "description": "Compute measurements of React components.",
@@ -11,9 +11,7 @@ "main": "lib/react-measure.js",
   "scripts": {
-    "build:lib": "babel src --out-dir lib",
-    "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
-    "dev": "webpack-dev-server --inline --hot --progress --colors --host 0.0.0.0 --devtool eval",
-    "postbuild": "NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js",
-    "prebuild": "rm -rf dist && mkdir dist",
+    "build": "babel src --out-dir lib",
+    "deploy": "NODE_ENV=production TARGET=minify webpack && git-directory-deploy --directory example --branch gh-pages",
+    "dev": "webpack-dev-server",
     "prepublish": "npm run build",
-    "deploy": "NODE_ENV=production TARGET=minify webpack && git-directory-deploy --directory example --branch gh-pages"
+    "start": "npm run dev"
   },
@@ -32,3 +30,5 @@ "repository": {
     "container-queries",
-    "size"
+    "size",
+    "scroll",
+    "position"
   ],
@@ -46,5 +46,4 @@ "author": "Travis Arnold <[e-mail]> (http://souporserious.com)",
   "dependencies": {
-    "get-node-dimensions": "^1.2.0",
-    "prop-types": "^15.5.10",
-    "resize-observer-polyfill": "^1.4.2"
+    "prop-types": "^15.6.0",
+    "resize-observer-polyfill": "^1.5.0"
   },
@@ -54,22 +53,21 @@ "devDependencies": {
     "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-es2015": "^6.16.0",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
-    "chokidar": "^1.6.1",
-    "css-loader": "^0.25.0",
+    "create-react-context": "^0.1.6",
+    "faker": "^4.1.0",
     "git-directory-deploy": "^1.5.1",
-    "http-server": "^0.9.0",
-    "node-libs-browser": "^1.0.0",
-    "node-sass": "^3.2.0",
-    "postcss-loader": "^0.13.0",
-    "react": "15.3.2",
-    "react-dom": "15.3.2",
-    "react-motion": "^0.4.2",
-    "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.9.0"
+    "popmotion": "^8.1.10",
+    "prettier": "^1.10.2",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-motion": "^0.5.2",
+    "stylefire": "^1.1.9",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^2.0.4",
+    "webpack-dev-server": "^2.11.1",
+    "webpack-hot-middleware": "^2.21.0"
   }
 }

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-20%

Dev dependency count

20

decreased by-4.76%

Number of package files

15

increased by25%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

48039

decreased by-45.71%

Lines of code

840

decreased by-40.59%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedget-node-dimensions@^1.2.0

• - Removedget-node-dimensions@1.2.2(transitive)

• Updatedprop-types@^15.6.0

• Updatedresize-observer-polyfill@^1.5.0