feat(gatsby-plugin-image): object-fit polyfill for IE

packages/gatsby-plugin-image/package.json

@@ -77,6 +77,7 @@
     "chokidar": "^3.4.3",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.9.0-next.0",
+    "objectFitPolyfill": "^2.3.0",
     "prop-types": "^15.7.2"
   },
   "repository": {

packages/gatsby-plugin-image/src/components/hooks.ts

@@ -7,6 +7,7 @@ import {
   ReactEventHandler,
   SetStateAction,
   Dispatch,
+  RefObject,
 } from "react"
 import { Node } from "gatsby"
 import { PlaceholderProps } from "./placeholder"
@@ -72,6 +73,15 @@ export function getWrapperProps(
   }
 }
 
+export async function applyPolyfill(
+  ref: RefObject<HTMLImageElement>
+): Promise<void> {
+  if (!(`objectFitPolyfill` in window)) {
+    await import(`objectFitPolyfill`)
+  }
+  ;(window as any).objectFitPolyfill(ref.current)
+}
+
 export function useGatsbyImage({
   pluginName = `useGatsbyImage`,
   ...args
@@ -85,9 +95,9 @@ export function getMainProps(
   isLoaded: boolean,
   images: any,
   loading?: "eager" | "lazy",
-  toggleLoaded?: any,
+  toggleLoaded?: (loaded: boolean) => void,
   cacheKey?: string,
-  ref?: any,
+  ref?: RefObject<HTMLImageElement>,
   style: CSSProperties = {}
 ): MainImageProps {
   const onLoad: ReactEventHandler<HTMLImageElement> = function (e) {
@@ -116,6 +126,13 @@ export function getMainProps(
     }
   }
 
+  // Polyfill "object-fit" if unsupported (mostly IE)
+  if (ref?.current && !(`objectFit` in document.documentElement.style)) {
+    ref.current.dataset.objectFit = style.objectFit ?? `cover`
+    ref.current.dataset.objectPosition = `${style.objectPosition ?? `50% 50%`}`
+    applyPolyfill(ref)
+  }
+
   // fallback when it's not configured in gatsby-config.
   if (!global.GATSBY___IMAGE) {
     style = {

packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx

@@ -15,7 +15,7 @@ import { ReactElement } from "react"
 type LazyHydrateProps = Omit<GatsbyImageProps, "as" | "style" | "className"> & {
   isLoading: boolean
   isLoaded: boolean // alwaystype SetStateAction<S> = S | ((prevState: S) => S);
-  toggleIsLoaded: Function
+  toggleIsLoaded: (toggle: boolean) => void
   ref: MutableRefObject<HTMLImageElement | undefined>
 }
 

yarn.lock

@@ -5129,13 +5129,6 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-ajax-request@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/ajax-request/-/ajax-request-1.2.3.tgz#99fcbec1d6d2792f85fa949535332bd14f5f3790"
-  dependencies:
-    file-system "^2.1.1"
-    utils-extend "^1.0.7"
-
 ajv-errors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@@ -6246,14 +6239,6 @@ [email protected]:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
 
-base64-img@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/base64-img/-/base64-img-1.0.4.tgz#3e22d55d6c74a24553d840d2b1bc12a7db078d35"
-  integrity sha1-PiLVXWx0okVT2EDSsbwSp9sHjTU=
-  dependencies:
-    ajax-request "^1.2.0"
-    file-system "^2.1.0"
-
 base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
@@ -11050,19 +11035,6 @@ file-loader@^1.1.11:
     loader-utils "^1.0.2"
     schema-utils "^0.4.5"
 
-file-match@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/file-match/-/file-match-1.0.2.tgz#c9cad265d2c8adf3a81475b0df475859069faef7"
-  dependencies:
-    utils-extend "^1.0.6"
-
-file-system@^2.1.0, file-system@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/file-system/-/file-system-2.2.2.tgz#7d65833e3a2347dcd956a813c677153ed3edd987"
-  dependencies:
-    file-match "^1.0.1"
-    utils-extend "^1.0.4"
-
 [email protected], file-type@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"
@@ -18212,6 +18184,11 @@ object.values@^1.1.0, object.values@^1.1.1:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+objectFitPolyfill@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/objectFitPolyfill/-/objectFitPolyfill-2.3.0.tgz#e4c54df5943f5f65351ca07692c613c9da3b5536"
+  integrity sha512-VgF98xGs2upBxO6a4FKGEEip5kXQCYpIwrKSDQ6oyFvPAmTrm6nPD/Y/IetoHx62HE6N82hWvc7Tc0evEBkoyA==
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -25739,10 +25716,6 @@ utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
 
-utils-extend@^1.0.4, utils-extend@^1.0.6, utils-extend@^1.0.7:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/utils-extend/-/utils-extend-1.0.8.tgz#ccfd7b64540f8e90ee21eec57769d0651cab8a5f"
-
 [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"