feat: image and file cdn url generator adapter implementation

e2e-tests/adapters/cypress/e2e/remote-file.cy.ts

@@ -0,0 +1,226 @@
+Cypress.on("uncaught:exception", err => {
+  if (
+    (err.message.includes("Minified React error #418") ||
+      err.message.includes("Minified React error #423") ||
+      err.message.includes("Minified React error #425")) &&
+    Cypress.env(`TEST_PLUGIN_OFFLINE`)
+  ) {
+    return false
+  }
+})
+
+const PATH_PREFIX = Cypress.env(`PATH_PREFIX`) || ``
+
+// there are multiple scenarios we want to test and ensure that custom image cdn url is used:
+//  - child build process (SSG, Page Query)
+//  - main build process (SSG, Page Context)
+//  - query engine (SSR, Page Query)
+const configs = [
+  {
+    title: `remote-file (SSG, Page Query)`,
+    pagePath: `/routes/remote-file/`,
+    fileCDN: true,
+    placeholders: true,
+  },
+  {
+    title: `remote-file (SSG, Page Context)`,
+    pagePath: `/routes/remote-file-data-from-context/`,
+    fileCDN: true,
+    placeholders: true,
+  },
+  {
+    title: `remote-file (SSR, Page Query)`,
+    pagePath: `/routes/ssr/remote-file/`,
+    fileCDN: false,
+    placeholders: false,
+  },
+]
+
+for (const config of configs) {
+  describe(
+    config.title,
+    {
+      retries: {
+        runMode: 4,
+      },
+    },
+    () => {
+      beforeEach(() => {
+        cy.visit(config.pagePath).waitForRouteChange()
+
+        // trigger intersection observer
+        cy.scrollTo("top")
+        cy.wait(200)
+        cy.scrollTo("bottom", {
+          duration: 600,
+        })
+        cy.wait(600)
+      })
+
+      async function testImages(images, expectations) {
+        for (let i = 0; i < images.length; i++) {
+          const expectation = expectations[i]
+
+          const url = images[i].currentSrc
+
+          const { href, origin } = new URL(url)
+          const urlWithoutOrigin = href.replace(origin, ``)
+
+          // using Netlify Image CDN
+          expect(urlWithoutOrigin).to.match(/^\/.netlify\/images/)
+
+          const res = await fetch(url, {
+            method: "HEAD",
+          })
+          expect(res.ok).to.be.true
+
+          const expectedNaturalWidth =
+            expectation.naturalWidth ?? expectation.width
+          const expectedNaturalHeight =
+            expectation.naturalHeight ?? expectation.height
+
+          if (expectation.width) {
+            expect(
+              Math.ceil(images[i].getBoundingClientRect().width)
+            ).to.be.equal(expectation.width)
+          }
+          if (expectation.height) {
+            expect(
+              Math.ceil(images[i].getBoundingClientRect().height)
+            ).to.be.equal(expectation.height)
+          }
+          if (expectedNaturalWidth) {
+            expect(Math.ceil(images[i].naturalWidth)).to.be.equal(
+              expectedNaturalWidth
+            )
+          }
+          if (expectedNaturalHeight) {
+            expect(Math.ceil(images[i].naturalHeight)).to.be.equal(
+              expectedNaturalHeight
+            )
+          }
+        }
+      }
+
+      it(`should render correct dimensions`, () => {
+        if (config.fileCDN) {
+          cy.get('[data-testid="public"]').then(async $urls => {
+            const urls = Array.from(
+              $urls.map((_, $url) => $url.getAttribute("href"))
+            )
+
+            for (const url of urls) {
+              // using OSS implementation for publicURL for now
+              expect(url).to.match(new RegExp(`^${PATH_PREFIX}/_gatsby/file`))
+              const res = await fetch(url, {
+                method: "HEAD",
+              })
+              expect(res.ok).to.be.true
+            }
+          })
+        }
+
+        cy.get(".resize").then({ timeout: 60000 }, async $imgs => {
+          await testImages(Array.from($imgs), [
+            {
+              width: 100,
+              height: 133,
+            },
+            {
+              width: 100,
+              height: 160,
+            },
+            {
+              width: 100,
+              height: 67,
+            },
+          ])
+        })
+
+        cy.get(".fixed img:not([aria-hidden=true])").then(
+          { timeout: 60000 },
+          async $imgs => {
+            await testImages(Array.from($imgs), [
+              {
+                width: 100,
+                height: 133,
+              },
+              {
+                width: 100,
+                height: 160,
+              },
+              {
+                width: 100,
+                height: 67,
+              },
+            ])
+          }
+        )
+
+        cy.get(".constrained img:not([aria-hidden=true])").then(
+          { timeout: 60000 },
+          async $imgs => {
+            await testImages(Array.from($imgs), [
+              {
+                width: 300,
+                height: 400,
+              },
+              {
+                width: 300,
+                height: 481,
+              },
+              {
+                width: 300,
+                height: 200,
+              },
+            ])
+          }
+        )
+
+        cy.get(".full img:not([aria-hidden=true])").then(
+          { timeout: 60000 },
+          async $imgs => {
+            await testImages(Array.from($imgs), [
+              {
+                naturalHeight: 1333,
+              },
+              {
+                naturalHeight: 1603,
+              },
+              {
+                naturalHeight: 666,
+              },
+            ])
+          }
+        )
+      })
+
+      it(`should render a placeholder`, () => {
+        if (config.placeholders) {
+          cy.get(".fixed [data-placeholder-image]")
+            .first()
+            .should("have.css", "background-color", "rgb(232, 184, 8)")
+          cy.get(".constrained [data-placeholder-image]")
+            .first()
+            .should($el => {
+              expect($el.prop("tagName")).to.be.equal("IMG")
+              expect($el.prop("src")).to.contain("data:image/jpg;base64")
+            })
+          cy.get(".constrained_traced [data-placeholder-image]")
+            .first()
+            .should($el => {
+              // traced falls back to DOMINANT_COLOR
+              expect($el.prop("tagName")).to.be.equal("DIV")
+              expect($el).to.be.empty
+            })
+        }
+        cy.get(".full [data-placeholder-image]")
+          .first()
+          .should($el => {
+            expect($el.prop("tagName")).to.be.equal("DIV")
+            expect($el).to.be.empty
+          })
+      })
+    }
+  )
+}

e2e-tests/adapters/gatsby-config.ts

@@ -24,7 +24,11 @@ const config: GatsbyConfig = {
   },
   trailingSlash,
   pathPrefix,
-  plugins: [],
+  plugins: [
+    `gatsby-plugin-image`,
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+  ],
   headers: [
     {
       source: `/*`,

e2e-tests/adapters/gatsby-node.ts

@@ -1,13 +1,58 @@
 import * as path from "path"
 import type { GatsbyNode, GatsbyConfig } from "gatsby"
+import { addRemoteFilePolyfillInterface } from "gatsby-plugin-utils/polyfill-remote-file"
 import { applyTrailingSlashOption } from "./utils"
 
 const TRAILING_SLASH = (process.env.TRAILING_SLASH ||
   `never`) as GatsbyConfig["trailingSlash"]
 
-export const createPages: GatsbyNode["createPages"] = ({
-  actions: { createRedirect, createSlice },
+export const createPages: GatsbyNode["createPages"] = async ({
+  actions: { createPage, createRedirect, createSlice },
+  graphql,
 }) => {
+  const { data: ImageCDNRemoteFileFromPageContextData } = await graphql(`
+    query ImageCDNGatsbyNode {
+      allMyRemoteFile {
+        nodes {
+          id
+          url
+          filename
+          publicUrl
+          resize(width: 100) {
+            height
+            width
+            src
+          }
+          fixed: gatsbyImage(
+            layout: FIXED
+            width: 100
+            placeholder: DOMINANT_COLOR
+          )
+          constrained: gatsbyImage(
+            layout: CONSTRAINED
+            width: 300
+            placeholder: BLURRED
+          )
+          constrained_traced: gatsbyImage(
+            layout: CONSTRAINED
+            width: 300
+            placeholder: TRACED_SVG
+          )
+          full: gatsbyImage(layout: FULL_WIDTH, width: 500, placeholder: NONE)
+        }
+      }
+    }
+  `)
+
+  createPage({
+    path: applyTrailingSlashOption(
+      `/routes/remote-file-data-from-context/`,
+      TRAILING_SLASH
+    ),
+    component: path.resolve(`./src/templates/remote-file-from-context.jsx`),
+    context: ImageCDNRemoteFileFromPageContextData,
+  })
+
   createRedirect({
     fromPath: applyTrailingSlashOption("/redirect", TRAILING_SLASH),
     toPath: applyTrailingSlashOption("/routes/redirect/hit", TRAILING_SLASH),
@@ -62,3 +107,70 @@ export const createPages: GatsbyNode["createPages"] = ({
     context: {},
   })
 }
+
+// Image CDN
+export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
+  function createSchemaCustomization({ actions, schema, store }) {
+    actions.createTypes(
+      addRemoteFilePolyfillInterface(
+        schema.buildObjectType({
+          name: "MyRemoteFile",
+          fields: {},
+          interfaces: ["Node", "RemoteFile"],
+        }),
+        {
+          schema,
+          actions,
+          store,
+        }
+      )
+    )
+  }
+
+export const sourceNodes: GatsbyNode["sourceNodes"] = function sourceNodes({
+  actions,
+  createNodeId,
+  createContentDigest,
+}) {
+  const items = [
+    {
+      name: "photoA.jpg",
+      url: "https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
+      placeholderUrl:
+        "https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=%width%&h=%height%",
+      mimeType: "image/jpg",
+      filename: "photo-1517849845537.jpg",
+      width: 2000,
+      height: 2667,
+    },
+    {
+      name: "photoB.jpg",
+      url: "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=2000&q=10",
+      mimeType: "image/jpg",
+      filename: "photo-1552053831.jpg",
+      width: 1247,
+      height: 2000,
+    },
+    {
+      name: "photoC.jpg",
+      url: "https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80",
+      placeholderUrl:
+        "https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=%width%&h=%height%",
+      mimeType: "image/jpg",
+      filename: "photo-1561037404.jpg",
+      width: 2000,
+      height: 1333,
+    },
+  ]
+
+  items.forEach((item, index) => {
+    actions.createNode({
+      id: createNodeId(`remote-file-${index}`),
+      ...item,
+      internal: {
+        type: "MyRemoteFile",
+        contentDigest: createContentDigest(item.url),
+      },
+    })
+  })
+}

e2e-tests/adapters/netlify.toml

@@ -1,3 +1,9 @@
 [build]
   command = "npm run build"
-  publish = "public/"
+  publish = "public/"
+
+[build.environment]
+  NETLIFY_IMAGE_CDN = "true"
+
+[images]
+  remote_images = ["https://images.unsplash.com/*"]

e2e-tests/adapters/package.json

@@ -24,7 +24,10 @@
   },
   "dependencies": {
     "gatsby": "next",
-    "gatsby-adapter-netlify": "latest",
+    "gatsby-adapter-netlify": "next",
+    "gatsby-plugin-image": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-transformer-sharp": "next",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },