diff --git a/playground/app/providers.ts b/playground/app/providers.ts index 694dff051..55e4b34e8 100644 --- a/playground/app/providers.ts +++ b/playground/app/providers.ts @@ -235,6 +235,18 @@ export const providers: Provider[] = [ }, ], }, + // Caisy + { + name: 'caisy', + samples: [ + { + src: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/2d99a80a-92a9-4865-b666-149431eb1732/edcbb3ec-660b-4683-ac8d-56b428da55e1pexelscottonbrostudio4965822.jpg', + width: 500, + height: 500, + quality: 90, + }, + ], + }, // Cloudflare { name: 'cloudflare', @@ -257,6 +269,41 @@ export const providers: Provider[] = [ }, ], }, + // Cloudimage + { + name: 'cloudimage', + samples: [ + { + src: 'https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media', + width: 400, + height: 250, + densities: 'x1 x2', + fit: 'contain', + quality: 65, + format: 'webp', + }, + { + src: 'bag.jpg', + width: 500, + height: 500, + fit: 'contain', + }, + { + src: 'boat.jpg', + width: 800, + height: 800, + quality: 75, + fit: 'cover', + }, + { + src: 'img.jpg', + width: 300, + height: 300, + format: 'webp', + fit: 'fill', + }, + ], + }, // Cloudinary { name: 'cloudinary', @@ -299,38 +346,34 @@ export const providers: Provider[] = [ }, ], }, - // Cloudimage + // Directus { - name: 'cloudimage', + name: 'directus', samples: [ { - src: 'https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1', - width: 400, - height: 250, - densities: 'x1 x2', - fit: 'contain', - quality: 65, - format: 'webp', + src: '39ff62fd-902e-458c-808f-702460c51309', + alt: 'Image 1', }, { - src: 'bag.jpg', - width: 500, - height: 500, - fit: 'contain', + src: '39ff62fd-902e-458c-808f-702460c51309.jpg', + alt: '1024px width', + width: 1024, + height: 256, + fit: 'cover', + modifiers: { withoutEnlargement: 'true' }, }, { - src: 'boat.jpg', - width: 800, - height: 800, - quality: 75, - fit: 'cover', + src: '39ff62fd-902e-458c-808f-702460c51309', + alt: '256px width, webp', + width: 256, + format: 'webp', }, { - src: 'img.jpg', - width: 300, - height: 300, + src: '39ff62fd-902e-458c-808f-702460c51309', + alt: '256px width, webp', + width: 256, format: 'webp', - fit: 'fill', + modifiers: { withoutEnlargement: 'true', transforms: [['blur', 4], ['negate']] }, }, ], }, @@ -338,8 +381,18 @@ export const providers: Provider[] = [ { name: 'fastly', samples: [ - { src: '/image.jpg' }, - { src: '/plant.jpeg' }, + { + src: '/image.jpg', + width: 400, + }, + { + src: '/image.png', + height: 250, + }, + { + src: 'https://www.fastly.io/image.gif?v=123', + height: 100, + }, ], }, // Filerobot @@ -402,46 +455,6 @@ export const providers: Provider[] = [ }, ], }, - // ImageKit - { - name: 'imagekit', - samples: [ - { - src: '/girl.jpeg', - }, - { - src: '/girl.jpeg', - width: 400, - height: 300, - fit: 'fill', - }, - { - src: '/girl.jpeg', - width: 200, - height: 300, - modifiers: { - focus: 'auto', - }, - }, - { - src: '/girl.jpeg', - width: 150, - height: 150, - modifiers: { - focus: 'face', - }, - }, - { - src: '/girl.jpeg', - width: 150, - height: 150, - modifiers: { - focus: 'face', - radius: 'max', - }, - }, - ], - }, // GitHub { name: 'github', @@ -461,6 +474,18 @@ export const providers: Provider[] = [ }, ], }, + // Glide + { + name: 'glide', + samples: [ + { + src: '/kayaks.jpg', + width: 1000, + quality: 70, + modifiers: { gam: 0.9, sharp: 8 }, + }, + ], + }, // gumlet { name: 'gumlet', @@ -473,15 +498,29 @@ export const providers: Provider[] = [ }, ], }, - // imgix + // Hygraph { - name: 'imgix', + name: 'hygraph', samples: [ { - src: 'blog/woman-hat.jpg', + src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', + width: 500, + height: 500, + fit: 'crop', + quality: 90, + }, + { + src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', + width: 500, + fit: 'max', + format: 'auto_image', + }, + { + src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', width: 300, height: 300, - fit: 'cover', + fit: 'clip', + format: 'jpeg', }, ], }, @@ -498,18 +537,59 @@ export const providers: Provider[] = [ }, ], }, - // Glide + // ImageKit { - name: 'glide', + name: 'imagekit', samples: [ { - src: '/kayaks.jpg', - width: 1000, - quality: 70, - modifiers: { gam: 0.9, sharp: 8 }, + src: '/girl.jpeg', + }, + { + src: '/girl.jpeg', + width: 400, + height: 300, + fit: 'fill', + }, + { + src: '/girl.jpeg', + width: 200, + height: 300, + modifiers: { + focus: 'auto', + }, + }, + { + src: '/girl.jpeg', + width: 150, + height: 150, + modifiers: { + focus: 'face', + }, + }, + { + src: '/girl.jpeg', + width: 150, + height: 150, + modifiers: { + focus: 'face', + radius: 'max', + }, + }, + ], + }, + // imgix + { + name: 'imgix', + samples: [ + { + src: 'blog/woman-hat.jpg', + width: 300, + height: 300, + fit: 'cover', }, ], }, + // netlifyImageCdn { name: 'netlifyImageCdn', samples: [ @@ -526,6 +606,7 @@ export const providers: Provider[] = [ }, ], }, + // netlifyLargeMedia { name: 'netlifyLargeMedia', samples: [ @@ -542,7 +623,7 @@ export const providers: Provider[] = [ }, ], }, - // Picsum (Lorem Picsum placeholder images) + // Picsum { name: 'picsum', samples: [ @@ -636,266 +717,31 @@ export const providers: Provider[] = [ }, ], }, - // TwicPics + // Sanity { - name: 'twicpics', + name: 'sanity', samples: [ { - src: '/football.jpg', - }, // basic + src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', + }, { - src: '/football.jpg', - width: 501, - height: 501, + src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', + width: 200, + height: 200, + fit: 'fill', + }, + { + src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', + width: 200, + height: 200, fit: 'cover', - }, // cover + }, { - src: '/football.jpg', - width: 501, - height: 1001, + src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', + width: 200, + height: 200, fit: 'contain', - }, // contain - { - src: '/football.jpg', - width: 501, - height: 1001, - fit: 'fill', - }, // fill - { - src: '/football.jpg', - width: 501, - height: 501, - fit: 'inside', - }, // inside - { - src: 'cat_1x1.jpg', - width: 300, - height: 600, - fit: 'inside', - background: 'red', - }, // ratio - { - src: '/football.jpg', - width: 501, - height: 1001, - fit: 'outside', - }, // outside - { - src: '/icon-500.png', - width: 501, - background: 'red', - }, // background transformation - { - src: '/peacock.jpg', - width: 501, - format: 'avif', - }, // output format - { - src: '/peacock.jpg', - width: 501, - format: 'preview', - }, // output format : mode preview - { - src: '/peacock.jpg', - width: 501, - format: 'maincolor', - }, // output format : mode maincolor - { - src: '/peacock.jpg', - width: 501, - format: 'blank', - }, // output format : blank - { - src: '/peacock.jpg', - quality: 100, - }, // output quality : max - { - src: '/peacock.jpg', - quality: 1, - }, // output quality : poor quality - { - src: '/woman-14.jpg', - }, // original - { - src: '/woman-14.jpg', - width: 501, - height: 301, - modifiers: - { - focus: 'auto', - }, - }, // cover 501x301 - { - src: '/woman-14.jpg', - width: 501, - fit: 'inside', - modifiers: - { - focus: 'auto', - }, - }, // inside width 501 - { - src: 'cat_1x1.jpg', - width: 300, - fit: 'resize', - modifiers: - { - cover: '4:3', - }, - }, // ratio - { - src: '/cat.jpg', - modifiers: - { - crop: '500x100', - }, - }, // crop api - { - src: '/cat.jpg', - width: 501, - modifiers: - { - crop: '500x100@700x400', - }, - }, // crop api with coordinates - { - src: '/cat.jpg', - width: 501, - modifiers: - { - focus: 'auto', - crop: '500x100', - }, - }, // crop api with focus auto - { - src: '/cat_1x1.jpg', - modifiers: - { - focus: 'auto', - crop: '500x500', - }, - }, // crop api with focus auto - { - src: '/football.jpg', - modifiers: - { - focus: 'auto', - cover: '1:1', - }, - }, // crop api with focus auto - { - src: '/puppy.jpg', - width: 501, - modifiers: - { - flip: 'both', - }, - }, // flip api - { - src: '/peacock.jpg', - format: 'png', - modifiers: - { - truecolor: true, - }, - }, // truecolor api - { - src: '/peacock.jpg', - format: 'png', - modifiers: - { - truecolor: false, - }, - }, // truecolor api - { - src: '/man-13.jpg', - format: 'png', - modifiers: - { - turn: 'left', - }, - }, // turn api - { - src: '/man-13.jpg', - format: 'png', - modifiers: - { - turn: 80, - }, - }, // turn api - { - src: '/man-13.jpg', - format: 'png', - modifiers: - { - turn: 90, - }, - }, // turn api - { - src: '/cherry-3.jpg', - format: 'png', - width: 501, - modifiers: - { - focus: 'auto', - zoom: 1.5, - }, - }, // zoom api - { - src: '/cherry-3.jpg', - format: 'png', - width: 501, - modifiers: - { - focus: 'auto', - zoom: 3, - }, - }, // zoom api - { - src: '/football.jpg', - modifiers: - { - cover: '16:9', - focus: 'auto', - turn: 'left', - }, - }, - { - src: '/football.jpg', - modifiers: - { - focus: 'auto', - turn: 'left', - cover: '16:9', - }, - }, - ], - }, - // Sanity - { - name: 'sanity', - samples: [ - { - src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', - }, - { - src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', - width: 200, - height: 200, - fit: 'fill', - }, - { - src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', - width: 200, - height: 200, - fit: 'cover', - }, - { - src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', - width: 200, - height: 200, - fit: 'contain', - }, + }, { src: 'image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg', width: 200, @@ -1002,29 +848,143 @@ export const providers: Provider[] = [ }, ], }, - // Strapi + // Sirv { - name: 'strapi', + name: 'sirv', samples: [ { - src: '/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', - alt: 'Image 1', + src: '/test.png', + width: 750, + quality: 75, }, { - src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', - alt: 'Thumbnail image', - modifiers: { breakpoint: 'thumbnail' }, + src: '/harris-large.jpg', + width: 500, + format: 'png', }, { - src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', - alt: 'Small image', - modifiers: { breakpoint: 'small' }, + src: '/lacoste.jpg', + width: 500, + quality: 95, + modifiers: { crop: 'trim' }, }, { - src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', - alt: 'Medium image', - modifiers: { breakpoint: 'medium' }, - }, + src: '/look-big.jpg', + height: 500, + fit: 'contain', + }, + { + src: '/look-big.jpg', + height: 500, + modifiers: { crop: 'face' }, + }, + { + src: '/QW.pdf', + width: 500, + modifiers: { pdfPage: 1 }, + }, + { + src: '/look-big.jpg', + height: 500, + modifiers: { text: 'Hello', textAlign: 'center', textPositionGravity: 'south', textBackgroundColor: '#ffff', textSize: 60, textFontFamily: 'Arial', textColor: 'white' }, + }, + { + src: 't-shirt-man.jpg', + height: 500, + modifiers: { watermark: '/watermark-v1.png', watermarkPosition: 'center', watermarkWidth: '30%' }, + }, + ], + }, + // Storyblok + { + name: 'storyblok', + samples: [ + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Original', + }, + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Resized static', + width: 500, + height: 500, + }, + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Proportional to Width', + width: 500, + }, + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Proportional to Height', + height: 500, + }, + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Fit in with background CCCCCC', + width: 200, + height: 200, + fit: 'in', + filters: { fill: 'CCCCCC' }, + }, + { + src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', + alt: 'Change image format', + width: 200, + format: 'webp', + }, + { + src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', + alt: 'Resized without Smart Crop', + width: 600, + height: 130, + }, + { + src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', + alt: 'Resized with Smart Crop (Facial detection)', + width: 600, + height: 130, + smart: true, + }, + { + src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', + alt: 'Custom focal point (Focus on the bottom of the image)', + width: 600, + height: 130, + operations: { filters: { focal: '450x500:550x600' } }, + }, + { + src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', + alt: 'Custom focal point (Focus on the top of the image)', + width: 600, + height: 130, + operations: { filters: { focal: '450x0:550x100' } }, + }, + ], + }, + // Strapi + { + name: 'strapi', + samples: [ + { + src: '/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Image 1', + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Thumbnail image', + modifiers: { breakpoint: 'thumbnail' }, + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Small image', + modifiers: { breakpoint: 'small' }, + }, + { + src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', + alt: 'Medium image', + modifiers: { breakpoint: 'medium' }, + }, { src: '4d9z1eiyo2gmf6gd7xhp_823ae510e8.png', alt: 'Large image', @@ -1062,93 +1022,261 @@ export const providers: Provider[] = [ }, ], }, - // Storyblok + // Supabase { - name: 'storyblok', + name: 'supabase', samples: [ { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Original', + src: '/test.png', + width: 300, + height: 200, }, { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Resized static', - width: 500, - height: 500, + src: '/test.png', + width: 400, + height: 300, + quality: 80, }, { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Proportional to Width', + src: '/test.png', width: 500, - }, - { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Proportional to Height', height: 500, + fit: 'cover', }, + ], + }, + // TwicPics + { + name: 'twicpics', + samples: [ + { + src: '/football.jpg', + }, // basic + { + src: '/football.jpg', + width: 501, + height: 501, + fit: 'cover', + }, // cover + { + src: '/football.jpg', + width: 501, + height: 1001, + fit: 'contain', + }, // contain + { + src: '/football.jpg', + width: 501, + height: 1001, + fit: 'fill', + }, // fill + { + src: '/football.jpg', + width: 501, + height: 501, + fit: 'inside', + }, // inside + { + src: 'cat_1x1.jpg', + width: 300, + height: 600, + fit: 'inside', + background: 'red', + }, // ratio + { + src: '/football.jpg', + width: 501, + height: 1001, + fit: 'outside', + }, // outside + { + src: '/icon-500.png', + width: 501, + background: 'red', + }, // background transformation + { + src: '/peacock.jpg', + width: 501, + format: 'avif', + }, // output format + { + src: '/peacock.jpg', + width: 501, + format: 'preview', + }, // output format : mode preview + { + src: '/peacock.jpg', + width: 501, + format: 'maincolor', + }, // output format : mode maincolor + { + src: '/peacock.jpg', + width: 501, + format: 'blank', + }, // output format : blank + { + src: '/peacock.jpg', + quality: 100, + }, // output quality : max + { + src: '/peacock.jpg', + quality: 1, + }, // output quality : poor quality + { + src: '/woman-14.jpg', + }, // original + { + src: '/woman-14.jpg', + width: 501, + height: 301, + modifiers: + { + focus: 'auto', + }, + }, // cover 501x301 + { + src: '/woman-14.jpg', + width: 501, + fit: 'inside', + modifiers: + { + focus: 'auto', + }, + }, // inside width 501 + { + src: 'cat_1x1.jpg', + width: 300, + fit: 'resize', + modifiers: + { + cover: '4:3', + }, + }, // ratio + { + src: '/cat.jpg', + modifiers: + { + crop: '500x100', + }, + }, // crop api + { + src: '/cat.jpg', + width: 501, + modifiers: + { + crop: '500x100@700x400', + }, + }, // crop api with coordinates + { + src: '/cat.jpg', + width: 501, + modifiers: + { + focus: 'auto', + crop: '500x100', + }, + }, // crop api with focus auto + { + src: '/cat_1x1.jpg', + modifiers: + { + focus: 'auto', + crop: '500x500', + }, + }, // crop api with focus auto + { + src: '/football.jpg', + modifiers: + { + focus: 'auto', + cover: '1:1', + }, + }, // crop api with focus auto + { + src: '/puppy.jpg', + width: 501, + modifiers: + { + flip: 'both', + }, + }, // flip api { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Fit in with background CCCCCC', - width: 200, - height: 200, - fit: 'in', - filters: { fill: 'CCCCCC' }, - }, + src: '/peacock.jpg', + format: 'png', + modifiers: + { + truecolor: true, + }, + }, // truecolor api { - src: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', - alt: 'Change image format', - width: 200, - format: 'webp', - }, + src: '/peacock.jpg', + format: 'png', + modifiers: + { + truecolor: false, + }, + }, // truecolor api { - src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', - alt: 'Resized without Smart Crop', - width: 600, - height: 130, - }, + src: '/man-13.jpg', + format: 'png', + modifiers: + { + turn: 'left', + }, + }, // turn api { - src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', - alt: 'Resized with Smart Crop (Facial detection)', - width: 600, - height: 130, - smart: true, - }, + src: '/man-13.jpg', + format: 'png', + modifiers: + { + turn: 80, + }, + }, // turn api { - src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', - alt: 'Custom focal point (Focus on the bottom of the image)', - width: 600, - height: 130, - operations: { filters: { focal: '450x500:550x600' } }, - }, + src: '/man-13.jpg', + format: 'png', + modifiers: + { + turn: 90, + }, + }, // turn api { - src: 'https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg', - alt: 'Custom focal point (Focus on the top of the image)', - width: 600, - height: 130, - operations: { filters: { focal: '450x0:550x100' } }, - }, - ], - }, - // Supabase - { - name: 'supabase', - samples: [ + src: '/cherry-3.jpg', + format: 'png', + width: 501, + modifiers: + { + focus: 'auto', + zoom: 1.5, + }, + }, // zoom api { - src: '/test.png', - width: 300, - height: 200, - }, + src: '/cherry-3.jpg', + format: 'png', + width: 501, + modifiers: + { + focus: 'auto', + zoom: 3, + }, + }, // zoom api { - src: '/test.png', - width: 400, - height: 300, - quality: 80, + src: '/football.jpg', + modifiers: + { + cover: '16:9', + focus: 'auto', + turn: 'left', + }, }, { - src: '/test.png', - width: 500, - height: 500, - fit: 'cover', + src: '/football.jpg', + modifiers: + { + focus: 'auto', + turn: 'left', + cover: '16:9', + }, }, ], }, @@ -1178,17 +1306,6 @@ export const providers: Provider[] = [ }, ], }, - // Vercel - { - name: 'vercel', - samples: [ - { - src: 'colors.jpg', - width: 750, - quality: 75, - }, - ], - }, // Uploadcare { name: 'uploadcare', @@ -1241,6 +1358,17 @@ export const providers: Provider[] = [ }, ], }, + // Vercel + { + name: 'vercel', + samples: [ + { + src: 'colors.jpg', + width: 750, + quality: 75, + }, + ], + }, // wagtail { name: 'wagtail', @@ -1292,37 +1420,6 @@ export const providers: Provider[] = [ }, ], }, - // Directus - { - name: 'directus', - samples: [ - { - src: 'ad514db1-eb90-4523-8183-46781437e7ee', - alt: 'Image 1', - }, - { - src: 'ad514db1-eb90-4523-8183-46781437e7ee.jpg', - alt: '1024px width', - width: 1024, - height: 256, - fit: 'cover', - modifiers: { withoutEnlargement: 'true' }, - }, - { - src: 'ad514db1-eb90-4523-8183-46781437e7ee', - alt: '256px width, webp', - width: 256, - format: 'webp', - }, - { - src: 'ad514db1-eb90-4523-8183-46781437e7ee', - alt: '256px width, webp', - width: 256, - format: 'webp', - modifiers: { withoutEnlargement: 'true', transforms: [['blur', 4], ['negate']] }, - }, - ], - }, // weserv { name: 'weserv', @@ -1348,91 +1445,6 @@ export const providers: Provider[] = [ }, ], }, - // Sirv - { - name: 'sirv', - samples: [ - { - src: '/test.png', - width: 750, - quality: 75, - }, - { - src: '/harris-large.jpg', - width: 500, - format: 'png', - }, - { - src: '/lacoste.jpg', - width: 500, - quality: 95, - modifiers: { crop: 'trim' }, - }, - { - src: '/look-big.jpg', - height: 500, - fit: 'contain', - }, - { - src: '/look-big.jpg', - height: 500, - modifiers: { crop: 'face' }, - }, - { - src: '/QW.pdf', - width: 500, - modifiers: { pdfPage: 1 }, - }, - { - src: '/look-big.jpg', - height: 500, - modifiers: { text: 'Hello', textAlign: 'center', textPositionGravity: 'south', textBackgroundColor: '#ffff', textSize: 60, textFontFamily: 'Arial', textColor: 'white' }, - }, - { - src: 't-shirt-man.jpg', - height: 500, - modifiers: { watermark: '/watermark-v1.png', watermarkPosition: 'center', watermarkWidth: '30%' }, - }, - ], - }, - // Hygraph - { - name: 'hygraph', - samples: [ - { - src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', - width: 500, - height: 500, - fit: 'crop', - quality: 90, - }, - { - src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', - width: 500, - fit: 'max', - format: 'auto_image', - }, - { - src: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', - width: 300, - height: 300, - fit: 'clip', - format: 'jpeg', - }, - ], - }, - // Caisy - { - name: 'caisy', - samples: [ - { - src: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg', - width: 500, - height: 500, - quality: 90, - }, - ], - }, // Umbraco { name: 'umbraco', diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index c4dbf392d..efbbeab19 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -67,7 +67,7 @@ export default defineNuxtConfig({ apiVersion: 'v7', }, directus: { - baseURL: 'http://localhost:8055/assets/', + baseURL: 'https://example.directus.app/assets/', }, fastly: { baseURL: 'https://www.fastly.io', diff --git a/test/e2e/__snapshots__/caisy.json5 b/test/e2e/__snapshots__/caisy.json5 index 40906cb11..2c0e82aff 100644 --- a/test/e2e/__snapshots__/caisy.json5 +++ b/test/e2e/__snapshots__/caisy.json5 @@ -1,8 +1,8 @@ { "requests": [ - "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=500&h=500&q=90", + "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/2d99a80a-92a9-4865-b666-149431eb1732/edcbb3ec-660b-4683-ac8d-56b428da55e1pexelscottonbrostudio4965822.jpg?w=500&h=500&q=90", ], "sources": [ - "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=500&h=500&q=90", + "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/2d99a80a-92a9-4865-b666-149431eb1732/edcbb3ec-660b-4683-ac8d-56b428da55e1pexelscottonbrostudio4965822.jpg?w=500&h=500&q=90", ], } \ No newline at end of file diff --git a/test/e2e/__snapshots__/cloudimage.json5 b/test/e2e/__snapshots__/cloudimage.json5 index 0418c87a1..f5359dc8f 100644 --- a/test/e2e/__snapshots__/cloudimage.json5 +++ b/test/e2e/__snapshots__/cloudimage.json5 @@ -1,12 +1,12 @@ { "requests": [ - "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit", + "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media?width=400&height=250&force_format=webp&q=65&func=fit", "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", ], "sources": [ - "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit", + "https://demo.cloudimg.io/v7/https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media?width=400&height=250&force_format=webp&q=65&func=fit", "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", diff --git a/test/e2e/__snapshots__/directus.json5 b/test/e2e/__snapshots__/directus.json5 index 8dc47c7e1..d6de56e14 100644 --- a/test/e2e/__snapshots__/directus.json5 +++ b/test/e2e/__snapshots__/directus.json5 @@ -1,14 +1,14 @@ { "requests": [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309?width=256&format=webp", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ], "sources": [ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309?width=256&format=webp", + "https://example.directus.app/assets/39ff62fd-902e-458c-808f-702460c51309?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", ], } \ No newline at end of file diff --git a/test/e2e/__snapshots__/fastly.json5 b/test/e2e/__snapshots__/fastly.json5 index 342859187..d098b0bfb 100644 --- a/test/e2e/__snapshots__/fastly.json5 +++ b/test/e2e/__snapshots__/fastly.json5 @@ -1,10 +1,12 @@ { "requests": [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.gif?v=123&height=100", + "https://www.fastly.io/image.jpg?width=400", + "https://www.fastly.io/image.png?height=250", ], "sources": [ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", + "https://www.fastly.io/image.jpg?width=400", + "https://www.fastly.io/image.png?height=250", + "https://www.fastly.io/image.gif?v=123&height=100", ], } \ No newline at end of file diff --git a/test/nuxt/providers.test.ts b/test/nuxt/providers.test.ts index b7a284636..e7510162d 100644 --- a/test/nuxt/providers.test.ts +++ b/test/nuxt/providers.test.ts @@ -5,41 +5,46 @@ import { images } from '../providers' import { useNuxtApp } from '#imports' import ipx from '../../dist/runtime/providers/ipx' import none from '../../dist/runtime/providers/none' -import weserv from '../../dist/runtime/providers/weserv' import aliyun from '../../dist/runtime/providers/aliyun' import awsAmplify from '../../dist/runtime/providers/awsAmplify' +import builderio from '../../dist/runtime/providers/builderio' +import bunny from '../../dist/runtime/providers/bunny' +import caisy from '../../dist/runtime/providers/caisy' import cloudflare from '../../dist/runtime/providers/cloudflare' import cloudflareimages from '../../dist/runtime/providers/cloudflareimages' +import cloudimage from '../../dist/runtime/providers/cloudimage' import cloudinary from '../../dist/runtime/providers/cloudinary' -import twicpics from '../../dist/runtime/providers/twicpics' +import contentful from '../../dist/runtime/providers/contentful' +import directus from '../../dist/runtime/providers/directus' import fastly from '../../dist/runtime/providers/fastly' -import picsum from '../../dist/runtime/providers/picsum' -import prepr from '../../dist/runtime/providers/prepr' +import filerobot from '../../dist/runtime/providers/filerobot' +import github from '../../dist/runtime/providers/github' import glide from '../../dist/runtime/providers/glide' -import imgix from '../../dist/runtime/providers/imgix' import gumlet from '../../dist/runtime/providers/gumlet' +import hygraph from '../../dist/runtime/providers/hygraph' import imageengine from '../../dist/runtime/providers/imageengine' -import unsplash from '../../dist/runtime/providers/unsplash' import imagekit from '../../dist/runtime/providers/imagekit' +import imgix from '../../dist/runtime/providers/imgix' import netlifyImageCdn from '../../dist/runtime/providers/netlifyImageCdn' import netlifyLargeMedia from '../../dist/runtime/providers/netlifyLargeMedia' +import picsum from '../../dist/runtime/providers/picsum' +import prepr from '../../dist/runtime/providers/prepr' import prismic from '../../dist/runtime/providers/prismic' import sanity from '../../dist/runtime/providers/sanity' import shopify from '../../dist/runtime/providers/shopify' -import builderio from '../../dist/runtime/providers/builderio' -import contentful from '../../dist/runtime/providers/contentful' -import cloudimage from '../../dist/runtime/providers/cloudimage' +import sirv from '../../dist/runtime/providers/sirv' import storyblok from '../../dist/runtime/providers/storyblok' import strapi from '../../dist/runtime/providers/strapi' import strapi5 from '../../dist/runtime/providers/strapi5' import supabase from '../../dist/runtime/providers/supabase' +import twicpics from '../../dist/runtime/providers/twicpics' +import unsplash, { unsplashCDN } from '../../dist/runtime/providers/unsplash' +import uploadcare from '../../dist/runtime/providers/uploadcare' import vercel from '../../dist/runtime/providers/vercel' import wagtail from '../../dist/runtime/providers/wagtail' -import uploadcare from '../../dist/runtime/providers/uploadcare' -import sirv from '../../dist/runtime/providers/sirv' -import hygraph from '../../dist/runtime/providers/hygraph' -import umbraco from '../../dist/runtime/providers/umbraco' +import weserv from '../../dist/runtime/providers/weserv' import flyimg from '../../dist/runtime/providers/flyimg' +import umbraco from '../../dist/runtime/providers/umbraco' function getEmptyContext() { return { @@ -64,6 +69,7 @@ describe('Providers', () => { } } }) + it('ipx', () => { const providerOptions = {} @@ -83,6 +89,18 @@ describe('Providers', () => { url: '/_ipx/_/images/test.png', }) }) + + it('none', () => { + const providerOptions = { + } + + for (const image of images) { + const [src, modifiers] = image.args + const generated = none().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.none) + } + }) + it('aliyun', () => { const providerOptions = { baseURL: '/', @@ -93,6 +111,7 @@ describe('Providers', () => { expect(generated).toMatchObject(image.aliyun) } }) + it('awsAmplify', () => { const providerOptions = { baseURL: '/', @@ -103,6 +122,45 @@ describe('Providers', () => { expect(generated).toMatchObject(image.awsAmplify) } }) + + it('builderio', () => { + const providerOptions = {} + + const originalUrl = 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425' + + for (const image of images) { + const [, modifiers] = image.args + const generated = builderio().getImage(originalUrl, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.builderio) + } + }) + + // bunny does not support `fit` Tests currently fail (although impact to user is silent failure). + it.todo('bunny', () => { + const providerOptions = { + baseURL: 'https://bunnyoptimizerdemo.b-cdn.net/', + } + + for (const image of images) { + const [src, modifiers] = image.args + const generated = bunny().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.bunny) + } + }) + + // caisy uses a project id and not a baseURL. see: https://caisy.io/developer/docs/internal-api/asset-cdn#top + it.todo('caisy', () => { + const providerOptions = { + baseURL: '', + } + + for (const image of images) { + const [src, modifiers] = image.args + const generated = caisy().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.caisy) + } + }) + it('cloudflare', () => { const providerOptions = { baseURL: '/', @@ -143,6 +201,29 @@ describe('Providers', () => { const generated = cloudflareimages().getImage('imageId123', { modifiers: { variant: 'customVariant', width: 500 }, ...providerOptions }, getEmptyContext()) expect(generated).toMatchObject({ url: 'https://imagedelivery.net/accountHash/imageId123/customVariant' }) }) + + it('cloudimage', () => { + const providerOptions = { + token: 'demo', + apiVersion: 'v7', + baseURL: '_sl_', + } + + for (const image of images) { + const [src, modifiers] = image.args + const generated = cloudimage().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.cloudimage) + } + + const nonBaseURLProviderOptions = { + token: 'demo', + apiVersion: 'v7', + } + const src = 'https://localhost' + images[0].args[0] + const generated = cloudimage().getImage(src, { modifiers: { ...images[0].args[1] }, ...nonBaseURLProviderOptions }, getEmptyContext()) + expect(generated).toMatchObject({ url: 'https://demo.cloudimg.io/v7/https://localhost/test.png' }) + }) + it('cloudinary', () => { const providerOptions = { baseURL: '/', @@ -223,26 +304,26 @@ describe('Providers', () => { }) }) - it('twicpics', () => { + it('contentful', () => { const providerOptions = { baseURL: '', } for (const image of images) { const [src, modifiers] = image.args - const generated = twicpics().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.twicpics) + const generated = contentful().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.contentful) } }) - it('glide', () => { + it('directus', () => { const providerOptions = { - baseURL: '', + baseURL: 'https://demo.directus.app/assets/', } for (const image of images) { const [src, modifiers] = image.args - const generated = glide().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.glide) + const generated = directus().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.directus) } }) @@ -250,24 +331,63 @@ describe('Providers', () => { const providerOptions = { baseURL: '', } + const EXISTING_QUERY_PARAMETERS = '?v=123' for (const image of images) { const [src, modifiers] = image.args - const generated = fastly().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + const generated = fastly().getImage(`${src}${EXISTING_QUERY_PARAMETERS}`, { modifiers, ...providerOptions }, getEmptyContext()) expect(generated).toMatchObject(image.fastly) } }) - it('fastly with absolute url and preexisting query params', () => { + it('filerobot', () => { const providerOptions = { - baseURL: '', + baseURL: 'https://demo.filerobot.com/', } + for (const image of images) { + const [src, modifiers] = image.args + const generated = filerobot().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.filerobot) + } + }) - const originalUrl = 'https://www.fastly.io/image.jpg?v=123' + it('flyimg', () => { + const providerOptions = { + baseURL: 'https://demo.flyimg.io', + sourceURL: 'https://my-website.com', + } for (const image of images) { - const [, modifiers] = image.args - const generated = fastly().getImage(originalUrl, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.fastlyAbsoluteUrl) + const [src, modifiers] = image.args + const generated = flyimg().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.flyimg) + } + + // fit: 'cover' → c_1 flag + expect(flyimg().getImage('/test.png', { modifiers: { width: 200, height: 200, fit: 'cover' }, ...providerOptions }, getEmptyContext())) + .toMatchObject({ url: 'https://demo.flyimg.io/upload/w_200,h_200,c_1/https://my-website.com/test.png' }) + + // fit: 'fill' → par_0 flag + expect(flyimg().getImage('/test.png', { modifiers: { width: 200, height: 200, fit: 'fill' }, ...providerOptions }, getEmptyContext())) + .toMatchObject({ url: 'https://demo.flyimg.io/upload/w_200,h_200,par_0/https://my-website.com/test.png' }) + }) + + it('github', () => { + const providerOptions = {} + for (const image of images) { + const [src, modifiers] = image.args + const generated = github().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.github) + } + }) + + it('glide', () => { + const providerOptions = { + baseURL: '', + } + for (const image of images) { + const [src, modifiers] = image.args + const generated = glide().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.glide) } }) @@ -283,15 +403,14 @@ describe('Providers', () => { } }) - it('imgix', () => { + it('hygraph', () => { const providerOptions = { - baseURL: '', + baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/', } - for (const image of images) { - const [src, modifiers] = image.args - const generated = imgix().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.imgix) + const [_src, modifiers] = image.args + const generated = hygraph().getImage('https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue', { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.hygraph) } }) @@ -396,30 +515,32 @@ describe('Providers', () => { } }) - it('unsplash', () => { + it('imagekit', () => { const providerOptions = { baseURL: '', } for (const image of images) { const [src, modifiers] = image.args - const generated = unsplash().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.unsplash) + const generated = imagekit().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.imagekit) } }) - it('imagekit', () => { + it('imgix', () => { const providerOptions = { baseURL: '', } for (const image of images) { const [src, modifiers] = image.args - const generated = imagekit().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.imagekit) + const generated = imgix().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.imgix) } }) + // ipx is at the top! + it('netlifyImageCdn', () => { const providerOptions = { baseURL: '', @@ -444,33 +565,51 @@ describe('Providers', () => { } }) - it('prismic', () => { - const providerOptions = { - baseURL: '', // Use empty base URL for the sake of simplicity + // None is at the top! + + it('picsum', () => { + const providerOptions = {} + + for (const image of images) { + const [_src, modifiers] = image.args + const generated = picsum().getImage('', { modifiers: { ...modifiers }, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.picsum) } + }) - const EXISTING_QUERY_PARAMETERS - = '?auto=compress,format&rect=0,0,200,200&w=100&h=100' + it('prepr', () => { + const providerOptions = { + projectName: 'projectName', + } for (const image of images) { const [src, modifiers] = image.args - const generated = prismic().getImage(`${src}${EXISTING_QUERY_PARAMETERS}`, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.prismic) + const generated = prepr().getImage(src, { modifiers: { ...modifiers }, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.prepr) } }) - it('prismic (unsplash)', () => { + it('prismic', () => { const providerOptions = { - baseURL: '', // Use empty base URL for the sake of simplicity + baseURL: 'https://example.com/', } - const EXISTING_QUERY_PARAMETERS - = '?auto=compress,format&rect=0,0,200,200&w=100&h=100' + const EXISTING_QUERY_PARAMETERS = '?auto=compress,format&rect=0,0,200,200&w=100&h=100' for (const image of images) { - const [, modifiers] = image.args - const generated = prismic().getImage(`${image.prismicUnsplash.url.split('?').shift()}${EXISTING_QUERY_PARAMETERS}`, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.prismicUnsplash) + const [src, modifiers] = image.args + const generated = prismic().getImage(`${src}${EXISTING_QUERY_PARAMETERS}`, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.prismic) + } + for (const image of images) { + const [src, modifiers] = image.args + // simulate src from unsplash + const unsplashSrc = `${unsplashCDN}${src.replace(/^\//, '')}${EXISTING_QUERY_PARAMETERS}` + const generatedSimulated = prismic().getImage(unsplashSrc, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generatedSimulated.url.startsWith(unsplashCDN), 'prismic+unsplash ignore baseURL').toBe(true) + expect(() => decodeURIComponent(generatedSimulated.url), 'prismic+unsplash to return valid URI').not.toThrow() + const simulatePrismic = { url: generatedSimulated.url.replace(unsplashCDN, providerOptions.baseURL) } + expect(simulatePrismic).toMatchObject(image.prismic) } }) @@ -501,71 +640,15 @@ describe('Providers', () => { } }) - it('builderio', () => { - const providerOptions = {} - - const originalUrl = 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425' - - for (const image of images) { - const [, modifiers] = image.args - const generated = builderio().getImage(originalUrl, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.builderio) - } - }) - - it('prepr', () => { - const providerOptions = { - projectName: 'projectName', - } - - for (const image of images) { - const [, modifiers] = image.args - const generated = prepr().getImage('image-test-300x450-png', { modifiers: { ...modifiers }, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.prepr) - } - }) - it('picsum', () => { - const providerOptions = {} - - for (const image of images) { - const [_src, modifiers] = image.args - const generated = picsum().getImage('', { modifiers: { ...modifiers }, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.picsum) - } - }) - - it('contentful', () => { - const providerOptions = { - baseURL: '', - } - - for (const image of images) { - const [src, modifiers] = image.args - const generated = contentful().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.contentful) - } - }) - - it('cloudimage', () => { + it('sirv', () => { const providerOptions = { - token: 'demo', - apiVersion: 'v7', - baseURL: '_sl_', + baseURL: 'https://demo.sirv.com', } - for (const image of images) { const [src, modifiers] = image.args - const generated = cloudimage().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.cloudimage) - } - - const nonBaseURLProviderOptions = { - token: 'demo', - apiVersion: 'v7', + const generated = sirv().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.sirv) } - const src = 'https://localhost' + images[0].args[0] - const generated = cloudimage().getImage(src, { modifiers: { ...images[0].args[1] }, ...nonBaseURLProviderOptions }, getEmptyContext()) - expect(generated).toMatchObject({ url: 'https://demo.cloudimg.io/v7/https://localhost/test.png' }) }) it('storyblok', () => { @@ -578,18 +661,6 @@ describe('Providers', () => { } }) - it('supabase', () => { - const providerOptions = { - baseURL: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt', - } - - for (const image of images) { - const [src, modifiers] = image.args - const generated = supabase().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.supabase) - } - }) - it('strapi', () => { const test = { '': 'http://localhost:1337/uploads/test.png', @@ -714,77 +785,80 @@ describe('Providers', () => { } }) - it('vercel', () => { + it('supabase', () => { const providerOptions = { + baseURL: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt', } for (const image of images) { const [src, modifiers] = image.args - const generated = vercel().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.vercel) + const generated = supabase().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.supabase) } }) - it('wagtail', () => { - const providerOptions = { baseURL: '/' } - const testImageId = '329944' + it('twicpics', () => { + const providerOptions = { + baseURL: '', + } + for (const image of images) { - const [_src, modifiers] = image.args - const generated = wagtail().getImage(testImageId, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.wagtail) + const [src, modifiers] = image.args + const generated = twicpics().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.twicpics) } }) - it('uploadcare', () => { + it('umbraco', () => { const providerOptions = {} - const testImageId = 'c160afba-8b42-45a9-a46a-d393248b0072' + for (const image of images) { - const generated = uploadcare().getImage(testImageId, { modifiers: { ...image.args[1] }, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.uploadcare) + const [src, modifiers] = image.args + const generated = umbraco().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.umbraco) } }) - it('sirv', () => { + it('unsplash', () => { const providerOptions = { - baseURL: 'https://demo.sirv.com', + baseURL: '', } + for (const image of images) { const [src, modifiers] = image.args - const generated = sirv().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.sirv) + const generated = unsplash().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.unsplash) } }) - it('hygraph', () => { - const providerOptions = { - baseURL: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/', - } + it('uploadcare', () => { + const providerOptions = {} + const testImageId = 'c160afba-8b42-45a9-a46a-d393248b0072' 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 }, getEmptyContext()) - expect(generated).toMatchObject(image.hygraph) + const generated = uploadcare().getImage(testImageId, { modifiers: { ...image.args[1] }, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.uploadcare) } }) - it('flyimg', () => { + it('vercel', () => { const providerOptions = { - baseURL: 'https://demo.flyimg.io', - sourceURL: 'https://my-website.com', } for (const image of images) { const [src, modifiers] = image.args - const generated = flyimg().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.flyimg) + const generated = vercel().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.vercel) } + }) - // fit: 'cover' → c_1 flag - expect(flyimg().getImage('/test.png', { modifiers: { width: 200, height: 200, fit: 'cover' }, ...providerOptions }, getEmptyContext())) - .toMatchObject({ url: 'https://demo.flyimg.io/upload/w_200,h_200,c_1/https://my-website.com/test.png' }) - - // fit: 'fill' → par_0 flag - expect(flyimg().getImage('/test.png', { modifiers: { width: 200, height: 200, fit: 'fill' }, ...providerOptions }, getEmptyContext())) - .toMatchObject({ url: 'https://demo.flyimg.io/upload/w_200,h_200,par_0/https://my-website.com/test.png' }) + it('wagtail', () => { + const providerOptions = { baseURL: '/' } + const testImageId = '329944' + for (const image of images) { + const [_src, modifiers] = image.args + const generated = wagtail().getImage(testImageId, { modifiers, ...providerOptions }, getEmptyContext()) + expect(generated).toMatchObject(image.wagtail) + } }) it('weserv', () => { @@ -802,25 +876,4 @@ describe('Providers', () => { const generated = weserv().getImage('test.png', {}, getEmptyContext()) expect(generated).toMatchObject({ url: 'test.png' }) }) - - it('none', () => { - const providerOptions = { - } - - for (const image of images) { - const [src, modifiers] = image.args - const generated = none().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.none) - } - }) - - it('umbraco', () => { - const providerOptions = {} - - for (const image of images) { - const [src, modifiers] = image.args - const generated = umbraco().getImage(src, { modifiers, ...providerOptions }, getEmptyContext()) - expect(generated).toMatchObject(image.umbraco) - } - }) }) diff --git a/test/providers.ts b/test/providers.ts index bc276ebc3..d3f3de8ad 100644 --- a/test/providers.ts +++ b/test/providers.ts @@ -5,44 +5,42 @@ export const images = [ ipx: { url: '/_ipx/_/test.png' }, aliyun: { url: '/test.png' }, awsAmplify: { url: '/?url=%2Ftest.png&w=1536&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png' }, + caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg' }, cloudflare: { url: '/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/public' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png' }, cloudinary: { url: '/f_auto,q_auto/test' }, - twicpics: { url: '/test.png' }, - fastly: { url: '/test.png' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b' }, + contentful: { url: '/test.png' }, + directus: { url: 'https://demo.directus.app/assets/test.png' }, + fastly: { url: '/test.png?v=123' }, + filerobot: { url: 'https://demo.filerobot.com/test.png' }, + flyimg: { url: 'https://demo.flyimg.io/upload/-/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=460' }, glide: { url: '/test.png' }, - github: { url: 'npm' }, gumlet: { url: '/test.png' }, - imgix: { url: '/test.png' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/auto_image/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png' }, - unsplash: { url: '/test.png' }, imagekit: { url: '/test.png' }, + imgix: { url: '/test.png' }, netlifyImageCdn: { url: '/.netlify/images?url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png' }, - prepr: { url: 'https://projectName.stream.prepr.io/image-test-300x450-png' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' }, + picsum: { url: 'https://picsum.photos/' }, + prepr: { url: 'https://projectName.stream.prepr.io/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?auto=format' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395' }, - contentful: { url: '/test.png' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png' }, + sirv: { url: 'https://demo.sirv.com/test.png' }, storyblok: { url: 'https://a.storyblok.com/test.png' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png' }, + twicpics: { url: '/test.png' }, + umbraco: { url: '/test.png' }, + unsplash: { url: '/test.png' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=1536&q=100' }, wagtail: { url: '329944/original|format-webp|webpquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4' }, - uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/' }, weserv: { url: 'https://wsrv.nl/?filename=test.png&we&url=https%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/-/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/auto_image/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' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425' }, - picsum: { url: 'https://picsum.photos/' }, - umbraco: { url: '/test.png' }, }, { args: ['/test.png', { width: 200 }], @@ -50,44 +48,42 @@ export const images = [ ipx: { url: '/_ipx/w_200/test.png' }, aliyun: { url: '/test.png?image_process=resize,w_200' }, awsAmplify: { url: '/?url=%2Ftest.png&w=640&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png?width=200' }, + 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' }, cloudflare: { url: '/cdn-cgi/image/w=200/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/w=200' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200' }, cloudinary: { url: '/f_auto,q_auto,w_200/test' }, - twicpics: { url: '/test.png?twic=v1/cover=200x-' }, - fastly: { url: '/test.png?width=200' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200' }, - github: { url: 'https://avatars.githubusercontent.com/npm?v=4' }, + contentful: { url: '/test.png?w=200' }, + directus: { url: 'https://demo.directus.app/assets/test.png?width=200' }, + fastly: { url: '/test.png?v=123&width=200' }, + filerobot: { url: 'https://demo.filerobot.com/test.png?w=200' }, + flyimg: { url: 'https://demo.flyimg.io/upload/w_200/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=200' }, glide: { url: '/test.png?w=200' }, gumlet: { url: '/test.png?w=200' }, - imgix: { url: '/test.png?w=200' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200/auto_image/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png?imgeng=/w_200' }, - unsplash: { url: '/test.png?w=200' }, imagekit: { url: '/test.png?tr=w-200' }, + imgix: { url: '/test.png?w=200' }, netlifyImageCdn: { url: '/.netlify/images?w=200&url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png?w=200&nf_resize=fit' }, - prepr: { url: 'https://projectName.stream.prepr.io/w_200/image-test-300x450-png' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' }, + picsum: { url: 'https://picsum.photos/200' }, + prepr: { url: 'https://projectName.stream.prepr.io/w_200/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=100' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&auto=format' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395&width=200' }, - contentful: { url: '/test.png?w=200' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200' }, + sirv: { url: 'https://demo.sirv.com/test.png?w=200' }, storyblok: { url: 'https://a.storyblok.com/test.png/m/200x0' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png?width=200' }, + twicpics: { url: '/test.png?twic=v1/cover=200x-' }, + umbraco: { url: '/test.png?width=200' }, + unsplash: { url: '/test.png?w=200' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=640&q=100' }, wagtail: { url: '329944/width-200|format-webp|webpquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200' }, - uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x/' }, weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&url=https%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/w_200/https://my-website.com/test.png' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200' }, - hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200/auto_image/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' }, - bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?width=200' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200' }, - picsum: { url: 'https://picsum.photos/200' }, - umbraco: { url: '/test.png?width=200' }, }, { args: ['/test.png', { height: 200 }], @@ -95,43 +91,42 @@ export const images = [ ipx: { url: '/_ipx/h_200/test.png' }, aliyun: { url: '/test.png?image_process=resize,h_200' }, awsAmplify: { url: '/?url=%2Ftest.png&h=200&w=1536&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?height=200' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png?height=200' }, + caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?h=200' }, cloudflare: { url: '/cdn-cgi/image/h=200/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/h=200' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?height=200' }, cloudinary: { url: '/f_auto,q_auto,h_200/test' }, - twicpics: { url: '/test.png?twic=v1/cover=-x200' }, - fastly: { url: '/test.png?height=200' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&height=200' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?h=200' }, + contentful: { url: '/test.png?h=200' }, + directus: { url: 'https://demo.directus.app/assets/test.png?height=200' }, + fastly: { url: '/test.png?v=123&height=200' }, + filerobot: { url: 'https://demo.filerobot.com/test.png?h=200' }, + flyimg: { url: 'https://demo.flyimg.io/upload/h_200/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=200' }, glide: { url: '/test.png?h=200' }, gumlet: { url: '/test.png?h=200' }, - imgix: { url: '/test.png?h=200' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=height:200/auto_image/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png?imgeng=/h_200' }, - unsplash: { url: '/test.png?h=200' }, imagekit: { url: '/test.png?tr=h-200' }, + imgix: { url: '/test.png?h=200' }, netlifyImageCdn: { url: '/.netlify/images?h=200&url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png?h=200&nf_resize=fit' }, - prepr: { url: 'https://projectName.stream.prepr.io/h_200/image-test-300x450-png' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' }, + picsum: { url: 'https://picsum.photos/200' }, + prepr: { url: 'https://projectName.stream.prepr.io/h_200/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=200' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?h=200&auto=format' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395&height=200' }, - contentful: { url: '/test.png?h=200' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?height=200' }, + sirv: { url: 'https://demo.sirv.com/test.png?h=200' }, storyblok: { url: 'https://a.storyblok.com/test.png/m/0x200' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png?height=200' }, + twicpics: { url: '/test.png?twic=v1/cover=-x200' }, + umbraco: { url: '/test.png?height=200' }, + unsplash: { url: '/test.png?h=200' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/x200/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=1536&q=100' }, wagtail: { url: '329944/height-200|format-webp|webpquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?height=200' }, - uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/x200/' }, weserv: { url: 'https://wsrv.nl/?filename=test.png&we&h=200&url=https%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/h_200/https://my-website.com/test.png' }, - sirv: { url: 'https://demo.sirv.com/test.png?h=200' }, - hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=height:200/auto_image/cltsrex89477t08unlckqx9ue' }, - caisy: { url: 'https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?h=200' }, - bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net?height=200' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?height=200' }, - picsum: { url: 'https://picsum.photos/200' }, - umbraco: { url: '/test.png?height=200' }, }, { args: ['/test.png', { width: 200, height: 200 }], @@ -139,43 +134,42 @@ export const images = [ ipx: { url: '/_ipx/s_200x200/test.png' }, aliyun: { url: '/test.png?image_process=resize,fw_200,fh_200' }, awsAmplify: { url: '/?url=%2Ftest.png&w=640&h=200&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png?width=200&height=200' }, + 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' }, cloudflare: { url: '/cdn-cgi/image/w=200,h=200/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/w=200,h=200' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' }, - twicpics: { url: '/test.png?twic=v1/cover=200x200' }, - fastly: { url: '/test.png?width=200&height=200' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200' }, + contentful: { url: '/test.png?w=200&h=200' }, + directus: { url: 'https://demo.directus.app/assets/test.png?width=200&height=200' }, + fastly: { url: '/test.png?v=123&width=200&height=200' }, + filerobot: { url: 'https://demo.filerobot.com/test.png?w=200&h=200' }, + flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=200' }, glide: { url: '/test.png?w=200&h=200' }, gumlet: { url: '/test.png?w=200&h=200' }, - imgix: { url: '/test.png?w=200&h=200' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200/auto_image/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png?imgeng=/w_200/h_200' }, - unsplash: { url: '/test.png?w=200&h=200' }, imagekit: { url: '/test.png?tr=w-200,h-200' }, + imgix: { url: '/test.png?w=200&h=200' }, netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' }, - prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200/image-test-300x450-png' }, + picsum: { url: 'https://picsum.photos/200/200' }, + prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&auto=format' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395&width=200&height=200' }, - contentful: { url: '/test.png?w=200&h=200' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200' }, + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' }, storyblok: { url: 'https://a.storyblok.com/test.png/m/200x200' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png?width=200&height=200' }, + twicpics: { url: '/test.png?twic=v1/cover=200x200' }, + umbraco: { url: '/test.png?width=200&height=200' }, + unsplash: { url: '/test.png?w=200&h=200' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=640&q=100' }, wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200' }, - uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/' }, weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&url=https%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200/https://my-website.com/test.png' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200' }, - hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200/auto_image/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' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200' }, - picsum: { url: 'https://picsum.photos/200/200' }, - umbraco: { url: '/test.png?width=200&height=200' }, }, { args: ['/test.png', { width: 200, height: 200, fit: 'contain' }], @@ -183,43 +177,42 @@ export const images = [ ipx: { url: '/_ipx/fit_contain&s_200x200/test.png' }, aliyun: { url: '/test.png?image_process=fit,contain/resize,fw_200,fh_200' }, awsAmplify: { url: '/?url=%2Ftest.png&w=640&h=200&fit=contain&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200&fit=contain' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png?width=200&height=200' }, + 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' }, cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/w=200,h=200,fit=contain' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200&func=fit' }, cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' }, - twicpics: { url: '/test.png?twic=v1/inside=200x200' }, - fastly: { url: '/test.png?width=200&height=200&fit=bounds' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200&fit=bounds' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit' }, + contentful: { url: '/test.png?w=200&h=200&fit=fill' }, + directus: { url: 'https://demo.directus.app/assets/test.png?width=200&height=200&fit=contain' }, + fastly: { url: '/test.png?v=123&width=200&height=200&fit=bounds' }, + filerobot: { url: 'https://demo.filerobot.com/test.png?w=200&h=200&func=fit' }, + flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=200' }, glide: { url: '/test.png?w=200&h=200&fit=contain' }, gumlet: { url: '/test.png?w=200&h=200&fit=fill' }, - imgix: { url: '/test.png?w=200&h=200&fit=fill' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/auto_image/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox' }, - unsplash: { url: '/test.png?w=200&h=200&fit=fill' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize' }, + imgix: { url: '/test.png?w=200&h=200&fit=fill' }, netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' }, - prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain/image-test-300x450-png' }, + picsum: { url: 'https://picsum.photos/200/200' }, + prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&auto=format&bg=ffffff' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395&width=200&height=200&fit=contain' }, - contentful: { url: '/test.png?w=200&h=200&fit=fill' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200&func=fit' }, + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' }, storyblok: { url: 'https://a.storyblok.com/test.png/m/fit-contain/200x200' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png?width=200&height=200&resize=contain' }, + twicpics: { url: '/test.png?twic=v1/inside=200x200' }, + umbraco: { url: '/test.png?width=200&height=200&rmode=max' }, + unsplash: { url: '/test.png?w=200&h=200&fit=fill' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/-/stretch/off/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=640&q=100' }, wagtail: { url: '329944/fill-200x200-c0|format-webp|webpquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain' }, - uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/200x200/-/stretch/off/' }, weserv: { url: 'https://wsrv.nl/?filename=test.png&we&w=200&h=200&fit=contain&url=https%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200/https://my-website.com/test.png' }, - sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit' }, - hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/auto_image/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' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200&fit=contain' }, - picsum: { url: 'https://picsum.photos/200/200' }, - umbraco: { url: '/test.png?width=200&height=200&rmode=max' }, }, { args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }], @@ -227,42 +220,41 @@ export const images = [ ipx: { url: '/_ipx/fit_contain&f_jpeg&s_200x200/test.png' }, aliyun: { url: '/test.png?image_process=fit,contain/format,jpeg/resize,fw_200,fh_200' }, awsAmplify: { url: '/?url=%2Ftest.png&w=640&h=200&fit=contain&format=jpeg&q=100' }, + builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200&fit=contain&format=jpeg' }, + bunny: { url: 'https://bunnyoptimizerdemo.b-cdn.net/test.png?width=200&height=200' }, + 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' }, cloudflare: { url: '/cdn-cgi/image/w=200,h=200,fit=contain,f=jpeg/test.png' }, cloudflareimages: { url: 'https://imagedelivery.net/accountHash/test.png/w=200,h=200,fit=contain,f=jpeg' }, + cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200&func=fit&force_format=jpeg' }, cloudinary: { url: '/f_jpg,q_auto,w_200,h_200,c_scale/test' }, - twicpics: { url: '/test.png?twic=v1/output=jpeg/inside=200x200' }, - fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' }, - fastlyAbsoluteUrl: { url: 'https://www.fastly.io/image.jpg?v=123&width=200&height=200&fit=bounds&format=jpeg' }, - filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200&h=200&func=fit&force_format=jpeg' }, + contentful: { url: '/test.png?w=200&h=200&fit=fill&fm=jpg' }, + directus: { url: 'https://demo.directus.app/assets/test.png?width=200&height=200&fit=contain&format=jpeg' }, + fastly: { url: '/test.png?v=123&width=200&height=200&fit=bounds&format=jpeg' }, + filerobot: { url: 'https://demo.filerobot.com/test.png?w=200&h=200&func=fit&force_format=jpeg' }, + flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200,o_jpeg/https://my-website.com/test.png' }, + github: { url: 'https://avatars.githubusercontent.com/test.png?v=4&s=200' }, glide: { url: '/test.png?w=200&h=200&fit=contain&fm=jpeg' }, gumlet: { url: '/test.png?w=200&h=200&fit=fill&format=jpeg' }, - imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, + hygraph: { url: 'https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:200,height:200,fit:max/output=format:jpeg/cltsrex89477t08unlckqx9ue' }, imageengine: { url: '/test.png?imgeng=/w_200/h_200/m_letterbox/f_jpg' }, - unsplash: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, imagekit: { url: '/test.png?tr=w-200,h-200,cm-pad_resize,f-jpeg' }, + imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, netlifyImageCdn: { url: '/.netlify/images?w=200&h=200&fit=contain&fm=jpg&url=%2Ftest.png' }, netlifyLargeMedia: { url: '/test.png?w=200&h=200&nf_resize=fit' }, - prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' }, - prismicUnsplash: { url: 'https://images.unsplash.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' }, + picsum: { url: 'https://picsum.photos/200/200' }, + prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain,format_jpg/test.png' }, + prismic: { url: 'https://example.com/test.png?auto=compress,format&rect=0,0,200,200&w=200&h=200&fit=fill&fm=jpeg' }, sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?w=200&h=200&fit=fill&fm=jpg&bg=ffffff' }, shopify: { url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?v=1763534395&width=200&height=200&fit=contain&format=jpeg' }, - prepr: { url: 'https://projectName.stream.prepr.io/w_200,h_200,fit_contain,format_jpg/image-test-300x450-png' }, - contentful: { url: '/test.png?w=200&h=200&fit=fill&fm=jpg' }, - cloudimage: { url: 'https://demo.cloudimg.io/v7/_sl_/test.png?width=200&height=200&func=fit&force_format=jpeg' }, + sirv: { url: 'https://demo.sirv.com/test.png?w=200&h=200&scale.option=fit&format=jpg' }, storyblok: { url: 'https://a.storyblok.com/test.png/m/fit-contain/200x200/filters:format(jpeg)' }, supabase: { url: 'https://ovzjdhllnxrizgszqlsi.supabase.co/storage/v1/render/image/public/nuxt/test.png?width=200&height=200&resize=contain&format=jpeg' }, + twicpics: { url: '/test.png?twic=v1/output=jpeg/inside=200x200' }, + umbraco: { url: '/test.png?width=200&height=200&rmode=max&format=jpeg' }, + unsplash: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }, + uploadcare: { url: 'https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/format/jpeg/-/resize/200x200/-/stretch/off/' }, vercel: { url: '/_vercel/image?url=%2Ftest.png&w=640&q=100' }, wagtail: { url: '329944/fill-200x200-c0|format-jpeg|jpegquality-70' }, - directus: { url: '/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4?width=200&height=200&fit=contain&format=jpg' }, - 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%3A%2F%2Fmy-website.com%2Ftest.png' }, - flyimg: { url: 'https://demo.flyimg.io/upload/w_200,h_200,o_jpeg/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' }, - 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' }, - builderio: { url: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425?width=200&height=200&fit=contain&format=jpeg' }, - picsum: { url: 'https://picsum.photos/200/200' }, - umbraco: { url: '/test.png?width=200&height=200&rmode=max&format=jpeg' }, }, ] as const diff --git a/test/unit/provider-coverage.test.ts b/test/unit/provider-coverage.test.ts index 4535135c6..b31c67970 100644 --- a/test/unit/provider-coverage.test.ts +++ b/test/unit/provider-coverage.test.ts @@ -4,21 +4,100 @@ import { describe, expect, it } from 'vitest' import { images } from '../providers' import { providers as playgroundProviders } from '../../playground/app/providers' -const missingProviderTests = [ +const matrixCoverageExclusions = [ 'ipxStatic', // build-time-only alias for ipx 'strapi', // covered in a unique test 'strapi5', // covered in a unique test ] +const todoProviderTests = ['bunny', 'caisy'] -describe('Provider coverage', async () => { - const providers = await readdir(fileURLToPath(new URL('../../src/runtime/providers', import.meta.url))) - it.each(providers)('should have tests for %s', (file) => { - const provider = file.replace(/\.ts$/, '') - // TODO: remove this once all providers have tests - if (missingProviderTests.includes(provider)) { - return +const files = await readdir( + fileURLToPath(new URL('../../src/runtime/providers', import.meta.url)), +) +const providers = files.map(f => f.replace(/\.ts$/, '')) +const providersExpectedInPlayground = providers.filter(p => p !== 'ipxStatic') +const providersWithMatrixFixtures = providers.filter(p => !matrixCoverageExclusions.includes(p)) + +const matrixCases = providersWithMatrixFixtures.flatMap(provider => + images.map((image, index) => ({ + provider, + image, + index, + })), +) + +describe('Provider coverage', () => { + it('providers should not be empty', () => { + expect(providers.length).toBeGreaterThan(0) + }) + it('images should not be empty', () => { + expect(images.length).toBeGreaterThan(0) + }) + + it('each provider should exist exactly once in playground', () => { + for (const provider of providersExpectedInPlayground) { + const matches = playgroundProviders.filter(p => p.name === provider) + expect( + matches.length, + `expect exactly 1 match for "${provider}", got ${matches.length}`, + ).toBe(1) } - expect(playgroundProviders.find(p => p.name === provider)).toBeTruthy() - expect(provider in images[0]).toBeTruthy() }) + + it('each image should have a key and defined value for its provider', () => { + for (const { provider, image, index } of matrixCases) { + // check key exists + expect( + Object.prototype.hasOwnProperty.call(image, provider), + ).toBe(true) + // check value is defined + expect( + image[provider as keyof typeof image], + `expect value for ${provider} in images[${index}]`, + ).toBeDefined() + } + }) + + it('all playground providers should exist in runtime', () => { + for (const p of playgroundProviders) { + expect( + providers.includes(p.name), + `Playground provider not found in runtime: ${p.name}`, + ).toBe(true) + } + }) + + it('images should not contain unknown providers', () => { + const allowedKeys = new Set(['args', ...providersWithMatrixFixtures]) + for (const [index, image] of images.entries()) { + for (const key of Object.keys(image)) { + expect( + allowedKeys.has(key), + `Unknown provider "${key}" in images[${index}]`, + ).toBe(true) + } + } + }) + + it('each provider should appear in at least one image', () => { + for (const provider of providersWithMatrixFixtures) { + const count = images.filter(img => + Object.prototype.hasOwnProperty.call(img, provider), + ).length + + expect( + count, + `Provider "${provider}" does not appear in any image`, + ).toBeGreaterThan(0) + } + }) + + it('expect todo provider tests to shrink over time', () => + // TODO: remove this once all providers have tests + expect(todoProviderTests).toMatchInlineSnapshot(` + [ + "bunny", + "caisy", + ] + `)) })