feat(gatsby-plugin-sharp): Add image plugin defaults (#29147)

* feat(gatsby-plugin-sharp): Add image plugin defaults * Add transformOptions
gatsbyjs · Jan 22, 2021 · 8b6bfa6 · 8b6bfa6
1 parent eb2bede
commit 8b6bfa6
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -33,7 +33,8 @@
     "@types/sharp": "^0.26.1",
     "babel-preset-gatsby-package": "^0.12.0-next.0",
     "cross-env": "^7.0.3",
-    "gatsby-plugin-image": "^0.7.0-next.0"
+    "gatsby-plugin-image": "^0.7.0-next.0",
+    "gatsby-plugin-utils": "^0.9.0-next.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme",
   "keywords": [

diff --git a/packages/gatsby-plugin-sharp/src/__tests__/plugin-options.ts b/packages/gatsby-plugin-sharp/src/__tests__/plugin-options.ts
@@ -0,0 +1,64 @@
+import { testPluginOptionsSchema } from "gatsby-plugin-utils"
+import { pluginOptionsSchema } from "../../gatsby-node"
+
+describe(`pluginOptionsSchema`, () => {
+  it(`should reject incorrect options`, async () => {
+    const options = {
+      defaults: {
+        formats: [`gif`, `webp`],
+        placeholder: `base64`,
+        quality: `great`,
+        breakpoints: [`mobile`],
+        backgroundColor: 0,
+        tracedSVGOptions: null,
+        transformOptions: false,
+        blurredOptions: 1,
+        jpgOptions: `none`,
+        pngOptions: [{}],
+        webpOptions: /a/,
+        avifOptions: 1,
+      },
+    }
+    const { isValid, errors } = await testPluginOptionsSchema(
+      pluginOptionsSchema,
+      options
+    )
+    expect(isValid).toBe(false)
+    expect(errors).toEqual([
+      `"defaults.formats[0]" must be one of [auto, png, jpg, webp, avif]`,
+      `"defaults.placeholder" must be one of [tracedSVG, dominantColor, blurred, none]`,
+      `"defaults.quality" must be a number`,
+      `"defaults.breakpoints[0]" must be a number`,
+      `"defaults.backgroundColor" must be a string`,
+      `"defaults.transformOptions" must be of type object`,
+      `"defaults.tracedSVGOptions" must be of type object`,
+      `"defaults.blurredOptions" must be of type object`,
+      `"defaults.jpgOptions" must be of type object`,
+      `"defaults.pngOptions" must be of type object`,
+      `"defaults.avifOptions" must be of type object`,
+    ])
+  })
+
+  it(`should accept correct options`, async () => {
+    const options = {
+      defaults: {
+        formats: [`auto`, `webp`],
+        placeholder: `dominantColor`,
+        quality: 50,
+        breakpoints: [100, 200],
+        backgroundColor: `rebeccapurple`,
+        tracedSVGOptions: {},
+        blurredOptions: { quality: 20 },
+        jpgOptions: { quality: 20 },
+        pngOptions: { quality: 20 },
+        webpOptions: { quality: 20 },
+        avifOptions: { quality: 20 },
+      },
+    }
+    const { isValid } = await testPluginOptionsSchema(
+      pluginOptionsSchema,
+      options
+    )
+    expect(isValid).toBe(true)
+  })
+})
diff --git a/packages/gatsby-plugin-sharp/src/gatsby-node.js b/packages/gatsby-plugin-sharp/src/gatsby-node.js
@@ -215,4 +215,27 @@ exports.pluginOptionsSchema = ({ Joi }) =>
     stripMetadata: Joi.boolean().default(true),
     defaultQuality: Joi.number().default(50),
     failOnError: Joi.boolean().default(true),
+    defaults: Joi.object({
+      formats: Joi.array().items(
+        Joi.string().valid(`auto`, `png`, `jpg`, `webp`, `avif`)
+      ),
+      placeholder: Joi.string().valid(
+        `tracedSVG`,
+        `dominantColor`,
+        `blurred`,
+        `none`
+      ),
+      quality: Joi.number(),
+      breakpoints: Joi.array().items(Joi.number()),
+      backgroundColor: Joi.string(),
+      transformOptions: Joi.object(),
+      tracedSVGOptions: Joi.object(),
+      blurredOptions: Joi.object(),
+      jpgOptions: Joi.object(),
+      pngOptions: Joi.object(),
+      webpOptions: Joi.object(),
+      avifOptions: Joi.object(),
+    }).description(
+      `Default options used by gatsby-plugin-image. \nSee https://gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/`
+    ),
   })
diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -5,7 +5,7 @@ import { Reporter } from "gatsby-cli/lib/reporter/reporter"
 import { rgbToHex, calculateImageSizes, getSrcSet, getSizes } from "./utils"
 import { traceSVG, getImageSizeAsync, base64, batchQueueImageResizing } from "."
 import sharp from "./safe-sharp"
-import { createTransformObject } from "./plugin-options"
+import { createTransformObject, mergeDefaults } from "./plugin-options"
 import { reportError } from "./report-error"
 
 const DEFAULT_BLURRED_IMAGE_WIDTH = 20
@@ -92,6 +92,8 @@ export async function generateImageData({
   reporter,
   cache,
 }: IImageDataArgs): Promise<IGatsbyImageData | undefined> {
+  args = mergeDefaults(args)
+
   const {
     layout = `constrained`,
     placeholder = `dominantColor`,

diff --git a/packages/gatsby-plugin-sharp/src/plugin-options.js b/packages/gatsby-plugin-sharp/src/plugin-options.js
@@ -71,6 +71,17 @@ exports.createTransformObject = args => {
   return _.pickBy(options, _.identity)
 }
 
+/**
+ * Used for gatsbyImageData and StaticImage only
+ */
+exports.mergeDefaults = args => {
+  const { defaults } = pluginOptions
+  if (!defaults) {
+    return args
+  }
+  return _.defaultsDeep(args, defaults)
+}
+
 exports.healOptions = (
   { defaultQuality: quality, base64Width },
   args,

diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js
@@ -430,7 +430,6 @@ const imageNodeType = ({
       },
       placeholder: {
         type: ImagePlaceholderType,
-        defaultValue: `dominantColor`,
         description: stripIndent`
         Format of generated placeholder image, displayed while the main image loads. 
         BLURRED: a blurred, low resolution image, encoded as a base64 data URI (default)

diff --git a/yarn.lock b/yarn.lock
@@ -11629,6 +11629,13 @@ gatsby-node-helpers@^0.3.0:
     lodash "^4.17.4"
     p-is-promise "^1.1.0"
 
+gatsby-plugin-utils@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-0.8.0.tgz#2ecd848e6e3362ee929e496bc11528267d2fb96e"
+  integrity sha512-EQC1U7LQVHaI6jXMbx4ryvA8rV1yYrlyxwO2T4nuLUDOO1STUpKTYCH4ySOEtXi6f4P5v7NxgHkFoid6ayY9HA==
+  dependencies:
+    joi "^17.2.1"
+
 gatsby-plugin-webfonts@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-webfonts/-/gatsby-plugin-webfonts-1.1.4.tgz#f6fb8daf0acc4c59511c98964fceca35504014ac"