Skip to content

Commit

Permalink
Revert "<Picture /> should pass all unrecognized props down to the <i…
Browse files Browse the repository at this point in the history 
…mg> element"

This reverts commit ce3e339.
  • Loading branch information
Tony Sullivan committed Jul 19, 2022
1 parent da0f280 commit ef430f2
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 53 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<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
sizes: HTMLImageElement['sizes'];
widths: number[];
formats?: OutputFormat[];
}
export interface RemoteImageProps extends TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, 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>
<picture {...attrs}>
{sources.map(attrs => (
<source {...attrs} {sizes}>))}
<img {...image} {...attrs} {loading} {decoding} />
<img {...image} {loading} {decoding} />
</picture>

<style>
Expand Down
46 changes: 20 additions & 26 deletions packages/integrations/image/test/picture-ssg.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,15 @@ describe('SSG pictures', function () {

describe('Local images', () => {
it('includes sources', () => {
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
const sources = $('#social-jpg source');

expect(sources.length).to.equal(3);

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

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

expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
Expand All @@ -67,16 +66,15 @@ describe('SSG pictures', function () {

describe('Inline imports', () => {
it('includes sources', () => {
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
const sources = $('#inline source');

expect(sources.length).to.equal(3);

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

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

expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
Expand All @@ -100,16 +98,15 @@ describe('SSG pictures', function () {
const HASH = 'Z1iI4xW';

it('includes sources', () => {
const picture = $('#google').parent('picture');
const sources = picture.children('source');
const sources = $('#google source');

expect(sources.length).to.equal(3);

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

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

expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`);
expect(image.attr('width')).to.equal('544');
Expand Down Expand Up @@ -168,16 +165,15 @@ describe('SSG pictures', function () {

describe('Local images', () => {
it('includes sources', () => {
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
const sources = $('#social-jpg source');

expect(sources.length).to.equal(3);

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

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

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -195,7 +191,7 @@ describe('SSG pictures', function () {
});

it('returns the optimized image', async () => {
const image = $('#social-jpg');
const image = $('#social-jpg img');

const res = await fixture.fetch(image.attr('src'));

Expand All @@ -208,16 +204,15 @@ describe('SSG pictures', function () {

describe('Local images with inline imports', () => {
it('includes sources', () => {
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
const sources = $('#inline source');

expect(sources.length).to.equal(3);

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

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

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -235,7 +230,7 @@ describe('SSG pictures', function () {
});

it('returns the optimized image', async () => {
const image = $('#inline');
const image = $('#inline img');

const res = await fixture.fetch(image.attr('src'));

Expand All @@ -248,16 +243,15 @@ describe('SSG pictures', function () {

describe('Remote images', () => {
it('includes sources', () => {
const picture = $('#google').parent('picture');
const sources = picture.children('source');
const sources = $('#google source');

expect(sources.length).to.equal(3);

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

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

const src = image.attr('src');
const [route, params] = src.split('?');
Expand Down
40 changes: 17 additions & 23 deletions packages/integrations/image/test/picture-ssr.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
const sources = $('#social-jpg source');

expect(sources.length).to.equal(3);

Expand All @@ -42,7 +41,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const image = $('#social-jpg');
const image = $('#social-jpg img');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -68,7 +67,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const image = $('#social-jpg');
const image = $('#social-jpg img');

const res = await fixture.fetch(image.attr('src'));

Expand All @@ -88,8 +87,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const picture = $('#inline').parent('picture');
const sources = picture.children('source');
const sources = $('#inline source');

expect(sources.length).to.equal(3);

Expand All @@ -104,7 +102,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const image = $('#inline');
const image = $('#inline img');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -131,8 +129,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const picture = $('#google').parent('picture');
const sources = picture.children('source');
const sources = $('#google source');

expect(sources.length).to.equal(3);

Expand All @@ -147,7 +144,7 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);

const image = $('#google');
const image = $('#google img');

const src = image.attr('src');
const [route, params] = src.split('?');
Expand Down Expand Up @@ -191,16 +188,15 @@ describe('SSR images - dev', function () {

describe('Local images', () => {
it('includes sources', () => {
const picture = $('#social-jpg').parent('picture');
const sources = picture.children('source');
const sources = $('#social-jpg source');

expect(sources.length).to.equal(3);

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

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

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -218,7 +214,7 @@ describe('SSR images - dev', function () {
});

it('returns the optimized image', async () => {
const image = $('#social-jpg');
const image = $('#social-jpg img');

const res = await fixture.fetch(image.attr('src'));

Expand All @@ -231,16 +227,15 @@ describe('SSR images - dev', function () {

describe('Inline imports', () => {
it('includes sources', () => {
const picture = $('#inline').parent('picture');
const sources = picture.children('source');
const sources = $('#inline source');

expect(sources.length).to.equal(3);

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

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

const src = image.attr('src');
const [route, params] = src.split('?');
Expand All @@ -260,16 +255,15 @@ describe('SSR images - dev', function () {

describe('Remote images', () => {
it('includes sources', () => {
const picture = $('#google').parent('picture');
const sources = picture.children('source');
const sources = $('#google source');

expect(sources.length).to.equal(3);

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

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

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

0 comments on commit ef430f2

Please sign in to comment.