gatsby-image - npm Package Compare versions

Comparing version 1.0.42-0 to 1.0.42

index.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
-exports.default = void 0;
 
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 
-var _react = _interopRequireDefault(require("react"));
+var _inherits2 = require("babel-runtime/helpers/inherits");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _inherits3 = _interopRequireDefault(_inherits2);
 
+var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // Handle legacy names for image queries.
 var convertProps = function convertProps(props) {
-  var convertedProps = (0, _extends2.default)({}, props);
-
+  var convertedProps = (0, _extends3.default)({}, props);
   if (convertedProps.responsiveResolution) {
@@ -28,3 +42,2 @@ convertedProps.resolutions = convertedProps.responsiveResolution;
   }
-
   if (convertedProps.responsiveSizes) {
@@ -36,11 +49,10 @@ convertedProps.sizes = convertedProps.responsiveSizes;
   return convertedProps;
-}; // Cache if we've seen an image before so we don't both with
+};
+
+// Cache if we've seen an image before so we don't both with
 // lazy-loading & fading in on subsequent mounts.
-
-
 var imageCache = {};
-
 var inImageCache = function inImageCache(props) {
-  var convertedProps = convertProps(props); // Find src
-
+  var convertedProps = convertProps(props);
+  // Find src
   var src = convertedProps.sizes ? convertedProps.sizes.src : convertedProps.resolutions.src;
@@ -56,3 +68,3 @@
 
-var io;
+var io = void 0;
 var listeners = [];
@@ -74,5 +86,3 @@
       });
-    }, {
-      rootMargin: "200px"
-    });
+    }, { rootMargin: "200px" });
   }
@@ -89,3 +99,2 @@
 var isWebpSupportedCache = null;
-
 var isWebpSupported = function isWebpSupported() {
@@ -97,3 +106,2 @@ if (isWebpSupportedCache !== null) {
   var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {};
-
   if (elem.getContext && elem.getContext("2d")) {
@@ -110,17 +118,18 @@ isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
   var _props$opacity = props.opacity,
-      opacity = _props$opacity === void 0 ? "1" : _props$opacity,
+      opacity = _props$opacity === undefined ? "1" : _props$opacity,
       src = props.src,
       srcSet = props.srcSet,
       _props$sizes = props.sizes,
-      sizes = _props$sizes === void 0 ? "" : _props$sizes,
+      sizes = _props$sizes === undefined ? "" : _props$sizes,
       _props$title = props.title,
-      title = _props$title === void 0 ? "" : _props$title,
+      title = _props$title === undefined ? "" : _props$title,
       _props$alt = props.alt,
-      alt = _props$alt === void 0 ? "" : _props$alt,
+      alt = _props$alt === undefined ? "" : _props$alt,
       _props$width = props.width,
-      width = _props$width === void 0 ? "" : _props$width,
+      width = _props$width === undefined ? "" : _props$width,
       _props$height = props.height,
-      height = _props$height === void 0 ? "" : _props$height,
+      height = _props$height === undefined ? "" : _props$height,
       _props$transitionDela = props.transitionDelay,
-      transitionDelay = _props$transitionDela === void 0 ? "0.5s" : _props$transitionDela;
+      transitionDelay = _props$transitionDela === undefined ? "0.5s" : _props$transitionDela;
+
   return "<img width=\"" + width + "\" height=\"" + height + "\" src=\"" + src + "\" srcset=\"" + srcSet + "\" alt=\"" + alt + "\" title=\"" + title + "\" sizes=\"" + sizes + "\" style=\"position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:" + transitionDelay + ";opacity:" + opacity + ";width:100%;height:100%;object-fit:cover;object-position:center\"/>";
@@ -132,6 +141,7 @@ };
       onLoad = props.onLoad,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["style", "onLoad"]);
-  return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, {
+      otherProps = (0, _objectWithoutProperties3.default)(props, ["style", "onLoad"]);
+
+  return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, {
     onLoad: onLoad,
-    style: (0, _extends2.default)({
+    style: (0, _extends3.default)({
       position: "absolute",
@@ -150,22 +160,22 @@ top: 0,
 Img.propTypes = {
-  style: _propTypes.default.object,
-  onLoad: _propTypes.default.func
+  style: _propTypes2.default.object,
+  onLoad: _propTypes2.default.func
 };
 
-var Image =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inheritsLoose2.default)(Image, _React$Component);
+var Image = function (_React$Component) {
+  (0, _inherits3.default)(Image, _React$Component);
 
   function Image(props) {
-    var _this;
+    (0, _classCallCheck3.default)(this, Image);
 
-    _this = _React$Component.call(this, props) || this; // If this browser doesn't support the IntersectionObserver API
+    // If this browser doesn't support the IntersectionObserver API
     // we default to start downloading the image right away.
+    var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
 
     var isVisible = true;
     var imgLoaded = true;
-    var IOSupported = false; // If this image has already been loaded before then we can assume it's
+    var IOSupported = false;
+
+    // If this image has already been loaded before then we can assume it's
     // already in the browser cache so it's cheap to just show directly.
-
     var seenBefore = inImageCache(props);
@@ -177,5 +187,5 @@
       IOSupported = true;
-    } // Always don't render image while server rendering
+    }
 
-
+    // Always don't render image while server rendering
     if (typeof window === "undefined") {
@@ -191,9 +201,8 @@ isVisible = false;
     };
-    _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));
+
+    _this.handleRef = _this.handleRef.bind(_this);
     return _this;
   }
 
-  var _proto = Image.prototype;
-
-  _proto.handleRef = function handleRef(ref) {
+  Image.prototype.handleRef = function handleRef(ref) {
     var _this2 = this;
@@ -203,6 +212,3 @@
       listenToIntersections(ref, function () {
-        _this2.setState({
-          isVisible: true,
-          imgLoaded: false
-        });
+        _this2.setState({ isVisible: true, imgLoaded: false });
       });
@@ -212,3 +218,3 @@ }
 
-  _proto.render = function render() {
+  Image.prototype.render = function render() {
     var _this3 = this;
@@ -222,5 +228,5 @@
         _convertProps$style = _convertProps.style,
-        style = _convertProps$style === void 0 ? {} : _convertProps$style,
+        style = _convertProps$style === undefined ? {} : _convertProps$style,
         _convertProps$imgStyl = _convertProps.imgStyle,
-        imgStyle = _convertProps$imgStyl === void 0 ? {} : _convertProps$imgStyl,
+        imgStyle = _convertProps$imgStyl === undefined ? {} : _convertProps$imgStyl,
         sizes = _convertProps.sizes,
@@ -231,4 +237,3 @@ resolutions = _convertProps.resolutions,
 
-    var bgColor;
-
+    var bgColor = void 0;
     if (typeof backgroundColor === "boolean") {
@@ -240,7 +245,8 @@ bgColor = "lightgray";
 
-    var imagePlaceholderStyle = (0, _extends2.default)({
+    var imagePlaceholderStyle = (0, _extends3.default)({
       opacity: this.state.imgLoaded ? 0 : 1,
       transitionDelay: "0.25s"
     }, imgStyle);
-    var imageStyle = (0, _extends2.default)({
+
+    var imageStyle = (0, _extends3.default)({
       opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
@@ -250,73 +256,80 @@ }, imgStyle);
     if (sizes) {
-      var image = sizes; // Use webp by default if browser supports it
+      var image = sizes;
 
+      // Use webp by default if browser supports it
       if (image.srcWebp && image.srcSetWebp && isWebpSupported()) {
         image.src = image.srcWebp;
         image.srcSet = image.srcSetWebp;
-      } // The outer div is necessary to reset the z-index to 0.
+      }
 
-
-      return _react.default.createElement(Tag, {
-        className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
-        style: {
-          zIndex: 0,
-          // Let users set component to be absolutely positioned.
-          position: style.position === "absolute" ? "initial" : "relative"
-        }
-      }, _react.default.createElement(Tag, {
-        className: (className ? className : "") + " gatsby-image-wrapper",
-        style: (0, _extends2.default)({
-          position: "relative",
-          overflow: "hidden",
-          zIndex: 1
-        }, style),
-        ref: this.handleRef
-      }, _react.default.createElement(Tag, {
-        style: {
-          width: "100%",
-          paddingBottom: 100 / image.aspectRatio + "%"
-        }
-      }), image.base64 && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        src: image.base64,
-        style: imagePlaceholderStyle
-      }), image.tracedSVG && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        src: image.tracedSVG,
-        style: imagePlaceholderStyle
-      }), bgColor && _react.default.createElement(Tag, {
-        title: title,
-        style: {
-          backgroundColor: bgColor,
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          opacity: !this.state.imgLoaded ? 1 : 0,
-          transitionDelay: "0.35s",
-          right: 0,
-          left: 0
-        }
-      }), this.state.isVisible && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        srcSet: image.srcSet,
-        src: image.src,
-        sizes: image.sizes,
-        style: imageStyle,
-        onLoad: function onLoad() {
-          _this3.state.IOSupported && _this3.setState({
-            imgLoaded: true
-          });
-          _this3.props.onLoad && _this3.props.onLoad();
-        }
-      }), _react.default.createElement("noscript", {
-        dangerouslySetInnerHTML: {
-          __html: noscriptImg((0, _extends2.default)({
+      // The outer div is necessary to reset the z-index to 0.
+      return _react2.default.createElement(
+        Tag,
+        {
+          className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
+          style: {
+            // Let users set component to be absolutely positioned.
+            position: style.position === "absolute" ? "initial" : "relative"
+          }
+        },
+        _react2.default.createElement(
+          Tag,
+          {
+            className: (className ? className : "") + " gatsby-image-wrapper",
+            style: (0, _extends3.default)({
+              position: "relative",
+              overflow: "hidden"
+            }, style),
+            ref: this.handleRef
+          },
+          _react2.default.createElement(Tag, {
+            style: {
+              width: "100%",
+              paddingBottom: 100 / image.aspectRatio + "%"
+            }
+          }),
+          image.base64 && _react2.default.createElement(Img, {
             alt: alt,
-            title: title
-          }, image))
-        }
-      })));
+            title: title,
+            src: image.base64,
+            style: imagePlaceholderStyle
+          }),
+          image.tracedSVG && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: image.tracedSVG,
+            style: imagePlaceholderStyle
+          }),
+          bgColor && _react2.default.createElement(Tag, {
+            title: title,
+            style: {
+              backgroundColor: bgColor,
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              opacity: !this.state.imgLoaded ? 1 : 0,
+              transitionDelay: "0.35s",
+              right: 0,
+              left: 0
+            }
+          }),
+          this.state.isVisible && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            srcSet: image.srcSet,
+            src: image.src,
+            sizes: image.sizes,
+            style: imageStyle,
+            onLoad: function onLoad() {
+              _this3.state.IOSupported && _this3.setState({ imgLoaded: true });
+              _this3.props.onLoad && _this3.props.onLoad();
+            }
+          }),
+          _react2.default.createElement("noscript", {
+            dangerouslySetInnerHTML: {
+              __html: noscriptImg((0, _extends3.default)({ alt: alt, title: title }, image))
+            }
+          })
+        )
+      );
     }
@@ -326,7 +339,6 @@
       var _image = resolutions;
-      var divStyle = (0, _extends2.default)({
+      var divStyle = (0, _extends3.default)({
         position: "relative",
         overflow: "hidden",
         display: "inline-block",
-        zIndex: 1,
         width: _image.width,
@@ -338,66 +350,74 @@ height: _image.height
         delete divStyle.display;
-      } // Use webp by default if browser supports it
+      }
 
-
+      // Use webp by default if browser supports it
       if (_image.srcWebp && _image.srcSetWebp && isWebpSupported()) {
         _image.src = _image.srcWebp;
         _image.srcSet = _image.srcSetWebp;
-      } // The outer div is necessary to reset the z-index to 0.
+      }
 
-
-      return _react.default.createElement(Tag, {
-        className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
-        style: {
-          zIndex: 0,
-          // Let users set component to be absolutely positioned.
-          position: style.position === "absolute" ? "initial" : "relative"
-        }
-      }, _react.default.createElement(Tag, {
-        className: (className ? className : "") + " gatsby-image-wrapper",
-        style: divStyle,
-        ref: this.handleRef
-      }, _image.base64 && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        src: _image.base64,
-        style: imagePlaceholderStyle
-      }), _image.tracedSVG && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        src: _image.tracedSVG,
-        style: imagePlaceholderStyle
-      }), bgColor && _react.default.createElement(Tag, {
-        title: title,
-        style: {
-          backgroundColor: bgColor,
-          width: _image.width,
-          opacity: !this.state.imgLoaded ? 1 : 0,
-          transitionDelay: "0.25s",
-          height: _image.height
-        }
-      }), this.state.isVisible && _react.default.createElement(Img, {
-        alt: alt,
-        title: title,
-        width: _image.width,
-        height: _image.height,
-        srcSet: _image.srcSet,
-        src: _image.src,
-        style: imageStyle,
-        onLoad: function onLoad() {
-          _this3.setState({
-            imgLoaded: true
-          });
-
-          _this3.props.onLoad && _this3.props.onLoad();
-        }
-      }), _react.default.createElement("noscript", {
-        dangerouslySetInnerHTML: {
-          __html: noscriptImg((0, _extends2.default)({
+      // The outer div is necessary to reset the z-index to 0.
+      return _react2.default.createElement(
+        Tag,
+        {
+          className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
+          style: {
+            // Let users set component to be absolutely positioned.
+            position: style.position === "absolute" ? "initial" : "relative"
+          }
+        },
+        _react2.default.createElement(
+          Tag,
+          {
+            className: (className ? className : "") + " gatsby-image-wrapper",
+            style: divStyle,
+            ref: this.handleRef
+          },
+          _image.base64 && _react2.default.createElement(Img, {
             alt: alt,
             title: title,
+            src: _image.base64,
+            style: imagePlaceholderStyle
+          }),
+          _image.tracedSVG && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: _image.tracedSVG,
+            style: imagePlaceholderStyle
+          }),
+          bgColor && _react2.default.createElement(Tag, {
+            title: title,
+            style: {
+              backgroundColor: bgColor,
+              width: _image.width,
+              opacity: !this.state.imgLoaded ? 1 : 0,
+              transitionDelay: "0.25s",
+              height: _image.height
+            }
+          }),
+          this.state.isVisible && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
             width: _image.width,
-            height: _image.height
-          }, _image))
-        }
-      })));
+            height: _image.height,
+            srcSet: _image.srcSet,
+            src: _image.src,
+            style: imageStyle,
+            onLoad: function onLoad() {
+              _this3.setState({ imgLoaded: true });
+              _this3.props.onLoad && _this3.props.onLoad();
+            }
+          }),
+          _react2.default.createElement("noscript", {
+            dangerouslySetInnerHTML: {
+              __html: noscriptImg((0, _extends3.default)({
+                alt: alt,
+                title: title,
+                width: _image.width,
+                height: _image.height
+              }, _image))
+            }
+          })
+        )
+      );
     }
@@ -409,3 +429,3 @@
   return Image;
-}(_react.default.Component);
+}(_react2.default.Component);
 
@@ -417,21 +437,21 @@ Image.defaultProps = {
 };
+
 Image.propTypes = {
-  responsiveResolution: _propTypes.default.object,
-  responsiveSizes: _propTypes.default.object,
-  resolutions: _propTypes.default.object,
-  sizes: _propTypes.default.object,
-  fadeIn: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  alt: _propTypes.default.string,
-  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  // Support Glamor's css prop.
-  outerWrapperClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  style: _propTypes.default.object,
-  imgStyle: _propTypes.default.object,
-  position: _propTypes.default.string,
-  backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  onLoad: _propTypes.default.func,
-  Tag: _propTypes.default.string
+  responsiveResolution: _propTypes2.default.object,
+  responsiveSizes: _propTypes2.default.object,
+  resolutions: _propTypes2.default.object,
+  sizes: _propTypes2.default.object,
+  fadeIn: _propTypes2.default.bool,
+  title: _propTypes2.default.string,
+  alt: _propTypes2.default.string,
+  className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), // Support Glamor's css prop.
+  outerWrapperClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  style: _propTypes2.default.object,
+  imgStyle: _propTypes2.default.object,
+  position: _propTypes2.default.string,
+  backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
+  onLoad: _propTypes2.default.func,
+  Tag: _propTypes2.default.string
 };
-var _default = Image;
-exports.default = _default;
+
+exports.default = Image;

package.json

 {
   "name": "gatsby-image",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "version": "1.0.42-0",
+  "version": "1.0.42",
   "author": "Kyle Mathews <[e-mail]>",
@@ -10,8 +10,7 @@ "bugs": {
   "dependencies": {
-    "@babel/runtime": "^7.0.0-beta.38",
+    "babel-runtime": "^6.26.0",
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.38",
-    "@babel/core": "^7.0.0-beta.38",
+    "babel-cli": "^6.26.0",
     "cross-env": "^5.0.5"
@@ -18,0 +17,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112689

increased by323.44%

Dev dependency count

2

decreased by-33.33%

Number of package files

14

increased by133.33%

Lines of code

445

increased by18.67%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedbabel-runtime@^6.26.0

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• - Removed@babel/runtime@^7.0.0-beta.38

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)