Skip to content

Commit

Permalink
feat(gatsby-plugin-utils): enable tracedsvg (#35328)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wardpeet
wardpeet committed Apr 20, 2022
1 parent dfa5991 commit a246011
Show file tree
Hide file tree
Showing 19 changed files with 406 additions and 317 deletions.
6 changes: 6 additions & 0 deletions e2e-tests/development-runtime/cypress/integration/remote-file/gatsby-plugin-image.js
View file
Expand Up @@ -123,6 +123,12 @@ describe(`remote-file`, () => {
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 => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
Expand Down
10 changes: 10 additions & 0 deletions e2e-tests/development-runtime/src/pages/remote-file.js
View file
Expand Up @@ -32,6 +32,11 @@ const RemoteFile = ({ data }) => {
image={node.constrained}
alt=""
/>
<GatsbyImage
className="constrained_traced"
image={node.constrained_traced}
alt=""
/>
<GatsbyImage className="full" image={node.full} alt="" />
</div>
</div>
Expand Down Expand Up @@ -64,6 +69,11 @@ export const pageQuery = graphql`
width: 300
placeholder: BLURRED
)
constrained_traced: gatsbyImage(
layout: CONSTRAINED
width: 300
placeholder: TRACED_SVG
)
full: gatsbyImage(layout: FULL_WIDTH, width: 500, placeholder: NONE)
}
}
Expand Down
6 changes: 6 additions & 0 deletions e2e-tests/production-runtime/cypress/integration/remote-file.js
View file
Expand Up @@ -119,6 +119,12 @@ describe(`remote-file`, () => {
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 => {
expect($el.prop("tagName")).to.be.equal("IMG")
expect($el.prop("src")).to.contain("data:image/svg+xml,%3csvg")
})
cy.get(".full [data-placeholder-image]")
.first()
.should($el => {
Expand Down
10 changes: 10 additions & 0 deletions e2e-tests/production-runtime/src/pages/remote-file.js
View file
Expand Up @@ -29,6 +29,11 @@ const RemoteFile = ({ data }) => {
image={node.constrained}
alt=""
/>
<GatsbyImage
className="constrained_traced"
image={node.constrained_traced}
alt=""
/>
<GatsbyImage className="full" image={node.full} alt="" />
</div>
</div>
Expand Down Expand Up @@ -61,6 +66,11 @@ export const pageQuery = graphql`
width: 300
placeholder: BLURRED
)
constrained_traced: gatsbyImage(
layout: CONSTRAINED
width: 300
placeholder: TRACED_SVG
)
full: gatsbyImage(layout: FULL_WIDTH, width: 500, placeholder: NONE)
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-sharp/package.json
View file
Expand Up @@ -8,6 +8,7 @@
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@gatsbyjs/potrace": "^2.2.0",
"async": "^3.2.3",
"bluebird": "^3.7.2",
"debug": "^4.3.4",
Expand All @@ -19,7 +20,6 @@
"got": "^11.8.3",
"lodash": "^4.17.21",
"mini-svg-data-uri": "^1.4.4",
"potrace": "^2.1.8",
"probe-image-size": "^7.2.3",
"progress": "^2.0.3",
"semver": "^7.3.5",
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-sharp/src/trace-svg.js
View file
Expand Up @@ -128,7 +128,7 @@ exports.notMemoizedtraceSVG = async ({ file, args, fileArgs, reporter }) => {
})

const svgToMiniDataURI = require(`mini-svg-data-uri`)
const potrace = require(`potrace`)
const potrace = require(`@gatsbyjs/potrace`)
const trace = promisify(potrace.trace)

const defaultArgs = {
Expand Down
5 changes: 4 additions & 1 deletion packages/gatsby-plugin-utils/package.json
View file
Expand Up @@ -47,13 +47,16 @@
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-utils#readme",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@gatsbyjs/potrace": "^2.2.0",
"fs-extra": "^10.0.0",
"gatsby-core-utils": "^3.13.0-next.0",
"gatsby-sharp": "^0.7.0-next.0",
"graphql-compose": "^9.0.7",
"import-from": "^4.0.0",
"joi": "^17.4.2",
"mime": "^3.0.0"
"mime": "^3.0.0",
"mini-svg-data-uri": "^1.4.4",
"svgo": "^2.8.0"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
Expand Down
27 changes: 27 additions & 0 deletions packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/gatsby-image-resolver.ts
View file
Expand Up @@ -681,6 +681,33 @@ describe(`gatsbyImageData`, () => {
`)
})

it(`should generate tracedSVG placeholder`, async () => {
fetchRemoteFile.mockResolvedValueOnce(
path.join(__dirname, `__fixtures__`, `dog-portrait.jpg`)
)
const fixedResult = await gatsbyImageResolver(
portraitSource,
{
layout: `fixed`,
width: 300,
placeholder: PlaceholderType.TRACED_SVG,
},
actions
)

expect(fetchRemoteFile).toHaveBeenCalledTimes(1)
expect(fetchRemoteFile).toHaveBeenCalledWith({
url: portraitSource.url,
cacheKey: `1`,
directory: expect.stringContaining(cacheDir),
})
expect(fixedResult?.placeholder).toMatchInlineSnapshot(`
Object {
"fallback": "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='33'%20viewBox='0%200%2020%2033'%3e%3cpath%20d='M6%201C4%205%204%205%203%203L2%201C0%201%200%205%200%2014s0%209%203%208c4%200%204%200%204-2v-8H6c0-1%202-3%204-3s2%200%202-2l-1-4c0-3%200-3-3-3L6%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e",
}
`)
})

it(`should render avif, webp other format in this order`, async () => {
const constrainedResult = await gatsbyImageResolver(
portraitSource,
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/get-remote-file-enums.ts
View file
Expand Up @@ -49,6 +49,7 @@ export function getRemoteFileEnums(
values: {
DOMINANT_COLOR: { value: `dominantColor` },
BLURRED: { value: `blurred` },
TRACED_SVG: { value: `tracedSVG` },
NONE: { value: `none` },
},
})
Expand Down

0 comments on commit a246011

Please sign in to comment.