From 2439b4440e7c756ae6c09b0e854c91b484d9a462 Mon Sep 17 00:00:00 2001 From: LB Date: Mon, 18 Jan 2021 11:26:06 -0500 Subject: [PATCH] feat(gatsby-codemods): Handle or warn on nested options changes (#29046) * handle or warn on options changes * remove srcSetBreakpoints from list * use forEach instead --- .../gatsby-plugin-image/fluid.input.js | 2 +- .../transform-options.input.js | 14 ++++++ .../transform-options.output.js | 11 +++++ .../__tests__/gatsby-plugin-image-test.js | 1 + .../src/transforms/gatsby-plugin-image.js | 46 +++++++++++++++++-- 5 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.input.js create mode 100644 packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.output.js diff --git a/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/fluid.input.js b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/fluid.input.js index 0a5ae39c081e8..2985e4f924de6 100644 --- a/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/fluid.input.js +++ b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/fluid.input.js @@ -8,7 +8,7 @@ export const query = graphql` { file(relativePath: { eq: "headers/default.jpg" }) { childImageSharp { - fluid(maxWidth: 1000) { + fluid(maxWidth: 1000, maxHeight: 500) { ...GatsbyImageSharpFluid } } diff --git a/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.input.js b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.input.js new file mode 100644 index 0000000000000..b1ee08406a7ba --- /dev/null +++ b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.input.js @@ -0,0 +1,14 @@ +import React from "react" +import { graphql } from "gatsby" + +export const query = graphql` +{ + file(relativePath: {eq: "icon.png"}) { + childImageSharp { + fluid(duotone: {highlight: "#f00e2e", shadow: "#192550"}, rotate: 50) { + ...GatsbyImageSharpFluid + } + } + } +} +` \ No newline at end of file diff --git a/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.output.js b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.output.js new file mode 100644 index 0000000000000..d8c9554aab3a7 --- /dev/null +++ b/packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.output.js @@ -0,0 +1,11 @@ +import React from "react" +import { graphql } from "gatsby" + +export const query = graphql`{ + file(relativePath: {eq: "icon.png"}) { + childImageSharp { + gatsbyImageData(transformOptions: {duotone: {highlight: "#f00e2e", shadow: "#192550"}, rotate: 50}, layout: FULL_WIDTH) + } + } +} +` \ No newline at end of file diff --git a/packages/gatsby-codemods/src/transforms/__tests__/gatsby-plugin-image-test.js b/packages/gatsby-codemods/src/transforms/__tests__/gatsby-plugin-image-test.js index 24f4f1b1591de..e171bea295724 100644 --- a/packages/gatsby-codemods/src/transforms/__tests__/gatsby-plugin-image-test.js +++ b/packages/gatsby-codemods/src/transforms/__tests__/gatsby-plugin-image-test.js @@ -18,6 +18,7 @@ const tests = [ `optional-chaining`, `styled`, `fluid`, + `transform-options`, `variable-src`, ] diff --git a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js index 6a74950b596c5..cbd96f2778297 100644 --- a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js +++ b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js @@ -25,6 +25,22 @@ const legacyFragmentsSVGPlaceholder = [ `GatsbyImageSharpFluid_withWebp_tracedSVG`, ] +const transformOptions = [ + `grayscale`, + `duotone`, + `rotate`, + `trim`, + `cropFocus`, + `fit`, +] + +const otherOptions = [ + `jpegQuality`, + `webpQuality`, + `pngQuality`, + `pngCompressionSpeed`, +] + const typeMapper = { fixed: `FIXED`, fluid: `FULL_WIDTH`, @@ -313,12 +329,19 @@ function processArguments(queryArguments, fragment, layout, state) { } queryArguments.push(placeholderArgument) } - for (let index in queryArguments) { - const argument = queryArguments[index] + let transformOptionsToNest = [] + let newLayout = layout + queryArguments.forEach((argument, index) => { if (argument.name.value === `maxWidth`) { argument.name.value = `width` if (layout === `fluid` && Number(argument.value.value) >= 1000) { delete queryArguments[index] + const maxHeightIndex = queryArguments.findIndex( + arg => arg?.name?.value === `maxHeight` + ) + + delete queryArguments?.[maxHeightIndex] + console.log( `maxWidth is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.` ) @@ -326,16 +349,31 @@ function processArguments(queryArguments, fragment, layout, state) { console.log( `maxWidth is no longer supported for fluid (now fullWidth) images. We've updated the query in ${state.opts.filename} to use a constrained image instead.` ) - return `constrained` + newLayout = `constrained` } } else if (argument.name.value === `maxHeight`) { argument.name.value = `height` console.log( `maxHeight is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.` ) + } else if (transformOptions.includes(argument.name.value)) { + transformOptionsToNest.push(argument) + delete queryArguments[index] + } else if (otherOptions.includes(argument.name.value)) { + console.log( + `${argument.name.value} is now a nested value, please see the API docs and update the query in ${state.opts.filename} manually.` + ) + } + }) + if (transformOptionsToNest.length > 0) { + const newOptions = { + kind: `Argument`, + name: { kind: `Name`, value: `transformOptions` }, + value: { kind: `ObjectValue`, fields: transformOptionsToNest }, } + queryArguments.push(newOptions) } - return layout + return newLayout } function processGraphQLQuery(query, state) {