Skip to content

Commit 94c2d73

Browse files
piehpieh
authored
chore: remove tracedSVG (#37093)
* 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
1 parent 0889d31 commit 94c2d73

File tree

36 files changed

+460
-907
lines changed

36 files changed

+460
-907
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

+132-123
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,158 @@
1-
Cypress.on('uncaught:exception', (err) => {
2-
if ((err.message.includes('Minified React error #418') || err.message.includes('Minified React error #423') || err.message.includes('Minified React error #425')) && Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
1+
Cypress.on("uncaught:exception", err => {
2+
if (
3+
(err.message.includes("Minified React error #418") ||
4+
err.message.includes("Minified React error #423") ||
5+
err.message.includes("Minified React error #425")) &&
6+
Cypress.env(`TEST_PLUGIN_OFFLINE`)
7+
) {
38
return false
49
}
510
})
611

712
describe(
8-
`remote-file`,
13+
`remote-file`,
914
{
1015
retries: {
1116
runMode: 4,
1217
},
1318
},
1419
() => {
15-
beforeEach(() => {
16-
cy.visit(`/remote-file/`).waitForRouteChange()
20+
beforeEach(() => {
21+
cy.visit(`/remote-file/`).waitForRouteChange()
1722

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

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

52-
for (const url of urls) {
53-
const res = await fetch(url, {
36+
const res = await fetch(images[i].currentSrc, {
5437
method: "HEAD",
5538
})
5639
expect(res.ok).to.be.true
40+
if (expectation.width) {
41+
expect(
42+
Math.ceil(images[i].getBoundingClientRect().width)
43+
).to.be.equal(expectation.width)
44+
}
45+
if (expectation.height) {
46+
expect(
47+
Math.ceil(images[i].getBoundingClientRect().height)
48+
).to.be.equal(expectation.height)
49+
}
5750
}
58-
})
59-
60-
cy.get(".resize").then(async $imgs => {
61-
await testImages(Array.from($imgs), [
62-
{
63-
width: 100,
64-
height: 133,
65-
},
66-
{
67-
width: 100,
68-
height: 160,
69-
},
70-
{
71-
width: 100,
72-
height: 67,
73-
},
74-
])
75-
})
51+
}
7652

77-
cy.get(".fixed").then(async $imgs => {
78-
await testImages(Array.from($imgs), [
79-
{
80-
width: 100,
81-
height: 133,
82-
},
83-
{
84-
width: 100,
85-
height: 160,
86-
},
87-
{
88-
width: 100,
89-
height: 67,
90-
},
91-
])
92-
})
53+
it(`should render correct dimensions`, () => {
54+
cy.get('[data-testid="public"]').then(async $urls => {
55+
const urls = Array.from(
56+
$urls.map((_, $url) => $url.getAttribute("href"))
57+
)
9358

94-
cy.get(".constrained").then(async $imgs => {
95-
await testImages(Array.from($imgs), [
96-
{
97-
width: 300,
98-
height: 400,
99-
},
100-
{
101-
width: 300,
102-
height: 481,
103-
},
104-
{
105-
width: 300,
106-
height: 200,
107-
},
108-
])
109-
})
59+
for (const url of urls) {
60+
const res = await fetch(url, {
61+
method: "HEAD",
62+
})
63+
expect(res.ok).to.be.true
64+
}
65+
})
11066

111-
cy.get(".full").then(async $imgs => {
112-
await testImages(Array.from($imgs), [
113-
{
114-
height: 1229,
115-
},
116-
{
117-
height: 1478,
118-
},
119-
{
120-
height: 614,
121-
},
122-
])
123-
})
124-
})
67+
cy.get(".resize").then(async $imgs => {
68+
await testImages(Array.from($imgs), [
69+
{
70+
width: 100,
71+
height: 133,
72+
},
73+
{
74+
width: 100,
75+
height: 160,
76+
},
77+
{
78+
width: 100,
79+
height: 67,
80+
},
81+
])
82+
})
12583

126-
it(`should render a placeholder`, () => {
127-
cy.get(".fixed [data-placeholder-image]")
128-
.first()
129-
.should("have.css", "background-color", "rgb(232, 184, 8)")
130-
cy.get(".constrained [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/jpg;base64")
84+
cy.get(".fixed").then(async $imgs => {
85+
await testImages(Array.from($imgs), [
86+
{
87+
width: 100,
88+
height: 133,
89+
},
90+
{
91+
width: 100,
92+
height: 160,
93+
},
94+
{
95+
width: 100,
96+
height: 67,
97+
},
98+
])
13599
})
136-
cy.get(".constrained_traced [data-placeholder-image]")
137-
.first()
138-
.should($el => {
139-
expect($el.prop("tagName")).to.be.equal("IMG")
140-
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
100+
101+
cy.get(".constrained").then(async $imgs => {
102+
await testImages(Array.from($imgs), [
103+
{
104+
width: 300,
105+
height: 400,
106+
},
107+
{
108+
width: 300,
109+
height: 481,
110+
},
111+
{
112+
width: 300,
113+
height: 200,
114+
},
115+
])
141116
})
142-
cy.get(".full [data-placeholder-image]")
143-
.first()
144-
.should($el => {
145-
expect($el.prop("tagName")).to.be.equal("DIV")
146-
expect($el).to.be.empty
117+
118+
cy.get(".full").then(async $imgs => {
119+
await testImages(Array.from($imgs), [
120+
{
121+
height: 1229,
122+
},
123+
{
124+
height: 1478,
125+
},
126+
{
127+
height: 614,
128+
},
129+
])
147130
})
148-
})
149-
})
131+
})
132+
133+
it(`should render a placeholder`, () => {
134+
cy.get(".fixed [data-placeholder-image]")
135+
.first()
136+
.should("have.css", "background-color", "rgb(232, 184, 8)")
137+
cy.get(".constrained [data-placeholder-image]")
138+
.first()
139+
.should($el => {
140+
expect($el.prop("tagName")).to.be.equal("IMG")
141+
expect($el.prop("src")).to.contain("data:image/jpg;base64")
142+
})
143+
cy.get(".constrained_traced [data-placeholder-image]")
144+
.first()
145+
.should($el => {
146+
// traced falls back to DOMINANT_COLOR
147+
expect($el.prop("tagName")).to.be.equal("DIV")
148+
expect($el).to.be.empty
149+
})
150+
cy.get(".full [data-placeholder-image]")
151+
.first()
152+
.should($el => {
153+
expect($el.prop("tagName")).to.be.equal("DIV")
154+
expect($el).to.be.empty
155+
})
156+
})
157+
}
158+
)

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

+14-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
const tracedTestId = `image-traced`
22

3-
Cypress.on('uncaught:exception', (err) => {
4-
if ((err.message.includes('Minified React error #418') || err.message.includes('Minified React error #423') || err.message.includes('Minified React error #425')) && Cypress.env(`TEST_PLUGIN_OFFLINE`)) {
3+
Cypress.on("uncaught:exception", err => {
4+
if (
5+
(err.message.includes("Minified React error #418") ||
6+
err.message.includes("Minified React error #423") ||
7+
err.message.includes("Minified React error #425")) &&
8+
Cypress.env(`TEST_PLUGIN_OFFLINE`)
9+
) {
510
return false
611
}
712
})
@@ -11,12 +16,14 @@ describe(`fixed`, () => {
1116
cy.visit(`/static-image/traced`).waitForRouteChange()
1217
})
1318

14-
it(`renders a traced svg`, () => {
19+
it(`traced svg (falls back to DOMINANT_COLOR)`, () => {
1520
cy.getTestElement(tracedTestId)
16-
.find(`.gatsby-image-wrapper > img`)
17-
.should(`have.attr`, `src`)
18-
.and(src => {
19-
;[`data:image/svg+xml`].forEach(part => expect(src).to.include(part))
21+
.find(`.gatsby-image-wrapper > [data-placeholder-image]`)
22+
.first()
23+
.should($el => {
24+
// traced falls
25+
expect($el.prop("tagName")).to.be.equal("DIV")
26+
expect($el).to.be.empty
2027
})
2128
})
2229

‎examples/using-contentful/package.json

+2-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
}
35-
}
36+
}

‎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: {

0 commit comments

Comments
 (0)