From 84e9276b7e19d9da8d554f5ada60bb7f8d90d08c Mon Sep 17 00:00:00 2001 From: Laurie Date: Fri, 15 Jan 2021 10:36:28 -0500 Subject: [PATCH 1/3] handle or warn on options changes --- .../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 | 39 +++++++++++++++++++ 5 files changed, 66 insertions(+), 1 deletion(-) 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..76d5dd54a832c 100644 --- a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js +++ b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js @@ -25,6 +25,23 @@ const legacyFragmentsSVGPlaceholder = [ `GatsbyImageSharpFluid_withWebp_tracedSVG`, ] +const transformOptions = [ + `grayscale`, + `duotone`, + `rotate`, + `trim`, + `cropFocus`, + `fit`, +] + +const otherOptions = [ + `jpegQuality`, + `webpQuality`, + `pngQuality`, + `srcSetBreakpoints`, + `pngCompressionSpeed`, +] + const typeMapper = { fixed: `FIXED`, fluid: `FULL_WIDTH`, @@ -313,12 +330,19 @@ function processArguments(queryArguments, fragment, layout, state) { } queryArguments.push(placeholderArgument) } + let transformOptionsToNest = [] for (let index in queryArguments) { const argument = queryArguments[index] if (argument.name.value === `maxWidth`) { argument.name.value = `width` if (layout === `fluid` && Number(argument.value.value) >= 1000) { delete queryArguments[index] + const maxHeight = queryArguments.findIndex( + arg => arg?.name?.value === `maxHeight` + ) + + delete queryArguments?.[maxHeight] + console.log( `maxWidth is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.` ) @@ -333,7 +357,22 @@ function processArguments(queryArguments, fragment, layout, state) { 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 } From beb35d7af307fb22deb8269001377e1192eece2e Mon Sep 17 00:00:00 2001 From: Laurie Date: Fri, 15 Jan 2021 11:06:36 -0500 Subject: [PATCH 2/3] remove srcSetBreakpoints from list --- packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js index 76d5dd54a832c..03b81a5e2a9cd 100644 --- a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js +++ b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js @@ -38,7 +38,6 @@ const otherOptions = [ `jpegQuality`, `webpQuality`, `pngQuality`, - `srcSetBreakpoints`, `pngCompressionSpeed`, ] From 63f77b55afaf8f40366f3d849bf42bf4a50bdbe7 Mon Sep 17 00:00:00 2001 From: Laurie Date: Fri, 15 Jan 2021 11:36:44 -0500 Subject: [PATCH 3/3] use forEach instead --- .../src/transforms/gatsby-plugin-image.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js index 03b81a5e2a9cd..cbd96f2778297 100644 --- a/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js +++ b/packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js @@ -330,17 +330,17 @@ function processArguments(queryArguments, fragment, layout, state) { queryArguments.push(placeholderArgument) } let transformOptionsToNest = [] - for (let index in queryArguments) { - const argument = queryArguments[index] + 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 maxHeight = queryArguments.findIndex( + const maxHeightIndex = queryArguments.findIndex( arg => arg?.name?.value === `maxHeight` ) - delete queryArguments?.[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}.` @@ -349,7 +349,7 @@ 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` @@ -364,7 +364,7 @@ function processArguments(queryArguments, fragment, layout, state) { `${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`, @@ -373,7 +373,7 @@ function processArguments(queryArguments, fragment, layout, state) { } queryArguments.push(newOptions) } - return layout + return newLayout } function processGraphQLQuery(query, state) {