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

<Picture /> should pass all unrecognized props down to the <img> element

Browse source
This commit is contained in:
Tony Sullivan 2022-07-18 13:56:52 -05:00
parent e6e2160614
commit ce3e33930f
3 changed files with 44 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,14 @@ import loader from 'virtual:image-loader';
import { getPicture } from '../src/get-picture.js';
import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../src/types.js';
export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface LocalImageProps extends Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
sizes: HTMLImageElement['sizes'];
widths: number[];
formats?: OutputFormat[];
}
export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface RemoteImageProps extends TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
src: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
@ -26,10 +26,10 @@ const { src, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = '
const { image, sources } = await getPicture({ loader, src, widths, formats, aspectRatio });
---
<picture {...attrs}>
<picture>
{sources.map(attrs => (
<source {...attrs} {sizes}>))}
<img {...image} {loading} {decoding} />
<img {...image} {...attrs} {loading} {decoding} />
</picture>
<style>

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

@ -38,7 +38,8 @@ describe('SSG pictures', function () {
describe('Local images', () => {
it('includes sources', () => {
const sources = $('#social-jpg source');
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -46,7 +47,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#social-jpg img');
const image = $('#social-jpg');
expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
@ -65,7 +66,8 @@ describe('SSG pictures', function () {
describe('Inline imports', () => {
it('includes sources', () => {
const sources = $('#inline source');
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -73,7 +75,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#inline img');
const image = $('#inline');
expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
@ -96,7 +98,8 @@ describe('SSG pictures', function () {
const HASH = 'Z1iI4xW';
it('includes sources', () => {
const sources = $('#google source');
const picture = $('#google').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -104,7 +107,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#google img');
const image = $('#google');
expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`);
expect(image.attr('width')).to.equal('544');
@ -162,7 +165,8 @@ describe('SSG pictures', function () {
describe('Local images', () => {
it('includes sources', () => {
const sources = $('#social-jpg source');
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -170,7 +174,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#social-jpg img');
const image = $('#social-jpg');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -187,7 +191,7 @@ describe('SSG pictures', function () {
});
it('returns the optimized image', async () => {
const image = $('#social-jpg img');
const image = $('#social-jpg');
const res = await fixture.fetch(image.attr('src'));
@ -200,7 +204,8 @@ describe('SSG pictures', function () {
describe('Local images with inline imports', () => {
it('includes sources', () => {
const sources = $('#inline source');
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -208,7 +213,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#inline img');
const image = $('#inline');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -225,7 +230,7 @@ describe('SSG pictures', function () {
});
it('returns the optimized image', async () => {
const image = $('#inline img');
const image = $('#inline');
const res = await fixture.fetch(image.attr('src'));
@ -238,7 +243,8 @@ describe('SSG pictures', function () {
describe('Remote images', () => {
it('includes sources', () => {
const sources = $('#google source');
const picture = $('#google').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -246,7 +252,7 @@ describe('SSG pictures', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#google img');
const image = $('#google');
const src = image.attr('src');
const [route, params] = src.split('?');

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

@ -26,7 +26,8 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const sources = $('#social-jpg source');
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -41,7 +42,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const image = $('#social-jpg img');
const image = $('#social-jpg');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -66,7 +67,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const image = $('#social-jpg img');
const image = $('#social-jpg');
const res = await fixture.fetch(image.attr('src'));
@ -86,7 +87,8 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const sources = $('#inline source');
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -101,7 +103,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const image = $('#inline img');
const image = $('#inline');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -127,7 +129,8 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const sources = $('#google source');
const picture = $('#google').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -142,7 +145,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
const image = $('#google img');
const image = $('#google');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -185,7 +188,8 @@ describe('SSR images - dev', function () {
describe('Local images', () => {
it('includes sources', () => {
const sources = $('#social-jpg source');
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -193,7 +197,7 @@ describe('SSR images - dev', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#social-jpg img');
const image = $('#social-jpg');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -210,7 +214,7 @@ describe('SSR images - dev', function () {
});
it('returns the optimized image', async () => {
const image = $('#social-jpg img');
const image = $('#social-jpg');
const res = await fixture.fetch(image.attr('src'));
@ -223,7 +227,8 @@ describe('SSR images - dev', function () {
describe('Inline imports', () => {
it('includes sources', () => {
const sources = $('#inline source');
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -231,7 +236,7 @@ describe('SSR images - dev', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#inline img');
const image = $('#inline');
const src = image.attr('src');
const [route, params] = src.split('?');
@ -250,7 +255,8 @@ describe('SSR images - dev', function () {
describe('Remote images', () => {
it('includes sources', () => {
const sources = $('#google source');
const picture = $('#google').parent('picture');
const sources = picture.children('source');
expect(sources.length).to.equal(3);
@ -258,7 +264,7 @@ describe('SSR images - dev', function () {
});
it('includes src, width, and height attributes', () => {
const image = $('#google img');
const image = $('#google');
const src = image.attr('src');
const [route, params] = src.split('?');