gatsby-plugin-image 3.8.0 → 3.9.0-next.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@3.8.0/packages/gatsby-plugin-image) (2023-03-21)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.8)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
 ## [3.7.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@3.7.0/packages/gatsby-plugin-image) (2023-02-21)
 
 [🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.7)

package/dist/babel-helpers.js

@@ -13,7 +13,7 @@ var __assign = (this && this.__assign) || function () {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.hashOptions = exports.evaluateImageAttributes = exports.normalizeProps = exports.SHARP_ATTRIBUTES = void 0;
 var murmurhash_1 = require("gatsby-core-utils/murmurhash");
 var babel_jsx_utils_1 = require("babel-jsx-utils");
@@ -42,10 +42,10 @@ exports.SHARP_ATTRIBUTES = new Set([
 function normalizeProps(props) {
     var out = __assign({}, props);
     if (out.layout) {
-        out.layout = (0, camelcase_1["default"])(out.layout);
+        out.layout = (0, camelcase_1.default)(out.layout);
     }
     if (out.placeholder) {
-        out.placeholder = (0, camelcase_1["default"])(out.placeholder);
+        out.placeholder = (0, camelcase_1.default)(out.placeholder);
         if (out.placeholder === "tracedSvg") {
             out.placeholder = "tracedSVG";
         }

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

@@ -6,7 +6,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 var babel_helpers_1 = require("./babel-helpers");
 var fs_extra_1 = __importDefault(require("fs-extra"));
 var path_1 = __importDefault(require("path"));
@@ -46,12 +46,12 @@ function attrs(_a) {
                 if (!cacheDir) {
                     console.warn("[gatsby-plugin-image] Couldn't find image data cache file");
                 }
-                var filename = path_1["default"].join(cacheDir, "".concat(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")) {
                     try {
-                        data = fs_extra_1["default"].readJSONSync(filename);
+                        data = fs_extra_1.default.readJSONSync(filename);
                     }
                     catch (e) {
                         // TODO add info about minimum Gatsby version once this is merged
@@ -76,9 +76,9 @@ function attrs(_a) {
                 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);
-            }
-        }
+            },
+        },
     };
 }
-exports["default"] = attrs;
+exports.default = attrs;
 var templateObject_1;

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

@@ -44,7 +44,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.GatsbyImage = void 0;
 var react_1 = require("react");
 var hooks_1 = require("./hooks");
@@ -54,7 +54,7 @@ var imageCache = new Set();
 var renderImageToStringPromise;
 var renderImage;
 var GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
-    var _b = _a.as, as = _b === void 0 ? "div" : _b, image = _a.image, style = _a.style, backgroundColor = _a.backgroundColor, className = _a.className, preactClass = _a["class"], onStartLoad = _a.onStartLoad, onLoad = _a.onLoad, onError = _a.onError, props = __rest(_a, ["as", "image", "style", "backgroundColor", "className", "class", "onStartLoad", "onLoad", "onError"]);
+    var _b = _a.as, as = _b === void 0 ? "div" : _b, image = _a.image, style = _a.style, backgroundColor = _a.backgroundColor, className = _a.className, preactClass = _a.class, onStartLoad = _a.onStartLoad, onLoad = _a.onLoad, onError = _a.onError, props = __rest(_a, ["as", "image", "style", "backgroundColor", "className", "class", "onStartLoad", "onLoad", "onError"]);
     var width = image.width, height = image.height, layout = image.layout;
     var _c = (0, hooks_1.getWrapperProps)(width, height, layout), wStyle = _c.style, wClass = _c.className, wrapperProps = __rest(_c, ["style", "className"]);
     var root = (0, react_1.useRef)();
@@ -71,7 +71,7 @@ var GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
                 renderImage = renderImageToString;
                 return {
                     renderImageToString: renderImageToString,
-                    swapPlaceholderImage: swapPlaceholderImage
+                    swapPlaceholderImage: swapPlaceholderImage,
                 };
             });
         }
@@ -82,10 +82,10 @@ var GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
             if (ssrImage.complete) {
                 // Trigger onStartload and onLoad events
                 onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-                    wasCached: true
+                    wasCached: true,
                 });
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    wasCached: true
+                    wasCached: true,
                 });
                 // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
                 setTimeout(function () {
@@ -94,12 +94,12 @@ var GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
             }
             else {
                 onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-                    wasCached: true
+                    wasCached: true,
                 });
                 ssrImage.addEventListener("load", function onLoadListener() {
                     ssrImage.removeEventListener("load", onLoadListener);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                        wasCached: true
+                        wasCached: true,
                     });
                     // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
                     setTimeout(function () {
@@ -145,16 +145,16 @@ var GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
             root.current.innerHTML = renderImage(__assign({ isLoading: imageCache.has(cacheKey), isLoaded: imageCache.has(cacheKey), image: image }, props));
             // Trigger onStartload and onLoad events
             onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-                wasCached: true
+                wasCached: true,
             });
             onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                wasCached: true
+                wasCached: true,
             });
         }
     }, [image]);
     // By keeping all props equal React will keep the component in the DOM
     return (0, react_1.createElement)(as, __assign(__assign({}, wrapperProps), { style: __assign(__assign(__assign({}, wStyle), style), { backgroundColor: backgroundColor }), className: "".concat(wClass).concat(className ? " ".concat(className) : ""), ref: root, dangerouslySetInnerHTML: {
-            __html: sizer
+            __html: sizer,
         }, suppressHydrationWarning: true }));
 };
 exports.GatsbyImage = (0, react_1.memo)(function GatsbyImage(props) {

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

@@ -49,7 +49,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.propTypes = exports.altValidator = exports.GatsbyImage = void 0;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("./hooks");
@@ -59,7 +59,7 @@ var layout_wrapper_1 = require("./layout-wrapper");
 var prop_types_1 = __importDefault(require("prop-types"));
 var removeNewLines = function (str) { return str.replace(/\n/g, ""); };
 var GatsbyImage = function GatsbyImage(_a) {
-    var _b = _a.as, as = _b === void 0 ? "div" : _b, className = _a.className, preactClass = _a["class"], style = _a.style, image = _a.image, _c = _a.loading, loading = _c === void 0 ? "lazy" : _c, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, backgroundColor = _a.backgroundColor, objectFit = _a.objectFit, objectPosition = _a.objectPosition, props = __rest(_a, ["as", "className", "class", "style", "image", "loading", "imgClassName", "imgStyle", "backgroundColor", "objectFit", "objectPosition"]);
+    var _b = _a.as, as = _b === void 0 ? "div" : _b, className = _a.className, preactClass = _a.class, style = _a.style, image = _a.image, _c = _a.loading, loading = _c === void 0 ? "lazy" : _c, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, backgroundColor = _a.backgroundColor, objectFit = _a.objectFit, objectPosition = _a.objectPosition, props = __rest(_a, ["as", "className", "class", "style", "image", "loading", "imgClassName", "imgStyle", "backgroundColor", "objectFit", "objectPosition"]);
     if (!image) {
         console.warn("[gatsby-plugin-image] Missing image prop");
         return null;
@@ -72,7 +72,7 @@ var GatsbyImage = function GatsbyImage(_a) {
     var _d = (0, hooks_1.getWrapperProps)(width, height, layout), wStyle = _d.style, wClass = _d.className, wrapperProps = __rest(_d, ["style", "className"]);
     var cleanedImages = {
         fallback: undefined,
-        sources: []
+        sources: [],
     };
     if (images.fallback) {
         cleanedImages.fallback = __assign(__assign({}, images.fallback), { srcSet: images.fallback.srcSet
@@ -84,9 +84,9 @@ var GatsbyImage = function GatsbyImage(_a) {
             return __assign(__assign({}, source), { srcSet: removeNewLines(source.srcSet) });
         });
     }
-    return react_1["default"].createElement(as, __assign(__assign({}, wrapperProps), { 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, imgStyle)))));
+    return react_1.default.createElement(as, __assign(__assign({}, wrapperProps), { 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, imgStyle)))));
 };
 exports.GatsbyImage = GatsbyImage;
 var altValidator = function (props, propName, componentName) {
@@ -97,10 +97,10 @@ var altValidator = function (props, propName, componentName) {
     if (!props.alt && props.alt !== "") {
         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));
+    return prop_types_1.default.string.apply(prop_types_1.default, __spreadArray([props, propName, componentName], __read(rest), false));
 };
 exports.altValidator = altValidator;
 exports.propTypes = {
-    image: prop_types_1["default"].object.isRequired,
-    alt: exports.altValidator
+    image: prop_types_1.default.object.isRequired,
+    alt: exports.altValidator,
 };

package/dist/components/hooks.js

@@ -46,7 +46,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.withArtDirection = exports.getPlaceholderProps = exports.getMainProps = exports.getImageData = exports.getWrapperProps = exports.getSrcSet = exports.getSrc = exports.getImage = exports.gatsbyImageIsInstalled = exports.hasNativeLazyLoadSupport = void 0;
 /* global GATSBY___IMAGE */
 var image_utils_1 = require("../image-utils");
@@ -114,7 +114,7 @@ function getWrapperProps(width, height, layout) {
     return {
         className: className,
         "data-gatsby-image-wrapper": "",
-        style: wrapperStyle
+        style: wrapperStyle,
     };
 }
 exports.getWrapperProps = getWrapperProps;
@@ -132,13 +132,13 @@ function getImageData(_a) {
             width: width,
             height: height,
             format: format,
-            src: urlBuilder({ baseUrl: baseUrl, width: width, height: height, options: options, format: format })
+            src: urlBuilder({ baseUrl: baseUrl, width: width, height: height, options: options, format: format }),
         };
     };
     var sourceMetadata = {
         width: sourceWidth,
         height: sourceHeight,
-        format: "auto"
+        format: "auto",
     };
     var args = __assign(__assign({}, props), { pluginName: pluginName, generateImageSource: generateImageSource, filename: baseUrl, formats: formats, breakpoints: breakpoints, sourceMetadata: sourceMetadata });
     return (0, image_utils_1.generateImageData)(args);
@@ -193,7 +193,7 @@ function getPlaceholderProps(placeholder, isLoaded, layout, width, height, backg
             left: 0,
             position: "absolute",
             top: 0,
-            width: "100%"
+            width: "100%",
         };
     }
     return result;
@@ -232,14 +232,14 @@ function withArtDirection(defaultImage, artDirected) {
             return __assign(__assign({}, source), { media: media });
         })), false), [{
                 media: media,
-                srcSet: image.images.fallback.srcSet
+                srcSet: image.images.fallback.srcSet,
             }], false));
         if (!output.placeholder) {
             return;
         }
         output.placeholder.sources.push({
             media: media,
-            srcSet: image.placeholder.fallback
+            srcSet: image.placeholder.fallback,
         });
     });
     (_a = output.images.sources).push.apply(_a, __spreadArray([], __read(images.sources), false));

package/dist/components/intersection-observer.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.createIntersectionObserver = void 0;
 var intersectionObserver;
 var ioEntryMap = new WeakMap();
@@ -29,13 +29,13 @@ function createIntersectionObserver(callback) {
                     // Get the matching entry's callback and call it
                     (_a = ioEntryMap.get(entry.target)) === null || _a === void 0 ? void 0 : _a();
                     // We only need to call it once
-                    ioEntryMap["delete"](entry.target);
+                    ioEntryMap.delete(entry.target);
                 }
             });
         }, {
             rootMargin: connectionType === "4g" && !(connection === null || connection === void 0 ? void 0 : connection.saveData)
                 ? FAST_CONNECTION_THRESHOLD
-                : SLOW_CONNECTION_THRESHOLD
+                : SLOW_CONNECTION_THRESHOLD,
         });
     }
     return function observe(element) {
@@ -44,7 +44,7 @@ function createIntersectionObserver(callback) {
         intersectionObserver.observe(element);
         return function unobserve() {
             if (intersectionObserver && element) {
-                ioEntryMap["delete"](element);
+                ioEntryMap.delete(element);
                 intersectionObserver.unobserve(element);
             }
         };

package/dist/components/layout-wrapper.js

@@ -51,12 +51,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWrapper = exports.getSizer = void 0;
 var react_1 = __importStar(require("react"));
 var terser_macro_1 = __importDefault(require("../../macros/terser.macro"));
-var NativeScriptLoading = function () { return (react_1["default"].createElement("script", { type: "module", dangerouslySetInnerHTML: {
-        __html: (0, terser_macro_1["default"])(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"], ["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"])))
+var NativeScriptLoading = function () { return (react_1.default.createElement("script", { type: "module", dangerouslySetInnerHTML: {
+        __html: (0, terser_macro_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"], ["\nconst hasNativeLazyLoadSupport = typeof HTMLImageElement !== \"undefined\" && \"loading\" in HTMLImageElement.prototype;\nif (hasNativeLazyLoadSupport) {\n  const gatsbyImages = document.querySelectorAll('img[data-main-image]');\n  for (let mainImage of gatsbyImages) {\n    if (mainImage.dataset.src) {\n      mainImage.setAttribute('src', mainImage.dataset.src)\n      mainImage.removeAttribute('data-src')\n    }\n    if (mainImage.dataset.srcset) {\n      mainImage.setAttribute('srcset', mainImage.dataset.srcset)\n      mainImage.removeAttribute('data-srcset')\n    }\n\n    const sources = mainImage.parentNode.querySelectorAll('source[data-srcset]');\n    for (let source of sources) {\n      source.setAttribute('srcset', source.dataset.srcset)\n      source.removeAttribute('data-srcset')\n    }\n\n    if (mainImage.complete) {\n      mainImage.style.opacity = 1;\n\n      // also hide the placeholder\n      mainImage.parentNode.parentNode.querySelector('[data-placeholder-image]').style.opacity = 0;\n    }\n  }\n}\n"]))),
     } })); };
 function getSizer(layout, width, height) {
     var sizer = "";
@@ -72,24 +72,24 @@ 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: "".concat((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%20height='".concat(height, "'%20width='").concat(width, "'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E"), style: {
+        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%20height='".concat(height, "'%20width='").concat(width, "'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E"), style: {
                     maxWidth: "100%",
                     display: "block",
-                    position: "static"
+                    position: "static",
                 } })));
     }
     return null;
 };
 var LayoutWrapper = function LayoutWrapper(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1["default"].createElement(react_1.Fragment, null,
-        react_1["default"].createElement(Sizer, __assign({}, props)),
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Sizer, __assign({}, props)),
         children,
-        SERVER ? react_1["default"].createElement(NativeScriptLoading, null) : null));
+        SERVER ? react_1.default.createElement(NativeScriptLoading, null) : null));
 };
 exports.LayoutWrapper = LayoutWrapper;
 var templateObject_1;

package/dist/components/lazy-hydrate.js

@@ -83,7 +83,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderImageToString = exports.swapPlaceholderImage = void 0;
 var react_1 = __importDefault(require("react"));
 var server_1 = require("react-dom/server");
@@ -137,9 +137,10 @@ function startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onErro
                 // eslint-disable-next-line @babel/no-invalid-this
                 toggleLoaded(_this, placeholderImage);
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    wasCached: isCached
+                    wasCached: isCached,
                 });
-            })["catch"](function (e) {
+            })
+                .catch(function (e) {
                 // eslint-disable-next-line @babel/no-invalid-this
                 toggleLoaded(_this, placeholderImage);
                 onError === null || onError === void 0 ? void 0 : onError(e);
@@ -149,13 +150,13 @@ function startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onErro
             // eslint-disable-next-line @babel/no-invalid-this
             toggleLoaded(this, placeholderImage);
             onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                wasCached: isCached
+                wasCached: isCached,
             });
         }
     }
     mainImage.addEventListener("load", onImageLoaded);
     onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-        wasCached: isCached
+        wasCached: isCached,
     });
     Array.from(mainImage.parentElement.children).forEach(function (child) {
         var src = child.getAttribute("data-src");
@@ -174,7 +175,7 @@ function startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onErro
     // We check if the image is already completed and if so we trigger onload.
     if (mainImage.complete) {
         onImageLoaded.call(mainImage, {
-            currentTarget: mainImage
+            currentTarget: mainImage,
         });
     }
     return function () {
@@ -211,8 +212,8 @@ function renderImageToString(_a) {
     var image = _a.image, _b = _a.loading, loading = _b === void 0 ? "lazy" : _b, isLoading = _a.isLoading, isLoaded = _a.isLoaded, imgClassName = _a.imgClassName, _c = _a.imgStyle, imgStyle = _c === void 0 ? {} : _c, objectPosition = _a.objectPosition, backgroundColor = _a.backgroundColor, _d = _a.objectFit, objectFit = _d === void 0 ? "cover" : _d, props = __rest(_a, ["image", "loading", "isLoading", "isLoaded", "imgClassName", "imgStyle", "objectPosition", "backgroundColor", "objectFit"]);
     var width = image.width, height = image.height, layout = image.layout, images = image.images, placeholder = image.placeholder, wrapperBackgroundColor = image.backgroundColor;
     imgStyle = __assign({ objectFit: objectFit, objectPosition: objectPosition, backgroundColor: backgroundColor }, imgStyle);
-    return (0, server_1.renderToStaticMarkup)(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, isLoaded, layout, width, height, wrapperBackgroundColor, objectFit, objectPosition))),
-        react_1["default"].createElement(main_image_1.MainImage, __assign({}, props, { width: width, height: height, className: imgClassName }, (0, hooks_1.getMainProps)(isLoading, isLoaded, images, loading, imgStyle)))));
+    return (0, server_1.renderToStaticMarkup)(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, isLoaded, layout, width, height, wrapperBackgroundColor, objectFit, objectPosition))),
+        react_1.default.createElement(main_image_1.MainImage, __assign({}, props, { width: width, height: height, className: imgClassName }, (0, hooks_1.getMainProps)(isLoading, isLoaded, images, loading, imgStyle)))));
 }
 exports.renderImageToString = renderImageToString;

package/dist/components/main-image.js

@@ -13,15 +13,15 @@ var __assign = (this && this.__assign) || function () {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainImage = void 0;
 var react_1 = __importDefault(require("react"));
 var picture_1 = require("./picture");
 var MainImage = function MainImage(props) {
-    return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(picture_1.Picture, __assign({}, props)),
-        react_1["default"].createElement("noscript", null,
-            react_1["default"].createElement(picture_1.Picture, __assign({}, props, { shouldLoad: true })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(picture_1.Picture, __assign({}, props)),
+        react_1.default.createElement("noscript", null,
+            react_1.default.createElement(picture_1.Picture, __assign({}, props, { shouldLoad: true })))));
 };
 exports.MainImage = MainImage;
 exports.MainImage.displayName = "MainImage";

package/dist/components/picture.js

@@ -47,25 +47,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Picture = void 0;
 var react_1 = __importDefault(require("react"));
 var PropTypes = __importStar(require("prop-types"));
 var Image = function Image(_a) {
     var src = _a.src, srcSet = _a.srcSet, loading = _a.loading, _b = _a.alt, alt = _b === void 0 ? "" : _b, shouldLoad = _a.shouldLoad, props = __rest(_a, ["src", "srcSet", "loading", "alt", "shouldLoad"]);
-    return (react_1["default"].createElement("img", __assign({}, props, { decoding: "async", loading: loading, src: shouldLoad ? src : undefined, "data-src": !shouldLoad ? src : undefined, srcSet: shouldLoad ? srcSet : undefined, "data-srcset": !shouldLoad ? srcSet : undefined, alt: alt })));
+    return (react_1.default.createElement("img", __assign({}, props, { decoding: "async", loading: loading, src: shouldLoad ? src : undefined, "data-src": !shouldLoad ? src : undefined, srcSet: shouldLoad ? srcSet : undefined, "data-srcset": !shouldLoad ? srcSet : undefined, alt: alt })));
 };
 var Picture = function Picture(_a) {
     var fallback = _a.fallback, _b = _a.sources, sources = _b === void 0 ? [] : _b, _c = _a.shouldLoad, shouldLoad = _c === void 0 ? true : _c, props = __rest(_a, ["fallback", "sources", "shouldLoad"]);
     var sizes = props.sizes || (fallback === null || fallback === void 0 ? void 0 : fallback.sizes);
-    var fallbackImage = (react_1["default"].createElement(Image, __assign({}, props, fallback, { sizes: sizes, shouldLoad: shouldLoad })));
+    var fallbackImage = (react_1.default.createElement(Image, __assign({}, props, fallback, { sizes: sizes, shouldLoad: shouldLoad })));
     if (!sources.length) {
         return fallbackImage;
     }
-    return (react_1["default"].createElement("picture", null,
+    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: "".concat(media, "-").concat(type, "-").concat(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));
 };
@@ -75,7 +75,7 @@ Image.propTypes = {
     alt: PropTypes.string.isRequired,
     sizes: PropTypes.string,
     srcSet: PropTypes.string,
-    shouldLoad: PropTypes.bool
+    shouldLoad: PropTypes.bool,
 };
 exports.Picture.displayName = "Picture";
 exports.Picture.propTypes = {
@@ -84,20 +84,20 @@ exports.Picture.propTypes = {
     fallback: PropTypes.exact({
         src: PropTypes.string.isRequired,
         srcSet: PropTypes.string,
-        sizes: PropTypes.string
+        sizes: PropTypes.string,
     }),
     sources: PropTypes.arrayOf(PropTypes.oneOfType([
         PropTypes.exact({
             media: PropTypes.string.isRequired,
             type: PropTypes.string,
             sizes: PropTypes.string,
-            srcSet: PropTypes.string.isRequired
+            srcSet: PropTypes.string.isRequired,
         }),
         PropTypes.exact({
             media: PropTypes.string,
             type: PropTypes.string.isRequired,
             sizes: PropTypes.string,
-            srcSet: PropTypes.string.isRequired
+            srcSet: PropTypes.string.isRequired,
         }),
-    ]))
+    ])),
 };

package/dist/components/placeholder.js

@@ -48,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 var _a;
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = void 0;
 var react_1 = __importDefault(require("react"));
 var PropTypes = __importStar(require("prop-types"));
@@ -56,12 +56,12 @@ var picture_1 = require("./picture");
 var Placeholder = function Placeholder(_a) {
     var fallback = _a.fallback, props = __rest(_a, ["fallback"]);
     if (fallback) {
-        return (react_1["default"].createElement(picture_1.Picture, __assign({}, props, { fallback: {
-                src: fallback
+        return (react_1.default.createElement(picture_1.Picture, __assign({}, props, { fallback: {
+                src: fallback,
             }, "aria-hidden": true, alt: "" })));
     }
     else {
-        return react_1["default"].createElement("div", __assign({}, props));
+        return react_1.default.createElement("div", __assign({}, props));
     }
 };
 exports.Placeholder = Placeholder;
@@ -74,5 +74,5 @@ exports.Placeholder.propTypes = {
             return null;
         }
         return new Error("Invalid prop `".concat(propName, "` supplied to `").concat(componentName, "`. Validation failed."));
-    }
+    },
 };

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

@@ -49,7 +49,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticImage = exports.propTypes = exports._getStaticImage = void 0;
 var react_1 = __importDefault(require("react"));
 var gatsby_image_server_1 = require("./gatsby-image.server");
@@ -66,7 +66,7 @@ function _getStaticImage(GatsbyImage) {
             console.warn(__error);
         }
         if (imageData) {
-            return react_1["default"].createElement(GatsbyImage, __assign({ image: imageData }, props));
+            return react_1.default.createElement(GatsbyImage, __assign({ image: imageData }, props));
         }
         console.warn("Image not loaded", src);
         if (!__error && process.env.NODE_ENV === "development") {
@@ -88,15 +88,15 @@ var checkDimensionProps = function (props, propName) {
         props[propName]) {
         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));
+    return prop_types_1.default.number.apply(prop_types_1.default, __spreadArray([props, propName], __read(rest), false));
 };
 var validLayouts = new Set(["fixed", "fullWidth", "constrained"]);
 exports.propTypes = {
-    src: prop_types_1["default"].string.isRequired,
+    src: prop_types_1.default.string.isRequired,
     alt: gatsby_image_server_1.altValidator,
     width: checkDimensionProps,
     height: checkDimensionProps,
-    sizes: prop_types_1["default"].string,
+    sizes: prop_types_1.default.string,
     layout: function (props) {
         if (props.layout === undefined) {
             return undefined;
@@ -105,7 +105,7 @@ exports.propTypes = {
             return undefined;
         }
         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";
 StaticImage.propTypes = exports.propTypes;