gatsby-plugin-image 2.3.0-next.0 → 2.4.0-next.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.3.0/packages/gatsby-plugin-image) (2021-12-01)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.3)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
+## [2.2.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.2.0/packages/gatsby-plugin-image) (2021-11-16)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.2)
+
+#### Chores
+
+- update dependency @types/fs-extra to ^9.0.13 [#33350](https://github.com/gatsbyjs/gatsby/issues/33350) ([2574cce](https://github.com/gatsbyjs/gatsby/commit/2574cce054bf00718de40f6c7d789faeb871c710))
+- update dependency typescript to ^4.4.4 [#33757](https://github.com/gatsbyjs/gatsby/issues/33757) ([7743561](https://github.com/gatsbyjs/gatsby/commit/7743561bbbe0a621d22030fecbba97dfc3e566d1))
+
+### [2.1.3](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.1.3/packages/gatsby-plugin-image) (2021-11-15)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
 ### [2.1.2](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.1.2/packages/gatsby-plugin-image) (2021-11-11)
 
 **Note:** Version bump only for package gatsby-plugin-image

package/dist/babel-helpers.js

@@ -61,6 +61,6 @@ function evaluateImageAttributes(nodePath, onError) {
 }
 exports.evaluateImageAttributes = evaluateImageAttributes;
 function hashOptions(options) {
-    return "" + (0, murmur_1.murmurhash)(JSON.stringify(options));
+    return "".concat((0, murmur_1.murmurhash)(JSON.stringify(options)));
 }
 exports.hashOptions = hashOptions;

package/dist/babel-plugin-parse-static-images.js

@@ -34,15 +34,15 @@ function attrs(_a) {
                 var error;
                 if (unresolvedProps.length) {
                     // TODO: Add a shortlink to docs on the plugin
-                    error = "Could not find values for the following props at build time: " + unresolvedProps.join(", ");
-                    console.warn("[gatsby-plugin-image] " + error);
+                    error = "Could not find values for the following props at build time: ".concat(unresolvedProps.join(", "));
+                    console.warn("[gatsby-plugin-image] ".concat(error));
                 }
                 var hash = (0, babel_helpers_1.hashOptions)(props);
                 var cacheDir = (_a = this.opts) === null || _a === void 0 ? void 0 : _a.cacheDir;
                 if (!cacheDir) {
                     console.warn("[gatsby-plugin-image] Couldn't find image data cache file");
                 }
-                var filename = path_1["default"].join(cacheDir, hash + ".json");
+                var filename = path_1["default"].join(cacheDir, "".concat(hash, ".json"));
                 var data;
                 // If there's no src prop there's no point in checking if it exists
                 if (!unresolvedProps.includes("src")) {
@@ -53,13 +53,13 @@ function attrs(_a) {
                         // TODO add info about minimum Gatsby version once this is merged
                         var msg = (0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            Could not read image data file \"", "\". \n            This may mean that the images in \"", "\" were not processed.\n            Please ensure that your gatsby version is at least 2.24.78."], ["\n            Could not read image data file \"", "\". \n            This may mean that the images in \"", "\" were not processed.\n            Please ensure that your gatsby version is at least 2.24.78."])), filename, this.filename);
                         error += msg;
-                        console.warn("[gatsby-plugin-image] " + msg);
+                        console.warn("[gatsby-plugin-image] ".concat(msg));
                     }
                 }
                 if (!data) {
-                    console.warn("[gatsby-plugin-image] No data found for image \"" + props.src + "\"");
+                    console.warn("[gatsby-plugin-image] No data found for image \"".concat(props.src, "\""));
                     // Add the error message to the component so we can show it in the browser
-                    var newProp_1 = t.jsxAttribute(t.jsxIdentifier("__error"), t.jsxExpressionContainer(t.stringLiteral("No data found for image \"" + props.src + "\"\n              " + (error || ""))));
+                    var newProp_1 = t.jsxAttribute(t.jsxIdentifier("__error"), t.jsxExpressionContainer(t.stringLiteral("No data found for image \"".concat(props.src, "\"\n              ").concat(error || ""))));
                     nodePath.node.attributes.push(newProp_1);
                     return;
                 }
@@ -69,7 +69,7 @@ function attrs(_a) {
                     nodePath.node.attributes.push(newProp_2);
                 }
                 //  `require()` the image data into a component prop
-                var makeRequire = template.expression("require(\"" + (0, gatsby_core_utils_1.slash)(filename) + "\")");
+                var makeRequire = template.expression("require(\"".concat((0, gatsby_core_utils_1.slash)(filename), "\")"));
                 var newProp = t.jsxAttribute(t.jsxIdentifier("__imageData"), t.jsxExpressionContainer(makeRequire()));
                 nodePath.node.attributes.push(newProp);
             }

package/dist/components/gatsby-image.browser.js

@@ -214,7 +214,7 @@ var GatsbyImageHydrator = /** @class */ (function (_super) {
             className = this.props["class"];
         }
         var sizer = (0, layout_wrapper_1.getSizer)(layout, width, height);
-        return (react_1["default"].createElement(Type, __assign({}, wrapperProps, { style: __assign(__assign(__assign({}, wStyle), this.props.style), { backgroundColor: this.props.backgroundColor }), className: "" + wClass + (className ? " " + className : ""), ref: this.root, dangerouslySetInnerHTML: {
+        return (react_1["default"].createElement(Type, __assign({}, wrapperProps, { style: __assign(__assign(__assign({}, wStyle), this.props.style), { backgroundColor: this.props.backgroundColor }), className: "".concat(wClass).concat(className ? " ".concat(className) : ""), ref: this.root, dangerouslySetInnerHTML: {
                 __html: sizer
             }, suppressHydrationWarning: true })));
     };

package/dist/components/gatsby-image.server.js

@@ -89,7 +89,7 @@ var GatsbyImage = function GatsbyImage(_a) {
             return __assign(__assign({}, source), { srcSet: removeNewLines(source.srcSet) });
         });
     }
-    return (react_1["default"].createElement(exports.GatsbyImageHydrator, __assign({}, wrapperProps, { as: as, style: __assign(__assign(__assign({}, wStyle), style), { backgroundColor: backgroundColor }), className: "" + wClass + (className ? " " + className : "") }),
+    return (react_1["default"].createElement(exports.GatsbyImageHydrator, __assign({}, wrapperProps, { as: as, style: __assign(__assign(__assign({}, wStyle), style), { backgroundColor: backgroundColor }), className: "".concat(wClass).concat(className ? " ".concat(className) : "") }),
         react_1["default"].createElement(layout_wrapper_1.LayoutWrapper, { layout: layout, width: width, height: height },
             react_1["default"].createElement(placeholder_1.Placeholder, __assign({}, (0, hooks_1.getPlaceholderProps)(placeholder, false, layout, width, height, placeholderBackgroundColor, objectFit, objectPosition))),
             react_1["default"].createElement(main_image_1.MainImage, __assign({ "data-gatsby-image-ssr": "", className: imgClassName }, props, (0, hooks_1.getMainProps)(loading === "eager", false, cleanedImages, loading, undefined, undefined, undefined, imgStyle))))));
@@ -101,7 +101,7 @@ var altValidator = function (props, propName, componentName) {
         rest[_i - 3] = arguments[_i];
     }
     if (!props.alt && props.alt !== "") {
-        return new Error("The \"alt\" prop is required in " + componentName + ". If the image is purely presentational then pass an empty string: e.g. alt=\"\". Learn more: https://a11y-style-guide.com/style-guide/section-media.html");
+        return new Error("The \"alt\" prop is required in ".concat(componentName, ". If the image is purely presentational then pass an empty string: e.g. alt=\"\". Learn more: https://a11y-style-guide.com/style-guide/section-media.html"));
     }
     return prop_types_1["default"].string.apply(prop_types_1["default"], __spreadArray([props, propName, componentName], __read(rest), false));
 };

package/dist/components/hooks.js

@@ -251,7 +251,7 @@ function getMainProps(isLoading, isLoaded, images, loading, toggleLoaded, cacheK
     // Polyfill "object-fit" if unsupported (mostly IE)
     if ((ref === null || ref === void 0 ? void 0 : ref.current) && !("objectFit" in document.documentElement.style)) {
         ref.current.dataset.objectFit = (_a = style.objectFit) !== null && _a !== void 0 ? _a : "cover";
-        ref.current.dataset.objectPosition = "" + ((_b = style.objectPosition) !== null && _b !== void 0 ? _b : "50% 50%");
+        ref.current.dataset.objectPosition = "".concat((_b = style.objectPosition) !== null && _b !== void 0 ? _b : "50% 50%");
         applyPolyfill(ref);
     }
     // fallback when it's not configured in gatsby-config.
@@ -374,7 +374,7 @@ function withArtDirection(defaultImage, artDirected) {
         }
         if (image.layout !== defaultImage.layout &&
             process.env.NODE_ENV === "development") {
-            console.warn("[gatsby-plugin-image] Mismatched image layout: expected \"" + defaultImage.layout + "\" but received \"" + image.layout + "\". All art-directed images use the same layout as the default image");
+            console.warn("[gatsby-plugin-image] Mismatched image layout: expected \"".concat(defaultImage.layout, "\" but received \"").concat(image.layout, "\". All art-directed images use the same layout as the default image"));
         }
         (_b = output.images.sources).push.apply(_b, __spreadArray(__spreadArray([], __read(image.images.sources.map(function (source) {
             return __assign(__assign({}, source), { media: media });

package/dist/components/layout-wrapper.js

@@ -59,10 +59,10 @@ var NativeScriptLoading = function () { return (react_1["default"].createElement
 function getSizer(layout, width, height) {
     var sizer = null;
     if (layout === "fullWidth") {
-        sizer = "<div aria-hidden=\"true\" style=\"padding-top: " + (height / width) * 100 + "%;\"></div>";
+        sizer = "<div aria-hidden=\"true\" style=\"padding-top: ".concat((height / width) * 100, "%;\"></div>");
     }
     if (layout === "constrained") {
-        sizer = "<div style=\"max-width: " + width + "px; display: block;\"><img alt=\"\" role=\"presentation\" aria-hidden=\"true\" src=\"data:image/svg+xml;charset=utf-8,%3Csvg height='" + height + "' width='" + width + "' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E\" style=\"max-width: 100%; display: block; position: static;\"></div>";
+        sizer = "<div style=\"max-width: ".concat(width, "px; display: block;\"><img alt=\"\" role=\"presentation\" aria-hidden=\"true\" src=\"data:image/svg+xml;charset=utf-8,%3Csvg height='").concat(height, "' width='").concat(width, "' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E\" style=\"max-width: 100%; display: block; position: static;\"></div>");
     }
     return sizer;
 }
@@ -70,11 +70,11 @@ exports.getSizer = getSizer;
 var Sizer = function Sizer(_a) {
     var layout = _a.layout, width = _a.width, height = _a.height;
     if (layout === "fullWidth") {
-        return (react_1["default"].createElement("div", { "aria-hidden": true, style: { paddingTop: (height / width) * 100 + "%" } }));
+        return (react_1["default"].createElement("div", { "aria-hidden": true, style: { paddingTop: "".concat((height / width) * 100, "%") } }));
     }
     if (layout === "constrained") {
         return (react_1["default"].createElement("div", { style: { maxWidth: width, display: "block" } },
-            react_1["default"].createElement("img", { alt: "", role: "presentation", "aria-hidden": "true", src: "data:image/svg+xml;charset=utf-8,%3Csvg height='" + height + "' width='" + width + "' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E", style: {
+            react_1["default"].createElement("img", { alt: "", role: "presentation", "aria-hidden": "true", src: "data:image/svg+xml;charset=utf-8,%3Csvg height='".concat(height, "' width='").concat(width, "' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E"), style: {
                     maxWidth: "100%",
                     display: "block",
                     position: "static"

package/dist/components/picture.js

@@ -59,7 +59,7 @@ exports.Picture = (0, react_1.forwardRef)(function Picture(_a, ref) {
     return (react_1["default"].createElement("picture", null,
         sources.map(function (_a) {
             var media = _a.media, srcSet = _a.srcSet, type = _a.type;
-            return (react_1["default"].createElement("source", { key: media + "-" + type + "-" + srcSet, type: type, media: media, srcSet: shouldLoad ? srcSet : undefined, "data-srcset": !shouldLoad ? srcSet : undefined, sizes: sizes }));
+            return (react_1["default"].createElement("source", { key: "".concat(media, "-").concat(type, "-").concat(srcSet), type: type, media: media, srcSet: shouldLoad ? srcSet : undefined, "data-srcset": !shouldLoad ? srcSet : undefined, sizes: sizes }));
         }),
         fallbackImage));
 });

package/dist/components/placeholder.js

@@ -69,6 +69,6 @@ exports.Placeholder.propTypes = {
         if (!props[propName]) {
             return null;
         }
-        return new Error("Invalid prop `" + propName + "` supplied to `" + componentName + "`. Validation failed.");
+        return new Error("Invalid prop `".concat(propName, "` supplied to `").concat(componentName, "`. Validation failed."));
     }
 };

package/dist/components/static-image.server.js

@@ -86,7 +86,7 @@ var checkDimensionProps = function (props, propName) {
     if (props.layout === "fullWidth" &&
         (propName === "width" || propName === "height") &&
         props[propName]) {
-        return new Error("\"" + propName + "\" " + props[propName] + " may not be passed when layout is fullWidth.");
+        return new Error("\"".concat(propName, "\" ").concat(props[propName], " may not be passed when layout is fullWidth."));
     }
     return prop_types_1["default"].number.apply(prop_types_1["default"], __spreadArray([props, propName], __read(rest), false));
 };
@@ -104,7 +104,7 @@ exports.propTypes = {
         if (validLayouts.has(props.layout)) {
             return undefined;
         }
-        return new Error("Invalid value " + props.layout + "\" provided for prop \"layout\". Defaulting to \"constrained\". Valid values are \"fixed\", \"fullWidth\" or \"constrained\".");
+        return new Error("Invalid value ".concat(props.layout, "\" provided for prop \"layout\". Defaulting to \"constrained\". Valid values are \"fixed\", \"fullWidth\" or \"constrained\"."));
     }
 };
 StaticImage.displayName = "StaticImage";

package/dist/image-utils.js

@@ -62,10 +62,10 @@ var getSizes = function (width, layout) {
         // If screen is wider than the max size, image width is the max size,
         // otherwise it's the width of the screen
         case "constrained":
-            return "(min-width: " + width + "px) " + width + "px, 100vw";
+            return "(min-width: ".concat(width, "px) ").concat(width, "px, 100vw");
         // Image is always the same width, whatever the size of the screen
         case "fixed":
-            return width + "px";
+            return "".concat(width, "px");
         // Image is always the width of the screen
         case "fullWidth":
             return "100vw";
@@ -75,7 +75,7 @@ var getSizes = function (width, layout) {
 };
 exports.getSizes = getSizes;
 var getSrcSet = function (images) {
-    return images.map(function (image) { return image.src + " " + image.width + "w"; }).join(",\n");
+    return images.map(function (image) { return "".concat(image.src, " ").concat(image.width, "w"); }).join(",\n");
 };
 exports.getSrcSet = getSrcSet;
 function formatFromFilename(filename) {
@@ -170,7 +170,7 @@ function generateImageData(args) {
         formats.add(sourceMetadata.format);
     }
     if (formats.has("jpg") && formats.has("png")) {
-        reporter.warn("[" + pluginName + "] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead");
+        reporter.warn("[".concat(pluginName, "] Specifying both 'jpg' and 'png' formats is not supported. Using 'auto' instead"));
         if (sourceMetadata.format === "jpg") {
             formats["delete"]("png");
         }
@@ -195,7 +195,7 @@ function generateImageData(args) {
                 !imageSrc.height ||
                 !imageSrc.src ||
                 !imageSrc.format) {
-                reporter.warn("[" + pluginName + "] The resolver for image " + filename + " returned an invalid value.");
+                reporter.warn("[".concat(pluginName, "] The resolver for image ").concat(filename, " returned an invalid value."));
                 return undefined;
             }
             return imageSrc;
@@ -215,7 +215,7 @@ function generateImageData(args) {
             (_a = result.sources) === null || _a === void 0 ? void 0 : _a.push({
                 srcSet: (0, exports.getSrcSet)(images),
                 sizes: sizes,
-                type: "image/" + format
+                type: "image/".concat(format)
             });
         }
     });
@@ -255,9 +255,9 @@ function calculateImageSizes(args) {
         return typeof size === "number" && size < 1;
     });
     if (erroneousUserDimensions.length) {
-        throw new Error("Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are " + erroneousUserDimensions
+        throw new Error("Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are ".concat(erroneousUserDimensions
             .map(function (dim) { return dim.join(": "); })
-            .join(", "));
+            .join(", ")));
     }
     if (layout === "fixed") {
         return fixedImageSizes(args);
@@ -269,7 +269,7 @@ function calculateImageSizes(args) {
         return responsiveImageSizes(__assign({ breakpoints: breakpoints }, args));
     }
     else {
-        reporter.warn("No valid layout was provided for the image at " + filename + ". Valid image layouts are fixed, fullWidth, and constrained. Found " + layout);
+        reporter.warn("No valid layout was provided for the image at ".concat(filename, ". Valid image layouts are fixed, fullWidth, and constrained. Found ").concat(layout));
         return {
             sizes: [imgDimensions.width],
             presentationWidth: imgDimensions.width,

package/dist/node-apis/image-processing.js

@@ -132,7 +132,7 @@ function writeImages(_a) {
                         case 0:
                             _d = _a, _e = __read(_d, 2), hash = _e[0], _c = _e[1], src = _c.src, args = __rest(_c, ["src"]);
                             if (!src) {
-                                reporter.warn("Missing StaticImage \"src\" in " + filename + ".");
+                                reporter.warn("Missing StaticImage \"src\" in ".concat(filename, "."));
                                 return [2 /*return*/];
                             }
                             if (!(0, exports.isRemoteURL)(src)) return [3 /*break*/, 5];
@@ -160,19 +160,19 @@ function writeImages(_a) {
                             return [3 /*break*/, 4];
                         case 3:
                             err_1 = _f.sent();
-                            reporter.error("Error loading image " + src, err_1);
+                            reporter.error("Error loading image ".concat(src), err_1);
                             return [2 /*return*/];
                         case 4:
                             if (!(file === null || file === void 0 ? void 0 : file.internal.mediaType) ||
                                 !supportedTypes.has(file.internal.mediaType)) {
-                                reporter.error("The file loaded from " + src + " is not a valid image type. Found \"" + ((file === null || file === void 0 ? void 0 : file.internal.mediaType) || "unknown") + "\"");
+                                reporter.error("The file loaded from ".concat(src, " is not a valid image type. Found \"").concat((file === null || file === void 0 ? void 0 : file.internal.mediaType) || "unknown", "\""));
                                 return [2 /*return*/];
                             }
                             return [3 /*break*/, 9];
                         case 5:
                             fullPath = path_1["default"].resolve(sourceDir, src);
                             if (!fs_extra_1["default"].existsSync(fullPath)) {
-                                reporter.warn("Could not find image \"" + src + "\" in \"" + filename + "\". Looked for " + fullPath + ".");
+                                reporter.warn("Could not find image \"".concat(src, "\" in \"").concat(filename, "\". Looked for ").concat(fullPath, "."));
                                 return [2 /*return*/];
                             }
                             _f.label = 6;
@@ -189,18 +189,18 @@ function writeImages(_a) {
                             return [3 /*break*/, 9];
                         case 9:
                             if (!file) {
-                                reporter.warn("Could not create node for image " + src);
+                                reporter.warn("Could not create node for image ".concat(src));
                                 return [2 /*return*/];
                             }
                             // We need our own type, because `File` belongs to the filesystem plugin
                             file.internal.type = "StaticImage";
                             delete file.internal.owner;
                             createNode(file);
-                            cacheKey = "ref-" + file.id;
+                            cacheKey = "ref-".concat(file.id);
                             return [4 /*yield*/, cache.get(cacheKey)];
                         case 10:
                             imageRefs = (_f.sent()) || {};
-                            cacheFilename = path_1["default"].join(cacheDir, hash + ".json");
+                            cacheFilename = path_1["default"].join(cacheDir, "".concat(hash, ".json"));
                             imageRefs[hash] = {
                                 contentDigest: (_b = file.internal) === null || _b === void 0 ? void 0 : _b.contentDigest,
                                 args: args,
@@ -263,12 +263,12 @@ function writeImage(file, args, pathPrefix, reporter, cache, filename) {
                     _a.sent();
                     return [3 /*break*/, 5];
                 case 4:
-                    reporter.warn("Could not process image " + file.relativePath);
+                    reporter.warn("Could not process image ".concat(file.relativePath));
                     _a.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
                     e_3 = _a.sent();
-                    reporter.warn("Error processing image " + file.relativePath + ". \n" + e_3.message);
+                    reporter.warn("Error processing image ".concat(file.relativePath, ". \n").concat(e_3.message));
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
             }

package/dist/node-apis/watcher.js

@@ -57,7 +57,7 @@ function watchImage(_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        reporter.verbose("Image changed: " + path);
+                        reporter.verbose("Image changed: ".concat(path));
                         return [4 /*yield*/, (0, image_processing_1.createImageNode)({
                                 fullPath: path,
                                 createNodeId: createNodeId,
@@ -67,7 +67,7 @@ function watchImage(_a) {
                     case 1:
                         node = _a.sent();
                         if (!node) {
-                            reporter.warn("Could not process image " + path);
+                            reporter.warn("Could not process image ".concat(path));
                             return [2 /*return*/];
                         }
                         return [4 /*yield*/, updateImages({ node: node, cache: cache, pathPrefix: pathPrefix, reporter: reporter })];
@@ -94,7 +94,7 @@ function updateImages(_a) {
         var _this = this;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, cache.get("ref-" + node.id)];
+                case 0: return [4 /*yield*/, cache.get("ref-".concat(node.id))];
                 case 1:
                     imageRefs = _b.sent();
                     if (!imageRefs) {

package/dist/resolver-utils.js

@@ -96,7 +96,7 @@ function getGatsbyImageFieldConfig(resolve, extraArgs) {
                 type: exports.ImagePlaceholderType.name,
                 description: (0, common_tags_1.stripIndent)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            Format of generated placeholder image, displayed while the main image loads.\n            BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)\n            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.\n            TRACED_SVG: a low-resolution traced SVG of the image.\n            NONE: no placeholder. Set the argument \"backgroundColor\" to use a fixed background color."], ["\n            Format of generated placeholder image, displayed while the main image loads.\n            BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)\n            DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.\n            TRACED_SVG: a low-resolution traced SVG of the image.\n            NONE: no placeholder. Set the argument \"backgroundColor\" to use a fixed background color."])))
             }, formats: {
-                type: "[" + exports.ImageFormatType.name + "]",
+                type: "[".concat(exports.ImageFormatType.name, "]"),
                 description: (0, common_tags_1.stripIndent)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, WEBP and AVIF.\n            The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do\n            not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying\n            both PNG and JPG is not supported and will be ignored.\n        "], ["\n            The image formats to generate. Valid values are AUTO (meaning the same format as the source image), JPG, PNG, WEBP and AVIF.\n            The default value is [AUTO, WEBP], and you should rarely need to change this. Take care if you specify JPG or PNG when you do\n            not know the formats of the source images, as this could lead to unwanted results such as converting JPEGs to PNGs. Specifying\n            both PNG and JPG is not supported and will be ignored.\n        "]))),
                 defaultValue: ["", "webp"]
             }, outputPixelDensities: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-image",
-  "version": "2.3.0-next.0",
+  "version": "2.4.0-next.1",
   "scripts": {
     "build": "npm-run-all -s clean -p build:*",
     "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts -d --declarationDir dist/src",
@@ -61,7 +61,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.9",
     "terser": "^5.3.8",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.12.3",
@@ -77,12 +77,12 @@
     "@babel/runtime": "^7.15.4",
     "@babel/traverse": "^7.15.4",
     "babel-jsx-utils": "^1.1.0",
-    "babel-plugin-remove-graphql-queries": "^4.3.0-next.0",
+    "babel-plugin-remove-graphql-queries": "^4.4.0-next.1",
     "camelcase": "^5.3.1",
     "chokidar": "^3.5.2",
-    "common-tags": "^1.8.0",
+    "common-tags": "^1.8.2",
     "fs-extra": "^10.0.0",
-    "gatsby-core-utils": "^3.3.0-next.0",
+    "gatsby-core-utils": "^3.4.0-next.1",
     "objectFitPolyfill": "^2.3.5",
     "prop-types": "^15.7.2"
   },
@@ -93,5 +93,5 @@
   },
   "author": "Matt Kane <matt@gatsbyjs.com>",
   "license": "MIT",
-  "gitHead": "f21bcd3e87c804ba77d8cc29f1ee1bd796992977"
+  "gitHead": "6b28b69d8383ccdb951c81283a77e19d2f14ddb9"
 }