feat(gatsby-transformer-sharp): Resolver API changes (#27783)

* Add static image plugin

* Parse static image files

* Fix package.json

* Better static analysis

* Use jsx utils package

* Fix typings

* Typecheck fix

* Fix repo fields

* Helpful warning

* Re-enable duotone

* Update readme

* Improve typings

* wip fixed image fields for tracedSVG and webP

* handle fluid images as well

* Use require rather than JSON import

* Watch files for changes, and use relative paths

* Improve types

* Add type

* Update yarn.lock

* Add lots of comments and remove unused stuff

* Create and watch our own nodes

* Update readme

* Update deps

* Only watch in develop

* Rename to gatsby-plugin-image

* Rearrange, ready for merger

* Import @wardpeet 's gatsby-image-netxtgen

* Update typings and further merge packages

* Build babel plugin

* More merging

* Add server/browser static image variants

* include webpack changes

* change error message to use gatsby-plugin-image

* Fix compat compilation

* Fix SSR

* Merge readmes

* Build browser bundle

* Export correctly from browser entry point

* Remove hook import

* Apply suggestions from code review

Co-authored-by: LB <[email protected]>

* Changes from review

* add path prefix, static image do e2e test

* Add prepare script

* Apply README suggestions from code review

Co-authored-by: LB <[email protected]>

* Fix image component in e2e test

* Better error messages

* Prefer svg over base64. Warn for unsupported art direction

* Fix type

* Use "layout" instead of fixed/fluid

* add static images to production runtime site

* add path prefix tests

* Reorg types. Change private prop name

* initial gatsby static image tests

* add test suite to circle ci

* add test suite to circle ci

* add test suite to circle ci

* remove unused imports, use valid fluid setting

* Use new fluid props syntax

* Better var name

* update tests

* remove tests that no longer match the expected DOM

* More compat-fixes

* Change classname to match old version

* Compat improvements

* Update tests to match new classname

* v0.0.1

* Add readme caveat

* Update version in packages

* Remove forcewrapper

* wip

* have static image use gatsbyImageProps function

* Upgrade sharp

* Fix static image type

* First steps to update API

* Add descriptions

* TypeScript fixes

* Compile ts

* Add @gillkyle's calculateImageSizes util funciton

* remove unused file

* unbump sharp until sharp PR is merged

* comment out import

* update snapshots

* change JSX to take image prop

* static image uses new image props

* Rename all the things

* Turns out it wasn't all of them

* Update schema

* fix intrinsic issue 1px problem, still doesn't seem to reach the correct max size

* Fix layout

* Update readme

* Fix dep

* Shouldn;t be in this

* Fix sharp function name

* Version

* What is this snapshot out of date?

* Add a helper funciton

* Make backgroundColor work

* update layout for images

* no longer using base64 so remove that test

* placeholder not getting passed from static, so this is still busted

* Fix passing of props

* Add TODO comments

* Export batch queue function

* Handle the default sizes elsewhere, as it depends on layout

* feat(gatsby-plugin-sharp): create image sizes helper (#27554)

* wip tests and tweaks to utility

* more wip tests

* remove file reading from helper

* fixing fluid calculations and adding more tests

* tweak a little more

* remove extraneous export

* check that user specified dimensions are positive

* remove unnecessary code from review suggestions

* add warning, simplify case of no fluid dimensions

* add files to warnings and clean up logic

* Split into two functions and remove 3x default

* Rename warn function and use reporter

Co-authored-by: Matt Kane <[email protected]>

* Use passed-in reporter

* Use shared function to handle fit calculation

* Return presentationW/H and aspect ratio from sizes function

* Round sizes

* Use new resizing functions

* default layout wasn't passed to createImageSizes

* add fixed width default and round calculated height

* reversed logic for aspect ratio calculations

* Correct description for outputPixelDensities resolver

* Remove log

* Handle null image in SSR

* Version fix

* fix(gatsby-plugin-utils): skip libcheck during typegen

* Remove unused func

* Remove dominantColor from fixed and fluid

* sizing code for KG to drive refactor

* remove isSmaller

* fix tests

* Fix sizes and srcset generation

* Add object-fit

* rename placeholder function for consistency

* Update readme

* fix path prefix images

* fix sizing when larger image dimensions are requested, fix warning as well

* rename file to match constrained naming

* Changes from review

* Add alpha warning

* Change from review

* fix placeholder opacity

* fix placeholder bug

* only change placeholder size for background color div

* tests: Add visual regression tests (#27619)

* tests: Add visual regression tests

* Add config

* Wait for images to load

* Do multiple window sizes

* Adjust settings for comparisons

* Fix wrapper

* Add 1024 window

* Save reports

* Update fixed image too large snapshot

* Disable video

* Update readme

* Update element id

* Force 1x pixel density

* Update readme

* Fix e2e test

* dont flash placeholder image when removing opacity

* Fix dependency

* Continue moving options into options objects

* Update API

* Default to blurred

* Fix test

* Fix default

* Change from review

* Updates to fixed sizing

* Update snapshots

* fix readme, clean up unused variable

* fix lint

* weird readme lint issue

Co-authored-by: Kyle Gill <[email protected]>
Co-authored-by: Laurie <[email protected]>
Co-authored-by: gatsbybot <[email protected]>

Author: 4 people

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image -- renders correctly on 1027x768.snap.png

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(maxWidth: 1024, layout: CONSTRAINED) {
-            imageData
-          }
+          gatsbyImageData(maxWidth: 1024, layout: CONSTRAINED)
         }
       }
     }

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image -- renders correctly on ipad-2.snap.png

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "landsend.jpg" }) {
         childImageSharp {
-          gatsbyImage(width: 500, height: 500, layout: FIXED) {
-            imageData
-          }
+          gatsbyImageData(width: 500, height: 500, layout: FIXED)
         }
       }
     }

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image -- renders correctly on iphone-6.snap.png

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(width: 240, height: 100, layout: FIXED) {
-            imageData
-          }
+          gatsbyImageData(width: 240, height: 100, layout: FIXED)
         }
       }
     }

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image smaller than requested size -- renders correctly on 1027x768.snap.png

@@ -9,9 +9,7 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImage(maxWidth: 1024, layout: FLUID) {
-            imageData
-          }
+          gatsbyImageData(maxWidth: 1024, layout: FLUID)
         }
       }
     }

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image smaller than requested size -- renders correctly on ipad-2.snap.png

@@ -13,8 +13,6 @@ const Page = () => {
           layout="constrained"
           alt="cornwall"
           maxWidth={1024}
-          placeholder="blurred"
-          webP
         />
       </TestWrapper>
     </Layout>

e2e-tests/visual-regression/cypress/snapshots/image.js/GatsbyImage -- fixed image smaller than requested size -- renders correctly on iphone-6.snap.png

@@ -284,9 +284,7 @@ export const query = graphql`
       childImageSharp {
         # Specify the image processing specifications right in the query.
         # Makes it trivial to update as your page's design changes.
-        gatsbyImage(layout: FIXED, width: 125, height: 125) {
-          imageData
-        }
+        gatsbyImageData(layout: FIXED, width: 125, height: 125)
       }
     }
   }

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- fixed image -- renders correctly on 1027x768.snap.png

@@ -9,29 +9,17 @@ export const SHARP_ATTRIBUTES = new Set([
   `maxWidth`,
   `maxHeight`,
   `quality`,
-  `jpegQuality`,
-  `pngQuality`,
-  `webpQuality`,
-  `grayscale`,
-  `toFormat`,
-  `cropFocus`,
-  `pngCompressionSpeed`,
-  `rotate`,
-  `duotone`,
+  `jpegOptions`,
+  `pngOptions`,
+  `webpOptions`,
+  `blurredOptions`,
+  `transformOptions`,
   `width`,
   `height`,
   `placeholder`,
   `tracedSVGOptions`,
-  `webP`,
-  `outputPixelDensities`,
   `sizes`,
-  `fit`,
   `background`,
-  `base64Width`,
-  `jpegProgressive`,
-  `toFormatBase64`,
-  `trim`,
-  `srcSetBreakpoints`,
 ])
 
 export function evaluateImageAttributes(

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- fixed image -- renders correctly on ipad-2.snap.png

@@ -32,14 +32,12 @@ export function hasImageLoaded(cacheKey: string): boolean {
 
 export type FileNode = Node & {
   childImageSharp?: Node & {
-    gatsbyImage?: Node & {
-      imageData: ISharpGatsbyImageData
-    }
+    gatsbyImageData?: ISharpGatsbyImageData
   }
 }
 
 export const getImage = (file: FileNode): ISharpGatsbyImageData | undefined =>
-  file?.childImageSharp?.gatsbyImage?.imageData
+  file?.childImageSharp?.gatsbyImageData
 
 export function getWrapperProps(
   width: number,

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- fixed image -- renders correctly on iphone-6.snap.png

@@ -30,7 +30,6 @@ export interface ICommonImageProps {
 export interface IFluidImageProps extends ICommonImageProps {
   maxWidth?: number
   maxHeight?: number
-  srcSetBreakpoints?: Array<number>
   fit?: number
   background?: number
 }

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- fixed image smaller than requested size -- renders correctly on 1027x768.snap.png

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
+    "@types/sharp": "^0.26.0",
     "babel-preset-gatsby-package": "^0.6.0-next.0",
     "cross-env": "^7.0.2",
     "gatsby-plugin-image": "^0.1.0-next.0"

e2e-tests/visual-regression/cypress/snapshots/image.js/StaticImage -- fixed image smaller than requested size -- renders correctly on ipad-2.snap.png

@@ -292,28 +292,52 @@ describe(`calculateImageSizes (fluid & constrained)`, () => {
     const testsCases = [
       { args: { maxWidth: 20, maxHeight: 20 }, result: [20, 20] },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.fill },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [20, 20],
       },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.inside },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [20, 10],
       },
       {
-        args: { maxWidth: 20, maxHeight: 20, fit: sharp.fit.outside },
+        args: {
+          maxWidth: 20,
+          maxHeight: 20,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [41, 20],
       },
       { args: { maxWidth: 200, maxHeight: 200 }, result: [200, 200] },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.fill },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [200, 200],
       },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.inside },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [200, 97],
       },
       {
-        args: { maxWidth: 200, maxHeight: 200, fit: sharp.fit.outside },
+        args: {
+          maxWidth: 200,
+          maxHeight: 200,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [413, 200],
       },
     ]
@@ -341,28 +365,52 @@ describe(`calculateImageSizes (fluid & constrained)`, () => {
     const testsCases = [
       { args: { width: 20, height: 20 }, result: [20, 20] },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.fill },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [20, 20],
       },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.inside },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [20, 10],
       },
       {
-        args: { width: 20, height: 20, fit: sharp.fit.outside },
+        args: {
+          width: 20,
+          height: 20,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [41, 20],
       },
       { args: { width: 200, height: 200 }, result: [200, 200] },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.fill },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.fill },
+        },
         result: [200, 200],
       },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.inside },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.inside },
+        },
         result: [200, 97],
       },
       {
-        args: { width: 200, height: 200, fit: sharp.fit.outside },
+        args: {
+          width: 200,
+          height: 200,
+          transformOptions: { fit: sharp.fit.outside },
+        },
         result: [413, 200],
       },
     ]