fix(gatsby-plugin-image): Use bare GATSBY___IMAGE global (#30713) (#30734)

* fix(gatsby-plugin-image): Use bare GATSBY___IMAGE global

* Fix check

* Fix test

* Use helper

* Remove unused type

(cherry picked from commit a5869e3)

Co-authored-by: Matt Kane <[email protected]>

Author: GatsbyJS Bot

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,20 +67,20 @@ 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(
       <GatsbyImage image={image} alt="Alt content" />
     )
 
     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()

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`, () => {

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<GatsbyImageProps> = 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`
     )
   }

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,

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,
       }),
     ],
   })

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
 }