Skip to content

Commit

Permalink
<Picture /> should pass all unrecognized props down to the <img> element
Browse files Browse the repository at this point in the history
  • Loading branch information
Tony Sullivan committed Jul 19, 2022
1 parent e6e2160 commit ce3e339
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 32 deletions.
8 changes: 4 additions & 4 deletions packages/integrations/image/components/Picture.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -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>
Expand Down
34 changes: 20 additions & 14 deletions packages/integrations/image/test/picture-ssg.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,16 @@ 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);

// TODO: better coverage to verify source props
});

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');
Expand All @@ -65,15 +66,16 @@ 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);

// TODO: better coverage to verify source props
});

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');
Expand All @@ -96,15 +98,16 @@ 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);

// TODO: better coverage to verify source props
});

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');
Expand Down Expand Up @@ -162,15 +165,16 @@ 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);

// TODO: better coverage to verify source props
});

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('?');
Expand All @@ -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'));

Expand All @@ -200,15 +204,16 @@ 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);

// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
const image = $('#inline img');
const image = $('#inline');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -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'));

Expand All @@ -238,15 +243,16 @@ 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);

// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
const image = $('#google img');
const image = $('#google');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand Down
34 changes: 20 additions & 14 deletions packages/integrations/image/test/picture-ssr.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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('?');
Expand All @@ -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'));

Expand All @@ -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);

Expand All @@ -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('?');
Expand All @@ -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);

Expand All @@ -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('?');
Expand Down Expand Up @@ -185,15 +188,16 @@ 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);

// TODO: better coverage to verify source props
});

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('?');
Expand All @@ -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'));

Expand All @@ -223,15 +227,16 @@ 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);

// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
const image = $('#inline img');
const image = $('#inline');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -250,15 +255,16 @@ 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);

// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
const image = $('#google img');
const image = $('#google');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand Down

0 comments on commit ce3e339

Please sign in to comment.