diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json index 3e1531153ada7..f274901df2ec6 100644 --- 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 new file mode 100644 index 0000000000000..39826017dec26 --- /dev/null +++ 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 index c8230631abfb1..ad64c7cb8016d 100644 --- 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 index 11957aeeec221..b95eb02214e28 100644 --- 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 { + 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 index 10f6bf988666b..92195c779d8a4 100644 --- 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 index 851aef2665750..eb55d5f43d79d 100644 --- 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 index aae003792931f..8a98aa8d7851a 100644 --- 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"