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

* wip * Update polyfill * Add webpackChunkName Co-authored-by: Ward Peeters <ward@coding-tech.com> * Format Co-authored-by: Ward Peeters <ward@coding-tech.com>
gatsbyjs · Jan 19, 2021 · 3b4e8a5 · 3b4e8a5
1 parent f725636
commit 3b4e8a5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json
@@ -77,6 +77,7 @@
     "chokidar": "^3.4.3",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.10.0-next.0",
+    "objectFitPolyfill": "^2.3.0",
     "prop-types": "^15.7.2"
   },
   "repository": {

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/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,17 @@ export function getWrapperProps(
   }
 }
 
+export async function applyPolyfill(
+  ref: RefObject<HTMLImageElement>
+): Promise<void> {
+  if (!(`objectFitPolyfill` in window)) {
+    await import(
+      /* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ `objectFitPolyfill`
+    )
+  }
+  ;(window as any).objectFitPolyfill(ref.current)
+}
+
 export function useGatsbyImage({
   pluginName = `useGatsbyImage`,
   ...args
@@ -85,9 +97,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 +128,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 = {

diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/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>
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -18184,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"