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

[ci] format

Browse source
This commit is contained in:
tony-sull 2022-07-08 21:40:22 +00:00 committed by fredkbot
parent 89d76753a0
commit d2f68345f9
7 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/integrations/image/src/get-image.ts
View file

@ -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> {

35
packages/integrations/image/src/get-picture.ts
View file

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

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

@ -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 = {

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

@ -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.
*/ */

2
packages/integrations/image/test/image-ssg.test.js
View file

@ -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');

12
packages/integrations/image/test/picture-ssg.test.js
View file

@ -39,7 +39,7 @@ describe('SSG pictures', function () {
describe('Local images', () => { describe('Local images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#social-jpg source'); const sources = $('#social-jpg source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -66,7 +66,7 @@ describe('SSG pictures', function () {
describe('Inline imports', () => { describe('Inline imports', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#inline source'); const sources = $('#inline source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -93,7 +93,7 @@ describe('SSG pictures', function () {
describe('Remote images', () => { describe('Remote images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#google source'); const sources = $('#google source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -159,7 +159,7 @@ describe('SSG pictures', function () {
describe('Local images', () => { describe('Local images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#social-jpg source'); const sources = $('#social-jpg source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -197,7 +197,7 @@ describe('SSG pictures', function () {
describe('Local images with inline imports', () => { describe('Local images with inline imports', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#inline source'); const sources = $('#inline source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -235,7 +235,7 @@ describe('SSG pictures', function () {
describe('Remote images', () => { describe('Remote images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#google source'); const sources = $('#google source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props

12
packages/integrations/image/test/picture-ssr.test.js
View file

@ -27,7 +27,7 @@ describe('SSR pictures - build', function () {
const $ = cheerio.load(html); const $ = cheerio.load(html);
const sources = $('#social-jpg source'); const sources = $('#social-jpg source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -87,7 +87,7 @@ describe('SSR pictures - build', function () {
const $ = cheerio.load(html); const $ = cheerio.load(html);
const sources = $('#inline source'); const sources = $('#inline source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -128,7 +128,7 @@ describe('SSR pictures - build', function () {
const $ = cheerio.load(html); const $ = cheerio.load(html);
const sources = $('#google source'); const sources = $('#google source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -186,7 +186,7 @@ describe('SSR images - dev', function () {
describe('Local images', () => { describe('Local images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#social-jpg source'); const sources = $('#social-jpg source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -224,7 +224,7 @@ describe('SSR images - dev', function () {
describe('Inline imports', () => { describe('Inline imports', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#inline source'); const sources = $('#inline source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props
@ -251,7 +251,7 @@ describe('SSR images - dev', function () {
describe('Remote images', () => { describe('Remote images', () => {
it('includes sources', () => { it('includes sources', () => {
const sources = $('#google source'); const sources = $('#google source');
expect(sources.length).to.equal(3); expect(sources.length).to.equal(3);
// TODO: better coverage to verify source props // TODO: better coverage to verify source props