From fa496b5659ca2820a16b2dee5b51aa998d685521 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Mon, 18 Jan 2021 09:44:31 +0000 Subject: [PATCH 1/4] wip --- packages/gatsby-plugin-image/package.json | 1 + .../src/components/hooks.ts | 23 +++++++++++- yarn.lock | 37 +++---------------- 3 files changed, 28 insertions(+), 33 deletions(-) diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json index a6fa2e261d692..238f84ef2144c 100644 --- 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.9.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 index 6648d48825d97..a11e3792c8159 100644 --- 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,12 @@ export function getWrapperProps( } } +export function applyPolyfill(ref: RefObject): void { + import(`objectFitPolyfill`).then(() => { + ;(window as any).objectFitPolyfill(ref.current) + }) +} + export function useGatsbyImage({ pluginName = `useGatsbyImage`, ...args @@ -91,13 +98,21 @@ export function getMainProps( style: CSSProperties = {} ): MainImageProps { const onLoad: ReactEventHandler = function (e) { + const target = e.currentTarget + const shouldPolyfill = + typeof target.style.objectFit === `undefined` || + typeof target.style.objectPosition === `undefined` + + if (shouldPolyfill) { + target.dataset.objectFit = style.objectFit || `cover` + target.dataset.objectPosition = `${style.objectPosition || `50% 50%`}` + } if (isLoaded) { return } storeImageloaded(cacheKey) - const target = e.currentTarget const img = new Image() img.src = target.currentSrc @@ -110,9 +125,15 @@ export function getMainProps( }) .then(() => { toggleLoaded(true) + if (shouldPolyfill) { + applyPolyfill(ref) + } }) } else { toggleLoaded(true) + if (shouldPolyfill) { + applyPolyfill(ref) + } } } diff --git a/yarn.lock b/yarn.lock index 439a0bf6df9ce..bc16c3fda762a 100644 --- a/yarn.lock +++ b/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 @@ base64-arraybuffer@0.1.5: 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" - file-type@5.2.0, 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" - utils-merge@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" From ec35794eaefa3fd1dbaf1a7f452b2611c8f9dca2 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Mon, 18 Jan 2021 15:41:59 +0000 Subject: [PATCH 2/4] Update polyfill --- .../src/components/hooks.ts | 38 +++++++++---------- .../src/components/lazy-hydrate.tsx | 2 +- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index a11e3792c8159..a1fd756d3e1a2 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -73,10 +73,13 @@ export function getWrapperProps( } } -export function applyPolyfill(ref: RefObject): void { - import(`objectFitPolyfill`).then(() => { - ;(window as any).objectFitPolyfill(ref.current) - }) +export async function applyPolyfill( + ref: RefObject +): Promise { + if (!(`objectFitPolyfill` in window)) { + await import(`objectFitPolyfill`) + } + ;(window as any).objectFitPolyfill(ref.current) } export function useGatsbyImage({ @@ -92,27 +95,19 @@ export function getMainProps( isLoaded: boolean, images: any, loading?: "eager" | "lazy", - toggleLoaded?: any, + toggleLoaded?: (loaded: boolean) => void, cacheKey?: string, - ref?: any, + ref?: RefObject, style: CSSProperties = {} ): MainImageProps { const onLoad: ReactEventHandler = function (e) { - const target = e.currentTarget - const shouldPolyfill = - typeof target.style.objectFit === `undefined` || - typeof target.style.objectPosition === `undefined` - - if (shouldPolyfill) { - target.dataset.objectFit = style.objectFit || `cover` - target.dataset.objectPosition = `${style.objectPosition || `50% 50%`}` - } if (isLoaded) { return } storeImageloaded(cacheKey) + const target = e.currentTarget const img = new Image() img.src = target.currentSrc @@ -125,18 +120,19 @@ export function getMainProps( }) .then(() => { toggleLoaded(true) - if (shouldPolyfill) { - applyPolyfill(ref) - } }) } else { toggleLoaded(true) - if (shouldPolyfill) { - applyPolyfill(ref) - } } } + // 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 index 1de40801e58fa..96dcf8a8193b7 100644 --- 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 & { isLoading: boolean isLoaded: boolean // alwaystype SetStateAction = S | ((prevState: S) => S); - toggleIsLoaded: Function + toggleIsLoaded: (toggle: boolean) => void ref: MutableRefObject } From 2573c51e9f510214140df5534422b3e587816837 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 19 Jan 2021 19:06:40 +0000 Subject: [PATCH 3/4] Add webpackChunkName Co-authored-by: Ward Peeters --- packages/gatsby-plugin-image/src/components/hooks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index a1fd756d3e1a2..617f33e090ed5 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -77,7 +77,7 @@ export async function applyPolyfill( ref: RefObject ): Promise { if (!(`objectFitPolyfill` in window)) { - await import(`objectFitPolyfill`) + await import(/* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ `objectFitPolyfill`) } ;(window as any).objectFitPolyfill(ref.current) } From f5faa0225fe32a76fbc9f1400be6a389c9e5f7ad Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 19 Jan 2021 19:22:14 +0000 Subject: [PATCH 4/4] Format --- packages/gatsby-plugin-image/src/components/hooks.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 617f33e090ed5..0ca509db8c667 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -77,7 +77,9 @@ export async function applyPolyfill( ref: RefObject ): Promise { if (!(`objectFitPolyfill` in window)) { - await import(/* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ `objectFitPolyfill`) + await import( + /* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ `objectFitPolyfill` + ) } ;(window as any).objectFitPolyfill(ref.current) }