From a912cbd13e6340ae11c380d291b575040985b9dc Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Sat, 7 Jan 2023 01:27:26 +0000 Subject: [PATCH 1/8] correct props type --- .../integrations/image/components/Image.astro | 22 ++----------------- .../integrations/image/components/index.ts | 20 +++++++++++++++++ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro index 254d24777dc4..64975b3bebca 100644 --- a/packages/integrations/image/components/Image.astro +++ b/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 { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js'; - -interface LocalImageProps - extends Omit, - Omit { - 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 { - 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; -} +import type { LocalImageProps, RemoteImageProps } from './index.js'; export type Props = LocalImageProps | RemoteImageProps; -const { loading = 'lazy', decoding = 'async', ...props } = Astro.props as Props; +const { loading = 'lazy', decoding = 'async', ...props } = Astro.props; if (props.alt === undefined || props.alt === null) { warnForMissingAlt(); diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index e60494398ae5..d45edfb54910 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -2,6 +2,26 @@ export { default as Image } from './Image.astro'; export { default as Picture } from './Picture.astro'; +import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; +import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; + +export interface LocalImageProps + extends Omit, + Omit { + 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 RemoteImageProps extends TransformOptions, astroHTML.JSX.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; +} + // TODO: should these directives be removed from astroHTML.JSX? export type ImgHTMLAttributes = Omit< astroHTML.JSX.ImgHTMLAttributes, From 8f9311a5750ff2c064c28052de8cda5b82fc852b Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Sat, 7 Jan 2023 02:07:03 +0000 Subject: [PATCH 2/8] refactor Picture and Image typings --- .../integrations/image/components/Image.astro | 4 +-- .../image/components/Picture.astro | 33 ++----------------- .../integrations/image/components/index.ts | 32 ++++++++++++++++-- .../basic-image/src/pages/index.astro | 2 +- 4 files changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro index 64975b3bebca..dea492de0d16 100644 --- a/packages/integrations/image/components/Image.astro +++ b/packages/integrations/image/components/Image.astro @@ -2,9 +2,9 @@ // @ts-ignore import { getImage } from '../dist/index.js'; import { warnForMissingAlt } from './index.js'; -import type { LocalImageProps, RemoteImageProps } from './index.js'; +import type { ImageComponentLocalImageProps, ImageComponentRemoteImageProps } from './index.js'; -export type Props = LocalImageProps | RemoteImageProps; +export type Props = ImageComponentLocalImageProps | ImageComponentRemoteImageProps; const { loading = 'lazy', decoding = 'async', ...props } = Astro.props; diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index c9633c3ded8c..961675ad89c4 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/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 { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js'; +import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js'; -interface LocalImageProps - extends Omit, - Omit, - Pick { - 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, - TransformOptions, - Pick { - 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; +export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps; const { src, @@ -45,7 +18,7 @@ const { loading = 'lazy', decoding = 'async', ...attrs -} = Astro.props as Props; +} = Astro.props; if (alt === undefined || alt === null) { warnForMissingAlt(); diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index d45edfb54910..d6e50a105bff 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -5,7 +5,7 @@ export { default as Picture } from './Picture.astro'; import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; -export interface LocalImageProps +export interface ImageComponentLocalImageProps extends Omit, Omit { src: ImageMetadata | Promise<{ default: ImageMetadata }>; @@ -13,7 +13,9 @@ export interface LocalImageProps alt: string; } -export interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttributes { +export interface ImageComponentRemoteImageProps + extends TransformOptions, + astroHTML.JSX.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; @@ -22,6 +24,32 @@ export interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTM height: number; } +export interface PictureComponentLocalImageProps + extends Omit, + Omit, + Pick { + 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 Omit, + TransformOptions, + Pick { + 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']; +} + // TODO: should these directives be removed from astroHTML.JSX? export type ImgHTMLAttributes = Omit< astroHTML.JSX.ImgHTMLAttributes, diff --git a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro index cac182c39f1d..4a808e0acd70 100644 --- a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro +++ b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro @@ -10,7 +10,7 @@ const publicImage = new URL('./hero.jpg', Astro.url); - hero + hero
spaces
From d90ef3de789fe6c53f7e8dffa328578b51511a67 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Sat, 7 Jan 2023 02:09:19 +0000 Subject: [PATCH 3/8] add missing `alt` property --- packages/integrations/image/components/Picture.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index 961675ad89c4..f099eae23e54 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/packages/integrations/image/components/Picture.astro @@ -32,6 +32,7 @@ const { image, sources } = await getPicture({ fit, background, position, + alt, }); delete image.width; From 8e65030fe2a0183bcde1552c33f330f8abe5440b Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Sat, 7 Jan 2023 02:54:06 +0000 Subject: [PATCH 4/8] add changeset --- .changeset/mean-suits-cover.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/mean-suits-cover.md diff --git a/.changeset/mean-suits-cover.md b/.changeset/mean-suits-cover.md new file mode 100644 index 000000000000..f19a642d466c --- /dev/null +++ b/.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 From 76438d42e628c3ceff82941631aae26cf12d0416 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Mon, 9 Jan 2023 23:57:06 +0000 Subject: [PATCH 5/8] apply suggestions --- .../integrations/image/components/index.ts | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index d6e50a105bff..9d863fd8bf8c 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -1,6 +1,7 @@ /// export { default as Image } from './Image.astro'; export { default as Picture } from './Picture.astro'; +import type { HTMLAttributes as AllHTMLAttributes } from '../../../astro/types'; import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; @@ -13,9 +14,7 @@ export interface ImageComponentLocalImageProps alt: string; } -export interface ImageComponentRemoteImageProps - extends TransformOptions, - astroHTML.JSX.ImgHTMLAttributes { +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; @@ -27,7 +26,7 @@ export interface ImageComponentRemoteImageProps export interface PictureComponentLocalImageProps extends Omit, Omit, - Pick { + Pick { 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; @@ -50,15 +49,9 @@ export interface PictureComponentRemoteImageProps background: TransformOptions['background']; } -// TODO: should these directives be removed from astroHTML.JSX? -export type ImgHTMLAttributes = Omit< - astroHTML.JSX.ImgHTMLAttributes, - 'client:list' | 'set:text' | 'set:html' | 'is:raw' ->; -export type HTMLAttributes = Omit< - astroHTML.JSX.HTMLAttributes, - 'client:list' | 'set:text' | 'set:html' | 'is:raw' ->; +export type ImgHTMLAttributes = AllHTMLAttributes<'img'>; + +export type HTMLAttributes = Omit; let altWarningShown = false; From 0b1f0f38d756db1b69319b0f4ffb359b8a4fa8d1 Mon Sep 17 00:00:00 2001 From: Happydev <81974850+MoustaphaDev@users.noreply.github.com> Date: Thu, 12 Jan 2023 17:20:55 +0000 Subject: [PATCH 6/8] correct `astro/types` import Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> --- packages/integrations/image/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index 9d863fd8bf8c..daf0751463f5 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -1,7 +1,7 @@ /// export { default as Image } from './Image.astro'; export { default as Picture } from './Picture.astro'; -import type { HTMLAttributes as AllHTMLAttributes } from '../../../astro/types'; +import type { HTMLAttributes as AllHTMLAttributes } from 'astro/types'; import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; From 8bdf53d50cf8ac40c79871e68cfbce03b958faf9 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Thu, 12 Jan 2023 17:54:40 +0000 Subject: [PATCH 7/8] apply suggestions --- packages/integrations/image/components/index.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index daf0751463f5..64a175673a96 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -1,10 +1,11 @@ /// export { default as Image } from './Image.astro'; export { default as Picture } from './Picture.astro'; -import type { HTMLAttributes as AllHTMLAttributes } from 'astro/types'; +import type { HTMLAttributes } from 'astro/types'; import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; +import { AstroBuiltinAttributes } from 'astro'; export interface ImageComponentLocalImageProps extends Omit, @@ -24,7 +25,7 @@ export interface ImageComponentRemoteImageProps extends TransformOptions, ImgHTM } export interface PictureComponentLocalImageProps - extends Omit, + extends GlobalHTMLAttributes, Omit, Pick { src: ImageMetadata | Promise<{ default: ImageMetadata }>; @@ -36,7 +37,7 @@ export interface PictureComponentLocalImageProps } export interface PictureComponentRemoteImageProps - extends Omit, + extends GlobalHTMLAttributes, TransformOptions, Pick { src: string; @@ -49,9 +50,12 @@ export interface PictureComponentRemoteImageProps background: TransformOptions['background']; } -export type ImgHTMLAttributes = AllHTMLAttributes<'img'>; +export type ImgHTMLAttributes = HTMLAttributes<'img'>; -export type HTMLAttributes = Omit; +export type GlobalHTMLAttributes = Omit< + astroHTML.JSX.HTMLAttributes, + keyof Omit +>; let altWarningShown = false; From c245acaad5a567e69f7d07e10856fc9f84c8a898 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Thu, 12 Jan 2023 18:00:49 +0000 Subject: [PATCH 8/8] convert to type import --- packages/integrations/image/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts index 64a175673a96..c4f41123f7f5 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.ts @@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'astro/types'; import type { TransformOptions, OutputFormat } from '../dist/loaders/index.js'; import type { ImageMetadata } from '../dist/vite-plugin-astro-image.js'; -import { AstroBuiltinAttributes } from 'astro'; +import type { AstroBuiltinAttributes } from 'astro'; export interface ImageComponentLocalImageProps extends Omit,