@react-hook/intersection-observer - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

dist/cjs/index.js

@@ -6,2 +6,4 @@ 'use strict'
 
+require('intersection-observer')
+
 var _react = require('react')
@@ -17,7 +19,3 @@
 
-if (typeof window !== 'undefined') {
-  require('intersection-observer')
-}
-
-const useIntersectionObserver = (opt = {}) => {
+const useIntersectionObserver = (options = {}) => {
   const {
@@ -30,3 +28,3 @@ root = null,
     initialIsIntersecting = false,
-  } = opt
+  } = options
 
@@ -46,3 +44,3 @@ function _ref(entries) {
       target: null,
-      time: null,
+      time: 0,
     })),
@@ -55,4 +53,6 @@ createObserver = () => {
         threshold,
-      })
-      observer.POLL_INTERVAL = pollInterval
+      }) // @ts-ignore
+
+      observer.POLL_INTERVAL = pollInterval // @ts-ignore
+
       observer.USE_MUTATION_OBSERVER = useMutationObserver
@@ -63,10 +63,9 @@ return observer
 
-  function _ref2() {
-    return didMount.current === true && observer.disconnect()
-  }
-
   ;(0, _react.useEffect)(() => {
     if (didMount.current === false) didMount.current = true
     else setObserver(createObserver())
-    return _ref2
+    const {current} = didMount
+    return () => {
+      current === true && observer && observer.disconnect()
+    }
   }, [
@@ -80,9 +79,9 @@ root,
 
-  function _ref3() {
-    return element && observer.unobserve(element)
+  function _ref2() {
+    element && observer && observer.unobserve(element)
   }
 
   ;(0, _passiveLayoutEffect.default)(() => {
-    element && observer.observe(element)
-    return _ref3
+    element && observer && observer.observe(element)
+    return _ref2
   }, [element, observer])
@@ -89,0 +88,0 @@ return [entry, setElement]

dist/es/index.js

@@ -1,30 +0,15 @@
-if (typeof window !== 'undefined') {
-  require('intersection-observer')
-}
-
+import 'intersection-observer'
 import {useEffect, useRef, useState} from 'react'
 import useLayoutEffect from '@react-hook/passive-layout-effect'
 
-var useIntersectionObserver = function useIntersectionObserver(opt) {
-  if (opt === void 0) {
-    opt = {}
-  }
+const useIntersectionObserver = (options = {}) => {
+  const {
+    root = null,
+    pollInterval = null,
+    useMutationObserver = false,
+    rootMargin = '0px 0px 0px 0px',
+    threshold = 0,
+    initialIsIntersecting = false,
+  } = options
 
-  var _opt = opt,
-    _opt$root = _opt.root,
-    root = _opt$root === void 0 ? null : _opt$root,
-    _opt$pollInterval = _opt.pollInterval,
-    pollInterval = _opt$pollInterval === void 0 ? null : _opt$pollInterval,
-    _opt$useMutationObser = _opt.useMutationObserver,
-    useMutationObserver =
-      _opt$useMutationObser === void 0 ? false : _opt$useMutationObser,
-    _opt$rootMargin = _opt.rootMargin,
-    rootMargin =
-      _opt$rootMargin === void 0 ? '0px 0px 0px 0px' : _opt$rootMargin,
-    _opt$threshold = _opt.threshold,
-    threshold = _opt$threshold === void 0 ? 0 : _opt$threshold,
-    _opt$initialIsInterse = _opt.initialIsIntersecting,
-    initialIsIntersecting =
-      _opt$initialIsInterse === void 0 ? false : _opt$initialIsInterse
-
   function _ref(entries) {
@@ -34,57 +19,51 @@ return setEntry(entries[entries.length - 1])
 
-  var didMount = useRef(null),
-    _useState = useState(null),
-    element = _useState[0],
-    setElement = _useState[1],
-    _useState2 = useState(function() {
-      return {
-        boundingClientRect: null,
-        intersectionRatio: 0,
-        intersectionRect: null,
-        isIntersecting: initialIsIntersecting,
-        rootBounds: null,
-        target: null,
-        time: null,
-      }
-    }),
-    entry = _useState2[0],
-    setEntry = _useState2[1],
-    createObserver = function createObserver() {
+  const didMount = useRef(null),
+    [element, setElement] = useState(null),
+    [entry, setEntry] = useState(() => ({
+      boundingClientRect: null,
+      intersectionRatio: 0,
+      intersectionRect: null,
+      isIntersecting: initialIsIntersecting,
+      rootBounds: null,
+      target: null,
+      time: 0,
+    })),
+    createObserver = () => {
       if (typeof IntersectionObserver === 'undefined') return null
-      var observer = new IntersectionObserver(_ref, {
-        root: root,
-        rootMargin: rootMargin,
-        threshold: threshold,
-      })
-      observer.POLL_INTERVAL = pollInterval
+      const observer = new IntersectionObserver(_ref, {
+        root,
+        rootMargin,
+        threshold,
+      }) // @ts-ignore
+
+      observer.POLL_INTERVAL = pollInterval // @ts-ignore
+
       observer.USE_MUTATION_OBSERVER = useMutationObserver
       return observer
     },
-    _useState3 = useState(createObserver),
-    observer = _useState3[0],
-    setObserver = _useState3[1]
+    [observer, setObserver] = useState(createObserver)
 
-  function _ref2() {
-    return didMount.current === true && observer.disconnect()
-  }
-
-  useEffect(function() {
+  useEffect(() => {
     if (didMount.current === false) didMount.current = true
     else setObserver(createObserver())
-    return _ref2
-  }, [root, rootMargin, pollInterval, useMutationObserver].concat(
-    Array.isArray(threshold) === true ? threshold : [threshold]
-  ))
+    const {current} = didMount
+    return () => {
+      current === true && observer && observer.disconnect()
+    }
+  }, [
+    root,
+    rootMargin,
+    pollInterval,
+    useMutationObserver,
+    ...(Array.isArray(threshold) === true ? threshold : [threshold]),
+  ])
 
-  function _ref3() {
-    return element && observer.unobserve(element)
+  function _ref2() {
+    element && observer && observer.unobserve(element)
   }
 
-  useLayoutEffect(
-    function() {
-      element && observer.observe(element)
-      return _ref3
-    },
-    [element, observer]
-  )
+  useLayoutEffect(() => {
+    element && observer && observer.observe(element)
+    return _ref2
+  }, [element, observer])
   return [entry, setElement]
@@ -91,0 +70,0 @@ }

package.json

 {
   "name": "@react-hook/intersection-observer",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "homepage": "https://github.com/jaredLunde/react-hook/tree/master/packages/intersection-observer#readme",
   "repository": "github:jaredLunde/react-hook",
   "bugs": "https://github.com/jaredLunde/react-hook/issues",
-  "author": "Jared Lunde <[e-mail]> (https://jaredLunde.com)",
+  "author": "Jared Lunde <[e-mail]> (https://jaredLunde.com)",
   "license": "MIT",
-  "description": "",
+  "description": "A React hook for the IntersectionObserver API that uses a polyfill when the native API is not available",
   "keywords": [
@@ -17,3 +17,5 @@ "react",
     "intersection",
-    "intersection observer"
+    "intersection observer",
+    "use intersection observer",
+    "useintersectionobserver"
   ],
@@ -27,22 +29,24 @@ "main": "dist/cjs/index.js",
   "scripts": {
-    "build": "npm run build:cjs && npm run build:es",
-    "build:cjs": "babel src -d dist/cjs -x .js --ignore \"**/*.test.js\",\"**/test.js\" --delete-dir-on-start",
-    "build:es": "cross-env BABEL_ENV=es babel src -d dist/es -x .js --ignore \"**/*.test.js\",\"**/test.js\" --delete-dir-on-start",
-    "format": "prettier --write \"**/*.{js,jsx,md,yml,json,babelrc,eslintrc,prettierrc}\"",
-    "lint": "eslint .",
+    "build": "npm run build:cjs && npm run build:es && npm run build:types",
+    "build:cjs": "babel src -d dist/cjs -x .ts --ignore \"**/*.test.ts\",\"**/test.ts\" --delete-dir-on-start",
+    "build:es": "babel src -d dist/es -x .ts --env-name es --ignore \"**/*.test.ts\",\"**/test.ts\" --delete-dir-on-start",
+    "build:types": "tsc -p tsconfig.json -d --outDir dist/es --emitDeclarationOnly && mkdir -p dist/cjs && cp -R dist/es/**.d.ts dist/cjs && rimraf dist/**/*.test.d.ts",
+    "check-types": "tsc --noEmit -p tsconfig.json",
+    "format": "prettier --write \"**/*.{ts,js,md,yml,json,babelrc,eslintrc,prettierrc}\"",
+    "lint": "eslint . --ext .ts",
     "prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
     "test": "jest",
-    "validate": "npm run lint && npm run test -- --coverage"
+    "validate": "npm run check-types && npm run lint && npm run test -- --coverage"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && npm run build:types"
     }
   },
   "lint-staged": {
-    "**/*.{js,jsx}": [
+    "**/*.{ts,js}": [
       "eslint",
       "prettier --write"
     ],
-    "**/*.{md,yml,json,babelrc,eslintrc,prettierrc}": [
+    "**/*.{md,yml,json}": [
       "prettier --write"
@@ -52,8 +56,8 @@ ]
   "devDependencies": {
-    "@babel/preset-react": "latest",
     "@lunde/babel-preset-es": "latest",
-    "@testing-library/jest-dom": "latest",
-    "@testing-library/react": "latest",
-    "@testing-library/react-hooks": "latest",
-    "babel-eslint": "latest",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@types/jest": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
     "cross-env": "latest",
@@ -63,4 +67,2 @@ "eslint": "latest",
     "eslint-plugin-jest": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
     "husky": "latest",
@@ -70,9 +72,11 @@ "jest": "latest",
     "prettier": "latest",
-    "react": "latest",
-    "react-dom": "latest",
-    "react-test-renderer": "latest",
-    "rimraf": "^2.6.3"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-test-renderer": "^16.12.0",
+    "rimraf": "^2.6.3",
+    "ts-jest": "latest",
+    "typescript": "latest"
   },
   "dependencies": {
-    "@react-hook/passive-layout-effect": "^1.0.1",
+    "@react-hook/passive-layout-effect": "^1.0.2",
     "intersection-observer": "^0.7.0"
@@ -79,0 +83,0 @@ },

README.md

 <hr>
 <div align="center">
-<h1 align="center">
-useIntersectionObserver()
-</h1>
+  <h1 align="center">
+    useIntersectionObserver()
+  </h1>
 </div>
 
 <p align="center">
-<a href="https://bundlephobia.com/result?p=@react-hook/intersection-observer" rel="nofollow" class="rich-diff-level-one">
-<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
-</a>
-<a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/intersection-observer">
-<img alt="" src="https://img.shields.io/npm/v/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
-</a>
-<a aria-label="License" href="https://jaredlunde.mit-license.org/">
-<img alt="" src="https://img.shields.io/npm/l/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
-</a>
+  <a href="https://bundlephobia.com/result?p=@react-hook/intersection-observer">
+    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hook/intersection-observer">
+    <img alt="Types" src="https://img.shields.io/npm/types/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hook/intersection-observer">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
+    <img alt="MIT License" src="https://img.shields.io/npm/l/@react-hook/intersection-observer?style=for-the-badge&labelColor=24292e">
+  </a>
 </p>
 
-<pre align="center">
-npm i @react-hook/intersection-observer
-</pre>
+<pre align="center">npm i @react-hook/intersection-observer</pre>
 <hr>
-
 A React hook for the IntersectionObserver API that uses a polyfill when the native API is not available
@@ -35,3 +35,3 @@
 
-## Usage
+## Quick Start
 
@@ -47,6 +47,8 @@ ```jsx harmony
 
-### `useIntersectionObserver(options?: Object): [entry, ref]`
+## API
 
-#### Options
+### `useIntersectionObserver(options?: IntersectionObserverOptions)`
 
+#### IntersectionObserverOptions
+
 | Property              | Type                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
@@ -61,3 +63,3 @@ | --------------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 
-#### Returns `[entry, ref]`
+#### Returns `[entry: IntersectionObserverEntry, ref: (element: HTMLElement) => void]`
 
@@ -64,0 +66,0 @@ | Variable | Type                        | Description                                                                                                                                                                 |

New alerts

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

Improved metrics

Total package byte prevSize

18246

increased by12.56%

Number of package files

7

increased by40%

Lines of code

199

increased by28.39%

Number of lines in readme file

71

increased by2.9%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@react-hook/passive-layout-effect@^1.0.2