feat(gatsby-plugin-utils): enable tracedsvg (#35328)

Author: wardpeet

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

@@ -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 => {

e2e-tests/development-runtime/src/pages/remote-file.js

@@ -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>
@@ -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)
       }
     }

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

@@ -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 => {

e2e-tests/production-runtime/src/pages/remote-file.js

@@ -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>
@@ -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)
       }
     }

packages/gatsby-plugin-sharp/package.json

@@ -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",
@@ -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",

packages/gatsby-plugin-sharp/src/trace-svg.js

@@ -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 = {

packages/gatsby-plugin-utils/package.json

@@ -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",

packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/gatsby-image-resolver.ts

@@ -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,

packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/get-remote-file-enums.ts

@@ -49,6 +49,7 @@ export function getRemoteFileEnums(
     values: {
       DOMINANT_COLOR: { value: `dominantColor` },
       BLURRED: { value: `blurred` },
+      TRACED_SVG: { value: `tracedSVG` },
       NONE: { value: `none` },
     },
   })