gatsby-plugin-image 2.14.0-next.3 → 2.15.0-next.0

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

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -61,188 +46,115 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 exports.__esModule = true;
 exports.GatsbyImage = void 0;
-/* global HAS_REACT_18 */
-/* eslint-disable no-unused-expressions */
-var react_1 = __importStar(require("react"));
+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 reactRender;
-if (HAS_REACT_18) {
-    var reactDomClient_1 = require("react-dom/client");
-    reactRender = function (Component, el, root) {
-        if (!root) {
-            root = reactDomClient_1.createRoot(el);
-        }
-        root.render(Component);
-        return root;
-    };
-}
-else {
-    var reactDomClient_2 = require("react-dom");
-    reactRender = function (Component, el) {
-        reactDomClient_2.render(Component, el);
-    };
-}
-var GatsbyImageHydrator = /** @class */ (function (_super) {
-    __extends(GatsbyImageHydrator, _super);
-    function GatsbyImageHydrator(props) {
-        var _this_1 = _super.call(this, props) || this;
-        _this_1.root = (0, react_1.createRef)();
-        _this_1.hydrated = { current: false };
-        _this_1.forceRender = {
-            // In dev we use render not hydrate, to avoid hydration warnings
-            current: process.env.NODE_ENV === "development"
-        };
-        _this_1.lazyHydrator = null;
-        _this_1.ref = (0, react_1.createRef)();
-        _this_1.reactRootRef = (0, react_1.createRef)();
-        _this_1.state = {
-            isLoading: (0, hooks_1.hasNativeLazyLoadSupport)(),
-            isLoaded: false
-        };
-        return _this_1;
+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;
     }
-    GatsbyImageHydrator.prototype._lazyHydrate = function (props, state) {
-        var _this_1 = this;
-        var hasSSRHtml = this.root.current.querySelector("[data-gatsby-image-ssr]");
-        // On first server hydration do nothing
-        if ((0, hooks_1.hasNativeLazyLoadSupport)() && hasSSRHtml && !this.hydrated.current) {
-            this.hydrated.current = true;
-            return Promise.resolve();
+    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
+                };
+            });
         }
-        return Promise.resolve().then(function () { return __importStar(require("./lazy-hydrate")); }).then(function (_a) {
-            var lazyHydrate = _a.lazyHydrate;
-            var cacheKey = JSON.stringify(_this_1.props.image.images);
-            _this_1.lazyHydrator = lazyHydrate(__assign({ image: props.image.images, isLoading: state.isLoading || (0, hooks_1.hasImageLoaded)(cacheKey), isLoaded: state.isLoaded || (0, hooks_1.hasImageLoaded)(cacheKey), toggleIsLoaded: function () {
-                    var _a;
-                    (_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props);
-                    _this_1.setState({
-                        isLoaded: true
-                    });
-                }, ref: _this_1.ref }, props), _this_1.root, _this_1.hydrated, _this_1.forceRender, _this_1.reactRootRef);
-        });
-    };
-    /**
-     * Choose if setupIntersectionObserver should use the image cache or not.
-     */
-    GatsbyImageHydrator.prototype._setupIntersectionObserver = function (useCache) {
-        var _this_1 = this;
-        if (useCache === void 0) { useCache = true; }
-        Promise.resolve().then(function () { return __importStar(require("./intersection-observer")); }).then(function (_a) {
-            var createIntersectionObserver = _a.createIntersectionObserver;
-            var intersectionObserver = createIntersectionObserver(function () {
-                var _a, _b;
-                if (_this_1.root.current) {
-                    var cacheKey = JSON.stringify(_this_1.props.image.images);
-                    (_b = (_a = _this_1.props).onStartLoad) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                        wasCached: useCache && (0, hooks_1.hasImageLoaded)(cacheKey)
+        // 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
                     });
-                    _this_1.setState({
-                        isLoading: true,
-                        isLoaded: useCache && (0, hooks_1.hasImageLoaded)(cacheKey)
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                        wasCached: true
                     });
-                }
-            });
-            if (_this_1.root.current) {
-                _this_1.unobserveRef = intersectionObserver(_this_1.root);
+                    // 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);
+                });
             }
-        });
-    };
-    GatsbyImageHydrator.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        var _this_1 = this;
-        var hasChanged = false;
-        if (!this.state.isLoading && nextState.isLoading && !nextState.isLoaded) {
-            // Props have changed between SSR and hydration, so we need to force render instead of hydrate
-            this.forceRender.current = true;
+            imageCache.add(cacheKey);
+            return;
         }
-        // this check mostly means people do not have the correct ref checks in place, we want to reset some state to suppport loading effects
-        if (this.props.image.images !== nextProps.image.images) {
-            // reset state, we'll rely on intersection observer to reload
-            if (this.unobserveRef) {
-                // unregister intersectionObserver
-                this.unobserveRef();
-                // // on unmount, make sure we cleanup
-                if (this.hydrated.current && this.lazyHydrator) {
-                    this.reactRootRef.current = reactRender(null, this.root.current, this.reactRootRef.current);
-                }
-            }
-            this.setState({
-                isLoading: false,
-                isLoaded: false
-            }, function () {
-                _this_1._setupIntersectionObserver(false);
-            });
-            hasChanged = true;
+        if (renderImage && imageCache.has(cacheKey)) {
+            return;
         }
-        if (this.root.current && !hasChanged) {
-            this._lazyHydrate(nextProps, nextState);
-        }
-        return false;
-    };
-    GatsbyImageHydrator.prototype.componentDidMount = function () {
-        var _a, _b, _c, _d;
-        if (this.root.current) {
-            var ssrElement_1 = this.root.current.querySelector("[data-gatsby-image-ssr]");
-            var cacheKey_1 = JSON.stringify(this.props.image.images);
-            // when SSR and native lazyload is supported we'll do nothing ;)
-            if ((0, hooks_1.hasNativeLazyLoadSupport)() &&
-                ssrElement_1 &&
-                (0, hooks_1.gatsbyImageIsInstalled)()) {
-                (_b = (_a = this.props).onStartLoad) === null || _b === void 0 ? void 0 : _b.call(_a, { wasCached: false });
-                // When the image is already loaded before we have hydrated, we trigger onLoad and cache the item
-                if (ssrElement_1.complete) {
-                    (_d = (_c = this.props).onLoad) === null || _d === void 0 ? void 0 : _d.call(_c);
-                    (0, hooks_1.storeImageloaded)(cacheKey_1);
-                }
-                else {
-                    // We need the current class context (this) inside our named onLoad function
-                    // The named function is necessary to easily remove the listener afterward.
-                    // eslint-disable-next-line @typescript-eslint/no-this-alias
-                    var _this_2 = this;
-                    // add an onLoad to the image
-                    ssrElement_1.addEventListener("load", function onLoad() {
-                        var _a, _b;
-                        ssrElement_1.removeEventListener("load", onLoad);
-                        (_b = (_a = _this_2.props).onLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        (0, hooks_1.storeImageloaded)(cacheKey_1);
-                    });
-                }
-                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);
+                    }
+                });
             }
-            // Fallback to custom lazy loading (intersection observer)
-            this._setupIntersectionObserver(true);
-        }
-    };
-    GatsbyImageHydrator.prototype.componentWillUnmount = function () {
-        // Cleanup when onmount happens
-        if (this.unobserveRef) {
-            // unregister intersectionObserver
-            this.unobserveRef();
-            // on unmount, make sure we cleanup
-            if (this.hydrated.current && this.lazyHydrator) {
-                this.lazyHydrator();
+        });
+        // 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
+            });
         }
-        return;
-    };
-    GatsbyImageHydrator.prototype.render = function () {
-        var Type = this.props.as || "div";
-        var _a = this.props.image, width = _a.width, height = _a.height, layout = _a.layout;
-        var _b = (0, hooks_1.getWrapperProps)(width, height, layout), wStyle = _b.style, wClass = _b.className, wrapperProps = __rest(_b, ["style", "className"]);
-        var className = this.props.className;
-        // preact class
-        if (this.props["class"]) {
-            className = this.props["class"];
-        }
-        var sizer = (0, layout_wrapper_1.getSizer)(layout, width, height);
-        return (react_1["default"].createElement(Type, __assign({}, wrapperProps, { style: __assign(__assign(__assign({}, wStyle), this.props.style), { backgroundColor: this.props.backgroundColor }), className: "".concat(wClass).concat(className ? " ".concat(className) : ""), ref: this.root, dangerouslySetInnerHTML: {
-                __html: sizer
-            }, suppressHydrationWarning: true })));
-    };
-    return GatsbyImageHydrator;
-}(react_1.Component));
-var GatsbyImage = function GatsbyImage(props) {
+    }, [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");
@@ -252,18 +164,7 @@ var GatsbyImage = function GatsbyImage(props) {
     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");
     }
-    var className = props.className, classSafe = props["class"], backgroundColor = props.backgroundColor, image = props.image;
-    var width = image.width, height = image.height, layout = image.layout;
-    var propsKey = JSON.stringify([
-        width,
-        height,
-        layout,
-        className,
-        classSafe,
-        backgroundColor,
-    ]);
-    return react_1["default"].createElement(GatsbyImageHydrator, __assign({ key: propsKey }, props));
-};
-exports.GatsbyImage = GatsbyImage;
+    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

@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.propTypes = exports.altValidator = exports.GatsbyImage = exports.GatsbyImageHydrator = void 0;
+exports.propTypes = exports.altValidator = exports.GatsbyImage = void 0;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("./hooks");
 var placeholder_1 = require("./placeholder");
@@ -58,13 +58,8 @@ 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 GatsbyImageHydrator = function GatsbyImageHydrator(_a) {
-    var _b = _a.as, Type = _b === void 0 ? "div" : _b, children = _a.children, props = __rest(_a, ["as", "children"]);
-    return react_1["default"].createElement(Type, __assign({}, props), children);
-};
-exports.GatsbyImageHydrator = GatsbyImageHydrator;
 var GatsbyImage = function GatsbyImage(_a) {
-    var as = _a.as, className = _a.className, preactClass = _a["class"], style = _a.style, image = _a.image, _b = _a.loading, loading = _b === void 0 ? "lazy" : _b, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, backgroundColor = _a.backgroundColor, objectFit = _a.objectFit, objectPosition = _a.objectPosition, props = __rest(_a, ["as", "className", "class", "style", "image", "loading", "imgClassName", "imgStyle", "backgroundColor", "objectFit", "objectPosition"]);
+    var _b = _a.as, as = _b === void 0 ? "div" : _b, className = _a.className, preactClass = _a["class"], style = _a.style, image = _a.image, _c = _a.loading, loading = _c === void 0 ? "lazy" : _c, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, backgroundColor = _a.backgroundColor, objectFit = _a.objectFit, objectPosition = _a.objectPosition, props = __rest(_a, ["as", "className", "class", "style", "image", "loading", "imgClassName", "imgStyle", "backgroundColor", "objectFit", "objectPosition"]);
     if (!image) {
         console.warn("[gatsby-plugin-image] Missing image prop");
         return null;
@@ -74,7 +69,7 @@ var GatsbyImage = function GatsbyImage(_a) {
     }
     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 _c = (0, hooks_1.getWrapperProps)(width, height, layout), wStyle = _c.style, wClass = _c.className, wrapperProps = __rest(_c, ["style", "className"]);
+    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: []
@@ -89,10 +84,9 @@ var GatsbyImage = function GatsbyImage(_a) {
             return __assign(__assign({}, source), { srcSet: removeNewLines(source.srcSet) });
         });
     }
-    return (react_1["default"].createElement(exports.GatsbyImageHydrator, __assign({}, wrapperProps, { as: as, style: __assign(__assign(__assign({}, wStyle), style), { backgroundColor: backgroundColor }), className: "".concat(wClass).concat(className ? " ".concat(className) : "") }),
-        react_1["default"].createElement(layout_wrapper_1.LayoutWrapper, { layout: layout, width: width, height: height },
-            react_1["default"].createElement(placeholder_1.Placeholder, __assign({}, (0, hooks_1.getPlaceholderProps)(placeholder, false, layout, width, height, placeholderBackgroundColor, objectFit, objectPosition))),
-            react_1["default"].createElement(main_image_1.MainImage, __assign({ "data-gatsby-image-ssr": "", className: imgClassName }, props, (0, hooks_1.getMainProps)(loading === "eager", false, cleanedImages, loading, undefined, undefined, undefined, imgStyle))))));
+    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) {

package/dist/components/hooks.js

@@ -10,65 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -106,11 +47,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 exports.__esModule = true;
-exports.withArtDirection = exports.useImageLoaded = exports.getPlaceholderProps = exports.getMainProps = exports.getImageData = exports.applyPolyfill = exports.getWrapperProps = exports.getSrcSet = exports.getSrc = exports.getImage = exports.hasImageLoaded = exports.storeImageloaded = exports.gatsbyImageIsInstalled = exports.hasNativeLazyLoadSupport = void 0;
-/* eslint-disable no-unused-expressions */
-var react_1 = require("react");
+exports.withArtDirection = exports.getPlaceholderProps = exports.getMainProps = exports.getImageData = exports.getWrapperProps = exports.getSrcSet = exports.getSrc = exports.getImage = exports.gatsbyImageIsInstalled = exports.hasNativeLazyLoadSupport = void 0;
+/* global GATSBY___IMAGE */
 var image_utils_1 = require("../image-utils");
-var imageCache = new Set();
 // Native lazy-loading support: https://addyosmani.com/blog/lazy-loading/
 var hasNativeLazyLoadSupport = function () {
     return typeof HTMLImageElement !== "undefined" &&
@@ -121,16 +60,6 @@ function gatsbyImageIsInstalled() {
     return typeof GATSBY___IMAGE !== "undefined" && GATSBY___IMAGE;
 }
 exports.gatsbyImageIsInstalled = gatsbyImageIsInstalled;
-function storeImageloaded(cacheKey) {
-    if (cacheKey) {
-        imageCache.add(cacheKey);
-    }
-}
-exports.storeImageloaded = storeImageloaded;
-function hasImageLoaded(cacheKey) {
-    return imageCache.has(cacheKey);
-}
-exports.hasImageLoaded = hasImageLoaded;
 var isGatsbyImageData = function (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 node) { var _a, _b; 
@@ -139,14 +68,22 @@ return Boolean((_b = (_a = node === null || node === void 0 ? void 0 : node.imag
 var isGatsbyImageDataParent = function (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 node) { return Boolean(node === null || node === void 0 ? void 0 : node.gatsbyImageData); };
+var isGatsbyImageParent = function (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+node) { return Boolean(node === null || node === void 0 ? void 0 : node.gatsbyImage); };
 var getImage = function (node) {
     var _a;
     if (isGatsbyImageData(node)) {
         return node;
     }
+    // gatsbyImageData GraphQL field
     if (isGatsbyImageDataParent(node)) {
         return node.gatsbyImageData;
     }
+    // gatsbyImage GraphQL field for Gatsby's Image CDN service
+    if (isGatsbyImageParent(node)) {
+        return node.gatsbyImage;
+    }
     return (_a = node === null || node === void 0 ? void 0 : node.childImageSharp) === null || _a === void 0 ? void 0 : _a.gatsbyImageData;
 };
 exports.getImage = getImage;
@@ -180,27 +117,6 @@ function getWrapperProps(width, height, layout) {
     };
 }
 exports.getWrapperProps = getWrapperProps;
-function applyPolyfill(ref) {
-    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(ref.current);
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-exports.applyPolyfill = applyPolyfill;
 /**
  * Use this hook to generate gatsby-plugin-image data in the browser.
  */
@@ -227,42 +143,13 @@ function getImageData(_a) {
     return (0, image_utils_1.generateImageData)(args);
 }
 exports.getImageData = getImageData;
-function getMainProps(isLoading, isLoaded, images, loading, toggleLoaded, cacheKey, ref, style) {
-    var _a, _b;
+function getMainProps(isLoading, isLoaded, images, loading, style) {
     if (style === void 0) { style = {}; }
-    var onLoad = function (e) {
-        if (isLoaded) {
-            return;
-        }
-        storeImageloaded(cacheKey);
-        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()["catch"](function () {
-                // ignore error, we just go forward
-            })
-                .then(function () {
-                toggleLoaded(true);
-            });
-        }
-        else {
-            toggleLoaded(true);
-        }
-    };
-    // Polyfill "object-fit" if unsupported (mostly IE)
-    if ((ref === null || ref === void 0 ? void 0 : ref.current) && !("objectFit" in document.documentElement.style)) {
-        ref.current.dataset.objectFit = (_a = style.objectFit) !== null && _a !== void 0 ? _a : "cover";
-        ref.current.dataset.objectPosition = "".concat((_b = style.objectPosition) !== null && _b !== void 0 ? _b : "50% 50%");
-        applyPolyfill(ref);
-    }
     // fallback when it's not configured in gatsby-config.
     if (!gatsbyImageIsInstalled()) {
         style = __assign({ height: "100%", left: 0, position: "absolute", top: 0, transform: "translateZ(0)", transition: "opacity 250ms linear", width: "100%", willChange: "opacity" }, style);
     }
-    var result = __assign(__assign({}, images), { loading: loading, shouldLoad: isLoading, "data-main-image": "", style: __assign(__assign({}, style), { opacity: isLoaded ? 1 : 0 }), onLoad: onLoad, ref: ref });
+    var result = __assign(__assign({}, images), { loading: loading, shouldLoad: isLoading, "data-main-image": "", style: __assign(__assign({}, style), { opacity: isLoaded ? 1 : 0 }) });
     return result;
 }
 exports.getMainProps = getMainProps;
@@ -311,46 +198,6 @@ function getPlaceholderProps(placeholder, isLoaded, layout, width, height, backg
     return result;
 }
 exports.getPlaceholderProps = getPlaceholderProps;
-function useImageLoaded(cacheKey, loading, ref) {
-    var _a = __read((0, react_1.useState)(false), 2), isLoaded = _a[0], toggleLoaded = _a[1];
-    var _b = __read((0, react_1.useState)(loading === "eager"), 2), isLoading = _b[0], toggleIsLoading = _b[1];
-    var rAF = typeof window !== "undefined" && "requestAnimationFrame" in window
-        ? requestAnimationFrame
-        : function (cb) {
-            return setTimeout(cb, 16);
-        };
-    var cRAF = typeof window !== "undefined" && "cancelAnimationFrame" in window
-        ? cancelAnimationFrame
-        : clearTimeout;
-    (0, react_1.useEffect)(function () {
-        var interval;
-        // @see https://stackoverflow.com/questions/44074747/componentdidmount-called-before-ref-callback/50019873#50019873
-        function toggleIfRefExists() {
-            if (ref.current) {
-                if (loading === "eager" && ref.current.complete) {
-                    storeImageloaded(cacheKey);
-                    toggleLoaded(true);
-                }
-                else {
-                    toggleIsLoading(true);
-                }
-            }
-            else {
-                interval = rAF(toggleIfRefExists);
-            }
-        }
-        toggleIfRefExists();
-        return function () {
-            cRAF(interval);
-        };
-    }, []);
-    return {
-        isLoading: isLoading,
-        isLoaded: isLoaded,
-        toggleLoaded: toggleLoaded
-    };
-}
-exports.useImageLoaded = useImageLoaded;
 /**
  * Generate a Gatsby image data object with multiple, art-directed images that display at different
  * resolutions.

package/dist/components/intersection-observer.js

@@ -39,15 +39,13 @@ function createIntersectionObserver(callback) {
         });
     }
     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);
-        }
+        // Store a reference to the callback mapped to the element being watched
+        ioEntryMap.set(element, callback);
+        intersectionObserver.observe(element);
         return function unobserve() {
-            if (intersectionObserver && element.current) {
-                ioEntryMap["delete"](element.current);
-                intersectionObserver.unobserve(element.current);
+            if (intersectionObserver && element) {
+                ioEntryMap["delete"](element);
+                intersectionObserver.unobserve(element);
             }
         };
     };