1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
/// <reference types="astro/astro-jsx" />
import mime from 'mime';
import { parseAspectRatio, type OutputFormat, type TransformOptions } from '../loaders/index.js';
import { extname } from '../utils/paths.js';
import type { ImageMetadata } from '../vite-plugin-astro-image.js';
import { getImage } from './get-image.js';
export interface GetPictureParams {
src: string | ImageMetadata | Promise<{ default: ImageMetadata }>;
alt: string;
widths: number[];
formats: OutputFormat[];
aspectRatio?: TransformOptions['aspectRatio'];
fit?: TransformOptions['fit'];
background?: TransformOptions['background'];
position?: TransformOptions['position'];
}
export interface GetPictureResult {
image: astroHTML.JSX.ImgHTMLAttributes;
sources: { type: string; srcset: string }[];
}
async function resolveAspectRatio({ src, aspectRatio }: GetPictureParams) {
if (typeof src === 'string') {
return parseAspectRatio(aspectRatio);
} else {
const metadata = 'then' in src ? (await src).default : src;
return parseAspectRatio(aspectRatio) || metadata.width / metadata.height;
}
}
async function resolveFormats({ src, formats }: GetPictureParams) {
const unique = new Set(formats);
if (typeof src === 'string') {
unique.add(extname(src).replace('.', '') as OutputFormat);
} else {
const metadata = 'then' in src ? (await src).default : src;
unique.add(extname(metadata.src).replace('.', '') as OutputFormat);
}
return Array.from(unique).filter(Boolean);
}
export async function getPicture(params: GetPictureParams): Promise<GetPictureResult> {
const { src, alt, widths, fit, position, background } = params;
if (!src) {
throw new Error('[@astrojs/image] `src` is required');
}
if (!widths || !Array.isArray(widths)) {
throw new Error('[@astrojs/image] at least one `width` is required. ex: `widths={[100]}`');
}
const aspectRatio = await resolveAspectRatio(params);
if (!aspectRatio) {
throw new Error('`aspectRatio` must be provided for remote images');
}
// always include the original image format
const allFormats = await resolveFormats(params);
const lastFormat = allFormats[allFormats.length - 1];
const maxWidth = Math.max(...widths);
let image: astroHTML.JSX.ImgHTMLAttributes;
async function getSource(format: OutputFormat) {
const imgs = await Promise.all(
widths.map(async (width) => {
const img = await getImage({
src,
alt,
format,
width,
fit,
position,
background,
aspectRatio,
});
if (format === lastFormat && width === maxWidth) {
image = img;
}
return `${img.src} ${width}w`;
})
);
return {
type: mime.getType(format) || format,
srcset: imgs.join(','),
};
}
const sources = await Promise.all(allFormats.map((format) => getSource(format)));
return {
sources,
// @ts-expect-error image will always be defined
image,
};
}
|
