gatsby-plugin-image 2.9.0 → 2.10.0-next.2

package/dist/components/intersection-observer.js

@@ -1,55 +1,55 @@
-"use strict";
-exports.__esModule = true;
-exports.createIntersectionObserver = void 0;
-var intersectionObserver;
-var ioEntryMap = new WeakMap();
-/* eslint-disable @typescript-eslint/no-explicit-any  */
-var connection = navigator.connection ||
-    navigator.mozConnection ||
-    navigator.webkitConnection;
-/* eslint-enable @typescript-eslint/no-explicit-any */
-// These match the thresholds used in Chrome's native lazy loading
-// @see https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds
-var FAST_CONNECTION_THRESHOLD = "1250px";
-var SLOW_CONNECTION_THRESHOLD = "2500px";
-function createIntersectionObserver(callback) {
-    var connectionType = connection === null || connection === void 0 ? void 0 : connection.effectiveType;
-    // if we don't support intersectionObserver we don't lazy load (Sorry IE 11).
-    if (!("IntersectionObserver" in window)) {
-        return function observe() {
-            callback();
-            return function unobserve() { };
-        };
-    }
-    if (!intersectionObserver) {
-        intersectionObserver = new IntersectionObserver(function (entries) {
-            entries.forEach(function (entry) {
-                var _a;
-                if (entry.isIntersecting) {
-                    // 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);
-                }
-            });
-        }, {
-            rootMargin: connectionType === "4g" && !(connection === null || connection === void 0 ? void 0 : connection.saveData)
-                ? FAST_CONNECTION_THRESHOLD
-                : SLOW_CONNECTION_THRESHOLD
-        });
-    }
-    return function observe(element) {
-        if (element.current) {
-            // Store a reference to the callback mapped to the element being watched
-            ioEntryMap.set(element.current, callback);
-            intersectionObserver.observe(element.current);
-        }
-        return function unobserve() {
-            if (intersectionObserver && element.current) {
-                ioEntryMap["delete"](element.current);
-                intersectionObserver.unobserve(element.current);
-            }
-        };
-    };
-}
-exports.createIntersectionObserver = createIntersectionObserver;
+"use strict";
+exports.__esModule = true;
+exports.createIntersectionObserver = void 0;
+var intersectionObserver;
+var ioEntryMap = new WeakMap();
+/* eslint-disable @typescript-eslint/no-explicit-any  */
+var connection = navigator.connection ||
+    navigator.mozConnection ||
+    navigator.webkitConnection;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+// These match the thresholds used in Chrome's native lazy loading
+// @see https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds
+var FAST_CONNECTION_THRESHOLD = "1250px";
+var SLOW_CONNECTION_THRESHOLD = "2500px";
+function createIntersectionObserver(callback) {
+    var connectionType = connection === null || connection === void 0 ? void 0 : connection.effectiveType;
+    // if we don't support intersectionObserver we don't lazy load (Sorry IE 11).
+    if (!("IntersectionObserver" in window)) {
+        return function observe() {
+            callback();
+            return function unobserve() { };
+        };
+    }
+    if (!intersectionObserver) {
+        intersectionObserver = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                var _a;
+                if (entry.isIntersecting) {
+                    // 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);
+                }
+            });
+        }, {
+            rootMargin: connectionType === "4g" && !(connection === null || connection === void 0 ? void 0 : connection.saveData)
+                ? FAST_CONNECTION_THRESHOLD
+                : SLOW_CONNECTION_THRESHOLD
+        });
+    }
+    return function observe(element) {
+        if (element.current) {
+            // Store a reference to the callback mapped to the element being watched
+            ioEntryMap.set(element.current, callback);
+            intersectionObserver.observe(element.current);
+        }
+        return function unobserve() {
+            if (intersectionObserver && element.current) {
+                ioEntryMap["delete"](element.current);
+                intersectionObserver.unobserve(element.current);
+            }
+        };
+    };
+}
+exports.createIntersectionObserver = createIntersectionObserver;

package/dist/components/layout-wrapper.js

@@ -1,94 +1,94 @@
-"use strict";
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../global.d.ts" />
-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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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  }\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  }\n}\n"])))
-    } })); };
-function getSizer(layout, width, height) {
-    var sizer = null;
-    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,
-        // eslint-disable-next-line no-undef
-        SERVER && react_1["default"].createElement(NativeScriptLoading, null)));
-};
-exports.LayoutWrapper = LayoutWrapper;
-var templateObject_1;
+"use strict";
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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  }\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  }\n}\n"])))
+    } })); };
+function getSizer(layout, width, height) {
+    var sizer = null;
+    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,
+        // eslint-disable-next-line no-undef
+        SERVER && react_1["default"].createElement(NativeScriptLoading, null)));
+};
+exports.LayoutWrapper = LayoutWrapper;
+var templateObject_1;

package/dist/components/lazy-hydrate.js

@@ -1,75 +1,75 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.lazyHydrate = void 0;
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-var layout_wrapper_1 = require("./layout-wrapper");
-var placeholder_1 = require("./placeholder");
-var main_image_1 = require("./main-image");
-var hooks_1 = require("./hooks");
-function lazyHydrate(_a, root, hydrated, forceHydrate) {
-    var image = _a.image, loading = _a.loading, isLoading = _a.isLoading, isLoaded = _a.isLoaded, toggleIsLoaded = _a.toggleIsLoaded, ref = _a.ref, imgClassName = _a.imgClassName, _b = _a.imgStyle, imgStyle = _b === void 0 ? {} : _b, objectPosition = _a.objectPosition, backgroundColor = _a.backgroundColor, _c = _a.objectFit, objectFit = _c === void 0 ? "cover" : _c, props = __rest(_a, ["image", "loading", "isLoading", "isLoaded", "toggleIsLoaded", "ref", "imgClassName", "imgStyle", "objectPosition", "backgroundColor", "objectFit"]);
-    var width = image.width, height = image.height, layout = image.layout, images = image.images, placeholder = image.placeholder, wrapperBackgroundColor = image.backgroundColor;
-    var cacheKey = JSON.stringify(images);
-    imgStyle = __assign({ objectFit: objectFit, objectPosition: objectPosition, backgroundColor: backgroundColor }, imgStyle);
-    var component = (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, toggleIsLoaded, cacheKey, ref, imgStyle)))));
-    if (root.current) {
-        // Force render to mitigate "Expected server HTML to contain a matching" in develop
-        // @ts-ignore react 18 typings
-        if (react_dom_1["default"].createRoot) {
-            if (!hydrated.current) {
-                // @ts-ignore react 18 typings
-                hydrated.current = react_dom_1["default"].createRoot(root.current);
-            }
-            // @ts-ignore react 18 typings
-            hydrated.current.render(component);
-        }
-        else {
-            var doRender = hydrated.current || forceHydrate.current
-                ? react_dom_1["default"].render
-                : react_dom_1["default"].hydrate;
-            doRender(component, root.current);
-            hydrated.current = true;
-        }
-    }
-    return function () {
-        if (root.current) {
-            // @ts-ignore react 18 typings
-            if (react_dom_1["default"].createRoot) {
-                // @ts-ignore react 18 typings
-                hydrated.current.render(null);
-            }
-            else {
-                react_dom_1["default"].render(null, root.current);
-            }
-        }
-    };
-}
-exports.lazyHydrate = lazyHydrate;
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.lazyHydrate = void 0;
+var react_1 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var layout_wrapper_1 = require("./layout-wrapper");
+var placeholder_1 = require("./placeholder");
+var main_image_1 = require("./main-image");
+var hooks_1 = require("./hooks");
+function lazyHydrate(_a, root, hydrated, forceHydrate) {
+    var image = _a.image, loading = _a.loading, isLoading = _a.isLoading, isLoaded = _a.isLoaded, toggleIsLoaded = _a.toggleIsLoaded, ref = _a.ref, imgClassName = _a.imgClassName, _b = _a.imgStyle, imgStyle = _b === void 0 ? {} : _b, objectPosition = _a.objectPosition, backgroundColor = _a.backgroundColor, _c = _a.objectFit, objectFit = _c === void 0 ? "cover" : _c, props = __rest(_a, ["image", "loading", "isLoading", "isLoaded", "toggleIsLoaded", "ref", "imgClassName", "imgStyle", "objectPosition", "backgroundColor", "objectFit"]);
+    var width = image.width, height = image.height, layout = image.layout, images = image.images, placeholder = image.placeholder, wrapperBackgroundColor = image.backgroundColor;
+    var cacheKey = JSON.stringify(images);
+    imgStyle = __assign({ objectFit: objectFit, objectPosition: objectPosition, backgroundColor: backgroundColor }, imgStyle);
+    var component = (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, toggleIsLoaded, cacheKey, ref, imgStyle)))));
+    if (root.current) {
+        // Force render to mitigate "Expected server HTML to contain a matching" in develop
+        // @ts-ignore react 18 typings
+        if (react_dom_1["default"].createRoot) {
+            if (!hydrated.current) {
+                // @ts-ignore react 18 typings
+                hydrated.current = react_dom_1["default"].createRoot(root.current);
+            }
+            // @ts-ignore react 18 typings
+            hydrated.current.render(component);
+        }
+        else {
+            var doRender = hydrated.current || forceHydrate.current
+                ? react_dom_1["default"].render
+                : react_dom_1["default"].hydrate;
+            doRender(component, root.current);
+            hydrated.current = true;
+        }
+    }
+    return function () {
+        if (root.current) {
+            // @ts-ignore react 18 typings
+            if (react_dom_1["default"].createRoot) {
+                // @ts-ignore react 18 typings
+                hydrated.current.render(null);
+            }
+            else {
+                react_dom_1["default"].render(null, root.current);
+            }
+        }
+    };
+}
+exports.lazyHydrate = lazyHydrate;

package/dist/components/main-image.js

@@ -1,43 +1,43 @@
-"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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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;
-};
-exports.__esModule = true;
-exports.MainImage = void 0;
-var react_1 = __importStar(require("react"));
-var picture_1 = require("./picture");
-exports.MainImage = (0, react_1.forwardRef)(function MainImage(props, ref) {
-    return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(picture_1.Picture, __assign({ ref: ref }, props)),
-        react_1["default"].createElement("noscript", null,
-            react_1["default"].createElement(picture_1.Picture, __assign({}, props, { shouldLoad: true })))));
-});
-exports.MainImage.displayName = "MainImage";
-exports.MainImage.propTypes = picture_1.Picture.propTypes;
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+exports.__esModule = true;
+exports.MainImage = void 0;
+var react_1 = __importStar(require("react"));
+var picture_1 = require("./picture");
+exports.MainImage = (0, react_1.forwardRef)(function MainImage(props, ref) {
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(picture_1.Picture, __assign({ ref: ref }, props)),
+        react_1["default"].createElement("noscript", null,
+            react_1["default"].createElement(picture_1.Picture, __assign({}, props, { shouldLoad: true })))));
+});
+exports.MainImage.displayName = "MainImage";
+exports.MainImage.propTypes = picture_1.Picture.propTypes;