gatsby-plugin-image 2.13.0 → 2.14.0-alpha-transformer-json.26

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.24.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.24.0/packages/gatsby-plugin-image) (2022-09-27)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.24)
+
+#### Chores
+
+- allow react/react-dom@experimental [#36533](https://github.com/gatsbyjs/gatsby/issues/36533) ([7ef4a3f](https://github.com/gatsbyjs/gatsby/commit/7ef4a3fe080d45e9edaff9f1d4deebd12a00ddbd))
+
+### [2.23.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.23.1/packages/gatsby-plugin-image) (2022-09-22)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
+## [2.23.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.23.0/packages/gatsby-plugin-image) (2022-09-13)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.23)
+
+#### Features
+
+- Client export directive [#36470](https://github.com/gatsbyjs/gatsby/issues/36470) ([320efb7](https://github.com/gatsbyjs/gatsby/commit/320efb77079f7adf4c89b885a7f34e4cc3951906))
+
+## [2.22.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.22.0/packages/gatsby-plugin-image) (2022-08-30)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.22)
+
+#### Bug Fixes
+
+- Make onLoad callback work on first load [#36375](https://github.com/gatsbyjs/gatsby/issues/36375) ([3dfc1ec](https://github.com/gatsbyjs/gatsby/commit/3dfc1ec1c03a962bfdcf3db6ec200883d612d3ad))
+
+## [2.21.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.21.0/packages/gatsby-plugin-image) (2022-08-16)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.21)
+
+#### Bug Fixes
+
+- Add `outputPixelDensities` to `SHARP_ATTRIBUTES` [#36203](https://github.com/gatsbyjs/gatsby/issues/36203) ([ae226b5](https://github.com/gatsbyjs/gatsby/commit/ae226b589369e3b724cc3b5ded5b7b1b1a907afb))
+
+## [2.20.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.20.0/packages/gatsby-plugin-image) (2022-08-02)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.20)
+
+#### Bug Fixes
+
+- Correct type for getImage [#36169](https://github.com/gatsbyjs/gatsby/issues/36169) ([b3f434b](https://github.com/gatsbyjs/gatsby/commit/b3f434b38b9a5cbcbfb6d4afca260b39cdeb76a4))
+
+#### Chores
+
+- update dependency typescript to ^4.7.4 [#36030](https://github.com/gatsbyjs/gatsby/issues/36030) ([94a3264](https://github.com/gatsbyjs/gatsby/commit/94a32647a8c45de620d2efe99310805910586c8a))
+
+## [2.19.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.19.0/packages/gatsby-plugin-image) (2022-07-19)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.19)
+
+#### Features
+
+- Publish some packages as ESM & CJS [#36012](https://github.com/gatsbyjs/gatsby/issues/36012) ([5bd3063](https://github.com/gatsbyjs/gatsby/commit/5bd3063a1e72c6f98447bfac2bf767cca781330b))
+
+### [2.18.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.18.1/packages/gatsby-plugin-image) (2022-07-12)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
+## [2.18.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.18.0/packages/gatsby-plugin-image) (2022-07-05)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.18)
+
+#### Bug Fixes
+
+- update dependency chokidar to ^3.5.3 [#34643](https://github.com/gatsbyjs/gatsby/issues/34643) ([9b308cb](https://github.com/gatsbyjs/gatsby/commit/9b308cb744047beeea3a5b2f500fbf5a8b8ef2d5))
+
+## [2.17.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.17.0/packages/gatsby-plugin-image) (2022-06-21)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.17)
+
+#### Bug Fixes
+
+- Handle immediate unmount [#35878](https://github.com/gatsbyjs/gatsby/issues/35878) ([fbdec7e](https://github.com/gatsbyjs/gatsby/commit/fbdec7e29b14528972bb6882c4f012aac3953b76))
+
+### [2.16.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.16.1/packages/gatsby-plugin-image) (2022-06-08)
+
+#### Bug Fixes
+
+- Handle immediate unmount [#35878](https://github.com/gatsbyjs/gatsby/issues/35878) [#35883](https://github.com/gatsbyjs/gatsby/issues/35883) ([e2cf510](https://github.com/gatsbyjs/gatsby/commit/e2cf51067122885126cabcc55816e1bcb6111df5))
+
+## [2.16.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.16.0/packages/gatsby-plugin-image) (2022-06-07)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.16)
+
+#### Bug Fixes
+
+- Update `createRemoteFileNode` args [#35422](https://github.com/gatsbyjs/gatsby/issues/35422) fixes [#35363](https://github.com/gatsbyjs/gatsby/issues/35363) ([caaf7a5](https://github.com/gatsbyjs/gatsby/commit/caaf7a555bb42043044f05743eec0ac1ad372cc4))
+
+#### Chores
+
+- update dependency typescript to ^4.7.2 [#35808](https://github.com/gatsbyjs/gatsby/issues/35808) ([2c55b79](https://github.com/gatsbyjs/gatsby/commit/2c55b794dd95b40a994f56df5f912219771ccab4))
+
+### [2.15.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.15.1/packages/gatsby-plugin-image) (2022-06-01)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
+## [2.15.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.15.0/packages/gatsby-plugin-image) (2022-05-24)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.15)
+
+#### Bug Fixes
+
+- Throw Typegen errors & add `IGatsbyImageData` to output [#35683](https://github.com/gatsbyjs/gatsby/issues/35683) ([e7fc88b](https://github.com/gatsbyjs/gatsby/commit/e7fc88b024c84a3e9f732deec7441621024e1f95))
+- fix race condition fix [#35635](https://github.com/gatsbyjs/gatsby/issues/35635) ([12cb033](https://github.com/gatsbyjs/gatsby/commit/12cb033f7998427cfbabe8d833a7c2bd516f3b1f))
+
+#### Chores
+
+- don't use npm-run-all to build packages ([fb4de37](https://github.com/gatsbyjs/gatsby/commit/fb4de379e914892c8ce437d4613b60499cfeb897))
+- workaround lerna + npm-run-all weirdness [#35595](https://github.com/gatsbyjs/gatsby/issues/35595) ([8cc0970](https://github.com/gatsbyjs/gatsby/commit/8cc09702f9a2767c51cf5267233108c07e4ac073))
+
+### [2.14.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.14.1/packages/gatsby-plugin-image) (2022-05-12)
+
+#### Bug Fixes
+
+- fix race condition fix [#35635](https://github.com/gatsbyjs/gatsby/issues/35635) fix [#35640](https://github.com/gatsbyjs/gatsby/issues/35640) ([5566d44](https://github.com/gatsbyjs/gatsby/commit/5566d448edd4f82ba13edda0af51e8aa0362e367))
+
+## [2.14.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.14.0/packages/gatsby-plugin-image) (2022-05-10)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.14)
+
+#### Features
+
+- add check for node.gatsbyImage in the getImage helper [#35507](https://github.com/gatsbyjs/gatsby/issues/35507) ([abc6dca](https://github.com/gatsbyjs/gatsby/commit/abc6dca7a24bd1fcf8946ce23e09d50c914ac589))
+
+#### Bug Fixes
+
+- fix image flickers fix [#35226](https://github.com/gatsbyjs/gatsby/issues/35226) ([9a91295](https://github.com/gatsbyjs/gatsby/commit/9a912956a5ea66be7281f6263928b64f20ff1d53))
+- update dependency fs-extra to ^10.1.0 [#34976](https://github.com/gatsbyjs/gatsby/issues/34976) ([10752ed](https://github.com/gatsbyjs/gatsby/commit/10752ed325ac0ebc2655b994862f66abe072e09f))
+- update dependency semver to ^7.3.7 [#35543](https://github.com/gatsbyjs/gatsby/issues/35543) ([f593e00](https://github.com/gatsbyjs/gatsby/commit/f593e005e4561b423a297e967205d833451a2f55))
+
+#### Chores
+
+- update dependency typescript to ^4.6.4 [#34984](https://github.com/gatsbyjs/gatsby/issues/34984) ([71eb414](https://github.com/gatsbyjs/gatsby/commit/71eb414ad5abf1c835a2c243f01ac98ea5ee7e37))
+
+## [2.13.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.13.0/packages/gatsby-plugin-image) (2022-04-26)
+
+[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.13)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
 ### [2.12.1](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.12.1/packages/gatsby-plugin-image) (2022-04-13)
 
 **Note:** Version bump only for package gatsby-plugin-image

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++) {
@@ -27,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    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];
@@ -57,188 +46,118 @@ 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);
-                    });
-                }
+        var animationFrame;
+        var cleanupCallback;
+        renderImageToStringPromise.then(function (_a) {
+            var renderImageToString = _a.renderImageToString, swapPlaceholderImage = _a.swapPlaceholderImage;
+            if (!root.current) {
                 return;
             }
-            // 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();
+            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
+            });
         }
-        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");
@@ -248,18 +167,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) {