Skip to content

Commit

Permalink
chore(gatsby-codemods): Update to match new image API (#29004)
Browse files Browse the repository at this point in the history
* update codemod for new API

* uncomment
  • Loading branch information
LB authored Jan 13, 2021
1 parent 87bdec0 commit 2c6c42c
Show file tree
Hide file tree
Showing 10 changed files with 113 additions and 27 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const result = graphql(`{
file(relativePath: {eq: "headers/headshot.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FLUID)
gatsbyImageData(layout: FULL_WIDTH)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

<Img fixed={data.file.childImageSharp.fixed} alt="headshot"/>

export const query = graphql`
{
file(relativePath: { eq: "headers/default.jpg" }) {
childImageSharp {
fluid(maxWidth: 1000) {
...GatsbyImageSharpFluid
}
}
}
other: file(relativePath: { eq: "headers/default.jpg" }) {
childImageSharp {
fluid(maxWidth: 500) {
...GatsbyImageSharpFluid
}
}
}
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image";

<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="headshot" />

export const query = graphql`{
file(relativePath: {eq: "headers/default.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
}
other: file(relativePath: {eq: "headers/default.jpg"}) {
childImageSharp {
gatsbyImageData(width: 500, layout: CONSTRAINED)
}
}
}
`
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql`{
file(relativePath: {eq: "headers/headshot.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FLUID)
gatsbyImageData(layout: FULL_WIDTH)
}
}
banner: file(relativePath: {eq: "headers/default.jpg"}) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
export const query = graphql`{
named: file(relativePath: {eq: "landscape.jpg"}) {
childImageSharp {
gatsbyImageData(placeholder: TRACED_SVG, layout: FLUID)
gatsbyImageData(placeholder: TRACED_SVG, layout: FULL_WIDTH)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const Hero: React.SFC = ({ children }) => {
const data = useStaticQuery(graphql`{
file(relativePath: {eq: "banner.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FLUID)
gatsbyImageData(layout: FULL_WIDTH)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import Img from "gatsby-image"
const HomePage = ({ data }) => {
const image = data.file.childImageSharp.fluid.src
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { GatsbyImage } from "gatsby-plugin-image";
const HomePage = ({ data }) => {
const image = data.file.childImageSharp.gatsbyImageData.src
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const tests = [
`stunted-ref`,
`optional-chaining`,
`styled`,
`fluid`,
`variable-src`,
]

const defineTest = require(`jscodeshift/dist/testUtils`).defineTest
Expand Down
79 changes: 56 additions & 23 deletions packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const legacyFragmentsSVGPlaceholder = [

const typeMapper = {
fixed: `FIXED`,
fluid: `FLUID`,
fluid: `FULL_WIDTH`,
constrained: `CONSTRAINED`,
}

Expand Down Expand Up @@ -122,6 +122,14 @@ export function updateImport(babel) {
propNames.includes(path.node.property.name) &&
path.node?.object?.property?.name === `childImageSharp`
) {
if (
t.isMemberExpression(path.parent) ||
t.isOptionalMemberExpression(path.parent)
) {
console.log(
`It appears you're accessing src or similar. This structure has changed. Please inspect ${state.opts.filename} manually, you likely want to use a helper function like getSrc.`
)
}
const updatedExpression = t.memberExpression(
path.node.object,
t.identifier(`gatsbyImageData`)
Expand All @@ -135,6 +143,14 @@ export function updateImport(babel) {
propNames.includes(path.node.property.name) &&
path.node?.object?.property?.name === `childImageSharp`
) {
if (
t.isMemberExpression(path.parent) ||
t.isOptionalMemberExpression(path.parent)
) {
console.log(
`It appears you're accessing src or similar. This structure has changed. Please inspect ${state.opts.filename} manually, you likely want to use a helper function like getSrc.`
)
}
const updatedExpression = t.optionalMemberExpression(
path.node.object,
t.identifier(`gatsbyImageData`),
Expand All @@ -154,7 +170,7 @@ export function updateImport(babel) {
const {
ast: transformedGraphQLQuery,
hasChanged,
} = processGraphQLQuery(query)
} = processGraphQLQuery(query, state)

if (hasChanged) {
node.quasi.quasis[0].value.raw = graphql.print(
Expand All @@ -174,7 +190,7 @@ export function updateImport(babel) {
const {
ast: transformedGraphQLQuery,
hasChanged,
} = processGraphQLQuery(query)
} = processGraphQLQuery(query, state)

if (hasChanged) {
node.arguments[0].quasis[0].value.raw = graphql.print(
Expand Down Expand Up @@ -251,19 +267,9 @@ function processImportUsage(path, t, template, state) {

newImageExpression.extra.parenthesized = false // the template adds parens and we don't want it to
} else if (t.isObjectExpression(expressionValue)) {
expressionValue.properties.map(item => {
if (item.key?.name !== `src`) return
if (t.isMemberExpression(item.value)) {
let subObject = item.value?.object
while (subObject) {
if (propNames.includes(subObject.property?.name)) {
subObject.property.name = `gatsbyImageData`
break
}
subObject = subObject?.object
}
}
})
console.log(
`It appears you're passing src or srcSet directly. This API is no longer exposed, please update ${state.opts.filename} manually.`
)
} else if (expressionValue) {
console.log(
`It appears you're passing a variable to your image component. We haven't changed it, but we have updated it to use the new GatsbyImage component. Please check ${state.opts.filename} manually.`
Expand All @@ -286,7 +292,7 @@ function processImportUsage(path, t, template, state) {
path.skip() // prevent us from revisiting these nodes
}

function processArguments(queryArguments, fragment) {
function processArguments(queryArguments, fragment, layout, state) {
if (!legacyFragments.includes(fragment.name.value)) {
let placeholderEnum = `BLURRED` // just in case these aren't the discrete cases we expect
if (legacyFragmentsNoPlaceholder.includes(fragment.name?.value)) {
Expand All @@ -307,10 +313,32 @@ function processArguments(queryArguments, fragment) {
}
queryArguments.push(placeholderArgument)
}
return
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]
console.log(
`maxWidth is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.`
)
} else if (layout === `fluid` && Number(argument.value.value) < 1000) {
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`
}
} 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}.`
)
}
}
return layout
}

function processGraphQLQuery(query) {
function processGraphQLQuery(query, state) {
try {
let hasChanged = false // this is sort of a hack, but print changes formatting and we only want to use it when we have to
const ast = graphql.parse(query)
Expand All @@ -333,18 +361,23 @@ function processGraphQLQuery(query) {
if (!fixedOrFluidField) {
return
}
let imageType = fixedOrFluidField.name.value
let layout = fixedOrFluidField.name.value
const fragments = fixedOrFluidField.selectionSet.selections

const presentationSizeFragment = fragments.find(
({ name }) =>
name.value === `GatsbyImageSharpFluidLimitPresentationSize`
)
if (presentationSizeFragment) {
imageType = `constrained`
layout = `constrained`
delete fragments[presentationSizeFragment]
}
processArguments(fixedOrFluidField.arguments, fragments?.[0])
layout = processArguments(
fixedOrFluidField.arguments,
fragments?.[0],
layout,
state
)

const typeArgument = {
kind: `Argument`,
Expand All @@ -354,7 +387,7 @@ function processGraphQLQuery(query) {
},
value: {
kind: `EnumValue`,
value: typeMapper[imageType],
value: typeMapper[layout],
},
}

Expand Down

0 comments on commit 2c6c42c

Please sign in to comment.