feat: pass our domains and remote config to the Vercel config (#8452)

* feat: pass our domains and remote config to Vercel'S

* chore: changeset

* test: update test to test for this

* docs: update README

.changeset/forty-hotels-itch.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vercel': patch
+---
+
+Fix Astro's `domains` and `remotePatterns` not being used by Vercel when using Vercel Image Optimization

packages/integrations/vercel/README.md

@@ -114,6 +114,8 @@ export default defineConfig({
 
 Configuration options for [Vercel's Image Optimization API](https://vercel.com/docs/concepts/image-optimization). See [Vercel's image configuration documentation](https://vercel.com/docs/build-output-api/v3/configuration#images) for a complete list of supported parameters.
 
+The `domains` and `remotePatterns` properties will automatically be filled using [the Astro corresponding `image` settings](https://docs.astro.build/en/reference/configuration-reference/#image-options).
+
 ```js
 // astro.config.mjs
 import { defineConfig } from 'astro/config';

packages/integrations/vercel/src/image/shared.ts

@@ -1,9 +1,13 @@
-import type { ImageMetadata, ImageQualityPreset, ImageTransform } from 'astro';
+import type { AstroConfig, ImageMetadata, ImageQualityPreset, ImageTransform } from 'astro';
 
-export const defaultImageConfig: VercelImageConfig = {
-	sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-	domains: [],
-};
+export function getDefaultImageConfig(astroImageConfig: AstroConfig['image']): VercelImageConfig {
+	return {
+		sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+		domains: astroImageConfig.domains ?? [],
+		// Cast is necessary here because Vercel's types are slightly different from ours regarding allowed protocols. Behavior should be the same, however.
+		remotePatterns: (astroImageConfig.remotePatterns as VercelImageConfig['remotePatterns']) ?? [],
+	};
+}
 
 export function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata {
 	return typeof src === 'object';
@@ -56,10 +60,11 @@ export const qualityTable: Record<ImageQualityPreset, number> = {
 	max: 100,
 };
 
-export function getImageConfig(
+export function getAstroImageConfig(
 	images: boolean | undefined,
 	imagesConfig: VercelImageConfig | undefined,
-	command: string
+	command: string,
+	astroImageConfig: AstroConfig['image']
 ) {
 	if (images) {
 		return {
@@ -69,7 +74,7 @@ export function getImageConfig(
 						command === 'dev'
 							? '@astrojs/vercel/dev-image-service'
 							: '@astrojs/vercel/build-image-service',
-					config: imagesConfig ? imagesConfig : defaultImageConfig,
+					config: imagesConfig ? imagesConfig : getDefaultImageConfig(astroImageConfig),
 				},
 			},
 		};

packages/integrations/vercel/src/serverless/adapter.ts

@@ -9,7 +9,11 @@ import { AstroError } from 'astro/errors';
 import glob from 'fast-glob';
 import { basename } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { defaultImageConfig, getImageConfig, type VercelImageConfig } from '../image/shared.js';
+import {
+	getAstroImageConfig,
+	getDefaultImageConfig,
+	type VercelImageConfig,
+} from '../image/shared.js';
 import { exposeEnv } from '../lib/env.js';
 import { getVercelOutput, removeDir, writeJson } from '../lib/fs.js';
 import { copyDependenciesToFunction } from '../lib/nft.js';
@@ -143,7 +147,7 @@ export default function vercelServerless({
 							external: ['@vercel/nft'],
 						},
 					},
-					...getImageConfig(imageService, imagesConfig, command),
+					...getAstroImageConfig(imageService, imagesConfig, command, config.image),
 				});
 			},
 			'astro:config:done': ({ setAdapter, config, logger }) => {
@@ -250,7 +254,18 @@ You can set functionPerRoute: false to prevent surpassing the limit.`
 						...routeDefinitions,
 					],
 					...(imageService || imagesConfig
-						? { images: imagesConfig ? imagesConfig : defaultImageConfig }
+						? {
+								images: imagesConfig
+									? {
+											...imagesConfig,
+											domains: [...imagesConfig.domains, ..._config.image.domains],
+											remotePatterns: [
+												...(imagesConfig.remotePatterns ?? []),
+												..._config.image.remotePatterns,
+											],
+									  }
+									: getDefaultImageConfig(_config.image),
+						  }
 						: {}),
 				});
 

packages/integrations/vercel/src/static/adapter.ts

@@ -1,6 +1,10 @@
 import type { AstroAdapter, AstroConfig, AstroIntegration } from 'astro';
 
-import { defaultImageConfig, getImageConfig, type VercelImageConfig } from '../image/shared.js';
+import {
+	getAstroImageConfig,
+	getDefaultImageConfig,
+	type VercelImageConfig,
+} from '../image/shared.js';
 import { exposeEnv } from '../lib/env.js';
 import { emptyDir, getVercelOutput, writeJson } from '../lib/fs.js';
 import { isServerLikeOutput } from '../lib/prerender.js';
@@ -59,7 +63,7 @@ export default function vercelStatic({
 					vite: {
 						define: viteDefine,
 					},
-					...getImageConfig(imageService, imagesConfig, command),
+					...getAstroImageConfig(imageService, imagesConfig, command, config.image),
 				});
 			},
 			'astro:config:done': ({ setAdapter, config }) => {
@@ -91,7 +95,18 @@ export default function vercelStatic({
 						{ handle: 'filesystem' },
 					],
 					...(imageService || imagesConfig
-						? { images: imagesConfig ? imagesConfig : defaultImageConfig }
+						? {
+								images: imagesConfig
+									? {
+											...imagesConfig,
+											domains: [...imagesConfig.domains, ..._config.image.domains],
+											remotePatterns: [
+												...(imagesConfig.remotePatterns ?? []),
+												..._config.image.remotePatterns,
+											],
+									  }
+									: getDefaultImageConfig(_config.image),
+						  }
 						: {}),
 				});
 			},

packages/integrations/vercel/test/fixtures/image/astro.config.mjs

@@ -6,5 +6,10 @@ export default defineConfig({
 	adapter: vercel({imageService: true}),
 	image: {
 		service: testImageService(),
+		domains: ['astro.build'],
+		remotePatterns: [{
+      protocol: 'https',
+      hostname: '**.amazonaws.com',
+    }],
 	},
 });

packages/integrations/vercel/test/image.test.js

@@ -32,7 +32,13 @@ describe('Image', () => {
 
 		expect(vercelConfig.images).to.deep.equal({
 			sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-			domains: [],
+			domains: ['astro.build'],
+			remotePatterns: [
+				{
+					protocol: 'https',
+					hostname: '**.amazonaws.com',
+				},
+			],
 		});
 	});