From a2e385ad40228e32f946224f18e53d63f9dd6d4c Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:07:27 -0400
Subject: [PATCH] fix(vercel): Fix srcset generation not working on Vercel
 (#10756)

* fix(vercel): Fix `srcset` generation not working on Vercel

* chore: changeset

* fix: remove densities and widths from the HTML attributes

* nit: better changeset

* nit: add formats
---
 .changeset/nine-radios-peel.md                             | 7 +++++++
 packages/integrations/vercel/src/image/build-service.ts    | 4 +++-
 .../integrations/vercel/src/image/shared-dev-service.ts    | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/nine-radios-peel.md

diff --git a/.changeset/nine-radios-peel.md b/.changeset/nine-radios-peel.md
new file mode 100644
index 000000000000..fece80eb9f3b
--- /dev/null
+++ b/.changeset/nine-radios-peel.md
@@ -0,0 +1,7 @@
+---
+"@astrojs/vercel": patch
+---
+
+Fixes `widths` and `densities` not working when using Vercel's Image Optimization.
+
+Note that you still need to make sure that the widths you're outputting are enabled in [the `imageConfig` property of the Vercel adapter](https://docs.astro.build/en/guides/integrations-guide/vercel/#imagesconfig) in order for these properties to work.
diff --git a/packages/integrations/vercel/src/image/build-service.ts b/packages/integrations/vercel/src/image/build-service.ts
index bd58d3af61ce..7e991161ad3d 100644
--- a/packages/integrations/vercel/src/image/build-service.ts
+++ b/packages/integrations/vercel/src/image/build-service.ts
@@ -1,7 +1,9 @@
 import type { ExternalImageService } from 'astro';
 import { isESMImportedImage, sharedValidateOptions } from './shared.js';
+import { baseService } from 'astro/assets';
 
 const service: ExternalImageService = {
+	...baseService,
 	validateOptions: (options, serviceOptions) =>
 		sharedValidateOptions(options, serviceOptions.service.config, 'production'),
 	getHTMLAttributes(options) {
@@ -29,7 +31,7 @@ const service: ExternalImageService = {
 			}
 		}
 
-		const { src, width, height, format, quality, ...attributes } = props;
+		const { src, width, height, format, quality, densities, widths, formats, ...attributes } = options;
 
 		return {
 			...attributes,
diff --git a/packages/integrations/vercel/src/image/shared-dev-service.ts b/packages/integrations/vercel/src/image/shared-dev-service.ts
index 4251603a704c..8ca87e99aaa9 100644
--- a/packages/integrations/vercel/src/image/shared-dev-service.ts
+++ b/packages/integrations/vercel/src/image/shared-dev-service.ts
@@ -1,7 +1,9 @@
 import type { LocalImageService } from 'astro';
+import { baseService } from 'astro/assets';
 import { sharedValidateOptions } from './shared.js';
 
 export const baseDevService: Omit<LocalImageService, 'transform'> = {
+	...baseService,
 	validateOptions: (options, serviceOptions) =>
 		sharedValidateOptions(options, serviceOptions.service.config, 'development'),
 	getURL(options) {