From 43f113bad6a9f8c1cdf89a78e7049242c2970c2e Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 6 Apr 2021 10:33:53 +0100 Subject: [PATCH 1/5] fix(gatsby-plugin-image): Use bare GATSBY___IMAGE global --- .../components/__tests__/gatsby-image.server.tsx | 15 ++++----------- .../src/components/gatsby-image.browser.tsx | 4 ++-- .../gatsby-plugin-image/src/components/hooks.ts | 8 ++++---- packages/gatsby-plugin-image/src/gatsby-node.ts | 3 ++- packages/gatsby-plugin-image/src/global.d.ts | 7 +------ 5 files changed, 13 insertions(+), 24 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx index ccc60f7b5456f..a580b5c011a67 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx @@ -4,27 +4,20 @@ import { GatsbyImage } from "../gatsby-image.server" import { IGatsbyImageData } from "../gatsby-image.browser" import { SourceProps } from "../picture" -type GlobalOverride = NodeJS.Global & - typeof global.globalThis & { - SERVER: boolean | undefined - // eslint-disable-next-line @typescript-eslint/naming-convention - GATSBY___IMAGE: boolean | undefined - } - // Prevents terser for bailing because we're not in a babel plugin jest.mock(`../../../macros/terser.macro`, () => (strs): string => strs.join(``)) describe(`GatsbyImage server`, () => { beforeEach(() => { console.warn = jest.fn() - ;(global as GlobalOverride).SERVER = true - ;(global as GlobalOverride).GATSBY___IMAGE = true + global.SERVER = true + global.GATSBY___IMAGE = true }) afterEach(() => { jest.clearAllMocks() - ;(global as GlobalOverride).SERVER = false - ;(global as GlobalOverride).GATSBY___IMAGE = false + global.SERVER = false + global.GATSBY___IMAGE = false }) it(`shows nothing when the image props is not passed`, () => { diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx index 4aac039955021..a3f2979a2eced 100644 --- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx @@ -182,7 +182,7 @@ class GatsbyImageHydrator extends Component< const cacheKey = JSON.stringify(this.props.image.images) // when SSR and native lazyload is supported we'll do nothing ;) - if (hasNativeLazyLoadSupport() && ssrElement && global.GATSBY___IMAGE) { + if (hasNativeLazyLoadSupport() && ssrElement && GATSBY___IMAGE) { this.props.onStartLoad?.({ wasCached: false }) // When the image is already loaded before we have hydrated, we trigger onLoad and cache the item @@ -272,7 +272,7 @@ export const GatsbyImage: FunctionComponent = function GatsbyI return null } - if (!global.GATSBY___IMAGE) { + if (!GATSBY___IMAGE) { console.warn( `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js` ) diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 75357ad253dbd..4a971cf8e863e 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -86,7 +86,7 @@ export function getWrapperProps( let className = `gatsby-image-wrapper` // If the plugin isn't installed we need to apply the styles inline - if (!global.GATSBY___IMAGE) { + if (!GATSBY___IMAGE) { wrapperStyle.position = `relative` wrapperStyle.overflow = `hidden` } @@ -95,7 +95,7 @@ export function getWrapperProps( wrapperStyle.width = width wrapperStyle.height = height } else if (layout === `constrained`) { - if (!global.GATSBY___IMAGE) { + if (!GATSBY___IMAGE) { wrapperStyle.display = `inline-block` } className = `gatsby-image-wrapper gatsby-image-wrapper-constrained` @@ -267,7 +267,7 @@ export function getMainProps( } // fallback when it's not configured in gatsby-config. - if (!global.GATSBY___IMAGE) { + if (!GATSBY___IMAGE) { style = { height: `100%`, left: 0, @@ -347,7 +347,7 @@ export function getPlaceholderProps( } // fallback when it's not configured in gatsby-config. - if (!global.GATSBY___IMAGE) { + if (!GATSBY___IMAGE) { result.style = { height: `100%`, left: 0, diff --git a/packages/gatsby-plugin-image/src/gatsby-node.ts b/packages/gatsby-plugin-image/src/gatsby-node.ts index 7e41cd1631d82..8b035a1983111 100644 --- a/packages/gatsby-plugin-image/src/gatsby-node.ts +++ b/packages/gatsby-plugin-image/src/gatsby-node.ts @@ -35,7 +35,8 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({ actions.setWebpackConfig({ plugins: [ plugins.define({ - [`global.GATSBY___IMAGE`]: true, + // eslint-disable-next-line @typescript-eslint/naming-convention + GATSBY___IMAGE: true, }), ], }) diff --git a/packages/gatsby-plugin-image/src/global.d.ts b/packages/gatsby-plugin-image/src/global.d.ts index 80e329fb522c0..c0d7a255f2fe4 100644 --- a/packages/gatsby-plugin-image/src/global.d.ts +++ b/packages/gatsby-plugin-image/src/global.d.ts @@ -2,10 +2,5 @@ export {} declare global { declare var SERVER: boolean - - namespace NodeJS { - interface Global { - GATSBY___IMAGE: boolean | undefined - } - } + declare var GATSBY___IMAGE: boolean } From 322feba6372f619928c6bf24c664ce535a5b6409 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 7 Apr 2021 09:29:17 +0100 Subject: [PATCH 2/5] Fix check --- .../src/components/gatsby-image.browser.tsx | 5 +++-- packages/gatsby-plugin-image/src/components/hooks.ts | 12 ++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx index a3f2979a2eced..04655e3ebbb49 100644 --- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx @@ -14,6 +14,7 @@ import { hasNativeLazyLoadSupport, storeImageloaded, hasImageLoaded, + gatsbyImageIsInstalled, } from "./hooks" import { PlaceholderProps } from "./placeholder" import { MainImageProps } from "./main-image" @@ -272,8 +273,8 @@ export const GatsbyImage: FunctionComponent = function GatsbyI return null } - if (!GATSBY___IMAGE) { - console.warn( + if (!gatsbyImageIsInstalled()) { + console.error( `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js` ) } diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 4a971cf8e863e..e827e1815d3ed 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -29,6 +29,10 @@ export const hasNativeLazyLoadSupport = (): boolean => typeof HTMLImageElement !== `undefined` && `loading` in HTMLImageElement.prototype +export function gatsbyImageIsInstalled(): boolean { + return typeof GATSBY___IMAGE !== `undefined` && GATSBY___IMAGE +} + export function storeImageloaded(cacheKey?: string): void { if (cacheKey) { imageCache.add(cacheKey) @@ -86,7 +90,7 @@ export function getWrapperProps( let className = `gatsby-image-wrapper` // If the plugin isn't installed we need to apply the styles inline - if (!GATSBY___IMAGE) { + if (!gatsbyImageIsInstalled()) { wrapperStyle.position = `relative` wrapperStyle.overflow = `hidden` } @@ -95,7 +99,7 @@ export function getWrapperProps( wrapperStyle.width = width wrapperStyle.height = height } else if (layout === `constrained`) { - if (!GATSBY___IMAGE) { + if (!gatsbyImageIsInstalled()) { wrapperStyle.display = `inline-block` } className = `gatsby-image-wrapper gatsby-image-wrapper-constrained` @@ -267,7 +271,7 @@ export function getMainProps( } // fallback when it's not configured in gatsby-config. - if (!GATSBY___IMAGE) { + if (!gatsbyImageIsInstalled()) { style = { height: `100%`, left: 0, @@ -347,7 +351,7 @@ export function getPlaceholderProps( } // fallback when it's not configured in gatsby-config. - if (!GATSBY___IMAGE) { + if (!gatsbyImageIsInstalled()) { result.style = { height: `100%`, left: 0, From 8c192ae8e8a22e15ac752566e25b426bb7425cfe Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 7 Apr 2021 09:49:47 +0100 Subject: [PATCH 3/5] Fix test --- .../components/__tests__/gatsby-image.browser.tsx | 13 +++++++------ packages/gatsby-plugin-image/src/global.d.ts | 4 ++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx index 71a59493858e4..e43b18da1c3e9 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx @@ -19,8 +19,9 @@ describe(`GatsbyImage browser`, () => { beforeEach(() => { console.warn = jest.fn() - ;(global as GlobalOverride).SERVER = true - ;(global as GlobalOverride).GATSBY___IMAGE = true + console.error = jest.fn() + global.SERVER = true + global.GATSBY___IMAGE = true }) beforeEach(() => { @@ -73,12 +74,12 @@ describe(`GatsbyImage browser`, () => { afterEach(() => { jest.clearAllMocks() - ;(global as GlobalOverride).SERVER = undefined - ;(global as GlobalOverride).GATSBY___IMAGE = undefined + global.SERVER = undefined + global.GATSBY___IMAGE = undefined }) it(`shows a suggestion to switch to the new gatsby-image API when available`, async () => { - ;(global as GlobalOverride).GATSBY___IMAGE = false + global.GATSBY___IMAGE = undefined const { container } = render( @@ -86,7 +87,7 @@ describe(`GatsbyImage browser`, () => { await waitFor(() => container.querySelector(`[data-placeholder-image=""]`)) - expect(console.warn).toBeCalledWith( + expect(console.error).toBeCalledWith( `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js` ) }) diff --git a/packages/gatsby-plugin-image/src/global.d.ts b/packages/gatsby-plugin-image/src/global.d.ts index c0d7a255f2fe4..5a3a80537bb17 100644 --- a/packages/gatsby-plugin-image/src/global.d.ts +++ b/packages/gatsby-plugin-image/src/global.d.ts @@ -1,6 +1,6 @@ export {} declare global { - declare var SERVER: boolean - declare var GATSBY___IMAGE: boolean + declare var SERVER: boolean | undefined + declare var GATSBY___IMAGE: boolean | undefined } From d32ff7376b9f744743c40503963734c94866c527 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 7 Apr 2021 10:18:22 +0100 Subject: [PATCH 4/5] Use helper --- .../src/components/gatsby-image.browser.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx index 04655e3ebbb49..23bc923c21a66 100644 --- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx @@ -183,7 +183,11 @@ class GatsbyImageHydrator extends Component< const cacheKey = JSON.stringify(this.props.image.images) // when SSR and native lazyload is supported we'll do nothing ;) - if (hasNativeLazyLoadSupport() && ssrElement && GATSBY___IMAGE) { + if ( + hasNativeLazyLoadSupport() && + ssrElement && + gatsbyImageIsInstalled() + ) { this.props.onStartLoad?.({ wasCached: false }) // When the image is already loaded before we have hydrated, we trigger onLoad and cache the item From 7abb184fccec746ab2f59b3962d64b10947a6600 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 7 Apr 2021 10:41:47 +0100 Subject: [PATCH 5/5] Remove unused type --- .../src/components/__tests__/gatsby-image.browser.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx index e43b18da1c3e9..47f61c4f83e94 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx @@ -3,13 +3,6 @@ import { GatsbyImage, IGatsbyImageData } from "../gatsby-image.browser" import { render, waitFor } from "@testing-library/react" import * as hooks from "../hooks" -type GlobalOverride = NodeJS.Global & - typeof global.globalThis & { - // eslint-disable-next-line @typescript-eslint/naming-convention - GATSBY___IMAGE: boolean - SERVER: boolean - } - // Prevents terser for bailing because we're not in a babel plugin jest.mock(`../../../macros/terser.macro`, () => (strs): string => strs.join(``)) @@ -165,7 +158,7 @@ describe(`GatsbyImage browser`, () => { container.querySelector(`[data-main-image=""]`) ) - img.dispatchEvent(new Event(`load`)) + img?.dispatchEvent(new Event(`load`)) expect(onStartLoadSpy).toBeCalledWith({ wasCached: false }) expect(onLoadSpy).toBeCalled()