From e644b34659836b463abb8c6a0acc867621c2d3cc Mon Sep 17 00:00:00 2001
From: Wooseop Kim <wooseop@protonmail.com>
Date: Mon, 3 Jul 2023 17:09:40 +0900
Subject: [PATCH] fix: make `Picture` generate valid dev URLs (#7500)

---
 .changeset/few-ants-brake.md                           |  5 +++++
 packages/integrations/image/src/lib/get-picture.ts     |  2 +-
 packages/integrations/image/test/picture-ssg.test.js   | 10 ++++++++++
 .../integrations/image/test/picture-ssr-build.test.js  | 10 ++++++++++
 .../integrations/image/test/picture-ssr-dev.test.js    | 10 ++++++++++
 5 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/few-ants-brake.md

diff --git a/.changeset/few-ants-brake.md b/.changeset/few-ants-brake.md
new file mode 100644
index 0000000000..607c248ae5
--- /dev/null
+++ b/.changeset/few-ants-brake.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/image": patch
+---
+
+fix: make `Picture` generate valid dev URLs
diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts
index 53b9aea8ab..c0eaa40588 100644
--- a/packages/integrations/image/src/lib/get-picture.ts
+++ b/packages/integrations/image/src/lib/get-picture.ts
@@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
 					image = img;
 				}
 
-				return `${encodeURI(img.src ?? '')} ${width}w`;
+				return `${img.src?.replaceAll(' ', encodeURI)} ${width}w`;
 			})
 		);
 
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index 61b4f8e2b4..5f56ec53c3 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -195,6 +195,16 @@ describe('SSG pictures with subpath - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);
diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js
index 5e760d0b43..6c06fd1fc9 100644
--- a/packages/integrations/image/test/picture-ssr-build.test.js
+++ b/packages/integrations/image/test/picture-ssr-build.test.js
@@ -223,6 +223,16 @@ describe('SSR pictures with subpath - build', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);
diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js
index 325e0d08b4..39a5431dc9 100644
--- a/packages/integrations/image/test/picture-ssr-dev.test.js
+++ b/packages/integrations/image/test/picture-ssr-dev.test.js
@@ -127,6 +127,16 @@ describe('SSR pictures - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);