Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove tracedSVG (#37093) #37127

Merged
merged 1 commit into from
Dec 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
)
it(`traced`, testConfig, () =>
testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
testGatsbyPluginImage(`traced`, hasColorPlaceholder)
)
it(`blurred`, testConfig, () =>
testGatsbyPluginImage(`blurred`, hasBase64Placeholder)
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion e2e-tests/contentful/snapshots.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion e2e-tests/contentful/src/pages/gatsby-plugin-image.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
))}
</Grid>

<h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
<h2>
gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
</h2>
<Grid data-cy="traced">
{data.default.nodes.map(node => (
<div key={node.title}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,9 @@ describe(`remote-file`, () => {
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
// traced falls back to DOMINANT_COLOR
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
cy.get(".full [data-placeholder-image]")
.first()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ describe(`fixed`, () => {
cy.visit(`/static-image/traced`).waitForRouteChange()
})

it(`renders a traced svg`, () => {
it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
cy.getTestElement(tracedTestId)
.find(`.gatsby-image-wrapper > img`)
.should(`have.attr`, `src`)
.and(src => {
;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
.find(`.gatsby-image-wrapper > [data-placeholder-image]`)
.first()
.should($el => {
// traced falls
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})

Expand Down
246 changes: 125 additions & 121 deletions e2e-tests/production-runtime/cypress/integration/remote-file.js
Original file line number Diff line number Diff line change
@@ -1,143 +1,147 @@
describe(
`remote-file`,
`remote-file`,
{
retries: {
runMode: 4,
},
},
() => {
beforeEach(() => {
cy.visit(`/remote-file/`).waitForRouteChange()
beforeEach(() => {
cy.visit(`/remote-file/`).waitForRouteChange()

// trigger intersection observer
cy.scrollTo("top")
cy.wait(100)
cy.scrollTo("bottom", {
duration: 500,
})
cy.wait(500)
})

async function testImages(images, expectations) {
for (let i = 0; i < images.length; i++) {
const expectation = expectations[i]

const res = await fetch(images[i].currentSrc, {
method: "HEAD",
// trigger intersection observer
cy.scrollTo("top")
cy.wait(100)
cy.scrollTo("bottom", {
duration: 500,
})
expect(res.ok).to.be.true
if (expectation.width) {
expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
expectation.width
)
}
if (expectation.height) {
expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
expectation.height
)
}
}
}
cy.wait(500)
})

it(`should render correct dimensions`, () => {
cy.get('[data-testid="public"]').then(async $urls => {
const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
async function testImages(images, expectations) {
for (let i = 0; i < images.length; i++) {
const expectation = expectations[i]

for (const url of urls) {
const res = await fetch(url, {
const res = await fetch(images[i].currentSrc, {
method: "HEAD",
})
expect(res.ok).to.be.true
if (expectation.width) {
expect(
Math.ceil(images[i].getBoundingClientRect().width)
).to.be.equal(expectation.width)
}
if (expectation.height) {
expect(
Math.ceil(images[i].getBoundingClientRect().height)
).to.be.equal(expectation.height)
}
}
})

cy.get(".resize").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
}

cy.get(".fixed").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
it(`should render correct dimensions`, () => {
cy.get('[data-testid="public"]').then(async $urls => {
const urls = Array.from(
$urls.map((_, $url) => $url.getAttribute("href"))
)

cy.get(".constrained").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 300,
height: 400,
},
{
width: 300,
height: 481,
},
{
width: 300,
height: 200,
},
])
})
for (const url of urls) {
const res = await fetch(url, {
method: "HEAD",
})
expect(res.ok).to.be.true
}
})

cy.get(".full").then(async $imgs => {
await testImages(Array.from($imgs), [
{
height: 1229,
},
{
height: 1478,
},
{
height: 614,
},
])
})
})
cy.get(".resize").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})

it(`should render a placeholder`, () => {
cy.get(".fixed [data-placeholder-image]")
.first()
.should("have.css", "background-color", "rgb(232, 184, 8)")
cy.get(".constrained [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/jpg;base64")
cy.get(".fixed").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 100,
height: 133,
},
{
width: 100,
height: 160,
},
{
width: 100,
height: 67,
},
])
})
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")

cy.get(".constrained").then(async $imgs => {
await testImages(Array.from($imgs), [
{
width: 300,
height: 400,
},
{
width: 300,
height: 481,
},
{
width: 300,
height: 200,
},
])
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty

cy.get(".full").then(async $imgs => {
await testImages(Array.from($imgs), [
{
height: 1229,
},
{
height: 1478,
},
{
height: 614,
},
])
})
})
})
})

it(`should render a placeholder`, () => {
cy.get(".fixed [data-placeholder-image]")
.first()
.should("have.css", "background-color", "rgb(232, 184, 8)")
cy.get(".constrained [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/jpg;base64")
})
cy.get(".constrained_traced [data-placeholder-image]")
.first()
.should($el => {
// traced falls back to DOMINANT_COLOR
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})
}
)
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ describe(`fixed`, () => {
cy.visit(`/static-image/traced`).waitForRouteChange()
})

it(`renders a traced svg`, () => {
it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
cy.getTestElement(tracedTestId)
.find(`.gatsby-image-wrapper > img`)
.should(`have.attr`, `src`)
.and(src => {
;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
.find(`.gatsby-image-wrapper > [data-placeholder-image]`)
.first()
.should($el => {
// traced falls
expect($el.prop("tagName")).to.be.equal("DIV")
expect($el).to.be.empty
})
})

Expand Down
1 change: 1 addition & 0 deletions examples/using-contentful/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"clean": "gatsby clean",
"start": "gatsby serve"
}
}
6 changes: 3 additions & 3 deletions packages/gatsby-plugin-image/src/resolver-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,9 @@ export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
type: ImagePlaceholderType.name,
description: stripIndent`
Format of generated placeholder image, displayed while the main image loads.
BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
TRACED_SVG: a low-resolution traced SVG of the image.
BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
},
formats: {
Expand Down
5 changes: 1 addition & 4 deletions packages/gatsby-plugin-sharp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@gatsbyjs/potrace": "^2.3.0",
"async": "^3.2.4",
"bluebird": "^3.7.2",
"debug": "^4.3.4",
Expand All @@ -17,11 +16,9 @@
"gatsby-core-utils": "^3.24.0",
"gatsby-plugin-utils": "^3.18.0",
"lodash": "^4.17.21",
"mini-svg-data-uri": "^1.4.4",
"probe-image-size": "^7.2.3",
"semver": "^7.3.7",
"sharp": "^0.30.7",
"svgo": "^2.8.0"
"sharp": "^0.30.7"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
Expand Down
Loading