react-intersection-observer - npm Package Compare versions

Comparing version 6.2.2 to 6.2.3

dist/react-intersection-observer.cjs.js

@@ -5,4 +5,4 @@ 'use strict';
 
+var invariant = _interopDefault(require('invariant'));
 var React = require('react');
-var invariant = _interopDefault(require('invariant'));
 
@@ -91,2 +91,4 @@ function _defineProperty(obj, key, value) {
 
+  // Validate that the element is not being used in another <Observer />
+  invariant(!INSTANCE_MAP.has(element), "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s", element);
   var _options = options,
@@ -93,0 +95,0 @@ root = _options.root,

dist/react-intersection-observer.esm.js

@@ -0,3 +1,3 @@
+import invariant from 'invariant';
 import { createElement, Component } from 'react';
-import invariant from 'invariant';
 
@@ -86,2 +86,4 @@ function _defineProperty(obj, key, value) {
 
+  // Validate that the element is not being used in another <Observer />
+  invariant(!INSTANCE_MAP.has(element), "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s", element);
   var _options = options,
@@ -88,0 +90,0 @@ root = _options.root,

dist/react-intersection-observer.umd.js

@@ -69,2 +69,39 @@ (function (global, factory) {
 
+  /**
+   * Copyright (c) 2013-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+
+  var invariant = function(condition, format, a, b, c, d, e, f) {
+    {
+      if (format === undefined) {
+        throw new Error('invariant requires an error message argument');
+      }
+    }
+
+    if (!condition) {
+      var error;
+      if (format === undefined) {
+        error = new Error(
+          'Minified exception occurred; use the non-minified dev environment ' +
+          'for the full error message and additional helpful warnings.'
+        );
+      } else {
+        var args = [a, b, c, d, e, f];
+        var argIndex = 0;
+        error = new Error(
+          format.replace(/%s/g, function() { return args[argIndex++]; })
+        );
+        error.name = 'Invariant Violation';
+      }
+
+      error.framesToPop = 1; // we don't care about invariant's own frame
+      throw error;
+    }
+  };
+
+  var invariant_1 = invariant;
+
   var INSTANCE_MAP = new Map();
@@ -90,2 +127,4 @@ var OBSERVER_MAP = new Map();
 
+    // Validate that the element is not being used in another <Observer />
+    invariant_1(!INSTANCE_MAP.has(element), "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s", element);
     var _options = options,
@@ -195,39 +234,2 @@ root = _options.root,
   /**
-   * Copyright (c) 2013-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var invariant = function(condition, format, a, b, c, d, e, f) {
-    {
-      if (format === undefined) {
-        throw new Error('invariant requires an error message argument');
-      }
-    }
-
-    if (!condition) {
-      var error;
-      if (format === undefined) {
-        error = new Error(
-          'Minified exception occurred; use the non-minified dev environment ' +
-          'for the full error message and additional helpful warnings.'
-        );
-      } else {
-        var args = [a, b, c, d, e, f];
-        var argIndex = 0;
-        error = new Error(
-          format.replace(/%s/g, function() { return args[argIndex++]; })
-        );
-        error.name = 'Invariant Violation';
-      }
-
-      error.framesToPop = 1; // we don't care about invariant's own frame
-      throw error;
-    }
-  };
-
-  var invariant_1 = invariant;
-
-  /**
    * Monitors scroll, and triggers the children function with updated props
@@ -234,0 +236,0 @@ *

dist/react-intersection-observer.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactIntersectionObserver=t(e.React)}(this,function(a){"use strict";function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(){return(h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var l=new Map,u=new Map;function d(r){if(r){var e=l.get(r);if(e){var o=e.observerId,t=e.observer,n=o?u.get(o):t;n&&n.unobserve(r);var i=!1;o&&l.forEach(function(e,t){e&&e.observerId===o&&t!==r&&(i=!0)}),n&&!i&&(n.disconnect(),u.delete(o)),l.delete(r)}}}function f(e){e.forEach(function(e){var t=e.isIntersecting,r=e.intersectionRatio,o=e.target,n=l.get(o);if(n&&0<=r){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<r:e<=r}):void 0!==i.threshold&&(s=n.visible?r>i.threshold:r>=i.threshold),void 0!==t&&(s=s&&t),n.visible=s,n.callback(s)}})}var e=function(n){var e,t;function r(){for(var t,e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];return i(s(s(t=n.call.apply(n,[this].concat(r))||this)),"state",{inView:!1}),i(s(s(t)),"node",null),i(s(s(t)),"handleNode",function(e){t.node&&d(t.node),t.node=e,t.observeNode()}),i(s(s(t)),"handleChange",function(e){t.setState({inView:e}),t.props.onChange&&t.props.onChange(e)}),t}t=n,(e=r).prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t;var o=r.prototype;return o.componentDidMount=function(){},o.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(d(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(d(this.node),this.node=null)},o.componentWillUnmount=function(){this.node&&(d(this.node),this.node=null)},o.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,r=e.root,o=e.rootMargin,n=e.rootId;!function(e,t,r,o){void 0===r&&(r={threshold:0});var n=r,i=n.root,s=n.rootMargin,a=r.threshold||0;if(e&&t){var h=s?a.toString()+"_"+s:""+a.toString();i&&(h=o?o+"_"+h:null);var d=h?u.get(h):null;d||(d=new IntersectionObserver(f,r),h&&u.set(h,d));var c={callback:t,visible:!1,options:r,observerId:h,observer:h?void 0:d};l.set(e,c),d.observe(e)}}(this.node,this.handleChange,{threshold:t,root:r,rootMargin:o},n)}},o.render=function(){var e=this.props,t=e.children,r=e.render,o=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],0<=t.indexOf(r)||(n[r]=e[r]);return n}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=t||r;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(o||"div",h({ref:this.handleNode},n),t)},r}(a.Component);return i(e,"defaultProps",{threshold:0,triggerOnce:!1}),e});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):e.ReactIntersectionObserver=r(e.React)}(this,function(a){"use strict";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(){return(d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var l=function(e,r,t,n,o,i,s,a){if(!e){var d;if(void 0===r)d=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var h=[t,n,o,i,s,a],c=0;(d=new Error(r.replace(/%s/g,function(){return h[c++]}))).name="Invariant Violation"}throw d.framesToPop=1,d}},u=new Map,f=new Map;function h(t){if(t){var e=u.get(t);if(e){var n=e.observerId,r=e.observer,o=n?f.get(n):r;o&&o.unobserve(t);var i=!1;n&&u.forEach(function(e,r){e&&e.observerId===n&&r!==t&&(i=!0)}),o&&!i&&(o.disconnect(),f.delete(n)),u.delete(t)}}}function p(e){e.forEach(function(e){var r=e.isIntersecting,t=e.intersectionRatio,n=e.target,o=u.get(n);if(o&&0<=t){var i=o.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return o.visible?e<t:e<=t}):void 0!==i.threshold&&(s=o.visible?t>i.threshold:t>=i.threshold),void 0!==r&&(s=s&&r),o.visible=s,o.callback(s)}})}var e=function(o){var e,r;function t(){for(var r,e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return i(s(s(r=o.call.apply(o,[this].concat(t))||this)),"state",{inView:!1}),i(s(s(r)),"node",null),i(s(s(r)),"handleNode",function(e){r.node&&h(r.node),r.node=e,r.observeNode()}),i(s(s(r)),"handleChange",function(e){r.setState({inView:e}),r.props.onChange&&r.props.onChange(e)}),r}r=o,(e=t).prototype=Object.create(r.prototype),(e.prototype.constructor=e).__proto__=r;var n=t.prototype;return n.componentDidMount=function(){},n.componentDidUpdate=function(e,r){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(h(this.node),this.observeNode()),r.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(h(this.node),this.node=null)},n.componentWillUnmount=function(){this.node&&(h(this.node),this.node=null)},n.observeNode=function(){if(this.node){var e=this.props,r=e.threshold,t=e.root,n=e.rootMargin,o=e.rootId;!function(e,r,t,n){void 0===t&&(t={threshold:0}),l(!u.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e);var o=t,i=o.root,s=o.rootMargin,a=t.threshold||0;if(e&&r){var d=s?a.toString()+"_"+s:""+a.toString();i&&(d=n?n+"_"+d:null);var h=d?f.get(d):null;h||(h=new IntersectionObserver(p,t),d&&f.set(d,h));var c={callback:r,visible:!1,options:t,observerId:d,observer:d?void 0:h};u.set(e,c),h.observe(e)}}(this.node,this.handleChange,{threshold:r,root:t,rootMargin:n},o)}},n.render=function(){var e=this.props,r=e.children,t=e.render,n=e.tag,o=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],0<=r.indexOf(t)||(o[t]=e[t]);return o}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=r||t;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(n||"div",d({ref:this.handleNode},o),r)},t}(a.Component);return i(e,"defaultProps",{threshold:0,triggerOnce:!1}),e});

package.json

 {
   "name": "react-intersection-observer",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -117,3 +117,3 @@ "main": "dist/react-intersection-observer.cjs.js",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.5.1",
+    "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.4.0",
@@ -120,0 +120,0 @@ "enzyme-to-json": "^3.3.4",

README.md

@@ -114,3 +114,3 @@ # react-intersection-observer
 You can import the
-[polyfill](https://www.npmjs.com/package/react-intersection-observer) directly or use
+[polyfill](https://www.npmjs.com/package/intersection-observer) directly or use
 a service like [polyfill.io](https://polyfill.io/v2/docs/) to add it when
@@ -117,0 +117,0 @@ needed.

src/__tests__/intersection.test.js

@@ -26,2 +26,8 @@ import { observe, unobserve, destroy } from '../intersection'
 
+it('should throw error if already observering', () => {
+  const cb = jest.fn()
+  observe(el, cb)
+  expect(() => observe(el, cb)).toThrowError()
+})
+
 it('should observe with options', () => {
@@ -28,0 +34,0 @@ const cb = jest.fn()

src/intersection.js

 // @flow
+import invariant from 'invariant'
+
 type Callback = (inView: boolean) => void
@@ -33,2 +35,8 @@
 ) {
+  // Validate that the element is not being used in another <Observer />
+  invariant(
+    !INSTANCE_MAP.has(element),
+    "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",
+    element,
+  )
   const { root, rootMargin } = options
@@ -35,0 +43,0 @@ const threshold = options.threshold || 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

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

Improved metrics

Total package byte prevSize

73338

increased by2.73%

Lines of code

1567

increased by1.29%

No dependency changes