react-waypoint - npm Package Compare versions

Comparing version 8.0.2 to 8.0.3

.travis.yml

@@ -6,3 +6,2 @@ language: node_js
   - '8'
-  - '7'
   - '6'
@@ -9,0 +8,0 @@ - '4'

CHANGELOG.md

@@ -0,1 +1,6 @@
+## 8.0.3
+
+- Defer `handleScroll` in `componentDidUpdate` ([#265](https://github.com/brigade/react-waypoint/pull/265))
+- Extend `React.PureComponent` instead of `React.Component` when available ([#264](https://github.com/brigade/react-waypoint/pull/264))
+
 ## 8.0.2
@@ -2,0 +7,0 @@

cjs/index.js

@@ -249,9 +249,10 @@ 'use strict';
 
-/**
- * Calls a function when you scroll to the element.
- */
+// React.PureComponent was added in React 15.3.0
+var BaseClass = typeof React.PureComponent !== 'undefined' ? React.PureComponent : React.Component;
 
-var Waypoint = function (_React$Component) {
-  _inherits(Waypoint, _React$Component);
+// Calls a function when you scroll to the element.
 
+var Waypoint = function (_BaseClass) {
+  _inherits(Waypoint, _BaseClass);
+
   function Waypoint(props) {
@@ -288,5 +289,7 @@ _classCallCheck(this, Waypoint);
         // this._ref may occasionally not be set at this time. To help ensure that
-        // this works smoothly, we want to delay the initial execution until the
-        // next tick.
-        this.cancelInitialTimeout = onNextTick(function () {
+        // this works smoothly and to avoid layout thrashing, we want to delay the
+        // initial execution until the next tick.
+        this.cancelOnNextTick = onNextTick(function () {
+          _this2.cancelOnNextTick = null;
+
           // Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
@@ -325,2 +328,4 @@ ensureRefIsProvidedByChild(_this2.props.children, _this2._ref);
       function componentDidUpdate() {
+        var _this3 = this;
+
         if (!Waypoint.getWindow()) {
@@ -335,4 +340,17 @@ return;
 
-        // The element may have moved.
-        this._handleScroll(null);
+        // The element may have moved, so we need to recompute its position on the
+        // page. This happens via handleScroll in a way that forces layout to be
+        // computed.
+        //
+        // We want this to be deferred to avoid forcing layout during render, which
+        // causes layout thrashing. And, if we already have this work enqueued, we
+        // can just wait for that to happen instead of enqueueing again.
+        if (this.cancelOnNextTick) {
+          return;
+        }
+
+        this.cancelOnNextTick = onNextTick(function () {
+          _this3.cancelOnNextTick = null;
+          _this3._handleScroll(null);
+        });
       }
@@ -357,4 +375,4 @@
 
-        if (this.cancelInitialTimeout) {
-          this.cancelInitialTimeout();
+        if (this.cancelOnNextTick) {
+          this.cancelOnNextTick();
         }
@@ -552,3 +570,3 @@ }
       function render() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -567,3 +585,3 @@ var children = this.props.children;
             function ref(node) {
-              _this3.refElement(node);
+              _this4.refElement(node);
               if (children.ref) {
@@ -588,6 +606,6 @@ children.ref(node);
   return Waypoint;
-}(React.Component);
+}(BaseClass);
 
 
-process.env.NODE_ENV !== "production" ? Waypoint.propTypes = {
+Waypoint.propTypes = {
   children: PropTypes.node,
@@ -613,3 +631,3 @@ debug: PropTypes.bool,
   bottomOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-} : void 0;
+};
 
@@ -616,0 +634,0 @@ Waypoint.above = constants.above;

es/index.js

@@ -245,9 +245,10 @@ import React from 'react';
 
-/**
- * Calls a function when you scroll to the element.
- */
+// React.PureComponent was added in React 15.3.0
+var BaseClass = typeof React.PureComponent !== 'undefined' ? React.PureComponent : React.Component;
 
-var Waypoint = function (_React$Component) {
-  _inherits(Waypoint, _React$Component);
+// Calls a function when you scroll to the element.
 
+var Waypoint = function (_BaseClass) {
+  _inherits(Waypoint, _BaseClass);
+
   function Waypoint(props) {
@@ -284,5 +285,7 @@ _classCallCheck(this, Waypoint);
         // this._ref may occasionally not be set at this time. To help ensure that
-        // this works smoothly, we want to delay the initial execution until the
-        // next tick.
-        this.cancelInitialTimeout = onNextTick(function () {
+        // this works smoothly and to avoid layout thrashing, we want to delay the
+        // initial execution until the next tick.
+        this.cancelOnNextTick = onNextTick(function () {
+          _this2.cancelOnNextTick = null;
+
           // Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
@@ -321,2 +324,4 @@ ensureRefIsProvidedByChild(_this2.props.children, _this2._ref);
       function componentDidUpdate() {
+        var _this3 = this;
+
         if (!Waypoint.getWindow()) {
@@ -331,4 +336,17 @@ return;
 
-        // The element may have moved.
-        this._handleScroll(null);
+        // The element may have moved, so we need to recompute its position on the
+        // page. This happens via handleScroll in a way that forces layout to be
+        // computed.
+        //
+        // We want this to be deferred to avoid forcing layout during render, which
+        // causes layout thrashing. And, if we already have this work enqueued, we
+        // can just wait for that to happen instead of enqueueing again.
+        if (this.cancelOnNextTick) {
+          return;
+        }
+
+        this.cancelOnNextTick = onNextTick(function () {
+          _this3.cancelOnNextTick = null;
+          _this3._handleScroll(null);
+        });
       }
@@ -353,4 +371,4 @@
 
-        if (this.cancelInitialTimeout) {
-          this.cancelInitialTimeout();
+        if (this.cancelOnNextTick) {
+          this.cancelOnNextTick();
         }
@@ -548,3 +566,3 @@ }
       function render() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -563,3 +581,3 @@ var children = this.props.children;
             function ref(node) {
-              _this3.refElement(node);
+              _this4.refElement(node);
               if (children.ref) {
@@ -584,6 +602,6 @@ children.ref(node);
   return Waypoint;
-}(React.Component);
+}(BaseClass);
 
 
-process.env.NODE_ENV !== "production" ? Waypoint.propTypes = {
+Waypoint.propTypes = {
   children: PropTypes.node,
@@ -609,3 +627,3 @@ debug: PropTypes.bool,
   bottomOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-} : void 0;
+};
 
@@ -612,0 +630,0 @@ Waypoint.above = constants.above;

INTHEWILD.md

@@ -9,2 +9,3 @@ Please use [pull requests](https://github.com/brigade/react-waypoint/pull/new/master) to add your organization and/or project to this document!
 - [DoorDash](https://github.com/doordash)
+- [HousingAnywhere](https://github.com/housinganywhere)
 - [Netflix](https://github.com/Netflix)
@@ -19,1 +20,2 @@ - [Remix](https://github.com/remix)
 - [Happo](https://github.com/Galooshi/happo)
+- [react-ideal-image](https://github.com/stereobooster/react-ideal-image)

package.json

 {
   "name": "react-waypoint",
-  "version": "8.0.2",
+  "version": "8.0.3",
   "description": "A React component to execute a function whenever you scroll to an element.",
@@ -56,4 +56,4 @@ "main": "cjs/index.js",
     "rimraf": "^2.6.2",
-    "rollup": "^0.60.7",
-    "rollup-plugin-babel": "^3.0.4",
+    "rollup": "^0.62.0",
+    "rollup-plugin-babel": "^3.0.7",
     "safe-publish-latest": "^1.1.1",
@@ -60,0 +60,0 @@ "webpack": "^2.3.3"

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance 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

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1312813

1080.35%

Number of package files

18

12.5%

Lines of code

2202

1.29%

Worsened metrics

Number of low quality alerts

1

Infinity%

Number of low supply chain risk alerts

32

18.52%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes