Optional Sizes prop on Picture component (#6773)

withastro · Apr 10, 2023 · 99479e6 · 99479e6
1 parent a5601a3
commit 99479e6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/breezy-roses-smash.md b/.changeset/breezy-roses-smash.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Make sizes prop optional on Image component
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
@@ -2,6 +2,7 @@
 import { getPicture } from '../dist/index.js';
 import { warnForMissingAlt } from './index.js';
 import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';
+import type { GetPictureResult } from '../src/lib/get-picture.js';
 
 export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps;
 
@@ -24,7 +25,7 @@ if (alt === undefined || alt === null) {
 	warnForMissingAlt();
 }
 
-const { image, sources } = await getPicture({
+const { image, sources }: GetPictureResult = await getPicture({
 	src,
 	widths,
 	formats,

diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts
@@ -31,8 +31,8 @@ export interface PictureComponentLocalImageProps
 	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[];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 }
 
@@ -43,9 +43,9 @@ export interface PictureComponentRemoteImageProps
 	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'];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 	background?: TransformOptions['background'];
 }