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

Comparing version 1.0.4 to 1.1.0

dist/main/index.js

@@ -1,64 +0,14 @@
-'use strict'
+"use strict";
 
-exports.__esModule = true
-exports.default = void 0
+exports.__esModule = true;
+exports.default = void 0;
 
-var React = /*#__PURE__*/ _interopRequireWildcard(
-  /*#__PURE__*/ require('react')
-)
+var _resizeObserverPolyfill = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("resize-observer-polyfill"));
 
-var _passiveLayoutEffect = /*#__PURE__*/ _interopRequireDefault(
-  /*#__PURE__*/ require('@react-hook/passive-layout-effect')
-)
+var _passiveLayoutEffect = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@react-hook/passive-layout-effect"));
 
-var _resizeObserverPolyfill = /*#__PURE__*/ _interopRequireDefault(
-  /*#__PURE__*/ require('resize-observer-polyfill')
-)
+var _latest = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@react-hook/latest"));
 
-function _interopRequireDefault(obj) {
-  return obj && obj.__esModule ? obj : {default: obj}
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() {
-  if (typeof WeakMap !== 'function') return null
-  var cache = new WeakMap()
-  _getRequireWildcardCache = function () {
-    return cache
-  }
-  return cache
-}
-
-function _interopRequireWildcard(obj) {
-  if (obj && obj.__esModule) {
-    return obj
-  }
-  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
-    return {default: obj}
-  }
-  var cache = _getRequireWildcardCache()
-  if (cache && cache.has(obj)) {
-    return cache.get(obj)
-  }
-  var newObj = {}
-  var hasPropertyDescriptor =
-    Object.defineProperty && Object.getOwnPropertyDescriptor
-  for (var key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      var desc = hasPropertyDescriptor
-        ? Object.getOwnPropertyDescriptor(obj, key)
-        : null
-      if (desc && (desc.get || desc.set)) {
-        Object.defineProperty(newObj, key, desc)
-      } else {
-        newObj[key] = obj[key]
-      }
-    }
-  }
-  newObj.default = obj
-  if (cache) {
-    cache.set(obj, newObj)
-  }
-  return newObj
-}
-
 /**
@@ -72,55 +22,51 @@ * A React hook that fires a callback whenever ResizeObserver detects a change to its size
 const useResizeObserver = (target, callback) => {
-  const resizeObserver = getResizeObserver()
-  const storedCallback = React.useRef(callback)
-  storedCallback.current = callback
-  ;(0, _passiveLayoutEffect.default)(() => {
-    let didUnsubscribe = false
+  const resizeObserver = getResizeObserver();
+  const storedCallback = (0, _latest.default)(callback);
+  (0, _passiveLayoutEffect.default)(() => {
+    let didUnsubscribe = false;
 
     const callback = (entries, observer) => {
-      if (didUnsubscribe) return
-      const targetEl = target && 'current' in target ? target.current : target
+      if (didUnsubscribe) return;
+      const targetEl = target && 'current' in target ? target.current : target;
 
       for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i]
+        const entry = entries[i];
 
         if (entry.target === targetEl) {
-          storedCallback.current(entry, observer)
+          storedCallback.current(entry, observer);
         }
       }
-    }
+    };
 
-    resizeObserver.subscribe(callback)
+    resizeObserver.subscribe(callback);
     return () => {
-      didUnsubscribe = true
-      resizeObserver.unsubscribe(callback)
-    }
-  }, [target, resizeObserver])
-  ;(0, _passiveLayoutEffect.default)(() => {
-    const targetEl = target && 'current' in target ? target.current : target
-    if (!targetEl) return
-    resizeObserver.observer.observe(targetEl)
-    return () => resizeObserver.observer.unobserve(targetEl)
-  }, [target, resizeObserver.observer])
-  return resizeObserver.observer
-}
+      didUnsubscribe = true;
+      resizeObserver.unsubscribe(callback);
+    };
+  }, [target, resizeObserver, storedCallback]);
+  (0, _passiveLayoutEffect.default)(() => {
+    const targetEl = target && 'current' in target ? target.current : target;
+    if (!targetEl) return;
+    resizeObserver.observer.observe(targetEl);
+    return () => resizeObserver.observer.unobserve(targetEl);
+  }, [target, resizeObserver.observer]);
+  return resizeObserver.observer;
+};
 
 const createResizeObserver = () => {
-  const callbacks = new Set()
+  const callbacks = new Set();
   return {
     observer: new _resizeObserverPolyfill.default((entries, observer) => {
-      for (const callback of callbacks) callback(entries, observer)
+      for (const callback of callbacks) callback(entries, observer);
     }),
-    subscribe: (callback) => callbacks.add(callback),
-    unsubscribe: (callback) => callbacks.delete(callback),
-  }
-}
+    subscribe: callback => callbacks.add(callback),
+    unsubscribe: callback => callbacks.delete(callback)
+  };
+};
 
-let _resizeObserver
+let _resizeObserver;
 
-const getResizeObserver = () =>
-  !_resizeObserver
-    ? (_resizeObserver = createResizeObserver())
-    : _resizeObserver
+const getResizeObserver = () => !_resizeObserver ? _resizeObserver = createResizeObserver() : _resizeObserver;
 
-var _default = useResizeObserver
-exports.default = _default
+var _default = useResizeObserver;
+exports.default = _default;

dist/module/index.js

@@ -1,4 +0,4 @@
-import * as React from 'react'
-import useLayoutEffect from '@react-hook/passive-layout-effect'
-import ResizeObserver from 'resize-observer-polyfill'
+import ResizeObserver from 'resize-observer-polyfill';
+import useLayoutEffect from '@react-hook/passive-layout-effect';
+import useLatest from '@react-hook/latest';
 /**
@@ -13,54 +13,50 @@ * A React hook that fires a callback whenever ResizeObserver detects a change to its size
 const useResizeObserver = (target, callback) => {
-  const resizeObserver = getResizeObserver()
-  const storedCallback = React.useRef(callback)
-  storedCallback.current = callback
+  const resizeObserver = getResizeObserver();
+  const storedCallback = useLatest(callback);
   useLayoutEffect(() => {
-    let didUnsubscribe = false
+    let didUnsubscribe = false;
 
     const callback = (entries, observer) => {
-      if (didUnsubscribe) return
-      const targetEl = target && 'current' in target ? target.current : target
+      if (didUnsubscribe) return;
+      const targetEl = target && 'current' in target ? target.current : target;
 
       for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i]
+        const entry = entries[i];
 
         if (entry.target === targetEl) {
-          storedCallback.current(entry, observer)
+          storedCallback.current(entry, observer);
         }
       }
-    }
+    };
 
-    resizeObserver.subscribe(callback)
+    resizeObserver.subscribe(callback);
     return () => {
-      didUnsubscribe = true
-      resizeObserver.unsubscribe(callback)
-    }
-  }, [target, resizeObserver])
+      didUnsubscribe = true;
+      resizeObserver.unsubscribe(callback);
+    };
+  }, [target, resizeObserver, storedCallback]);
   useLayoutEffect(() => {
-    const targetEl = target && 'current' in target ? target.current : target
-    if (!targetEl) return
-    resizeObserver.observer.observe(targetEl)
-    return () => resizeObserver.observer.unobserve(targetEl)
-  }, [target, resizeObserver.observer])
-  return resizeObserver.observer
-}
+    const targetEl = target && 'current' in target ? target.current : target;
+    if (!targetEl) return;
+    resizeObserver.observer.observe(targetEl);
+    return () => resizeObserver.observer.unobserve(targetEl);
+  }, [target, resizeObserver.observer]);
+  return resizeObserver.observer;
+};
 
 const createResizeObserver = () => {
-  const callbacks = new Set()
+  const callbacks = new Set();
   return {
     observer: new ResizeObserver((entries, observer) => {
-      for (const callback of callbacks) callback(entries, observer)
+      for (const callback of callbacks) callback(entries, observer);
     }),
-    subscribe: (callback) => callbacks.add(callback),
-    unsubscribe: (callback) => callbacks.delete(callback),
-  }
-}
+    subscribe: callback => callbacks.add(callback),
+    unsubscribe: callback => callbacks.delete(callback)
+  };
+};
 
-let _resizeObserver
+let _resizeObserver;
 
-const getResizeObserver = () =>
-  !_resizeObserver
-    ? (_resizeObserver = createResizeObserver())
-    : _resizeObserver
+const getResizeObserver = () => !_resizeObserver ? _resizeObserver = createResizeObserver() : _resizeObserver;
 
-export default useResizeObserver
+export default useResizeObserver;

package.json

 {
   "name": "@react-hook/resize-observer",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "homepage": "https://github.com/jaredLunde/react-hook/tree/master/packages/resize-observer#readme",
@@ -15,2 +15,3 @@ "repository": "github:jaredLunde/react-hook",
     "resize observer hook",
+    "resize observer react hook",
     "use-resize-observer",
@@ -23,2 +24,3 @@ "useresizeobserver",
   "module": "dist/module/index.js",
+  "unpkg": "dist/umd/use-resize-observer.js",
   "source": "src/index.tsx",
@@ -36,2 +38,3 @@ "types": "types/index.d.ts",
       "require": "./dist/main/index.js",
+      "umd": "./dist/umd/use-resize-observer.js",
       "source": "./src/index.tsx",
@@ -46,18 +49,14 @@ "types": "./types/index.d.ts",
   "scripts": {
-    "build": "npm run build-esm && npm run build-main && npm run build-module && npm run build-types",
-    "build-esm": "npm run compile -- -d dist/esm --env-name esm --out-file-extension .mjs",
-    "build-main": "npm run compile -- -d dist/main --env-name main",
-    "build-module": "npm run compile -- -d dist/module --env-name module",
-    "build-types": "tsc -p tsconfig.json -d --outDir types --emitDeclarationOnly",
-    "check-types": "tsc --noEmit -p tsconfig.json",
-    "compile": "babel src -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/*.test.tsx\" --delete-dir-on-start",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,eslintrc,prettierrc}\"",
+    "build": "lundle build --umd-case camel",
+    "check-types": "lundle check-types",
+    "dev": "lundle build -f module,cjs -w",
+    "format": "prettier --write \"{,!(node_modules|dist|coverage)/**/}*.{ts,tsx,js,jsx,md,yml,json}\"",
     "lint": "eslint . --ext .ts,.tsx",
     "prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
     "test": "jest",
-    "validate": "npm run check-types && npm run lint && npm run test -- --coverage"
+    "validate": "lundle check-types && npm run lint && jest --coverage"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run build-types && git add types && lint-staged"
+      "pre-commit": "lundle check-types && lint-staged"
     }
@@ -70,27 +69,59 @@ },
     ],
-    "**/*.{md,yml,json,eslintrc,prettierrc}": [
+    "**/*.{md,yml,json}": [
       "prettier --write"
     ]
   },
+  "eslintConfig": {
+    "extends": [
+      "lunde"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules",
+    "coverage",
+    "dist",
+    "test",
+    "*.config.js"
+  ],
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "src",
+      "test"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/?(*.)test.{ts,tsx}"
+    ],
+    "collectCoverageFrom": [
+      "**/src/**/*.{ts,tsx}"
+    ],
+    "setupFilesAfterEnv": [
+      "./test/setup.js"
+    ],
+    "snapshotResolver": "./test/resolve-snapshot.js",
+    "globals": {
+      "__DEV__": true
+    }
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketSpacing": false
+  },
   "devDependencies": {
-    "@babel/preset-react": "latest",
-    "@lunde/babel-preset-es": "latest",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/react-hooks": "latest",
+    "@testing-library/user-event": "latest",
     "@types/jest": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
-    "babel-plugin-annotate-pure-calls": "latest",
-    "babel-plugin-optimize-react": "latest",
+    "babel-jest": "latest",
     "eslint": "latest",
-    "eslint-import-resolver-jest": "latest",
-    "eslint-plugin-jest": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
+    "eslint-config-lunde": "latest",
     "husky": "latest",
     "jest": "latest",
     "lint-staged": "latest",
+    "lundle": "latest",
     "prettier": "latest",
@@ -100,13 +131,12 @@ "react": "latest",
     "react-test-renderer": "latest",
-    "ts-jest": "latest",
     "typescript": "latest"
   },
   "dependencies": {
-    "@react-hook/passive-layout-effect": "^1.0.3",
+    "@react-hook/latest": "^1.0.2",
+    "@react-hook/passive-layout-effect": "^1.2.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=16.8"
   }
 }

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

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

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

Improved metrics

Total package byte prevSize

79578

increased by309.04%

Dev dependency count

19

decreased by-26.92%

Number of package files

12

increased by33.33%

Worsened metrics

Lines of code

243

decreased by-21.36%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@react-hook/latest@^1.0.2

• + Added@react-hook/latest@1.0.3(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedscheduler@0.25.0(transitive)

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