diff --git a/.changeset/calm-tigers-stare.md b/.changeset/calm-tigers-stare.md new file mode 100644 index 000000000000..7eee0e636b91 --- /dev/null +++ b/.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 diff --git a/packages/astro/client-base.d.ts b/packages/astro/client-base.d.ts index 5e03583bbb07..3c591b64d696 100644 --- a/packages/astro/client-base.d.ts +++ b/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 >; - export const { getImage, Image }: AstroAssets; + export const { getImage, getConfiguredImageService, Image }: AstroAssets; } type MD = import('./dist/@types/astro').MarkdownInstance>; diff --git a/packages/astro/client-image.d.ts b/packages/astro/client-image.d.ts index fe8a16ede620..5148014a4a87 100644 --- a/packages/astro/client-image.d.ts +++ b/packages/astro/client-image.d.ts @@ -1,6 +1,8 @@ /// -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; +} diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 3ce8be97fcb0..2d4bcfa1578e 100644 --- a/packages/astro/src/@types/astro.ts +++ b/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'; diff --git a/packages/astro/src/assets/consts.ts b/packages/astro/src/assets/consts.ts index 77f2ea9803d8..30e5ef34c352 100644 --- a/packages/astro/src/assets/consts.ts +++ b/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', - 'heif', - 'avif', + // TODO: `image-size` does not support the following formats, so users can't import them. + // However, it would be immensely useful to add, for three reasons: + // - `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', diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index 0e2c483f8e37..11f1a370768b 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/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`. - * Additionally, remote URLs are passed as-is. + * 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 = { diff --git a/packages/astro/src/assets/types.ts b/packages/astro/src/assets/types.ts index 4a97354bf42b..93f742e20bfd 100644 --- a/packages/astro/src/assets/types.ts +++ b/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 { diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 33b08154892f..306c8909b86a 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/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);