michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

updating component types to use astroHTML.JSX

Browse source
This commit is contained in:
Tony Sullivan 2022-07-07 14:17:04 -05:00
parent 0ba01e41d6
commit 6e5f578da8
3 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/integrations/image/components/Image.astro
View file

@ -4,7 +4,7 @@ import loader from 'virtual:image-loader';
import { getImage } from '../src/index.js'; import { getImage } from '../src/index.js';
import type { ImageAttributes, ImageMetadata, TransformOptions, OutputFormat } from '../src/types.js'; import type { ImageAttributes, ImageMetadata, TransformOptions, OutputFormat } from '../src/types.js';
export interface LocalImageProps extends Omit<TransformOptions, 'src'> { export interface LocalImageProps extends Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src'|'width'|'height'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>; src: ImageMetadata | Promise<{ default: ImageMetadata }>;
} }

9
packages/integrations/image/components/Picture.astro
View file

@ -4,16 +4,17 @@ import Image from './Image.astro';
import loader from 'virtual:image-loader'; import loader from 'virtual:image-loader';
import { lookup } from 'mrmime'; import { lookup } from 'mrmime';
import { getImage } from '../src/index.js'; import { getImage } from '../src/index.js';
import type { ImageMetadata, OutputFormat } from '../src/types.js'; import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes } from '../src/types.js';
export interface Props extends Partial<HTMLPictureElement> { export interface Props extends Omit<PictureAttributes, 'src'> {
src: ImageMetadata; src: ImageMetadata;
sizes: HTMLImageElement['sizes']; sizes: HTMLImageElement['sizes'];
widths: number[]; widths: number[];
formats?: OutputFormat[]; formats?: OutputFormat[];
img?: Omit<ImageAttributes, 'src'|'sizes'|'width'|'height'>;
} }
const { src, sizes, widths, formats = ['avif', 'webp', 'jpeg'] } = Astro.props as Props; const { src, sizes, widths, formats = ['avif', 'webp', 'jpeg'], ...attrs } = Astro.props as Props;
if (widths.length <= 0) { if (widths.length <= 0) {
throw new Error('At least one width must be provided for the <Picture>'); throw new Error('At least one width must be provided for the <Picture>');
@ -39,7 +40,7 @@ const width = widths.sort().shift()!;
const height = Math.round(width / aspectRatio); const height = Math.round(width / aspectRatio);
--- ---
<picture> <picture {...attrs}>
{sources.map(attrs => ( {sources.map(attrs => (
<source {...attrs} {sizes}>))} <source {...attrs} {sizes}>))}
<Image {sizes} {src} {width} {height} /> <Image {sizes} {src} {width} {height} />

4
packages/integrations/image/src/types.ts
View file

@ -1,3 +1,4 @@
import 'astro/astro-jsx.js';
export type { Image, Picture } from '../components/index.js'; export type { Image, Picture } from '../components/index.js';
export * from './index.js'; export * from './index.js';
@ -72,7 +73,8 @@ export interface TransformOptions {
aspectRatio?: number | `${number}:${number}`; aspectRatio?: number | `${number}:${number}`;
} }
export type ImageAttributes = Partial<HTMLImageElement>; export type ImageAttributes = astroHTML.JSX.HTMLAttributes<HTMLImageElement>;
export type PictureAttributes = astroHTML.JSX.HTMLAttributes<HTMLPictureElement>;
export interface HostedImageService<T extends TransformOptions = TransformOptions> { export interface HostedImageService<T extends TransformOptions = TransformOptions> {
/** /**