Skip to content

Commit

Permalink
feat(gatsby-plugin-sharp): Add image plugin defaults (#29147)
Browse files Browse the repository at this point in the history
* feat(gatsby-plugin-sharp): Add image plugin defaults

* Add transformOptions
  • Loading branch information
ascorbic authored Jan 22, 2021
1 parent eb2bede commit 8b6bfa6
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 3 deletions.
3 changes: 2 additions & 1 deletion packages/gatsby-plugin-sharp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
64 changes: 64 additions & 0 deletions packages/gatsby-plugin-sharp/src/__tests__/plugin-options.ts
Original file line number Diff line number Diff line change
@@ -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)
})
})
23 changes: 23 additions & 0 deletions packages/gatsby-plugin-sharp/src/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/`
),
})
4 changes: 3 additions & 1 deletion packages/gatsby-plugin-sharp/src/image-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -92,6 +92,8 @@ export async function generateImageData({
reporter,
cache,
}: IImageDataArgs): Promise<IGatsbyImageData | undefined> {
args = mergeDefaults(args)

const {
layout = `constrained`,
placeholder = `dominantColor`,
Expand Down
11 changes: 11 additions & 0 deletions packages/gatsby-plugin-sharp/src/plugin-options.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/gatsby-transformer-sharp/src/customize-schema.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 8b6bfa6

Please sign in to comment.