fix(assets): Fix types to be more accurate (#6530)

* fix(assets): Fix types to be more accurate

* chore: changeset

.changeset/calm-tigers-stare.md

@@ -0,0 +1,10 @@
+---
+'astro': patch
+---
+
+Fix various inaccuracies with types related to the new Assets features:
+
+- getConfiguredImageService wasn't present on the astro:assets types.
+- ImageMetadata wasn't exported
+- Fixed wrong module declaration for `avif`, `heic` and `heif` files.
+- Add missing module declaration for SVGs imports

packages/astro/client-base.d.ts

@@ -4,6 +4,7 @@ declare module 'astro:assets' {
 	// Exporting things one by one is a bit cumbersome, not sure if there's a better way - erika, 2023-02-03
 	type AstroAssets = {
 		getImage: typeof import('./dist/assets/index.js').getImage;
+		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
 		Image: typeof import('./components/Image.astro').default;
 	};
 
@@ -20,7 +21,7 @@ declare module 'astro:assets' {
 	export type RemoteImageProps = Simplify<
 		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
 	>;
-	export const { getImage, Image }: AstroAssets;
+	export const { getImage, getConfiguredImageService, Image }: AstroAssets;
 }
 
 type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;

packages/astro/client-image.d.ts

@@ -1,6 +1,8 @@
 /// <reference path="./client-base.d.ts" />
 
-type InputFormat = 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
+// TODO: Merge this file with `client-base.d.ts` in 3.0, when the `astro:assets` feature isn't under a flag anymore.
+
+type InputFormat = import('./dist/assets/types.js').InputFormat;
 
 interface ImageMetadata {
 	src: string;
@@ -9,23 +11,10 @@ interface ImageMetadata {
 	format: InputFormat;
 }
 
-// images
-declare module '*.avif' {
-	const metadata: ImageMetadata;
-	export default metadata;
-}
 declare module '*.gif' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
-declare module '*.heic' {
-	const metadata: ImageMetadata;
-	export default metadata;
-}
-declare module '*.heif' {
-	const metadata: ImageMetadata;
-	export default metadata;
-}
 declare module '*.jpeg' {
 	const metadata: ImageMetadata;
 	export default metadata;
@@ -46,3 +35,7 @@ declare module '*.webp' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
+declare module '*.svg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}

packages/astro/src/@types/astro.ts

@@ -30,7 +30,7 @@ export type {
 	ShikiConfig,
 } from '@astrojs/markdown-remark';
 export type { ExternalImageService, LocalImageService } from '../assets/services/service';
-export type { ImageTransform } from '../assets/types';
+export type { ImageMetadata, ImageTransform } from '../assets/types';
 export type { SSRManifest } from '../core/app/types';
 export type { AstroCookies } from '../core/cookies';
 

packages/astro/src/assets/consts.ts

@@ -1,9 +1,18 @@
 export const VIRTUAL_MODULE_ID = 'astro:assets';
 export const VIRTUAL_SERVICE_ID = 'virtual:image-service';
+/**
+ * Valid formats for optimizations in our base services.
+ * Certain formats can be imported (namely SVGs) but not optimized, so they are excluded from this list.
+ */
 export const VALID_INPUT_FORMATS = [
-	'heic',
+	// TODO: `image-size` does not support the following formats, so users can't import them.
-	'heif',
+	// However, it would be immensely useful to add, for three reasons:
-	'avif',
+	// - `heic` and `heif` are common formats, especially among Apple users.
+	// - AVIF is a common format on the web that's bound to become more and more common.
+	// - It's totally reasonable for an user's provided image service to want to support more image types.
+	//'heic',
+	//'heif',
+	//'avif',
 	'jpeg',
 	'jpg',
 	'png',

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

@@ -88,8 +88,10 @@ export type BaseServiceTransform = {
  * }
  * ```
  *
- * This service only supports the following properties: `width`, `height`, `format` and `quality`.
+ * This service adhere to the included services limitations:
- * Additionally, remote URLs are passed as-is.
+ * - 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'> = {

packages/astro/src/assets/types.ts

@@ -4,7 +4,7 @@ import type { ImageService } from './services/service.js';
 
 export type ImageQualityPreset = 'low' | 'mid' | 'high' | 'max' | (string & {});
 export type ImageQuality = ImageQualityPreset | number;
-export type InputFormat = (typeof VALID_INPUT_FORMATS)[number] | (string & {});
+export type InputFormat = (typeof VALID_INPUT_FORMATS)[number] | 'svg';
 export type OutputFormat = (typeof VALID_OUTPUT_FORMATS)[number] | (string & {});
 
 declare global {

packages/astro/src/assets/vite-plugin-assets.ts

@@ -100,7 +100,7 @@ export default function assets({
 
 						// if no transforms were added, the original file will be returned as-is
 						let data = file;
-						let format = meta.format;
+						let format: string = meta.format;
 
 						if (transform) {
 							const result = await globalThis.astroAsset.imageService.transform(file, transform);