[ci] format
This commit is contained in:
parent
89d76753a0
commit
d2f68345f9
7 changed files with 59 additions and 38 deletions
|
@ -1,6 +1,13 @@
|
||||||
import slash from 'slash';
|
import slash from 'slash';
|
||||||
import { ROUTE_PATTERN } from './constants.js';
|
import { ROUTE_PATTERN } from './constants.js';
|
||||||
import { ImageAttributes, ImageMetadata, ImageService, isSSRService, OutputFormat, TransformOptions } from './types.js';
|
import {
|
||||||
|
ImageAttributes,
|
||||||
|
ImageMetadata,
|
||||||
|
ImageService,
|
||||||
|
isSSRService,
|
||||||
|
OutputFormat,
|
||||||
|
TransformOptions,
|
||||||
|
} from './types.js';
|
||||||
import { parseAspectRatio } from './utils.js';
|
import { parseAspectRatio } from './utils.js';
|
||||||
|
|
||||||
export interface GetImageTransform extends Omit<TransformOptions, 'src'> {
|
export interface GetImageTransform extends Omit<TransformOptions, 'src'> {
|
||||||
|
@ -18,7 +25,9 @@ function resolveSize(transform: TransformOptions): TransformOptions {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!transform.aspectRatio) {
|
if (!transform.aspectRatio) {
|
||||||
throw new Error(`"aspectRatio" must be included if only "${transform.width ? "width": "height"}" is provided`)
|
throw new Error(
|
||||||
|
`"aspectRatio" must be included if only "${transform.width ? 'width' : 'height'}" is provided`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let aspectRatio: number;
|
let aspectRatio: number;
|
||||||
|
@ -32,18 +41,18 @@ function resolveSize(transform: TransformOptions): TransformOptions {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (transform.width) {
|
if (transform.width) {
|
||||||
// only width was provided, calculate height
|
// only width was provided, calculate height
|
||||||
return {
|
return {
|
||||||
...transform,
|
...transform,
|
||||||
width: transform.width,
|
width: transform.width,
|
||||||
height: Math.round(transform.width / aspectRatio)
|
height: Math.round(transform.width / aspectRatio),
|
||||||
} as TransformOptions;
|
} as TransformOptions;
|
||||||
} else if (transform.height) {
|
} else if (transform.height) {
|
||||||
// only height was provided, calculate width
|
// only height was provided, calculate width
|
||||||
return {
|
return {
|
||||||
...transform,
|
...transform,
|
||||||
width: Math.round(transform.height * aspectRatio),
|
width: Math.round(transform.height * aspectRatio),
|
||||||
height: transform.height
|
height: transform.height,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,9 +66,7 @@ async function resolveTransform(input: GetImageTransform): Promise<TransformOpti
|
||||||
}
|
}
|
||||||
|
|
||||||
// resolve the metadata promise, usually when the ESM import is inlined
|
// resolve the metadata promise, usually when the ESM import is inlined
|
||||||
const metadata = 'then' in input.src
|
const metadata = 'then' in input.src ? (await input.src).default : input.src;
|
||||||
? (await input.src).default
|
|
||||||
: input.src;
|
|
||||||
|
|
||||||
let { width, height, aspectRatio, format = metadata.format, ...rest } = input;
|
let { width, height, aspectRatio, format = metadata.format, ...rest } = input;
|
||||||
|
|
||||||
|
@ -84,7 +91,7 @@ async function resolveTransform(input: GetImageTransform): Promise<TransformOpti
|
||||||
height,
|
height,
|
||||||
aspectRatio,
|
aspectRatio,
|
||||||
format: format as OutputFormat,
|
format: format as OutputFormat,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -94,7 +101,7 @@ async function resolveTransform(input: GetImageTransform): Promise<TransformOpti
|
||||||
* @param transform @type {TransformOptions} The transformations requested for the optimized image.
|
* @param transform @type {TransformOptions} The transformations requested for the optimized image.
|
||||||
* @returns @type {ImageAttributes} The HTML attributes to be included on the built `<img />` element.
|
* @returns @type {ImageAttributes} The HTML attributes to be included on the built `<img />` element.
|
||||||
*/
|
*/
|
||||||
export async function getImage(
|
export async function getImage(
|
||||||
loader: ImageService,
|
loader: ImageService,
|
||||||
transform: GetImageTransform
|
transform: GetImageTransform
|
||||||
): Promise<ImageAttributes> {
|
): Promise<ImageAttributes> {
|
||||||
|
|
|
@ -1,7 +1,13 @@
|
||||||
import { lookup } from 'mrmime';
|
import { lookup } from 'mrmime';
|
||||||
import { extname } from 'path';
|
import { extname } from 'path';
|
||||||
import { getImage } from './get-image.js';
|
import { getImage } from './get-image.js';
|
||||||
import { ImageAttributes, ImageMetadata, ImageService, OutputFormat, TransformOptions } from './types.js';
|
import {
|
||||||
|
ImageAttributes,
|
||||||
|
ImageMetadata,
|
||||||
|
ImageService,
|
||||||
|
OutputFormat,
|
||||||
|
TransformOptions,
|
||||||
|
} from './types.js';
|
||||||
import { parseAspectRatio } from './utils.js';
|
import { parseAspectRatio } from './utils.js';
|
||||||
|
|
||||||
export interface GetPictureParams {
|
export interface GetPictureParams {
|
||||||
|
@ -14,7 +20,7 @@ export interface GetPictureParams {
|
||||||
|
|
||||||
export interface GetPictureResult {
|
export interface GetPictureResult {
|
||||||
image: ImageAttributes;
|
image: ImageAttributes;
|
||||||
sources: { type: string; srcset: string; }[];
|
sources: { type: string; srcset: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
async function resolveAspectRatio({ src, aspectRatio }: GetPictureParams) {
|
async function resolveAspectRatio({ src, aspectRatio }: GetPictureParams) {
|
||||||
|
@ -49,14 +55,21 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getSource(format: OutputFormat) {
|
async function getSource(format: OutputFormat) {
|
||||||
const imgs = await Promise.all(widths.map(async (width) => {
|
const imgs = await Promise.all(
|
||||||
const img = await getImage(loader, { src, format, width, height: Math.round(width / aspectRatio!) });
|
widths.map(async (width) => {
|
||||||
return `${img.src} ${width}w`;
|
const img = await getImage(loader, {
|
||||||
}))
|
src,
|
||||||
|
format,
|
||||||
|
width,
|
||||||
|
height: Math.round(width / aspectRatio!),
|
||||||
|
});
|
||||||
|
return `${img.src} ${width}w`;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
type: lookup(format) || format,
|
type: lookup(format) || format,
|
||||||
srcset: imgs.join(',')
|
srcset: imgs.join(','),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -67,13 +80,13 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
|
||||||
src,
|
src,
|
||||||
width: Math.max(...widths),
|
width: Math.max(...widths),
|
||||||
aspectRatio,
|
aspectRatio,
|
||||||
format: allFormats[allFormats.length - 1]
|
format: allFormats[allFormats.length - 1],
|
||||||
});
|
});
|
||||||
|
|
||||||
const sources = await Promise.all(allFormats.map(format => getSource(format)));
|
const sources = await Promise.all(allFormats.map((format) => getSource(format)));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sources,
|
sources,
|
||||||
image
|
image,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,6 @@ import fs from 'fs/promises';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import { OUTPUT_DIR, PKG_NAME, ROUTE_PATTERN } from './constants.js';
|
import { OUTPUT_DIR, PKG_NAME, ROUTE_PATTERN } from './constants.js';
|
||||||
export * from './get-image.js';
|
|
||||||
export * from './get-picture.js';
|
|
||||||
import { IntegrationOptions, TransformOptions } from './types.js';
|
import { IntegrationOptions, TransformOptions } from './types.js';
|
||||||
import {
|
import {
|
||||||
ensureDir,
|
ensureDir,
|
||||||
|
@ -14,6 +12,8 @@ import {
|
||||||
propsToFilename,
|
propsToFilename,
|
||||||
} from './utils.js';
|
} from './utils.js';
|
||||||
import { createPlugin } from './vite-plugin-astro-image.js';
|
import { createPlugin } from './vite-plugin-astro-image.js';
|
||||||
|
export * from './get-image.js';
|
||||||
|
export * from './get-picture.js';
|
||||||
|
|
||||||
const createIntegration = (options: IntegrationOptions = {}): AstroIntegration => {
|
const createIntegration = (options: IntegrationOptions = {}): AstroIntegration => {
|
||||||
const resolvedOptions = {
|
const resolvedOptions = {
|
||||||
|
|
|
@ -83,7 +83,8 @@ export interface HostedImageService<T extends TransformOptions = TransformOption
|
||||||
getImageAttributes(transform: T): Promise<ImageAttributes>;
|
getImageAttributes(transform: T): Promise<ImageAttributes>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SSRImageService<T extends TransformOptions = TransformOptions> extends HostedImageService<T> {
|
export interface SSRImageService<T extends TransformOptions = TransformOptions>
|
||||||
|
extends HostedImageService<T> {
|
||||||
/**
|
/**
|
||||||
* Gets tthe HTML attributes needed for the server rendered `<img />` element.
|
* Gets tthe HTML attributes needed for the server rendered `<img />` element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -40,7 +40,7 @@ describe('SSG images', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Inline imports', () => {
|
describe('Inline imports', () => {
|
||||||
it ('includes src, width, and height attributes', () => {
|
it('includes src, width, and height attributes', () => {
|
||||||
const image = $('#inline');
|
const image = $('#inline');
|
||||||
|
|
||||||
expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
|
expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
|
||||||
|
|
Loading…
Reference in a new issue