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 <[email protected]>
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

+1-1
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

+1-1
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

+3-1
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

+3-2
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

+7-5
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

+125-121
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

+7-5
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

+1
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

+3-3
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

+1-4
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)