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

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

@@ -1,170 +1,170 @@
-"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 __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;
-};
-exports.__esModule = true;
-exports.GatsbyImage = void 0;
-var react_1 = require("react");
-var hooks_1 = require("./hooks");
-var layout_wrapper_1 = require("./layout-wrapper");
-var gatsby_image_server_1 = require("./gatsby-image.server");
-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 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)();
-    var cacheKey = (0, react_1.useMemo)(function () { return JSON.stringify(image.images); }, [image.images]);
-    // Preact uses class instead of className so we need to check for both
-    if (preactClass) {
-        className = preactClass;
-    }
-    var sizer = (0, layout_wrapper_1.getSizer)(layout, width, height);
-    (0, react_1.useEffect)(function () {
-        if (!renderImageToStringPromise) {
-            renderImageToStringPromise = Promise.resolve().then(function () { return __importStar(require("./lazy-hydrate")); }).then(function (_a) {
-                var renderImageToString = _a.renderImageToString, swapPlaceholderImage = _a.swapPlaceholderImage;
-                renderImage = renderImageToString;
-                return {
-                    renderImageToString: renderImageToString,
-                    swapPlaceholderImage: swapPlaceholderImage
-                };
-            });
-        }
-        // The plugin image component is a bit special where if it's server-side rendered, we add extra script tags to support lazy-loading without
-        // In this case we stop hydration but fire the correct events.
-        var ssrImage = root.current.querySelector("[data-gatsby-image-ssr]");
-        if (ssrImage && (0, hooks_1.hasNativeLazyLoadSupport)()) {
-            if (ssrImage.complete) {
-                // Trigger onStartload and onLoad events
-                onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-                    wasCached: true
-                });
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    wasCached: true
-                });
-                // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
-                setTimeout(function () {
-                    ssrImage.removeAttribute("data-gatsby-image-ssr");
-                }, 0);
-            }
-            else {
-                document.addEventListener("load", function onLoadListener() {
-                    document.removeEventListener("load", onLoadListener);
-                    onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
-                        wasCached: true
-                    });
-                    onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                        wasCached: true
-                    });
-                    // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
-                    setTimeout(function () {
-                        ssrImage.removeAttribute("data-gatsby-image-ssr");
-                    }, 0);
-                });
-            }
-            imageCache.add(cacheKey);
-            return;
-        }
-        if (renderImage && imageCache.has(cacheKey)) {
-            return;
-        }
-        var animationFrame;
-        var cleanupCallback;
-        renderImageToStringPromise.then(function (_a) {
-            var renderImageToString = _a.renderImageToString, swapPlaceholderImage = _a.swapPlaceholderImage;
-            root.current.innerHTML = renderImageToString(__assign({ isLoading: true, isLoaded: imageCache.has(cacheKey), image: image }, props));
-            if (!imageCache.has(cacheKey)) {
-                animationFrame = requestAnimationFrame(function () {
-                    if (root.current) {
-                        cleanupCallback = swapPlaceholderImage(root.current, cacheKey, imageCache, style, onStartLoad, onLoad, onError);
-                    }
-                });
-            }
-        });
-        // eslint-disable-next-line consistent-return
-        return function () {
-            if (animationFrame) {
-                cancelAnimationFrame(animationFrame);
-            }
-            if (cleanupCallback) {
-                cleanupCallback();
-            }
-        };
-    }, [image]);
-    // useLayoutEffect is ran before React commits to the DOM. This allows us to make sure our HTML is using our cached image version
-    (0, react_1.useLayoutEffect)(function () {
-        if (imageCache.has(cacheKey) && renderImage) {
-            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
-            });
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                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
-        }, suppressHydrationWarning: true }));
-};
-exports.GatsbyImage = (0, react_1.memo)(function GatsbyImage(props) {
-    if (!props.image) {
-        if (process.env.NODE_ENV === "development") {
-            console.warn("[gatsby-plugin-image] Missing image prop");
-        }
-        return null;
-    }
-    if (!(0, hooks_1.gatsbyImageIsInstalled)() && process.env.NODE_ENV === "development") {
-        console.warn("[gatsby-plugin-image] You're missing out on some cool performance features. Please add \"gatsby-plugin-image\" to your gatsby-config.js");
-    }
-    return (0, react_1.createElement)(GatsbyImageHydrator, props);
-});
-exports.GatsbyImage.propTypes = gatsby_image_server_1.propTypes;
-exports.GatsbyImage.displayName = "GatsbyImage";
+"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 __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;
+};
+exports.__esModule = true;
+exports.GatsbyImage = void 0;
+var react_1 = require("react");
+var hooks_1 = require("./hooks");
+var layout_wrapper_1 = require("./layout-wrapper");
+var gatsby_image_server_1 = require("./gatsby-image.server");
+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 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)();
+    var cacheKey = (0, react_1.useMemo)(function () { return JSON.stringify(image.images); }, [image.images]);
+    // Preact uses class instead of className so we need to check for both
+    if (preactClass) {
+        className = preactClass;
+    }
+    var sizer = (0, layout_wrapper_1.getSizer)(layout, width, height);
+    (0, react_1.useEffect)(function () {
+        if (!renderImageToStringPromise) {
+            renderImageToStringPromise = Promise.resolve().then(function () { return __importStar(require("./lazy-hydrate")); }).then(function (_a) {
+                var renderImageToString = _a.renderImageToString, swapPlaceholderImage = _a.swapPlaceholderImage;
+                renderImage = renderImageToString;
+                return {
+                    renderImageToString: renderImageToString,
+                    swapPlaceholderImage: swapPlaceholderImage
+                };
+            });
+        }
+        // The plugin image component is a bit special where if it's server-side rendered, we add extra script tags to support lazy-loading without
+        // In this case we stop hydration but fire the correct events.
+        var ssrImage = root.current.querySelector("[data-gatsby-image-ssr]");
+        if (ssrImage && (0, hooks_1.hasNativeLazyLoadSupport)()) {
+            if (ssrImage.complete) {
+                // Trigger onStartload and onLoad events
+                onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
+                    wasCached: true
+                });
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                    wasCached: true
+                });
+                // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
+                setTimeout(function () {
+                    ssrImage.removeAttribute("data-gatsby-image-ssr");
+                }, 0);
+            }
+            else {
+                document.addEventListener("load", function onLoadListener() {
+                    document.removeEventListener("load", onLoadListener);
+                    onStartLoad === null || onStartLoad === void 0 ? void 0 : onStartLoad({
+                        wasCached: true
+                    });
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                        wasCached: true
+                    });
+                    // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
+                    setTimeout(function () {
+                        ssrImage.removeAttribute("data-gatsby-image-ssr");
+                    }, 0);
+                });
+            }
+            imageCache.add(cacheKey);
+            return;
+        }
+        if (renderImage && imageCache.has(cacheKey)) {
+            return;
+        }
+        var animationFrame;
+        var cleanupCallback;
+        renderImageToStringPromise.then(function (_a) {
+            var renderImageToString = _a.renderImageToString, swapPlaceholderImage = _a.swapPlaceholderImage;
+            root.current.innerHTML = renderImageToString(__assign({ isLoading: true, isLoaded: imageCache.has(cacheKey), image: image }, props));
+            if (!imageCache.has(cacheKey)) {
+                animationFrame = requestAnimationFrame(function () {
+                    if (root.current) {
+                        cleanupCallback = swapPlaceholderImage(root.current, cacheKey, imageCache, style, onStartLoad, onLoad, onError);
+                    }
+                });
+            }
+        });
+        // eslint-disable-next-line consistent-return
+        return function () {
+            if (animationFrame) {
+                cancelAnimationFrame(animationFrame);
+            }
+            if (cleanupCallback) {
+                cleanupCallback();
+            }
+        };
+    }, [image]);
+    // useLayoutEffect is ran before React commits to the DOM. This allows us to make sure our HTML is using our cached image version
+    (0, react_1.useLayoutEffect)(function () {
+        if (imageCache.has(cacheKey) && renderImage) {
+            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
+            });
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                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
+        }, suppressHydrationWarning: true }));
+};
+exports.GatsbyImage = (0, react_1.memo)(function GatsbyImage(props) {
+    if (!props.image) {
+        if (process.env.NODE_ENV === "development") {
+            console.warn("[gatsby-plugin-image] Missing image prop");
+        }
+        return null;
+    }
+    if (!(0, hooks_1.gatsbyImageIsInstalled)() && process.env.NODE_ENV === "development") {
+        console.warn("[gatsby-plugin-image] You're missing out on some cool performance features. Please add \"gatsby-plugin-image\" to your gatsby-config.js");
+    }
+    return (0, react_1.createElement)(GatsbyImageHydrator, props);
+});
+exports.GatsbyImage.propTypes = gatsby_image_server_1.propTypes;
+exports.GatsbyImage.displayName = "GatsbyImage";

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

@@ -1,106 +1,106 @@
-"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 __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 __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.propTypes = exports.altValidator = exports.GatsbyImage = void 0;
-var react_1 = __importDefault(require("react"));
-var hooks_1 = require("./hooks");
-var placeholder_1 = require("./placeholder");
-var main_image_1 = require("./main-image");
-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"]);
-    if (!image) {
-        console.warn("[gatsby-plugin-image] Missing image prop");
-        return null;
-    }
-    if (preactClass) {
-        className = preactClass;
-    }
-    imgStyle = __assign({ objectFit: objectFit, objectPosition: objectPosition, backgroundColor: backgroundColor }, imgStyle);
-    var width = image.width, height = image.height, layout = image.layout, images = image.images, placeholder = image.placeholder, placeholderBackgroundColor = image.backgroundColor;
-    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: []
-    };
-    if (images.fallback) {
-        cleanedImages.fallback = __assign(__assign({}, images.fallback), { srcSet: images.fallback.srcSet
-                ? removeNewLines(images.fallback.srcSet)
-                : undefined });
-    }
-    if (images.sources) {
-        cleanedImages.sources = images.sources.map(function (source) {
-            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)))));
-};
-exports.GatsbyImage = GatsbyImage;
-var altValidator = function (props, propName, componentName) {
-    var rest = [];
-    for (var _i = 3; _i < arguments.length; _i++) {
-        rest[_i - 3] = arguments[_i];
-    }
-    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));
-};
-exports.altValidator = altValidator;
-exports.propTypes = {
-    image: prop_types_1["default"].object.isRequired,
-    alt: exports.altValidator
-};
+"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 __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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.propTypes = exports.altValidator = exports.GatsbyImage = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("./hooks");
+var placeholder_1 = require("./placeholder");
+var main_image_1 = require("./main-image");
+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"]);
+    if (!image) {
+        console.warn("[gatsby-plugin-image] Missing image prop");
+        return null;
+    }
+    if (preactClass) {
+        className = preactClass;
+    }
+    imgStyle = __assign({ objectFit: objectFit, objectPosition: objectPosition, backgroundColor: backgroundColor }, imgStyle);
+    var width = image.width, height = image.height, layout = image.layout, images = image.images, placeholder = image.placeholder, placeholderBackgroundColor = image.backgroundColor;
+    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: []
+    };
+    if (images.fallback) {
+        cleanedImages.fallback = __assign(__assign({}, images.fallback), { srcSet: images.fallback.srcSet
+                ? removeNewLines(images.fallback.srcSet)
+                : undefined });
+    }
+    if (images.sources) {
+        cleanedImages.sources = images.sources.map(function (source) {
+            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)))));
+};
+exports.GatsbyImage = GatsbyImage;
+var altValidator = function (props, propName, componentName) {
+    var rest = [];
+    for (var _i = 3; _i < arguments.length; _i++) {
+        rest[_i - 3] = arguments[_i];
+    }
+    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));
+};
+exports.altValidator = altValidator;
+exports.propTypes = {
+    image: prop_types_1["default"].object.isRequired,
+    alt: exports.altValidator
+};