From 0d929f10852983908f6618f514717fd9e602b4be Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 7 Apr 2021 11:39:47 +0100 Subject: [PATCH] fix(gatsby-plugin-image): Use bare GATSBY___IMAGE global (#30713) * fix(gatsby-plugin-image): Use bare GATSBY___IMAGE global * Fix check * Fix test * Use helper * Remove unused type (cherry picked from commit a5869e3d26ed0a45f7543ffaf45da9ca4b89ff45) --- .../__tests__/gatsby-image.browser.tsx | 22 +++++++------------ .../__tests__/gatsby-image.server.tsx | 15 ++++--------- .../src/components/gatsby-image.browser.tsx | 11 +++++++--- .../src/components/hooks.ts | 12 ++++++---- .../gatsby-plugin-image/src/gatsby-node.ts | 3 ++- packages/gatsby-plugin-image/src/global.d.ts | 9 ++------ 6 files changed, 32 insertions(+), 40 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..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(``)) @@ -19,8 +12,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 +67,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 +80,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` ) }) @@ -164,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() 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..23bc923c21a66 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" @@ -182,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 && global.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 @@ -272,8 +277,8 @@ export const GatsbyImage: FunctionComponent = function GatsbyI return null } - if (!global.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 75357ad253dbd..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 (!global.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 (!global.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 (!global.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 (!global.GATSBY___IMAGE) { + if (!gatsbyImageIsInstalled()) { 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..5a3a80537bb17 100644 --- a/packages/gatsby-plugin-image/src/global.d.ts +++ b/packages/gatsby-plugin-image/src/global.d.ts @@ -1,11 +1,6 @@ export {} declare global { - declare var SERVER: boolean - - namespace NodeJS { - interface Global { - GATSBY___IMAGE: boolean | undefined - } - } + declare var SERVER: boolean | undefined + declare var GATSBY___IMAGE: boolean | undefined }