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 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 }>;
}

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 { lookup } from 'mrmime';
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;
sizes: HTMLImageElement['sizes'];
widths: number[];
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) {
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);
---
<picture>
<picture {...attrs}>
{sources.map(attrs => (
<source {...attrs} {sizes}>))}
<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 * from './index.js';
@ -72,7 +73,8 @@ export interface TransformOptions {
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> {
/**