Refactor Props of Image and Picture component to support type checking (#5788)

* correct props type

* refactor Picture and Image typings

* add missing `alt` property

* add changeset

* apply suggestions

* correct `astro/types` import

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

* apply suggestions

* convert to type import

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.changeset/mean-suits-cover.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/image': patch
+---
+
+- Refactor types to support props auto-completion for the `Image` and `Picture` components.
+- Pass previously missing `alt` prop to the `getPicture` function

packages/integrations/image/components/Image.astro

@@ -2,29 +2,11 @@
 // @ts-ignore
 import { getImage } from '../dist/index.js';
 import { warnForMissingAlt } from './index.js';
-import type { ImgHTMLAttributes } from './index.js';
+import type { ImageComponentLocalImageProps, ImageComponentRemoteImageProps } from './index.js';
-import type { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js';
 
-interface LocalImageProps
+export type Props = ImageComponentLocalImageProps | ImageComponentRemoteImageProps;
-	extends Omit<TransformOptions, 'src'>,
-		Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> {
-	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
-	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
-	alt: string;
-}
 
-interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttributes {
+const { loading = 'lazy', decoding = 'async', ...props } = Astro.props;
-	src: string;
-	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
-	alt: string;
-	format?: OutputFormat;
-	width: number;
-	height: number;
-}
-
-export type Props = LocalImageProps | RemoteImageProps;
-
-const { loading = 'lazy', decoding = 'async', ...props } = Astro.props as Props;
 
 if (props.alt === undefined || props.alt === null) {
 	warnForMissingAlt();

packages/integrations/image/components/Picture.astro

@@ -1,36 +1,9 @@
 ---
 import { getPicture } from '../dist/index.js';
 import { warnForMissingAlt } from './index.js';
-import type { ImgHTMLAttributes, HTMLAttributes } from './index.js';
+import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';
-import type { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js';
 
-interface LocalImageProps
+export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps;
-	extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
-		Omit<TransformOptions, 'src'>,
-		Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> {
-	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
-	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
-	alt: string;
-	sizes: HTMLImageElement['sizes'];
-	widths: number[];
-	formats?: OutputFormat[];
-}
-
-interface RemoteImageProps
-	extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
-		TransformOptions,
-		Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
-	src: string;
-	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
-	alt: string;
-	sizes: HTMLImageElement['sizes'];
-	widths: number[];
-	aspectRatio: TransformOptions['aspectRatio'];
-	formats?: OutputFormat[];
-	background: TransformOptions['background'];
-}
-
-export type Props = LocalImageProps | RemoteImageProps;
 
 const {
 	src,
@@ -45,7 +18,7 @@ const {
 	loading = 'lazy',
 	decoding = 'async',
 	...attrs
-} = Astro.props as Props;
+} = Astro.props;
 
 if (alt === undefined || alt === null) {
 	warnForMissingAlt();
@@ -59,6 +32,7 @@ const { image, sources } = await getPicture({
 	fit,
 	background,
 	position,
+	alt,
 });
 
 delete image.width;

packages/integrations/image/components/index.ts

@@ -1,15 +1,60 @@
 /// <reference types="astro/astro-jsx" />
 export { default as Image } from './Image.astro';
 export { default as Picture } from './Picture.astro';
+import type { HTMLAttributes } from 'astro/types';
 
-// TODO: should these directives be removed from astroHTML.JSX?
+import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js';
-export type ImgHTMLAttributes = Omit<
+import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js';
-	astroHTML.JSX.ImgHTMLAttributes,
+import type { AstroBuiltinAttributes } from 'astro';
-	'client:list' | 'set:text' | 'set:html' | 'is:raw'
+
->;
+export interface ImageComponentLocalImageProps
-export type HTMLAttributes = Omit<
+	extends Omit<TransformOptions, 'src'>,
+		Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> {
+	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
+	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
+	alt: string;
+}
+
+export interface ImageComponentRemoteImageProps extends TransformOptions, ImgHTMLAttributes {
+	src: string;
+	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
+	alt: string;
+	format?: OutputFormat;
+	width: number;
+	height: number;
+}
+
+export interface PictureComponentLocalImageProps
+	extends GlobalHTMLAttributes,
+		Omit<TransformOptions, 'src'>,
+		Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
+	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
+	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
+	alt: string;
+	sizes: HTMLImageElement['sizes'];
+	widths: number[];
+	formats?: OutputFormat[];
+}
+
+export interface PictureComponentRemoteImageProps
+	extends GlobalHTMLAttributes,
+		TransformOptions,
+		Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
+	src: string;
+	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
+	alt: string;
+	sizes: HTMLImageElement['sizes'];
+	widths: number[];
+	aspectRatio: TransformOptions['aspectRatio'];
+	formats?: OutputFormat[];
+	background: TransformOptions['background'];
+}
+
+export type ImgHTMLAttributes = HTMLAttributes<'img'>;
+
+export type GlobalHTMLAttributes = Omit<
 	astroHTML.JSX.HTMLAttributes,
-	'client:list' | 'set:text' | 'set:html' | 'is:raw'
+	keyof Omit<AstroBuiltinAttributes, 'class:list'>
 >;
 
 let altWarningShown = false;

packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro

@@ -10,7 +10,7 @@ const publicImage = new URL('./hero.jpg', Astro.url);
     <!-- Head Stuff -->
   </head>
   <body>
-		<Image id="hero" src={publicImage.pathname} width={768} height={414} format="webp" alt="hero" />
+		<Image id="hero" src={publicImage.pathname} width={768} height={414} format="webp" alt="hero"  />
 		<br />
 		<Image id="spaces" src={introJpg} width={768} height={414} format="webp" alt="spaces" />
 		<br />