Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gatsby-image codemod #28112

Merged
merged 68 commits into from
Dec 4, 2020
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
3b27c28
saving initial AST exploration
Nov 13, 2020
c1833c9
use the types to build replacement expression
Nov 13, 2020
b4af168
missed a line
Nov 13, 2020
3719973
work off import parent
Nov 14, 2020
71208f6
graphql comment
Nov 14, 2020
7e200d2
finish for the nigh
Nov 14, 2020
c185293
Codemod for gatsby images
Nov 16, 2020
885a9ca
use alias function to pass linter
Nov 16, 2020
9dd006d
missed a check that isn't strictly necessary
Nov 16, 2020
a503df4
Update packages/gatsby-plugin-image/src/__tests__/options.json
Nov 16, 2020
c409253
Update packages/gatsby-plugin-image/src/__tests__/fixtures/default/op…
Nov 16, 2020
a031428
handle call expression syntax
Nov 17, 2020
f8ae3d3
small refactor
Nov 17, 2020
d46a97c
function with recast, use replaceWith for more stability
Nov 17, 2020
5009c4d
function with recast, use replaceWith for more stability
Nov 17, 2020
ddadd81
use templates instead
Nov 17, 2020
1e8235b
handle typescript in recast version
Nov 17, 2020
995371e
add comments to test cases
Nov 17, 2020
707c02e
put recast and babel in jscodeshift wrapper
Nov 18, 2020
07d2ebc
Add tokens so we're parsing with babel through recast as well
Nov 18, 2020
6ca096e
dont use a yaml query because tests attempt to access it
Nov 19, 2020
91a35ef
don't update components when it isn't necessary
Nov 19, 2020
a8777b8
we don't need to return and skip for this case
Nov 19, 2020
327a969
add tests
Nov 19, 2020
f18dc76
forgot to save and updated README
Nov 19, 2020
8406d74
merge master and remove unused dependencies
Nov 19, 2020
7e12148
shouldn't have saved it, oops
Nov 19, 2020
60dccef
ignore testfixtures
Nov 19, 2020
b04cab1
integration should ignore fixtures, maybe
Nov 19, 2020
693b627
windows fix, thanks ward
Nov 19, 2020
c1e4507
fix syntax to fix tests
Nov 20, 2020
a47b1d4
adding some edge cases, need a real warn
Nov 20, 2020
33d76d3
object expression case
Nov 20, 2020
563261a
fix edge cases, still need to make imageImportName reset per file
Nov 20, 2020
f7b6608
use path instead of name to ensure scope
Nov 20, 2020
026360d
small refactor, small fix
Nov 20, 2020
c344807
still run ts test
Nov 20, 2020
1d77d7e
use new localName references
Nov 30, 2020
13d3c78
add mansion test now that it works
Nov 30, 2020
dc48eda
resolve merge conflicts
Nov 30, 2020
971d893
forgot to save
Nov 30, 2020
f0d7400
cleanup
Nov 30, 2020
31b272f
fix linter issue
Nov 30, 2020
f398dd3
expressive warns
Nov 30, 2020
c937733
remove false warning
Nov 30, 2020
d8e717f
show recommendation if parser fails
Nov 30, 2020
52a5d16
readme tweak
Nov 30, 2020
bb0493b
recommend silent flag
Nov 30, 2020
7342bae
update README with src vs root directories
Nov 30, 2020
3d71681
object reference edge case and polyfill
Nov 30, 2020
a048a0d
there is only one gatsby-image import extra, so let's not use includes
Nov 30, 2020
adca5d8
Update packages/gatsby-plugin-image/src/transforms/gatsby-plugin-imag…
Dec 1, 2020
1cbc109
make jscodeshift a dev dependency
Dec 1, 2020
6d97ff3
Merge branch 'image-codemod' of https://github.com/gatsbyjs/gatsby in…
Dec 1, 2020
16a723d
Move to codemods package
Dec 1, 2020
1527b38
Add initial bin implementation
Dec 1, 2020
70f5786
update readme
Dec 1, 2020
e7dceed
handle invalid cases
Dec 1, 2020
aef5a45
ignore cache and public, use proper syntax
Dec 1, 2020
f906bcf
support styled and other references but still warn
Dec 1, 2020
c7d2ffb
remove redudant assignment
Dec 1, 2020
0c6a50b
use process.argv a bit more intelligently
Dec 1, 2020
1a9071d
fix last failing test
Dec 1, 2020
3b35f13
fix ignore logic for npx
Dec 2, 2020
95ab2e0
address comments
Dec 3, 2020
d5a2db6
extending use case
Dec 3, 2020
fc45c55
Merge remote-tracking branch 'upstream/master' into image-codemod
Dec 3, 2020
1814023
Merge remote-tracking branch 'upstream/master' into image-codemod
Dec 3, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/gatsby-plugin-image/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@
"@babel/traverse": "^7.8.6",
"babel-jsx-utils": "^1.0.1",
"babel-plugin-remove-graphql-queries": "^2.11.0-next.0",
"@babel/helper-plugin-test-runner": "^7.10.4",
"@babel/plugin-syntax-jsx": "^7.12.1",
"recast": "^0.20.4",
"chokidar": "^3.4.3",
"fs-extra": "^8.1.0",
"gatsby-core-utils": "^1.5.0-next.0",
Expand Down
3 changes: 3 additions & 0 deletions packages/gatsby-plugin-image/src/__tests__/codemod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import runner from "@babel/helper-plugin-test-runner"

runner(__dirname)
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const result = graphql(`
query {
file(relativePath: { eq: "headers/headshot.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
`)
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const result = graphql(`{
file(relativePath: {eq: "headers/headshot.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FLUID)
}
}
}
`);
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { GatsbyImage as Img } from "gatsby-plugin-image/compat"

<Img
fixed={data.file.childImageSharp.fixed}
alt="headshot"/>
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import { GatsbyImage } from "gatsby-plugin-image";
<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="headshot" />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react"
import { graphl } from "gatsby"
import Img from "gatsby-image"

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

export const query = graphql`
query {
file(relativePath: { eq: "headers/headshot.jpg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fluid {
...GatsbyImageSharpFluid_withWebp
}
}
}
banner: file(relativePath: { eq: "headers/default.jpg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fluid {
...GatsbyImageSharpFluid_withWebp_tracedSVG
...GatsbyImageSharpFluidLimitPresentationSize
}
}
}
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";
import { graphl } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="headshot" />;
export const query = graphql`{
file(relativePath: {eq: "headers/headshot.jpg"}) {
childImageSharp {
gatsbyImageData(layout: FLUID)
}
}
banner: file(relativePath: {eq: "headers/default.jpg"}) {
childImageSharp {
gatsbyImageData(placeholder: TRACED_SVG, layout: CONSTRAINED)
}
}
}
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react"
import { graphl } from "gatsby"
import Img from "gatsby-image"

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

export const query = graphql`
query {
file(relativePath: { eq: "headers/default.jpg" }) {
childImageSharp {
fixed(width: 125, height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import { graphl } 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)
}
}
}
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"sourceType": "module",
"plugins": ["gatsby-plugin-image/src/codemod.js",
"@babel/plugin-syntax-jsx"
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from "react"
import { graphl } from "gatsby"
import Image from "gatsby-image"

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


export const query = graphql`
{
allProjectsYaml(sort: { fields: [index], order: DESC }) {
nodes {
name
url
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_tracedSVG
}
}
}
technologies
}
}
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";
import { graphl } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="headshot" />;
export const query = graphql`{
allProjectsYaml(sort: {fields: [index], order: DESC}) {
nodes {
name
url
image {
childImageSharp {
gatsbyImageData(placeholder: TRACED_SVG, layout: FLUID)
}
}
technologies
}
}
}
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// import React from "react";
// import Img from "gatsby-image";
// import { useStaticQuery, graphql } from "gatsby";
// export const Hero: React.SFC = ({ children }) => {
// const data = useStaticQuery(graphql`
// {
// file(relativePath: { eq: "banner.jpg" }) {
// childImageSharp {
// fluid {
// ...GatsbyImageSharpFluid_withWebp
// }
// }
// }
// }
// `);
// return (
// <Img
// fluid={data.file.childImageSharp.fluid}
// alt="A panorama of Skara Brae, Orkney"
// style={{
// width: "100%",
// position: "absolute",
// top: 0,
// left: 0,
// zIndex: -1
// }}
// />
// );
// };
// export default Hero;
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// import React from "react";
// import Img from "gatsby-image";
// import { useStaticQuery, graphql } from "gatsby";
// export const Hero: React.SFC = ({ children }) => {
// const data = useStaticQuery(graphql`
// {
// file(relativePath: { eq: "banner.jpg" }) {
// childImageSharp {
// fluid {
// ...GatsbyImageSharpFluid_withWebp
// }
// }
// }
// }
// `);
// return (
// <Img
// fluid={data.file.childImageSharp.fluid}
// alt="A panorama of Skara Brae, Orkney"
// style={{
// width: "100%",
// position: "absolute",
// top: 0,
// left: 0,
// zIndex: -1
// }}
// />
// );
// };
// export default Hero;
3 changes: 3 additions & 0 deletions packages/gatsby-plugin-image/src/__tests__/options.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"plugins": ["gatsby-plugin-image/src/codemod.js"]
}
27 changes: 27 additions & 0 deletions packages/gatsby-plugin-image/src/__tests__/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { babelRecast } from "../codemod"

const CODE = `
import React from "react"
import { graphl } from "gatsby"
import Img from "gatsby-image"

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

describe(`recast`, () => {
it(`preserves formatting`, () => {
const received = babelRecast(CODE)

expect(received).toBe(
`
import React from "react"
import { graphl } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image";

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