Skip to content

Commit 2dc715d

Browse files
gatsbybotpieh
gatsbybot
and
pieh
authored
chore: remove tracedSVG (#37093) (#37127)
* init * gri * update shopify snapshot * gatsby-plugin-sharp tests * update gatsby-remark-images/gatsby-node tests * update gatsby-plugin-image tests * update schema print tests * remove traceSVG unit tests as it was removed * legacy gatsby-image fields * update polyfill tests * update cypress assertion * update contentful cypress assertions * drop few more packages from gatsby-plugin-sharp as they are no onger used * correct IMAGE_CDN fallback for TRACE_SVG * update generateImageData * update e2e-prod/assertions * update unit test * update snapshot * update e2e-dev/assertions * drop more unused * sync yarn.lock * a bit more prod warnings * adjust gatsby-remark-images plugin options warning * add link to gatsby-remark-images warning (cherry picked from commit 94c2d73) Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
1 parent 07c0478 commit 2dc715d

File tree

36 files changed

+511
-949
lines changed

36 files changed

+511
-949
lines changed

‎e2e-tests/contentful/cypress/integration/gatsby-plugin-image.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ describe(`gatsby-plugin-image`, () => {
7878
testGatsbyPluginImage(`dominant-color`, hasColorPlaceholder)
7979
)
8080
it(`traced`, testConfig, () =>
81-
testGatsbyPluginImage(`traced`, hasSVGPlaceholder)
81+
testGatsbyPluginImage(`traced`, hasColorPlaceholder)
8282
)
8383
it(`blurred`, testConfig, () =>
8484
testGatsbyPluginImage(`blurred`, hasBase64Placeholder)

‎e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/english-0.snap.png

161 Bytes
Loading

‎e2e-tests/contentful/snapshots.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎e2e-tests/contentful/src/pages/gatsby-plugin-image.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,9 @@ const GatsbyPluginImagePage = ({ data }) => {
9494
))}
9595
</Grid>
9696

97-
<h2>gatsby-plugin-image: Traced SVG Placeholder</h2>
97+
<h2>
98+
gatsby-plugin-image: Traced SVG Placeholder (fallback to DOMINANT_COLOR)
99+
</h2>
98100
<Grid data-cy="traced">
99101
{data.default.nodes.map(node => (
100102
<div key={node.title}>

‎e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,9 @@ describe(`remote-file`, () => {
126126
cy.get(".constrained_traced [data-placeholder-image]")
127127
.first()
128128
.should($el => {
129-
expect($el.prop("tagName")).to.be.equal("IMG")
130-
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
129+
// traced falls back to DOMINANT_COLOR
130+
expect($el.prop("tagName")).to.be.equal("DIV")
131+
expect($el).to.be.empty
131132
})
132133
cy.get(".full [data-placeholder-image]")
133134
.first()

‎e2e-tests/development-runtime/cypress/integration/static-image/traced.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ describe(`fixed`, () => {
55
cy.visit(`/static-image/traced`).waitForRouteChange()
66
})
77

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

‎e2e-tests/production-runtime/cypress/integration/remote-file.js

Lines changed: 125 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,147 @@
11
describe(
2-
`remote-file`,
2+
`remote-file`,
33
{
44
retries: {
55
runMode: 4,
66
},
77
},
88
() => {
9-
beforeEach(() => {
10-
cy.visit(`/remote-file/`).waitForRouteChange()
9+
beforeEach(() => {
10+
cy.visit(`/remote-file/`).waitForRouteChange()
1111

12-
// trigger intersection observer
13-
cy.scrollTo("top")
14-
cy.wait(100)
15-
cy.scrollTo("bottom", {
16-
duration: 500,
17-
})
18-
cy.wait(500)
19-
})
20-
21-
async function testImages(images, expectations) {
22-
for (let i = 0; i < images.length; i++) {
23-
const expectation = expectations[i]
24-
25-
const res = await fetch(images[i].currentSrc, {
26-
method: "HEAD",
12+
// trigger intersection observer
13+
cy.scrollTo("top")
14+
cy.wait(100)
15+
cy.scrollTo("bottom", {
16+
duration: 500,
2717
})
28-
expect(res.ok).to.be.true
29-
if (expectation.width) {
30-
expect(Math.ceil(images[i].getBoundingClientRect().width)).to.be.equal(
31-
expectation.width
32-
)
33-
}
34-
if (expectation.height) {
35-
expect(Math.ceil(images[i].getBoundingClientRect().height)).to.be.equal(
36-
expectation.height
37-
)
38-
}
39-
}
40-
}
18+
cy.wait(500)
19+
})
4120

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

46-
for (const url of urls) {
47-
const res = await fetch(url, {
25+
const res = await fetch(images[i].currentSrc, {
4826
method: "HEAD",
4927
})
5028
expect(res.ok).to.be.true
29+
if (expectation.width) {
30+
expect(
31+
Math.ceil(images[i].getBoundingClientRect().width)
32+
).to.be.equal(expectation.width)
33+
}
34+
if (expectation.height) {
35+
expect(
36+
Math.ceil(images[i].getBoundingClientRect().height)
37+
).to.be.equal(expectation.height)
38+
}
5139
}
52-
})
53-
54-
cy.get(".resize").then(async $imgs => {
55-
await testImages(Array.from($imgs), [
56-
{
57-
width: 100,
58-
height: 133,
59-
},
60-
{
61-
width: 100,
62-
height: 160,
63-
},
64-
{
65-
width: 100,
66-
height: 67,
67-
},
68-
])
69-
})
40+
}
7041

71-
cy.get(".fixed").then(async $imgs => {
72-
await testImages(Array.from($imgs), [
73-
{
74-
width: 100,
75-
height: 133,
76-
},
77-
{
78-
width: 100,
79-
height: 160,
80-
},
81-
{
82-
width: 100,
83-
height: 67,
84-
},
85-
])
86-
})
42+
it(`should render correct dimensions`, () => {
43+
cy.get('[data-testid="public"]').then(async $urls => {
44+
const urls = Array.from(
45+
$urls.map((_, $url) => $url.getAttribute("href"))
46+
)
8747

88-
cy.get(".constrained").then(async $imgs => {
89-
await testImages(Array.from($imgs), [
90-
{
91-
width: 300,
92-
height: 400,
93-
},
94-
{
95-
width: 300,
96-
height: 481,
97-
},
98-
{
99-
width: 300,
100-
height: 200,
101-
},
102-
])
103-
})
48+
for (const url of urls) {
49+
const res = await fetch(url, {
50+
method: "HEAD",
51+
})
52+
expect(res.ok).to.be.true
53+
}
54+
})
10455

105-
cy.get(".full").then(async $imgs => {
106-
await testImages(Array.from($imgs), [
107-
{
108-
height: 1229,
109-
},
110-
{
111-
height: 1478,
112-
},
113-
{
114-
height: 614,
115-
},
116-
])
117-
})
118-
})
56+
cy.get(".resize").then(async $imgs => {
57+
await testImages(Array.from($imgs), [
58+
{
59+
width: 100,
60+
height: 133,
61+
},
62+
{
63+
width: 100,
64+
height: 160,
65+
},
66+
{
67+
width: 100,
68+
height: 67,
69+
},
70+
])
71+
})
11972

120-
it(`should render a placeholder`, () => {
121-
cy.get(".fixed [data-placeholder-image]")
122-
.first()
123-
.should("have.css", "background-color", "rgb(232, 184, 8)")
124-
cy.get(".constrained [data-placeholder-image]")
125-
.first()
126-
.should($el => {
127-
expect($el.prop("tagName")).to.be.equal("IMG")
128-
expect($el.prop("src")).to.contain("data:image/jpg;base64")
73+
cy.get(".fixed").then(async $imgs => {
74+
await testImages(Array.from($imgs), [
75+
{
76+
width: 100,
77+
height: 133,
78+
},
79+
{
80+
width: 100,
81+
height: 160,
82+
},
83+
{
84+
width: 100,
85+
height: 67,
86+
},
87+
])
12988
})
130-
cy.get(".constrained_traced [data-placeholder-image]")
131-
.first()
132-
.should($el => {
133-
expect($el.prop("tagName")).to.be.equal("IMG")
134-
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
89+
90+
cy.get(".constrained").then(async $imgs => {
91+
await testImages(Array.from($imgs), [
92+
{
93+
width: 300,
94+
height: 400,
95+
},
96+
{
97+
width: 300,
98+
height: 481,
99+
},
100+
{
101+
width: 300,
102+
height: 200,
103+
},
104+
])
135105
})
136-
cy.get(".full [data-placeholder-image]")
137-
.first()
138-
.should($el => {
139-
expect($el.prop("tagName")).to.be.equal("DIV")
140-
expect($el).to.be.empty
106+
107+
cy.get(".full").then(async $imgs => {
108+
await testImages(Array.from($imgs), [
109+
{
110+
height: 1229,
111+
},
112+
{
113+
height: 1478,
114+
},
115+
{
116+
height: 614,
117+
},
118+
])
141119
})
142-
})
143-
})
120+
})
121+
122+
it(`should render a placeholder`, () => {
123+
cy.get(".fixed [data-placeholder-image]")
124+
.first()
125+
.should("have.css", "background-color", "rgb(232, 184, 8)")
126+
cy.get(".constrained [data-placeholder-image]")
127+
.first()
128+
.should($el => {
129+
expect($el.prop("tagName")).to.be.equal("IMG")
130+
expect($el.prop("src")).to.contain("data:image/jpg;base64")
131+
})
132+
cy.get(".constrained_traced [data-placeholder-image]")
133+
.first()
134+
.should($el => {
135+
// traced falls back to DOMINANT_COLOR
136+
expect($el.prop("tagName")).to.be.equal("DIV")
137+
expect($el).to.be.empty
138+
})
139+
cy.get(".full [data-placeholder-image]")
140+
.first()
141+
.should($el => {
142+
expect($el.prop("tagName")).to.be.equal("DIV")
143+
expect($el).to.be.empty
144+
})
145+
})
146+
}
147+
)

‎e2e-tests/production-runtime/cypress/integration/static-image/traced.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ describe(`fixed`, () => {
55
cy.visit(`/static-image/traced`).waitForRouteChange()
66
})
77

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

‎examples/using-contentful/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"scripts": {
3131
"develop": "gatsby develop",
3232
"build": "gatsby build",
33+
"clean": "gatsby clean",
3334
"start": "gatsby serve"
3435
}
3536
}

‎packages/gatsby-plugin-image/src/resolver-utils.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,9 @@ export function getGatsbyImageFieldConfig<TSource, TContext, TArgs>(
202202
type: ImagePlaceholderType.name,
203203
description: stripIndent`
204204
Format of generated placeholder image, displayed while the main image loads.
205-
BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)
206-
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image.
207-
TRACED_SVG: a low-resolution traced SVG of the image.
205+
BLURRED: a blurred, low resolution image, encoded as a base64 data URI.
206+
DOMINANT_COLOR: a solid color, calculated from the dominant color of the image (default).
207+
TRACED_SVG: deprecated. Will use DOMINANT_COLOR.
208208
NONE: no placeholder. Set the argument "backgroundColor" to use a fixed background color.`,
209209
},
210210
formats: {

‎packages/gatsby-plugin-sharp/package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
},
99
"dependencies": {
1010
"@babel/runtime": "^7.15.4",
11-
"@gatsbyjs/potrace": "^2.3.0",
1211
"async": "^3.2.4",
1312
"bluebird": "^3.7.2",
1413
"debug": "^4.3.4",
@@ -17,11 +16,9 @@
1716
"gatsby-core-utils": "^3.24.0",
1817
"gatsby-plugin-utils": "^3.18.0",
1918
"lodash": "^4.17.21",
20-
"mini-svg-data-uri": "^1.4.4",
2119
"probe-image-size": "^7.2.3",
2220
"semver": "^7.3.7",
23-
"sharp": "^0.30.7",
24-
"svgo": "^2.8.0"
21+
"sharp": "^0.30.7"
2522
},
2623
"devDependencies": {
2724
"@babel/cli": "^7.15.4",

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy