gatsby-plugin-image 2.19.0-next.2 → 2.19.0

package/dist/components/layout-wrapper.js

@@ -1,95 +1,95 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = 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"])))
-    } })); };
-function getSizer(layout, width, height) {
-    var sizer = "";
-    if (layout === "fullWidth") {
-        sizer = "<div aria-hidden=\"true\" style=\"padding-top: ".concat((height / width) * 100, "%;\"></div>");
-    }
-    if (layout === "constrained") {
-        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;
-}
-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, "%") } }));
-    }
-    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='".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"
-                } })));
-    }
-    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)),
-        children,
-        SERVER ? react_1["default"].createElement(NativeScriptLoading, null) : null));
-};
-exports.LayoutWrapper = LayoutWrapper;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = 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"])))
+    } })); };
+function getSizer(layout, width, height) {
+    var sizer = "";
+    if (layout === "fullWidth") {
+        sizer = "<div aria-hidden=\"true\" style=\"padding-top: ".concat((height / width) * 100, "%;\"></div>");
+    }
+    if (layout === "constrained") {
+        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;
+}
+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, "%") } }));
+    }
+    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='".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"
+                } })));
+    }
+    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)),
+        children,
+        SERVER ? react_1["default"].createElement(NativeScriptLoading, null) : null));
+};
+exports.LayoutWrapper = LayoutWrapper;
+var templateObject_1;

package/dist/components/lazy-hydrate.js

@@ -1,218 +1,218 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.renderImageToString = exports.swapPlaceholderImage = void 0;
-var react_1 = __importDefault(require("react"));
-var server_1 = require("react-dom/server");
-var layout_wrapper_1 = require("./layout-wrapper");
-var placeholder_1 = require("./placeholder");
-var main_image_1 = require("./main-image");
-var hooks_1 = require("./hooks");
-var intersection_observer_1 = require("./intersection-observer");
-function applyPolyfill(element) {
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!!("objectFitPolyfill" in window)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require(
-                        // @ts-ignore typescript can't find the module for some reason ¯\_(ツ)_/¯
-                        /* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ "objectFitPolyfill")); })];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    ;
-                    window.objectFitPolyfill(element);
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-function toggleLoaded(mainImage, placeholderImage) {
-    mainImage.style.opacity = "1";
-    if (placeholderImage) {
-        placeholderImage.style.opacity = "0";
-    }
-}
-function startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError) {
-    var mainImage = element.querySelector("[data-main-image]");
-    var placeholderImage = element.querySelector("[data-placeholder-image]");
-    var isCached = imageCache.has(cacheKey);
-    function onImageLoaded(e) {
-        var _this = this;
-        // eslint-disable-next-line @babel/no-invalid-this
-        this.removeEventListener("load", onImageLoaded);
-        var target = e.currentTarget;
-        var img = new Image();
-        img.src = target.currentSrc;
-        if (img.decode) {
-            // Decode the image through javascript to support our transition
-            img
-                .decode()
-                .then(function () {
-                // eslint-disable-next-line @babel/no-invalid-this
-                toggleLoaded(_this, placeholderImage);
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    wasCached: isCached
-                });
-            })["catch"](function (e) {
-                // eslint-disable-next-line @babel/no-invalid-this
-                toggleLoaded(_this, placeholderImage);
-                onError === null || onError === void 0 ? void 0 : onError(e);
-            });
-        }
-        else {
-            // eslint-disable-next-line @babel/no-invalid-this
-            toggleLoaded(this, placeholderImage);
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                wasCached: isCached
-            });
-        }
-    }
-    mainImage.addEventListener("load", onImageLoaded);
-    onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-        wasCached: isCached
-    });
-    Array.from(mainImage.parentElement.children).forEach(function (child) {
-        var src = child.getAttribute("data-src");
-        var srcSet = child.getAttribute("data-srcset");
-        if (src) {
-            child.removeAttribute("data-src");
-            child.setAttribute("src", src);
-        }
-        if (srcSet) {
-            child.removeAttribute("data-srcset");
-            child.setAttribute("srcset", srcSet);
-        }
-    });
-    imageCache.add(cacheKey);
-    // Load times not always fires - mostly when it's a 304
-    // We check if the image is already completed and if so we trigger onload.
-    if (mainImage.complete) {
-        onImageLoaded.call(mainImage, {
-            currentTarget: mainImage
-        });
-    }
-    return function () {
-        if (mainImage) {
-            mainImage.removeEventListener("load", onImageLoaded);
-        }
-    };
-}
-function swapPlaceholderImage(element, cacheKey, imageCache, style, onStartLoad, onLoad, onError) {
-    var _a, _b;
-    if (!(0, hooks_1.hasNativeLazyLoadSupport)()) {
-        var cleanup_1;
-        var io = (0, intersection_observer_1.createIntersectionObserver)(function () {
-            cleanup_1 = startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError);
-        });
-        var unobserve_1 = io(element);
-        // Polyfill "object-fit" if unsupported (mostly IE)
-        if (!("objectFit" in document.documentElement.style)) {
-            element.dataset.objectFit = (_a = style.objectFit) !== null && _a !== void 0 ? _a : "cover";
-            element.dataset.objectPosition = "".concat((_b = style.objectPosition) !== null && _b !== void 0 ? _b : "50% 50%");
-            applyPolyfill(element);
-        }
-        return function () {
-            if (cleanup_1) {
-                cleanup_1();
-            }
-            unobserve_1();
-        };
-    }
-    return startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError);
-}
-exports.swapPlaceholderImage = swapPlaceholderImage;
-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)))));
-}
-exports.renderImageToString = renderImageToString;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.renderImageToString = exports.swapPlaceholderImage = void 0;
+var react_1 = __importDefault(require("react"));
+var server_1 = require("react-dom/server");
+var layout_wrapper_1 = require("./layout-wrapper");
+var placeholder_1 = require("./placeholder");
+var main_image_1 = require("./main-image");
+var hooks_1 = require("./hooks");
+var intersection_observer_1 = require("./intersection-observer");
+function applyPolyfill(element) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!!("objectFitPolyfill" in window)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require(
+                        // @ts-ignore typescript can't find the module for some reason ¯\_(ツ)_/¯
+                        /* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ "objectFitPolyfill")); })];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    ;
+                    window.objectFitPolyfill(element);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function toggleLoaded(mainImage, placeholderImage) {
+    mainImage.style.opacity = "1";
+    if (placeholderImage) {
+        placeholderImage.style.opacity = "0";
+    }
+}
+function startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError) {
+    var mainImage = element.querySelector("[data-main-image]");
+    var placeholderImage = element.querySelector("[data-placeholder-image]");
+    var isCached = imageCache.has(cacheKey);
+    function onImageLoaded(e) {
+        var _this = this;
+        // eslint-disable-next-line @babel/no-invalid-this
+        this.removeEventListener("load", onImageLoaded);
+        var target = e.currentTarget;
+        var img = new Image();
+        img.src = target.currentSrc;
+        if (img.decode) {
+            // Decode the image through javascript to support our transition
+            img
+                .decode()
+                .then(function () {
+                // eslint-disable-next-line @babel/no-invalid-this
+                toggleLoaded(_this, placeholderImage);
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                    wasCached: isCached
+                });
+            })["catch"](function (e) {
+                // eslint-disable-next-line @babel/no-invalid-this
+                toggleLoaded(_this, placeholderImage);
+                onError === null || onError === void 0 ? void 0 : onError(e);
+            });
+        }
+        else {
+            // eslint-disable-next-line @babel/no-invalid-this
+            toggleLoaded(this, placeholderImage);
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                wasCached: isCached
+            });
+        }
+    }
+    mainImage.addEventListener("load", onImageLoaded);
+    onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
+        wasCached: isCached
+    });
+    Array.from(mainImage.parentElement.children).forEach(function (child) {
+        var src = child.getAttribute("data-src");
+        var srcSet = child.getAttribute("data-srcset");
+        if (src) {
+            child.removeAttribute("data-src");
+            child.setAttribute("src", src);
+        }
+        if (srcSet) {
+            child.removeAttribute("data-srcset");
+            child.setAttribute("srcset", srcSet);
+        }
+    });
+    imageCache.add(cacheKey);
+    // Load times not always fires - mostly when it's a 304
+    // We check if the image is already completed and if so we trigger onload.
+    if (mainImage.complete) {
+        onImageLoaded.call(mainImage, {
+            currentTarget: mainImage
+        });
+    }
+    return function () {
+        if (mainImage) {
+            mainImage.removeEventListener("load", onImageLoaded);
+        }
+    };
+}
+function swapPlaceholderImage(element, cacheKey, imageCache, style, onStartLoad, onLoad, onError) {
+    var _a, _b;
+    if (!(0, hooks_1.hasNativeLazyLoadSupport)()) {
+        var cleanup_1;
+        var io = (0, intersection_observer_1.createIntersectionObserver)(function () {
+            cleanup_1 = startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError);
+        });
+        var unobserve_1 = io(element);
+        // Polyfill "object-fit" if unsupported (mostly IE)
+        if (!("objectFit" in document.documentElement.style)) {
+            element.dataset.objectFit = (_a = style.objectFit) !== null && _a !== void 0 ? _a : "cover";
+            element.dataset.objectPosition = "".concat((_b = style.objectPosition) !== null && _b !== void 0 ? _b : "50% 50%");
+            applyPolyfill(element);
+        }
+        return function () {
+            if (cleanup_1) {
+                cleanup_1();
+            }
+            unobserve_1();
+        };
+    }
+    return startLoading(element, cacheKey, imageCache, onStartLoad, onLoad, onError);
+}
+exports.swapPlaceholderImage = swapPlaceholderImage;
+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)))));
+}
+exports.renderImageToString = renderImageToString;