Use IntersectionObserver when it's available (#6)

* Use IntersectionObserver when it's available

* Avoid using 'window' to store the IntersectionObserver

* Add unit tests

* Remove unnecessary conditional

* Fix tests in Travis

* Fix wrong props order

Author: Aljullu

.eslintrc

@@ -133,7 +133,7 @@
     "padded-blocks": [1, "never"],
     "quote-props": [1, "as-needed"],
     "quotes": [1, 'single'],
-    "require-jsdoc": 1,
+    "require-jsdoc": 0,
     "semi-spacing": 1,
     "semi": 1,
     "sort-keys": 0,

src/components/LazyLoadComponent.jsx

@@ -3,6 +3,7 @@ import { PropTypes } from 'prop-types';
 
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
 import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 class LazyLoadComponent extends React.Component {
   constructor(props) {
@@ -47,7 +48,7 @@ class LazyLoadComponent extends React.Component {
     const { className, height, placeholder, scrollPosition, style,
       threshold, width } = this.props;
 
-    if (this.isScrollTracked) {
+    if (this.isScrollTracked || isIntersectionObserverAvailable()) {
       return (
         <PlaceholderWithoutTracking
           className={className}

src/components/LazyLoadComponent.spec.js

@@ -7,6 +7,9 @@ import Adapter from 'enzyme-adapter-react-16';
 import LazyLoadComponent from './LazyLoadComponent.jsx';
 import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
+
+jest.mock('../utils/intersection-observer');
 
 configure({ adapter: new Adapter() });
 
@@ -16,6 +19,16 @@ const {
 } = ReactTestUtils;
 
 describe('LazyLoadComponent', function() {
+  const windowIntersectionObserver = window.IntersectionObserver;
+
+  beforeEach(() => {
+    isIntersectionObserverAvailable.mockImplementation(() => false);
+  });
+
+  afterEach(() => {
+    window.IntersectionObserver = windowIntersectionObserver;
+  });
+
   it('renders a PlaceholderWithTracking when scrollPosition is undefined', function() {
     const lazyLoadComponent = mount(
       <LazyLoadComponent
@@ -30,6 +43,28 @@ describe('LazyLoadComponent', function() {
     expect(placeholderWithTracking.length).toEqual(1);
   });
 
+  it('renders a PlaceholderWithoutTracking when scrollPosition is undefined but IntersectionObserver is available', function() {
+    isIntersectionObserverAvailable.mockImplementation(() => true);
+    window.IntersectionObserver = jest.fn(function() {
+      this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+    });
+
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        style={{ marginTop: 100000 }}>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    const placeholderWithTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithTracking);
+    const placeholderWithoutTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithoutTracking);
+
+    expect(placeholderWithTracking.length).toEqual(0);
+    expect(placeholderWithoutTracking.length).toEqual(1);
+  });
+
   it('renders a PlaceholderWithoutTracking when scrollPosition is defined', function() {
     const lazyLoadComponent = mount(
       <LazyLoadComponent
@@ -39,9 +74,12 @@ describe('LazyLoadComponent', function() {
       </LazyLoadComponent>
     );
 
+    const placeholderWithTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithTracking);
     const placeholderWithoutTracking = scryRenderedComponentsWithType(
       lazyLoadComponent.instance(), PlaceholderWithoutTracking);
 
+    expect(placeholderWithTracking.length).toEqual(0);
     expect(placeholderWithoutTracking.length).toEqual(1);
   });
 

src/components/PlaceholderWithoutTracking.jsx

@@ -1,18 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PropTypes } from 'prop-types';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 class PlaceholderWithoutTracking extends React.Component {
   constructor(props) {
     super(props);
+
+    const supportsObserver = isIntersectionObserverAvailable();
+
+    this.LAZY_LOAD_OBSERVER = { supportsObserver };
+
+    if (supportsObserver) {
+      const { threshold } = props;
+
+      this.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver(
+        this.checkIntersections, { rootMargin: threshold + 'px' }
+      );
+    }
+  }
+
+  checkIntersections(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.onVisible();
+      }
+    });
   }
 
   componentDidMount() {
-    this.updateVisibility();
+    if (this.placeholder &&
+        this.LAZY_LOAD_OBSERVER && this.LAZY_LOAD_OBSERVER.observer) {
+      this.placeholder.onVisible = this.props.onVisible;
+      this.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder);
+    }
+
+    if (this.LAZY_LOAD_OBSERVER &&
+        !this.LAZY_LOAD_OBSERVER.supportsObserver) {
+      this.updateVisibility();
+    }
+  }
+
+  componentWillUnMount() {
+    if (this.LAZY_LOAD_OBSERVER) {
+      this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder);
+    }
   }
 
   componentDidUpdate() {
-    this.updateVisibility();
+    if (this.LAZY_LOAD_OBSERVER &&
+        !this.LAZY_LOAD_OBSERVER.supportsObserver) {
+      this.updateVisibility();
+    }
   }
 
   getPlaceholderBoundingBox(scrollPosition = this.props.scrollPosition) {
@@ -77,14 +116,14 @@ class PlaceholderWithoutTracking extends React.Component {
 
 PlaceholderWithoutTracking.propTypes = {
   onVisible: PropTypes.func.isRequired,
-  scrollPosition: PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-  }).isRequired,
   className: PropTypes.string,
   height: PropTypes.number,
   placeholder: PropTypes.element,
   threshold: PropTypes.number,
+  scrollPosition: PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+  }),
   width: PropTypes.number,
 };
 

src/components/PlaceholderWithoutTracking.spec.js

@@ -8,6 +8,9 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
+
+jest.mock('../utils/intersection-observer');
 
 configure({ adapter: new Adapter() });
 
@@ -73,6 +76,16 @@ describe('PlaceholderWithoutTracking', function() {
     expect(placeholderWrapper.length).toEqual(numberOfPlaceholderWrappers);
   }
 
+  const windowIntersectionObserver = window.IntersectionObserver;
+
+  beforeEach(() => {
+    isIntersectionObserverAvailable.mockImplementation(() => false);
+  });
+
+  afterEach(() => {
+    window.IntersectionObserver = windowIntersectionObserver;
+  });
+
   it('renders the default placeholder when it\'s not in the viewport', function() {
     const className = 'placeholder-wrapper';
     const component = renderPlaceholderWithoutTracking({
@@ -168,4 +181,17 @@ describe('PlaceholderWithoutTracking', function() {
 
     expect(onVisible).toHaveBeenCalledTimes(1);
   });
+
+  it('doesn\'t track placeholder visibility if IntersectionObserver is available', function() {
+    isIntersectionObserverAvailable.mockImplementation(() => true);
+    window.IntersectionObserver = jest.fn(function() {
+      this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this
+    });
+    const onVisible = jest.fn();
+    const component = renderPlaceholderWithoutTracking({
+      onVisible,
+    });
+
+    expect(onVisible).toHaveBeenCalledTimes(0);
+  });
 });

src/hoc/trackWindowScroll.js

@@ -2,12 +2,17 @@ import React from 'react';
 import { PropTypes } from 'prop-types';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
+import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 const trackWindowScroll = (BaseComponent) => {
   class ScrollAwareComponent extends React.Component {
     constructor(props) {
       super(props);
 
+      if (isIntersectionObserverAvailable()) {
+        return;
+      }
+
       const onChangeScroll = this.onChangeScroll.bind(this);
 
       if (props.delayMethod === 'debounce') {
@@ -31,22 +36,25 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     componentDidMount() {
-      if (typeof window == 'undefined') {
+      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
         return;
       }
       window.addEventListener('scroll', this.delayedScroll);
       window.addEventListener('resize', this.delayedScroll);
     }
 
     componentWillUnmount() {
-      if (typeof window === 'undefined') {
+      if (typeof window == 'undefined' || isIntersectionObserverAvailable()) {
         return;
       }
       window.removeEventListener('scroll', this.delayedScroll);
       window.removeEventListener('resize', this.delayedScroll);
     }
 
     onChangeScroll() {
+      if (isIntersectionObserverAvailable()) {
+        return;
+      }
       this.setState({
         scrollPosition: {
           x: (typeof window == 'undefined' ?
@@ -63,10 +71,12 @@ const trackWindowScroll = (BaseComponent) => {
 
     render() {
       const { delayMethod, delayTime, ...props } = this.props;
+      const scrollPosition = isIntersectionObserverAvailable() ?
+        null : this.state.scrollPosition;
 
       return (
         <BaseComponent
-          scrollPosition={this.state.scrollPosition}
+          scrollPosition={scrollPosition}
           {...props} />
       );
     }

src/utils/intersection-observer.js

@@ -0,0 +1,6 @@
+export default function() {
+  return (
+    'IntersectionObserver' in window &&
+    'isIntersecting' in window.IntersectionObserverEntry.prototype
+  );
+}

src/utils/intersection-observer.spec.js

@@ -0,0 +1,24 @@
+import isIntersectionObserverAvailable from './intersection-observer';
+
+describe('isIntersectionObserverAvailable', function() {
+  it('returns true if IntersectionObserver is available', function() {
+    window.IntersectionObserver = {};
+    window.IntersectionObserverEntry = {
+      prototype: {
+        isIntersecting: () => null,
+      },
+    };
+
+    expect(isIntersectionObserverAvailable()).toBe(true);
+  });
+
+  it('returns false if IntersectionObserver is not available', function() {
+    delete window.IntersectionObserver;
+    window.IntersectionObserverEntry = {
+      prototype: {},
+    };
+    delete window.IntersectionObserverEntry;
+
+    expect(isIntersectionObserverAvailable()).toBe(false);
+  });
+});