chore: revert hygraph changes

nuxt · Aug 28, 2024 · 4111716 · 4111716
1 parent 282db97
commit 4111716
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 41 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -110,7 +110,7 @@ export default defineNuxtConfig({
       baseURL: 'https://demo.sirv.com',
     },
     hygraph: {
-      baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com/',
+      baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/',
     },
     weserv: {
       baseURL: '/',

diff --git a/src/runtime/providers/hygraph.ts b/src/runtime/providers/hygraph.ts
@@ -1,4 +1,4 @@
-import { joinURL, withoutTrailingSlash } from 'ufo'
+import { joinURL } from 'ufo'
 import type { ProviderGetImage } from '@nuxt/image'
 
 type ImageOptimizations = {
@@ -9,7 +9,7 @@ type ImageOptimizations = {
   quality?: number
 }
 
-function getImageFormat(format?: string) {
+export function getImageFormat(format?: string) {
   let result = 'auto_image'
 
   if (format && format !== 'auto_image') {
@@ -19,24 +19,32 @@ function getImageFormat(format?: string) {
   return result
 }
 
-function splitUpURL(baseURL: string, url: string) {
-  /**
-   * https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue
-   *  - baseId: cltsj3mii0pvd07vwb5cyh1ig
-   *  - imageId: cltsrex89477t08unlckqx9ue
-   */
-  const escapedBaseURL = withoutTrailingSlash(baseURL).replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
-  const { groups } = url.match(new RegExp(`^(?:${escapedBaseURL}/)?(?<baseId>[^/]+)/(?<imageId>[^/]+)`)) || {}
-
-  if (!groups) {
-    throw new TypeError('[nuxt] [image] [hygraph] Invalid image URL')
-  }
+export function splitUpURL(url: string, baseURL: string) {
+  // Starting Image URL: https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue
+
+  // get Both IDs split off of the baseURL
+  // -> cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue
+  const bothIds = url.split(`${baseURL}/`)[1]
+
+  // get baseId
+  // -> cltsj3mii0pvd07vwb5cyh1ig
+  // @ts-expect-error fixing in separate PR
+  const baseId = bothIds.split('/')[0]
+
+  // get imageId
+  // -> cltsrex89477t08unlckqx9ue
+  const imageId = url.split(`/`)[url.split(`/`).length - 1]
 
-  return groups as { baseId: string, imageId: string }
+  return {
+    baseId,
+    imageId,
+  }
 }
 
-function optimizeHygraphImage(baseURL: string, url: string, optimizations: ImageOptimizations) {
-  const { baseId, imageId } = splitUpURL(baseURL, url)
+export function optimizeHygraphImage(baseURL: string, url: string, optimizations: ImageOptimizations) {
+  baseURL = baseURL.replace(/\/+$/, '')
+
+  const { baseId, imageId } = splitUpURL(url, baseURL)
   const imageFormat = getImageFormat(optimizations.format)
   const optimBase = 'resize'
   const quality = optimizations.quality && imageFormat !== 'auto_image' ? `quality=value:${optimizations.quality}/` : ''
@@ -54,13 +62,23 @@ function optimizeHygraphImage(baseURL: string, url: string, optimizations: Image
   }
 
   const optim = `${optimBase}=${optimList.join(',')}`
+  // @ts-expect-error fixing in separate PR
   const result = joinURL(baseURL, baseId, optim, quality, imageFormat, imageId)
 
   return result
 }
 
-export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}) => {
-  const { width, height, fit, format, quality } = modifiers
+export const getImage: ProviderGetImage = (
+  src,
+  { modifiers = {}, baseURL } = {},
+) => {
+  const {
+    width,
+    height,
+    fit,
+    format,
+    quality,
+  } = modifiers
 
   if (!baseURL) {
     throw new Error('No Hygraph image base URL provided.')

diff --git a/test/e2e/__snapshots__/hygraph.json5 b/test/e2e/__snapshots__/hygraph.json5
@@ -1,12 +1,12 @@
 {
   "requests": [
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue",
   ],
   "sources": [
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue",
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
-    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue",
+    "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue",
   ],
-}
+}
diff --git a/test/providers.ts b/test/providers.ts
@@ -30,7 +30,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png' },
-    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=/auto_image/cltsrex89477t08unlckqx9ue' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net' },
   },
@@ -205,7 +205,7 @@ export const images = [
     uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/jpeg/-/resize/200x200/-/stretch/off/' },
     weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&fit=contain&output=jpg&url=https://my-website.com/test.png' },
     sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' },
-    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/output=format:jpeg/cltsrex89477t08unlckqx9ue' },
+    hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/output=format:jpg/cltsrex89477t08unlckqx9ue' },
     caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=200&h=200' },
     bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200&height=200' },
   },

diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts
@@ -35,7 +35,6 @@ import * as vercel from '#image/providers/vercel'
 import * as wagtail from '#image/providers/wagtail'
 import * as uploadcare from '#image/providers/uploadcare'
 import * as sirv from '#image/providers/sirv'
-import * as hygraph from '#image/providers/hygraph'
 
 const emptyContext = {
   options: {
@@ -455,17 +454,6 @@ describe('Providers', () => {
     }
   })
 
-  it('hygraph', () => {
-    const providerOptions = {
-      baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com',
-    }
-    for (const image of images) {
-      const [_src, modifiers] = image.args
-      const generated = hygraph.getImage('https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', { modifiers, ...providerOptions }, emptyContext)
-      expect(generated).toMatchObject(image.hygraph)
-    }
-  })
-
   it('weserv', () => {
     const providerOptions = {
       baseURL: 'https://my-website.com/',