fix(assets): Fixes missing format option for svgs in the passthrough …

…service (#14987)

* fix(assets): Fixes missing format option for svgs in the passthrough service

* fix: wtf is going on

* chore: changeset

.changeset/odd-windows-serve.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes SVGs not working in dev mode when using the passthrough image service

packages/astro/src/assets/services/noop.ts

@@ -1,14 +1,20 @@
-import { baseService, type LocalImageService } from './service.js';
+import { baseService, verifyOptions, type LocalImageService } from './service.js';
+import { isESMImportedImage } from '../utils/imageKind.js';
 
 // Empty service used for platforms that don't support Sharp / users who don't want transformations.
 const noopService: LocalImageService = {
 	...baseService,
 	propertiesToHash: ['src'],
-	async validateOptions(options, imageConfig) {
-		const newOptions = await (baseService.validateOptions?.(options, imageConfig) ?? options);
-		delete newOptions.format;
-
-		return newOptions;
+	async validateOptions(options) {
+		if (isESMImportedImage(options.src) && options.src.format === 'svg') {
+			options.format = 'svg';
+		} else {
+			delete options.format;
+		}
+
+		verifyOptions(options);
+
+		return options;
 	},
 	async transform(inputBuffer, transformOptions) {
 		return {

packages/astro/src/assets/services/service.ts

@@ -128,6 +128,69 @@ export type BaseServiceTransform = {
 
 const sortNumeric = (a: number, b: number) => a - b;
 
+export function verifyOptions(options: ImageTransform): void {
+	// `src` is missing or is `undefined`.
+	if (!options.src || (!isRemoteImage(options.src) && !isESMImportedImage(options.src))) {
+		throw new AstroError({
+			...AstroErrorData.ExpectedImage,
+			message: AstroErrorData.ExpectedImage.message(
+				JSON.stringify(options.src),
+				typeof options.src,
+				JSON.stringify(options, (_, v) => (v === undefined ? null : v)),
+			),
+		});
+	}
+
+	if (!isESMImportedImage(options.src)) {
+		// User passed an `/@fs/` path or a filesystem path instead of the full image.
+		if (options.src.startsWith('/@fs/') || (!isRemotePath(options.src) && !options.src.startsWith('/'))) {
+			throw new AstroError({
+				...AstroErrorData.LocalImageUsedWrongly,
+				message: AstroErrorData.LocalImageUsedWrongly.message(options.src),
+			});
+		}
+
+		// For remote images, width and height are explicitly required as we can't infer them from the file
+		let missingDimension: 'width' | 'height' | 'both' | undefined;
+		if (!options.width && !options.height) {
+			missingDimension = 'both';
+		} else if (!options.width && options.height) {
+			missingDimension = 'width';
+		} else if (options.width && !options.height) {
+			missingDimension = 'height';
+		}
+
+		if (missingDimension) {
+			throw new AstroError({
+				...AstroErrorData.MissingImageDimension,
+				message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
+			});
+		}
+	} else {
+		if (!VALID_SUPPORTED_FORMATS.includes(options.src.format as any)) {
+			throw new AstroError({
+				...AstroErrorData.UnsupportedImageFormat,
+				message: AstroErrorData.UnsupportedImageFormat.message(
+					options.src.format,
+					options.src.src,
+					VALID_SUPPORTED_FORMATS,
+				),
+			});
+		}
+
+		if (options.widths && options.densities) {
+			throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
+		}
+
+		if (
+			(options.src.format === 'svg' && options.format !== 'svg') ||
+			(options.src.format !== 'svg' && options.format === 'svg')
+		) {
+			throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+		}
+	}
+}
+
 /**
  * Basic local service using the included `_image` endpoint.
  * This service intentionally does not implement `transform`.
@@ -143,90 +206,25 @@ const sortNumeric = (a: number, b: number) => a - b;
  * ```
  *
  * This service adhere to the included services limitations:
- * - Remote images are passed as is.
  * - Only a limited amount of formats are supported.
  * - For remote images, `width` and `height` are always required.
  *
  */
 export const baseService: Omit<LocalImageService, 'transform'> = {
 	propertiesToHash: DEFAULT_HASH_PROPS,
 	validateOptions(options) {
-		// `src` is missing or is `undefined`.
-		if (!options.src || (!isRemoteImage(options.src) && !isESMImportedImage(options.src))) {
-			throw new AstroError({
-				...AstroErrorData.ExpectedImage,
-				message: AstroErrorData.ExpectedImage.message(
-					JSON.stringify(options.src),
-					typeof options.src,
-					JSON.stringify(options, (_, v) => (v === undefined ? null : v)),
-				),
-			});
+		// We currently do not support processing SVGs, so whenever the input format is a SVG, force the output to also be one
+		if (isESMImportedImage(options.src) && options.src.format === 'svg') {
+			options.format = 'svg';
 		}
+
+		// Run verification-only checks
+		verifyOptions(options);
 
-		if (!isESMImportedImage(options.src)) {
-			// User passed an `/@fs/` path or a filesystem path instead of the full image.
-			if (
-				options.src.startsWith('/@fs/') ||
-				(!isRemotePath(options.src) && !options.src.startsWith('/'))
-			) {
-				throw new AstroError({
-					...AstroErrorData.LocalImageUsedWrongly,
-					message: AstroErrorData.LocalImageUsedWrongly.message(options.src),
-				});
-			}
-
-			// For remote images, width and height are explicitly required as we can't infer them from the file
-			let missingDimension: 'width' | 'height' | 'both' | undefined;
-			if (!options.width && !options.height) {
-				missingDimension = 'both';
-			} else if (!options.width && options.height) {
-				missingDimension = 'width';
-			} else if (options.width && !options.height) {
-				missingDimension = 'height';
-			}
-
-			if (missingDimension) {
-				throw new AstroError({
-					...AstroErrorData.MissingImageDimension,
-					message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
-				});
-			}
-		} else {
-			if (!VALID_SUPPORTED_FORMATS.includes(options.src.format as any)) {
-				throw new AstroError({
-					...AstroErrorData.UnsupportedImageFormat,
-					message: AstroErrorData.UnsupportedImageFormat.message(
-						options.src.format,
-						options.src.src,
-						VALID_SUPPORTED_FORMATS,
-					),
-				});
-			}
-
-			if (options.widths && options.densities) {
-				throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
-			}
-
-			// We currently do not support processing SVGs, so whenever the input format is a SVG, force the output to also be one
-			if (options.src.format === 'svg') {
-				options.format = 'svg';
-			}
-
-			if (
-				(options.src.format === 'svg' && options.format !== 'svg') ||
-				(options.src.format !== 'svg' && options.format === 'svg')
-			) {
-				throw new AstroError(AstroErrorData.UnsupportedImageConversion);
-			}
-		}
-
-		// If the user didn't specify a format, we'll default to `webp`. It offers the best ratio of compatibility / quality
-		// In the future, hopefully we can replace this with `avif`, alas, Edge. See https://caniuse.com/avif
+		// Apply defaults and normalization separate from verification
 		if (!options.format) {
 			options.format = DEFAULT_OUTPUT_FORMAT;
 		}
-
-		// Sometimes users will pass number generated from division, which can result in floating point numbers
 		if (options.width) options.width = Math.round(options.width);
 		if (options.height) options.height = Math.round(options.height);
 		if (options.layout && options.width && options.height) {

packages/astro/test/fixtures/passthrough-image-service/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { Image, Picture } from 'astro:assets';
 import myImage from '../assets/penguin1.jpg';
+import myLogo from '../assets/astro.svg';
 ---
 <html>
 <head></head>
@@ -11,5 +12,8 @@ import myImage from '../assets/penguin1.jpg';
 	<div id="picture">
 		<Picture src={myImage} alt="a penguin" />
 	</div>
+	<div id="logo">
+		<Image src={myLogo} alt="Astro logo" />
+	</div>
 </body>
 </html>

packages/astro/test/passthrough-image-service.test.js

@@ -1,20 +1,53 @@
 import assert from 'node:assert/strict';
-import { before, describe, it } from 'node:test';
+import { after, before, describe, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('passthroughImageService', () => {
 	/** @type {import('./test-utils.js').Fixture} */
 	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/passthrough-image-service/',
+		});
+	});
+
+	describe('dev', () => {
+		let $;
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+
+			const html = await fixture.fetch('/').then((res) => res.text());
+			$ = cheerio.load(html);
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('includes img element in dev', () => {
+			const $img = $('#image img');
+			assert.equal($img.length, 1);
+		});
+
+		it('serves SVG logo with correct content type', async () => {
+			const $img = $('#logo img');
+			const src = $img.attr('src');
+
+			const response = await fixture.fetch(src);
+			const contentType = response.headers.get('content-type');
+
+			assert.ok(contentType.includes('image/svg+xml'), `Expected SVG content type, got: ${contentType}`);
+		});
+	});
 
 	describe('build', () => {
 		let $;
 
 		before(async () => {
-			fixture = await loadFixture({
-				root: './fixtures/passthrough-image-service/',
-			});
-
 			await fixture.build();
 
 			const html = await fixture.readFile('/index.html');
@@ -63,5 +96,18 @@ describe('passthroughImageService', () => {
 				assert.ok(src.endsWith('.jpg'), `Should preserve jpg format, got: ${src}`);
 			});
 		});
+
+		describe('SVG Logo component', () => {
+			it('includes img element', () => {
+				const $img = $('#logo img');
+				assert.equal($img.length, 1);
+			});
+
+			it('preserves SVG format', () => {
+				const $img = $('#logo img');
+				const src = $img.attr('src');
+				assert.ok(src.endsWith('.svg'), `Should preserve svg format, got: ${src}`);
+			});
+		});
 	});
 });