gatsby-image codemod

integration-tests/jest.config.js

@@ -13,6 +13,7 @@ module.exports = {
     `/dist/`,
     `/node_modules/`,
     `__tests__/fixtures`,
+    `__testfixtures__`,
     `.cache`,
   ],
   transform: { "^.+\\.js$": `<rootDir>/jest-transformer.js` },

jest.config.js

@@ -32,6 +32,7 @@ module.exports = {
     `<rootDir>/node_modules/`,
     `<rootDir>/packages/gatsby-admin/.cache/`,
     `__tests__/fixtures`,
+    `__testfixtures__/`,
   ],
   transform: {
     "^.+\\.[jt]sx?$": `<rootDir>/jest-transformer.js`,

packages/gatsby-plugin-image/README.md

@@ -226,34 +226,44 @@ export const query = graphql`
 
 ### Upgrading from the gatsby-image@2
 
-We will be releasing a codemod to automatically update your queries and imports. In the meantime, you can use the compat layer to make the transformation easier. This will be removed when we leave beta, but for now, it allows you to try the component with your existing queries.
+We've included a codemod to help you migrate to the new `gatsby-plugin-image` API.
 
-```jsx
-import React from "react"
-import { graphql } from "gatsby"
-// Note the different import
-import { GatsbyImage } from "gatsby-plugin-image/compat"
-
-export default ({ data }) => (
-  <div>
-    <h1>Hello gatsby-image</h1>
-    <GatsbyImage fixed={data.file.childImageSharp.fixed} />
-  </div>
-)
+1. Install JSCodeshift as a global module
 
-export const query = graphql`
-  query {
-    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
-      childImageSharp {
-        fixed(width: 125, height: 125) {
-          ...GatsbyImageSharpFixed
-        }
-      }
-    }
-  }
-`
+```shell
+npm install -g jscodeshift
+```
+
+2. Install this package
+
+```shell
+npm install gatsby-plugin-image
+```
+
+3. Add `gatsby-plugin-image` to your `gatsby-config.js` file.
+
+4. Make sure `gatsby-transformer-sharp` and `gatsby-plugin-sharp` are updated to the latest versions.
+
+5. Run a transform from this package on your project. Note that the paths are relative to the root of your project.
+
+```shell
+jscodeshift -t node_modules/gatsby-plugin-image/src/transforms/gatsby-plugin-image.js ./src -s
 ```
 
+**If you have a custom babel config for your site, run relative to the root directory, e.g. `./`.**
+
+This command using the `-s` flag so that you can see the specific warnings we're giving you and nothing else.
+
+Note that jscodeshift tries to match the formatting of your existing code, but you may need to use a tool like [prettier](https://prettier.io/) to ensure consistency after running these codemods.
+
+Structure of a jscodeshift call:
+
+- `jscodeshift -t <codemod-script> <path>`
+  - `codemod-script` - path to the transform file
+  - `path` - files or directory to transform, typically the path to your Gatsby project's `src` folder
+  - use the `-d` option for a dry-run and use `-p` to print the output for comparison
+  - see all available [jscodeshift options](https://github.com/facebook/jscodeshift#usage-cli)
+
 ## Three types of responsive images
 
 There are three types of responsive images supported by gatsby-image.

packages/gatsby-plugin-image/package.json

@@ -79,6 +79,12 @@
     "@babel/parser": "^7.12.5",
     "@babel/traverse": "^7.12.5",
     "babel-jsx-utils": "^1.0.1",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
+    "@babel/plugin-syntax-typescript": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "jscodeshift": "^0.11.0",
+    "recast": "^0.20.4",
     "babel-plugin-remove-graphql-queries": "^2.13.0-next.0",
     "chokidar": "^3.4.3",
     "fs-extra": "^8.1.0",

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/baseline.input.js

@@ -0,0 +1,17 @@
+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 {
+      fixed(width: 125, height: 125) {
+        ...GatsbyImageSharpFixed
+      }
+    }
+  }
+}
+`

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/baseline.output.js

@@ -0,0 +1,14 @@
+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(width: 125, height: 125, layout: FIXED)
+    }
+  }
+}
+`

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/call-expression.input.js

@@ -0,0 +1,11 @@
+const result = graphql(`
+query {
+    file(relativePath: { eq: "headers/headshot.jpg" }) {
+      childImageSharp {
+        fluid {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
+  }
+  `)

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/call-expression.output.js

@@ -0,0 +1,8 @@
+const result = graphql(`{
+  file(relativePath: {eq: "headers/headshot.jpg"}) {
+    childImageSharp {
+      gatsbyImageData(layout: FLUID)
+    }
+  }
+}
+`)

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/compat.input.js

@@ -0,0 +1,8 @@
+import { GatsbyImage as Img } from "gatsby-plugin-image/compat"
+// how do comments work?
+
+<Img 
+fixed={data.file.childImageSharp.fixed}
+ alt="headshot"/>
+
+//still doing ok?

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/compat.output.js

@@ -0,0 +1,6 @@
+import { GatsbyImage } from "gatsby-plugin-image";
+// how do comments work?
+
+<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="headshot" />
+
+//still doing ok?

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/extends-warn.input.js

@@ -0,0 +1,46 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Image from "gatsby-image"
+
+const svgAssetsContext = require.context(
+  `!file-loader!svgo-loader?{"plugins":[{"removeViewBox":false}]}!../assets`,
+  true,
+  /^\.\/.*\.svg$/
+)
+
+class SVGGatsbyImage extends Image {
+  render() {
+    const { fluid, alt, ...rest } = this.props
+
+    if (!this.state.isVisible) {
+      return <div ref={this.handleRef} />
+    }
+
+    return (
+      <img
+        src={svgAssetsContext(`./${fluid.src}`)}
+        alt={alt}
+        ref={this.imageRef}
+        {...rest}
+      />
+    )
+  }
+}
+
+SVGGatsbyImage.propTypes = {
+  alt: PropTypes.string,
+}
+
+SVGGatsbyImage.defaultProps = {
+  alt: ``,
+}
+
+const LazySVGImg = ({ src, ...rest }) => (
+  <SVGGatsbyImage fluid={{ src }} {...rest} />
+)
+
+LazySVGImg.propTypes = {
+  src: PropTypes.string,
+}
+
+export default LazySVGImg

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/extends-warn.output.js

@@ -0,0 +1,46 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { GatsbyImage } from "gatsby-plugin-image";
+
+const svgAssetsContext = require.context(
+  `!file-loader!svgo-loader?{"plugins":[{"removeViewBox":false}]}!../assets`,
+  true,
+  /^\.\/.*\.svg$/
+)
+
+class SVGGatsbyImage extends Image {
+  render() {
+    const { fluid, alt, ...rest } = this.props
+
+    if (!this.state.isVisible) {
+      return <div ref={this.handleRef} />
+    }
+
+    return (
+      <img
+        src={svgAssetsContext(`./${fluid.src}`)}
+        alt={alt}
+        ref={this.imageRef}
+        {...rest}
+      />
+    )
+  }
+}
+
+SVGGatsbyImage.propTypes = {
+  alt: PropTypes.string,
+}
+
+SVGGatsbyImage.defaultProps = {
+  alt: ``,
+}
+
+const LazySVGImg = ({ src, ...rest }) => (
+  <SVGGatsbyImage fluid={{ src }} {...rest} />
+)
+
+LazySVGImg.propTypes = {
+  src: PropTypes.string,
+}
+
+export default LazySVGImg

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/ignore.input.js

@@ -0,0 +1 @@
+<GatsbyImage image={getImage(data.fitInside)} alt="chameleon" />

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/ignore.output.js

@@ -0,0 +1 @@
+<GatsbyImage image={getImage(data.fitInside)} alt="chameleon" />

packages/gatsby-plugin-image/src/transforms/__testfixtures__/gatsby-plugin-image/mansion.input.js

@@ -0,0 +1,74 @@
+import { graphql } from "gatsby"
+import React from "react"
+
+import Img from "../components/core/img"
+
+const Profiles = ({ profiles }) => (
+  <>
+    {profiles.map((profile, i) => (
+        <div>
+          {profile.hoverPhoto && (
+            <Img
+              css={{
+                display: `none !important`,
+                position: `absolute !important`,
+                borderRadius: radii[6],
+                marginBottom: space[5],
+                transform: `translateZ(0)`,
+                [breakpoint]: {
+                  marginBottom: 0,
+                  display: `block !important`,
+                },
+              }}
+              fixed={profile.hoverPhoto.fixed}
+            />
+          )}
+          {profile.photo && (
+            <Img
+              css={{
+                borderRadius: radii[6],
+                marginBottom: space[5],
+                transform: `translateZ(0)`,
+                [breakpoint]: {
+                  marginBottom: 0,
+                  ...(profile.hoverPhoto
+                    ? {
+                        ":hover": {
+                          opacity: `0 !important`,
+                        },
+                      }
+                    : {}),
+                },
+              }}
+              fixed={profile.photo.fixed}
+            />
+          )}
+        </div>
+    ))}
+  </>
+)
+
+export const query = graphql`
+  fragment ProfilesFragment on ContentfulProfile {
+    name
+    title
+    photo {
+      fixed(width: 80, height: 80, quality: 90) {
+        ...GatsbyContentfulFixed
+      }
+    }
+    hoverPhoto {
+      fixed(width: 80, height: 80, quality: 90) {
+        ...GatsbyContentfulFixed
+      }
+    }
+    twitter
+    gitHub
+    website
+    bio {
+      childMarkdownRemark {
+        html
+      }
+    }
+  }
+`