react-lazy-load-image-component - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

package.json

 {
 	"name": "react-lazy-load-image-component",
-	"version": "1.5.1",
-	"description": " React Component to lazy load images using a HOC to track window scroll position. ",
+	"version": "1.5.2",
+	"description": " React Component to lazy load images using a HOC to track window scroll position.",
 	"main": "build/index.js",
@@ -15,26 +15,25 @@ "peerDependencies": {
 	"devDependencies": {
-		"babel-cli": "^6.24.1",
-		"babel-core": "^6.26.0",
-		"babel-eslint": "^8.2.2",
-		"babel-jest": "^22.4.1",
-		"babel-loader": "^7.1.4",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.6.1",
-		"babel-preset-react": "^6.24.1",
-		"css-loader": "^0.28.10",
-		"enzyme": "^3.4.4",
-		"enzyme-adapter-react-16": "^1.2.0",
-		"eslint": "^4.18.2",
-		"eslint-loader": "^2.0.0",
-		"eslint-plugin-babel": "^4.1.2",
-		"eslint-plugin-react": "^7.11.1",
-		"husky": "^3.1.0",
-		"jest": "^23.5.0",
+		"@babel/core": "^7.15.0",
+		"@babel/eslint-parser": "^7.15.0",
+		"@babel/preset-env": "^7.15.0",
+		"@babel/preset-react": "^7.14.5",
+		"@babel/preset-typescript": "^7.15.0",
+		"babel-jest": "^27.0.6",
+		"babel-loader": "^8.2.2",
+		"css-loader": "^6.2.0",
+		"enzyme": "^3.11.0",
+		"enzyme-adapter-react-16": "^1.15.6",
+		"eslint": "^7.32.0",
+		"eslint-plugin-babel": "^5.3.1",
+		"eslint-plugin-react": "^7.24.0",
+		"eslint-webpack-plugin": "^3.0.1",
+		"husky": "^7.0.1",
+		"jest": "^27.0.6",
 		"path": "^0.12.7",
-		"prettier": "^1.19.1",
+		"prettier": "^2.3.2",
 		"react": "^16.2.0",
 		"react-dom": "^16.2.0",
-		"style-loader": "^0.20.3",
-		"webpack": "^4.17.1",
-		"webpack-cli": "^3.1.2"
+		"style-loader": "^3.2.1",
+		"webpack": "^5.50.0",
+		"webpack-cli": "^4.7.2"
 	},
@@ -50,3 +49,4 @@ "scripts": {
 		"verbose": true,
-		"testURL": "http://localhost/"
+		"testURL": "http://localhost/",
+		"testEnvironment": "jsdom"
 	},
@@ -53,0 +53,0 @@ "repository": {

src/hoc/trackWindowScroll.js

@@ -7,3 +7,3 @@ import React from 'react';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
-import getScrollElement from '../utils/get-scroll-element';
+import getScrollAncestor from '../utils/get-scroll-ancestor';
 
@@ -58,3 +58,3 @@ const getScrollX = () =>
 
-			const scrollElement = getScrollElement(
+			const scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
@@ -74,3 +74,3 @@ );
 
-			this.scrollElement = getScrollElement(
+			this.scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
@@ -94,3 +94,3 @@ );
 		removeListeners() {
-			if (typeof window == 'undefined' || this.useIntersectionObserver) {
+			if (typeof window === 'undefined' || this.useIntersectionObserver) {
 				return;
@@ -131,3 +131,3 @@ }
 				<BaseComponent
-					ref={this.baseComponentRef}
+					forwardRef={this.baseComponentRef}
 					scrollPosition={scrollPosition}
@@ -134,0 +134,0 @@ {...props}

webpack.config.js

@@ -1,3 +0,3 @@
-const webpack = require('webpack');
 const path = require('path');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
@@ -15,16 +15,9 @@ module.exports = {
 			{
-				enforce: 'pre',
-				test: /\.jsx?$/,
-				loaders: ['eslint-loader'],
+				test: /\.(j|t)sx?$/,
 				include: path.resolve(__dirname, 'src'),
 				exclude: /(node_modules|bower_components|build)/,
-			},
-			{
-				test: /\.jsx?$/,
-				include: path.resolve(__dirname, 'src'),
-				exclude: /(node_modules|bower_components|build)/,
 				use: {
 					loader: 'babel-loader',
 					options: {
-						presets: ['env'],
+						presets: ['@babel/preset-env'],
 					},
@@ -35,3 +28,10 @@ },
 				test: /\.css$/,
-				loaders: ['style-loader', 'css-loader'],
+				use: [
+					{
+						loader: 'style-loader',
+					},
+					{
+						loader: 'css-loader',
+					},
+				],
 				exclude: /node_modules/,
@@ -45,2 +45,11 @@ },
 	},
+	plugins: [
+		new ESLintPlugin({
+			context: path.resolve(__dirname, 'src'),
+			extensions: ['js', 'jsx', 'ts', 'tsx'],
+		}),
+	],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.jsx'],
+	},
 };

New alerts

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

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

182149

increased by97.17%

Dev dependency count

23

decreased by-4.17%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Lines of code

1782

decreased by-32.06%

Number of low supply chain risk alerts

13

increased byInfinity%

Number of medium supply chain risk alerts

18

increased by500%

No dependency changes