gatsby-image - npm Package Compare versions

Comparing version 2.3.3 to 2.3.4-unifiedroutes.76

CHANGELOG.md

@@ -6,2 +6,56 @@ # Change Log
 
+## [2.4.9](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.8...gatsby-image@2.4.9) (2020-06-24)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.8](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.7...gatsby-image@2.4.8) (2020-06-22)
+
+### Bug Fixes
+
+- **docs:** change bash to shell in code language blocks ([#22899](https://github.com/gatsbyjs/gatsby/issues/22899)) ([6b6b2f2](https://github.com/gatsbyjs/gatsby/commit/6b6b2f2))
+
+## [2.4.7](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.6...gatsby-image@2.4.7) (2020-06-09)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.6](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.5...gatsby-image@2.4.6) (2020-06-02)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.5](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.4...gatsby-image@2.4.5) (2020-05-20)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.4](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.3...gatsby-image@2.4.4) (2020-05-18)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.3](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.2...gatsby-image@2.4.3) (2020-05-07)
+
+### Bug Fixes
+
+- **gatsby-image:** Fix fluid not respecting maxWidth/maxHeight ([#17006](https://github.com/gatsbyjs/gatsby/issues/17006)) ([ad7cd6b](https://github.com/gatsbyjs/gatsby/commit/ad7cd6b))
+
+## [2.4.2](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.1...gatsby-image@2.4.2) (2020-05-06)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.4.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.4.0...gatsby-image@2.4.1) (2020-05-05)
+
+**Note:** Version bump only for package gatsby-image
+
+# [2.4.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.3.5...gatsby-image@2.4.0) (2020-04-27)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.3.5](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.3.4...gatsby-image@2.3.5) (2020-04-24)
+
+**Note:** Version bump only for package gatsby-image
+
+## [2.3.4](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.3.3...gatsby-image@2.3.4) (2020-04-17)
+
+### Bug Fixes
+
+- wrap ignore pattern in quotes ([#23176](https://github.com/gatsbyjs/gatsby/issues/23176)) ([7563db6](https://github.com/gatsbyjs/gatsby/commit/7563db6))
+
 ## [2.3.3](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.3.2...gatsby-image@2.3.3) (2020-04-16)
@@ -8,0 +62,0 @@

index.js

@@ -105,4 +105,4 @@ "use strict";
  * Returns the current src - Preferably with art-direction support.
- * @param currentData  {{media?: string}[]}   The fluid or fixed image array.
- * @return {{src: string, media?: string}}
+ * @param currentData  {{media?: string}[], maxWidth?: Number, maxHeight?: Number}   The fluid or fixed image array.
+ * @return {{src: string, media?: string, maxWidth?: Number, maxHeight?: Number}}
  */
@@ -188,5 +188,5 @@
         sizes = _ref3.sizes;
-    return _react.default.createElement(_react.default.Fragment, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: src
-    }, srcSetWebp && _react.default.createElement("source", {
+    }, srcSetWebp && /*#__PURE__*/_react.default.createElement("source", {
       type: "image/webp",
@@ -196,3 +196,3 @@ media: media,
       sizes: sizes
-    }), _react.default.createElement("source", {
+    }), /*#__PURE__*/_react.default.createElement("source", {
       media: media,
@@ -226,3 +226,3 @@ srcSet: srcSet,
         tracedSVG = _ref4.tracedSVG;
-    return _react.default.createElement("source", {
+    return /*#__PURE__*/_react.default.createElement("source", {
       key: src,
@@ -240,3 +240,3 @@ media: media,
         base64 = _ref5.base64;
-    return _react.default.createElement("source", {
+    return /*#__PURE__*/_react.default.createElement("source", {
       key: src,
@@ -303,3 +303,3 @@ media: media,
 
-var Placeholder = _react.default.forwardRef(function (props, ref) {
+var Placeholder = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var src = props.src,
@@ -311,3 +311,3 @@ imageVariants = props.imageVariants,
 
-  var baseImage = _react.default.createElement(Img, (0, _extends2.default)({
+  var baseImage = /*#__PURE__*/_react.default.createElement(Img, (0, _extends2.default)({
     ref: ref,
@@ -319,6 +319,6 @@ src: src
 
-  return imageVariants.length > 1 ? _react.default.createElement("picture", null, generateSources(imageVariants), baseImage) : baseImage;
+  return imageVariants.length > 1 ? /*#__PURE__*/_react.default.createElement("picture", null, generateSources(imageVariants), baseImage) : baseImage;
 });
 
-var Img = _react.default.forwardRef(function (props, ref) {
+var Img = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var sizes = props.sizes,
@@ -334,3 +334,3 @@ srcSet = props.srcSet,
       otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["sizes", "srcSet", "src", "style", "onLoad", "onError", "loading", "draggable", "ariaHidden"]);
-  return _react.default.createElement("img", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
     "aria-hidden": ariaHidden,
@@ -384,4 +384,4 @@ sizes: sizes,
     };
-    _this.imageRef = _react.default.createRef();
-    _this.placeholderRef = props.placeholderRef || _react.default.createRef();
+    _this.imageRef = /*#__PURE__*/_react.default.createRef();
+    _this.placeholderRef = props.placeholderRef || /*#__PURE__*/_react.default.createRef();
     _this.handleImageLoaded = _this.handleImageLoaded.bind((0, _assertThisInitialized2.default)(_this));
@@ -494,3 +494,3 @@ _this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this));
       opacity: this.state.imgLoaded ? 0 : 1
-    }, shouldFadeIn && delayHideStyle, {}, imgStyle, {}, placeholderStyle);
+    }, shouldFadeIn && delayHideStyle, imgStyle, placeholderStyle);
     var placeholderImageProps = {
@@ -507,11 +507,13 @@ title: title,
       var image = getCurrentSrcData(fluid);
-      return _react.default.createElement(Tag, {
+      return /*#__PURE__*/_react.default.createElement(Tag, {
         className: (className ? className : "") + " gatsby-image-wrapper",
         style: (0, _extends2.default)({
           position: "relative",
-          overflow: "hidden"
+          overflow: "hidden",
+          maxWidth: image.maxWidth ? image.maxWidth + "px" : null,
+          maxHeight: image.maxHeight ? image.maxHeight + "px" : null
         }, style),
         ref: this.handleRef,
         key: "fluid-" + JSON.stringify(image.srcSet)
-      }, _react.default.createElement(Tag, {
+      }, /*#__PURE__*/_react.default.createElement(Tag, {
         "aria-hidden": true,
@@ -522,3 +524,3 @@ style: {
         }
-      }), bgColor && _react.default.createElement(Tag, {
+      }), bgColor && /*#__PURE__*/_react.default.createElement(Tag, {
         "aria-hidden": true,
@@ -535,3 +537,3 @@ title: title,
         }, shouldFadeIn && delayHideStyle)
-      }), image.base64 && _react.default.createElement(Placeholder, {
+      }), image.base64 && /*#__PURE__*/_react.default.createElement(Placeholder, {
         ariaHidden: true,
@@ -543,3 +545,3 @@ ref: this.placeholderRef,
         generateSources: generateBase64Sources
-      }), image.tracedSVG && _react.default.createElement(Placeholder, {
+      }), image.tracedSVG && /*#__PURE__*/_react.default.createElement(Placeholder, {
         ariaHidden: true,
@@ -551,3 +553,3 @@ ref: this.placeholderRef,
         generateSources: generateTracedSVGSources
-      }), this.state.isVisible && _react.default.createElement("picture", null, generateImageSources(imageVariants), _react.default.createElement(Img, {
+      }), this.state.isVisible && /*#__PURE__*/_react.default.createElement("picture", null, generateImageSources(imageVariants), /*#__PURE__*/_react.default.createElement(Img, {
         alt: alt,
@@ -566,3 +568,3 @@ title: title,
         draggable: draggable
-      })), this.addNoScript && _react.default.createElement("noscript", {
+      })), this.addNoScript && /*#__PURE__*/_react.default.createElement("noscript", {
         dangerouslySetInnerHTML: {
@@ -597,3 +599,3 @@ __html: noscriptImg((0, _extends2.default)({
 
-      return _react.default.createElement(Tag, {
+      return /*#__PURE__*/_react.default.createElement(Tag, {
         className: (className ? className : "") + " gatsby-image-wrapper",
@@ -603,3 +605,3 @@ style: divStyle,
         key: "fixed-" + JSON.stringify(_image.srcSet)
-      }, bgColor && _react.default.createElement(Tag, {
+      }, bgColor && /*#__PURE__*/_react.default.createElement(Tag, {
         "aria-hidden": true,
@@ -613,3 +615,3 @@ title: title,
         }, shouldFadeIn && delayHideStyle)
-      }), _image.base64 && _react.default.createElement(Placeholder, {
+      }), _image.base64 && /*#__PURE__*/_react.default.createElement(Placeholder, {
         ariaHidden: true,
@@ -621,3 +623,3 @@ ref: this.placeholderRef,
         generateSources: generateBase64Sources
-      }), _image.tracedSVG && _react.default.createElement(Placeholder, {
+      }), _image.tracedSVG && /*#__PURE__*/_react.default.createElement(Placeholder, {
         ariaHidden: true,
@@ -629,3 +631,3 @@ ref: this.placeholderRef,
         generateSources: generateTracedSVGSources
-      }), this.state.isVisible && _react.default.createElement("picture", null, generateImageSources(_imageVariants), _react.default.createElement(Img, {
+      }), this.state.isVisible && /*#__PURE__*/_react.default.createElement("picture", null, generateImageSources(_imageVariants), /*#__PURE__*/_react.default.createElement(Img, {
         alt: alt,
@@ -646,3 +648,3 @@ title: title,
         draggable: draggable
-      })), this.addNoScript && _react.default.createElement("noscript", {
+      })), this.addNoScript && /*#__PURE__*/_react.default.createElement("noscript", {
         dangerouslySetInnerHTML: {
@@ -697,3 +699,5 @@ __html: noscriptImg((0, _extends2.default)({
   srcSetWebp: _propTypes.default.string,
-  media: _propTypes.default.string
+  media: _propTypes.default.string,
+  maxWidth: _propTypes.default.number,
+  maxHeight: _propTypes.default.number
 }); // If you modify these propTypes, please don't forget to update following files as well:
@@ -700,0 +704,0 @@ // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/index.d.ts

package.json

 {
   "name": "gatsby-image",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "version": "2.3.3",
+  "version": "2.3.4-unifiedroutes.76+bcf66b9ae",
   "author": "Kyle Mathews <[e-mail]>",
@@ -10,3 +10,3 @@ "bugs": {
   "dependencies": {
-    "@babel/runtime": "^7.8.7",
+    "@babel/runtime": "^7.10.3",
     "object-fit-images": "^3.2.4",
@@ -16,6 +16,6 @@ "prop-types": "^15.7.2"
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
+    "@babel/cli": "^7.10.3",
+    "@babel/core": "^7.10.3",
     "@testing-library/react": "^9.5.0",
-    "babel-preset-gatsby-package": "^0.3.1",
+    "babel-preset-gatsby-package": "0.3.2-unifiedroutes.433+bcf66b9ae",
     "cross-env": "^5.2.1"
@@ -37,5 +37,5 @@ },
   "scripts": {
-    "build": "babel src --out-dir . --ignore **/__tests__",
+    "build": "babel src --out-dir . --ignore \"**/__tests__\"",
     "prepare": "cross-env NODE_ENV=production npm run build",
-    "watch": "babel -w src --out-dir . --ignore **/__tests__"
+    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\""
   },
@@ -45,3 +45,3 @@ "engines": {
   },
-  "gitHead": "d3823b5b2af478ce861a38413ee6b4d4f3cc6da9"
+  "gitHead": "bcf66b9aec63f3498c353ecfd7ba8bbaf4f022c2"
 }

README.md

@@ -46,13 +46,13 @@ # gatsby-image
 
-- Resize large images to the size needed by your design
+- Resize large images to the size needed by your design.
 - Generate multiple smaller images so smartphones and tablets don't download
-  desktop-sized images
-- Strip all unnecessary metadata and optimize JPEG and PNG compression
-- Efficiently lazy load images to speed initial page load and save bandwidth
+  desktop-sized images.
+- Strip all unnecessary metadata and optimize JPEG and PNG compression.
+- Efficiently lazy load images to speed initial page load and save bandwidth.
 - Use the "blur-up" technique or a
   "[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)" SVG to
-  show a preview of the image while it loads
-- Hold the image position so your page doesn't jump while images load
+  show a preview of the image while it loads.
+- Hold the image position so your page doesn't jump while images load.
 
-Doing this consistently across a site feels like sisyphean labor. You manually
+Doing this consistently across a site feels like a task that can never be completed. You manually
 optimize your images and then… several images are swapped in at the last minute
@@ -74,3 +74,3 @@ or a design-tweak shaves 100px of width off your images.
 
-1. Import `gatsby-image` and use it in place of the built-in `img`
+1. Import `gatsby-image` and use it in place of the built-in `img`.
 2. Write a GraphQL query using one of the included GraphQL "fragments"
@@ -89,3 +89,3 @@ which specify the fields needed by `gatsby-image`.
 
-```bash
+```shell
 npm install --save gatsby-transformer-sharp gatsby-plugin-sharp
@@ -231,2 +231,3 @@ ```
 - `GatsbyImageSharpFluid_withWebp_tracedSVG`
+- `GatsbyImageSharpFluidLimitPresentationSize`
 
@@ -325,27 +326,6 @@ ### gatsby-source-contentful
 As mentioned previously, images using the _fluid_ type are stretched to
-match the container's width. In the case where the image's width is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.
+match the container's width and height. In the case where the image's width or height is smaller than the available viewport, the image will stretch to match the container, potentially leading to unwanted problems and worsened image quality.
 
-To counter this edge case one could wrap the _Img_ component in order to set a better, for that case, `maxWidth`:
+To counter this edge case one could use the `GatsbyImageSharpFluidLimitPresentationSize` fragment to ask for additional presentation size properties.
 
-```jsx
-const NonStretchedImage = props => {
-  let normalizedProps = props
-  if (props.fluid && props.fluid.presentationWidth) {
-    normalizedProps = {
-      ...props,
-      style: {
-        ...(props.style || {}),
-        maxWidth: props.fluid.presentationWidth,
-        margin: "0 auto", // Used to center the image
-      },
-    }
-  }
-
-  return <Img {...normalizedProps} />
-}
-```
-
-**Note:** The `GatsbyImageSharpFluid` fragment does not include `presentationWidth`.
-You will need to add it in your graphql query as is shown in the following snippet:
-
 ```graphql
@@ -356,3 +336,3 @@ {
       ...GatsbyImageSharpFluid
-      presentationWidth
+      ...GatsbyImageSharpFluidLimitPresentationSize
     }
@@ -461,3 +441,3 @@ }
   media types to be chosen by the browser without using JavaScript. It also is
-  backward compatible to older browsers (IE 11, etc)
+  backward compatible to older browsers (IE 11, etc).
 - Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try
@@ -464,0 +444,0 @@ to use a gif with `gatsby-image`, it won't work. For now, the best workaround is

withIEPolyfill/index.js

@@ -16,8 +16,4 @@ "use strict";
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard3(require("react"));
@@ -40,4 +36,4 @@
     _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "imageRef", _this.props.innerRef || (0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "placeholderRef", (0, _react.createRef)());
+    _this.imageRef = _this.props.innerRef || /*#__PURE__*/(0, _react.createRef)();
+    _this.placeholderRef = /*#__PURE__*/(0, _react.createRef)();
     return _this;
@@ -75,8 +71,8 @@ }
     };
-    return _react.default.createElement(_index.default, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({
       ref: this.imageRef,
       placeholderRef: this.placeholderRef
     }, props, {
-      imgStyle: (0, _extends2.default)({}, props.imgStyle, {}, polyfillStyle),
-      placeholderStyle: (0, _extends2.default)({}, props.placeholderStyle, {}, polyfillStyle)
+      imgStyle: (0, _extends2.default)({}, props.imgStyle, polyfillStyle),
+      placeholderStyle: (0, _extends2.default)({}, props.placeholderStyle, polyfillStyle)
     }));
@@ -101,4 +97,4 @@ };
 
-var _default = (0, _react.forwardRef)(function (props, ref) {
-  return _react.default.createElement(ImageWithIEPolyfill, (0, _extends2.default)({}, props, {
+var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(ImageWithIEPolyfill, (0, _extends2.default)({}, props, {
     innerRef: ref
@@ -105,0 +101,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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

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

Improved metrics

Total package byte prevSize

80642

increased by3.04%

Lines of code

753

increased by0.27%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of lines in readme file

441

decreased by-4.34%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@babel/runtime@^7.10.3