Convert to Flow

Author: Daniel Schmidt

.flowconfig

@@ -0,0 +1,16 @@
+[ignore]
+<PROJECT_ROOT>/dist/.*
+<PROJECT_ROOT>/node_modules/radium*
+<PROJECT_ROOT>/node_modules/babel*
+<PROJECT_ROOT>/node_modules/immutable*
+<PROJECT_ROOT>/node_modules/.*/test*
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=src

package.json

@@ -20,12 +20,12 @@
   ],
   "scripts": {
     "build": "rm -rf lib && npm run build:lib && npm run build:es",
-    "build:es": "BABEL_ENV=es babel src --out-dir  es --ignore __*,*.story.js,*.test.js",
+    "build:es": "BABEL_ENV=es babel src --out-dir es --ignore __*,*.story.js,*.test.js",
     "build:lib": "babel src --out-dir lib --ignore __*,*.story.js,*.test.js",
     "build:storybook": "build-storybook --output-dir example",
     "dev": "concurrently -k -r 'jest --watch' 'npm run storybook'",
     "lint": "eslint {src,stories,tests}/. ",
-    "precommit": "lint-staged",
+    "precommit": "flow && lint-staged",
     "postcommit": "git reset",
     "prepublish": "npm run build",
     "pretty": "prettier '{src,tests,stories}/**/*.js' --write --no-semi --single-quote --trailing-comma all",
@@ -59,7 +59,6 @@
     ]
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
@@ -80,6 +79,7 @@
     "enzyme-to-json": "^3.1.3",
     "eslint": "^4.9.0",
     "eslint-config-insilico": "^5.0.1",
+    "flow-bin": "^0.57.3",
     "husky": "^0.14.3",
     "intersection-observer": "^0.4.0",
     "jest": "^21.2.1",

src/index.js

@@ -1,8 +1,32 @@
-import React, { Component, createElement } from 'react' // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types'
+// @flow
+import * as React from 'react'
 import { observe, unobserve } from './intersection'
 
-const isFunction = func => typeof func === 'function'
+type Props = {
+  /** Element tag to use for the wrapping */
+  tag: string,
+  /** Only trigger the inView callback once */
+  triggerOnce: boolean,
+  /** Children should be either a function or a node */
+  children?: ((inView: boolean) => React.Node) | React.Node,
+  /** Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. */
+  threshold?: number | Array<number>,
+  /** The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.*/
+  root?: HTMLElement,
+  /** Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). */
+  rootMargin?: string,
+  /** Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused.
+   * If you defined a root element, without adding an id, it will create a new instance for all components. */
+  rootId?: string,
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean) => void,
+  /** Use render method to only render content when inView */
+  render?: () => React.Node,
+}
+
+type State = {
+  inView: boolean,
+}
 
 /**
  * Monitors scroll, and triggers the children function with updated props
@@ -13,32 +37,7 @@ const isFunction = func => typeof func === 'function'
  )}
  </Observer>
  */
-class Observer extends Component {
-  static propTypes = {
-    /** Element tag to use for the wrapping */
-    tag: PropTypes.node,
-    /** Children should be either a function or a node */
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    /** Only trigger the inView callback once */
-    triggerOnce: PropTypes.bool,
-    /** Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. */
-    threshold: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.number),
-      PropTypes.number,
-    ]),
-    /** The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.*/
-    root: PropTypes.object,
-    /** Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). */
-    rootMargin: PropTypes.string,
-    /** Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused.
-     * If you defined a root element, without adding an id, it will create a new instance for all components. */
-    rootId: PropTypes.string,
-    /** Call this function whenever the in view state changes */
-    onChange: PropTypes.func,
-    /** Use render method to only render content when inView */
-    render: PropTypes.func,
-  }
-
+class Observer extends React.Component<Props, State> {
   static defaultProps = {
     tag: 'div',
     threshold: 0,
@@ -49,13 +48,13 @@ class Observer extends Component {
     inView: false,
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  componentWillUpdate(nextProps: Props, nextState: State) {
     if (!!this.props.onChange && nextState !== this.state) {
       this.props.onChange(nextState.inView)
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps: Props, prevState: State) {
     // If a IntersectionObserver option changed, reinit the observer
     if (
       prevProps.rootMargin !== this.props.rootMargin ||
@@ -81,7 +80,7 @@ class Observer extends Component {
     }
   }
 
-  node = null
+  node: ?HTMLElement = null
 
   observeNode() {
     if (!this.node) return
@@ -98,13 +97,13 @@ class Observer extends Component {
     )
   }
 
-  handleNode = node => {
+  handleNode = (node: ?HTMLElement) => {
     if (this.node) unobserve(this.node)
     this.node = node
     this.observeNode()
   }
 
-  handleChange = inView => this.setState({ inView })
+  handleChange = (inView: boolean) => this.setState({ inView })
 
   render() {
     const {
@@ -121,17 +120,17 @@ class Observer extends Component {
 
     const { inView } = this.state
 
-    return createElement(
+    return React.createElement(
       tag,
       {
         ...props,
         ref: this.handleNode,
       },
       // If render is a function, use it to render content when in view
-      inView && isFunction(render) ? render() : null,
-      // If children is a function, render it with the current inView status.
-      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-      isFunction(children) ? children(inView) : children,
+      inView && typeof render === 'function' ? render() : null,
+      // // If children is a function, render it with the current inView status.
+      // // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
+      typeof children === 'function' ? children(inView) : children,
     )
   }
 }

src/intersection.js

@@ -1,5 +1,16 @@
-const INSTANCE_MAP = new Map()
-const OBSERVER_MAP = new Map()
+// @flow
+type Callback = (inView: boolean) => void
+
+type Instance = {
+  callback: Callback,
+  visible: boolean,
+  options: IntersectionObserverOptions,
+  observerId: ?string,
+  observer: ?IntersectionObserver,
+}
+
+const INSTANCE_MAP: Map<HTMLElement, Instance> = new Map()
+const OBSERVER_MAP: Map<?string, IntersectionObserver> = new Map()
 
 /**
  * Monitor element, and trigger callback when element becomes visible
@@ -12,16 +23,19 @@ const OBSERVER_MAP = new Map()
  * @param rootId {String} Unique identifier for the root element, to enable reusing the IntersectionObserver
  */
 export function observe(
-  element,
-  callback,
-  options = {
+  element: HTMLElement,
+  callback: Callback,
+  options: IntersectionObserverOptions = {
     threshold: 0,
   },
-  rootId = null,
+  rootId?: string,
 ) {
-  const { threshold, root, rootMargin } = options
+  const { root, rootMargin } = options
+  const threshold = options.threshold || 0
   if (!element || !callback) return
-  let observerId = rootMargin ? `${threshold}_${rootMargin}` : `${threshold}`
+  let observerId = rootMargin
+    ? `${threshold.toString()}_${rootMargin}`
+    : `${threshold.toString()}`
 
   if (root) {
     observerId = rootId ? `${rootId}_${observerId}` : null
@@ -33,7 +47,7 @@ export function observe(
     if (observerId) OBSERVER_MAP.set(observerId, observerInstance)
   }
 
-  const instance = {
+  const instance: Instance = {
     callback,
     visible: false,
     options,
@@ -53,16 +67,18 @@ export function observe(
  * make sure to call this method.
  * @param element {HTMLElement}
  */
-export function unobserve(element) {
+export function unobserve(element: ?HTMLElement) {
   if (!element) return
+  const instance = INSTANCE_MAP.get(element)
 
-  if (INSTANCE_MAP.has(element)) {
-    const { observerId, observer } = INSTANCE_MAP.get(element)
+  if (instance) {
+    const { observerId, observer } = instance
     const observerInstance = observerId
       ? OBSERVER_MAP.get(observerId)
       : observer
 
     if (observerInstance) {
+      // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element.
       observerInstance.unobserve(element)
     }
 
@@ -101,12 +117,12 @@ export function destroy() {
 
 function onChange(changes) {
   changes.forEach(intersection => {
-    if (INSTANCE_MAP.has(intersection.target)) {
-      const { isIntersecting, intersectionRatio, target } = intersection
-      const instance = INSTANCE_MAP.get(target)
+    const { isIntersecting, intersectionRatio, target } = intersection
+    const instance = INSTANCE_MAP.get(target)
+    if (instance) {
       const options = instance.options
 
-      let inView
+      let inView = false
 
       if (Array.isArray(options.threshold)) {
         // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.
@@ -115,7 +131,7 @@ function onChange(changes) {
             ? intersectionRatio > threshold
             : intersectionRatio >= threshold
         })
-      } else {
+      } else if (options.threshold !== undefined) {
         // Trigger on 0 ratio only when not visible. This is fallback for browsers without isIntersecting support
         inView = instance.visible
           ? intersectionRatio > options.threshold