From 196f742bcd8654fb8c32909c71b7211a443aeeca Mon Sep 17 00:00:00 2001 From: Laurie Date: Mon, 11 Jan 2021 13:43:01 -0500 Subject: [PATCH 1/9] initial changes --- .../integration/{fluid.js => fullWidth.js} | 4 ++-- .../src/pages/{fluid.js => fullWidth.js} | 8 ++++---- .../cypress/integration/image.js | 4 ++-- .../visual-regression/src/pages/index.js | 20 +++++++++++++------ .../static-images/{fluid.js => fullWidth.js} | 2 +- packages/gatsby-plugin-image/README.md | 12 +++++------ .../__tests__/gatsby-image.browser.tsx | 2 +- .../__tests__/gatsby-image.server.tsx | 8 ++++---- .../src/components/hooks.ts | 2 +- .../src/components/layout-wrapper.tsx | 4 ++-- .../src/components/static-image.server.tsx | 4 ++-- .../gatsby-plugin-image/src/image-utils.ts | 14 ++++++------- .../gatsby-plugin-image/src/resolver-utils.ts | 4 ++-- packages/gatsby-plugin-image/src/utils.ts | 6 +++--- .../gatsby-plugin-sharp/src/image-data.ts | 6 +++--- packages/gatsby-plugin-sharp/src/utils.js | 10 +++++----- .../src/customize-schema.js | 2 +- .../gatsby-transformer-sharp/src/types.ts | 2 +- 18 files changed, 61 insertions(+), 53 deletions(-) rename e2e-tests/gatsby-static-image/cypress/integration/{fluid.js => fullWidth.js} (90%) rename e2e-tests/gatsby-static-image/src/pages/{fluid.js => fullWidth.js} (82%) rename e2e-tests/visual-regression/src/pages/static-images/{fluid.js => fullWidth.js} (94%) diff --git a/e2e-tests/gatsby-static-image/cypress/integration/fluid.js b/e2e-tests/gatsby-static-image/cypress/integration/fullWidth.js similarity index 90% rename from e2e-tests/gatsby-static-image/cypress/integration/fluid.js rename to e2e-tests/gatsby-static-image/cypress/integration/fullWidth.js index 892f677b5ba75..0b4caec33be2f 100644 --- a/e2e-tests/gatsby-static-image/cypress/integration/fluid.js +++ b/e2e-tests/gatsby-static-image/cypress/integration/fullWidth.js @@ -1,8 +1,8 @@ const fluidTestId = `image-fluid` -describe(`fluid`, () => { +describe(`fullWidth`, () => { beforeEach(() => { - cy.visit(`/fluid`).waitForRouteChange() + cy.visit(`/fullWidth`).waitForRouteChange() }) it(`works on png files`, () => { diff --git a/e2e-tests/gatsby-static-image/src/pages/fluid.js b/e2e-tests/gatsby-static-image/src/pages/fullWidth.js similarity index 82% rename from e2e-tests/gatsby-static-image/src/pages/fluid.js rename to e2e-tests/gatsby-static-image/src/pages/fullWidth.js index 4aa8111020a95..ff2d230524471 100644 --- a/e2e-tests/gatsby-static-image/src/pages/fluid.js +++ b/e2e-tests/gatsby-static-image/src/pages/fullWidth.js @@ -8,7 +8,7 @@ const FluidPage = () => (
@@ -16,19 +16,19 @@ const FluidPage = () => (
- +
) diff --git a/e2e-tests/visual-regression/cypress/integration/image.js b/e2e-tests/visual-regression/cypress/integration/image.js index 5c29ae4f32377..1a0b79b73ee00 100644 --- a/e2e-tests/visual-regression/cypress/integration/image.js +++ b/e2e-tests/visual-regression/cypress/integration/image.js @@ -1,14 +1,14 @@ const testCases = [ ["fixed image", "/images/fixed"], ["fixed image smaller than requested size", "/images/fixed-too-big"], - ["fluid image", "/images/fluid"], + ["fullWidth image", "/images/fullWidth"], ["constrained image", "/images/constrained"], ["avif format", "/images/avif"], ] const staticImageTestCases = [ ["fixed image", "/static-images/fixed"], ["fixed image smaller than requested size", "/static-images/fixed-too-big"], - ["fluid image", "/static-images/fluid"], + ["fullWidth image", "/static-images/fullWidth"], ["constrained image", "/static-images/constrained"], ["avif format", "/static-images/avif"], ] diff --git a/e2e-tests/visual-regression/src/pages/index.js b/e2e-tests/visual-regression/src/pages/index.js index e7c2bd972d7d4..0f0b2dd9cb41c 100644 --- a/e2e-tests/visual-regression/src/pages/index.js +++ b/e2e-tests/visual-regression/src/pages/index.js @@ -6,12 +6,20 @@ import Layout from "../components/layout" const IndexPage = () => (

Gatsby Image integration test

-
    -
  • /images/fixed
    • -
  • /images/fixed-too-big
    • -
  • /images/fluid
    • -
  • /images/constrained
    • -
+
    +
  • + /images/fixed +
    • +
  • + /images/fixed-too-big +
    • +
  • + /images/fullWidth +
    • +
  • + /images/constrained +
    • +
) diff --git a/e2e-tests/visual-regression/src/pages/static-images/fluid.js b/e2e-tests/visual-regression/src/pages/static-images/fullWidth.js similarity index 94% rename from e2e-tests/visual-regression/src/pages/static-images/fluid.js rename to e2e-tests/visual-regression/src/pages/static-images/fullWidth.js index 0d0229b44b0ae..ac5d1a4c80e4c 100644 --- a/e2e-tests/visual-regression/src/pages/static-images/fluid.js +++ b/e2e-tests/visual-regression/src/pages/static-images/fullWidth.js @@ -11,7 +11,7 @@ const Page = () => { diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md index 370502428f710..d02ee0ec22967 100644 --- a/packages/gatsby-plugin-image/README.md +++ b/packages/gatsby-plugin-image/README.md @@ -57,7 +57,7 @@ export const Dino = () => ( ` component. The API is like this: ```graphql coverImage: file(relativePath: { eq: "plant.jpg" }) { childImageSharp { - gatsbyImageData(maxWidth: 720, layout: FLUID, placeholder: TRACED_SVG) + gatsbyImageData(maxWidth: 720, layout: CONSTRAINED, placeholder: TRACED_SVG) } } ``` @@ -331,9 +331,9 @@ These arguments can be passed to the `gatsbyImageData()` resolver: - **layout**: The layout for the image. - `CONSTRAINED`: (default) Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. - `FIXED`: A static image size, that does not resize according to the screen width - - `FLUID`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. + - `FULL_WIDTH`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. - **outputPixelDensities**: A list of image pixel densities to generate, for high-resolution (retina) screens. It will never generate images larger than the source, and will always include a 1x image. - Default is `[ 0.25, 0.5, 1, 2 ]`, for fluid/constrained images, and `[ 1, 2 ]` for fixed. In this case, an image with a fluid layout and maxWidth = 400 would generate images at 100, 200, 400 and 800px wide + Default is `[ 0.25, 0.5, 1, 2 ]`, for fullWidth/constrained images, and `[ 1, 2 ]` for fixed. In this case, an image with a fullWidth layout and maxWidth = 400 would generate images at 100, 200, 400 and 800px wide - **sizes**: The "[sizes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" attribute, passed to the `` tag. This describes the display size of the image. This does not affect the generated images, but is used by the browser to decide which images to download. You can leave this blank for fixed images, or if the responsive image container will be the full width of the screen. In these cases we will generate an appropriate value. If, however, you are generating responsive images that are not the full width of the screen, you should provide a sizes property for best performance. You can alternatively pass this value to the component. - **formats**: an array of file formats to generate. The default is `[AUTO, WEBP]`, which means it will generate images in the same format as the source image, as well as in the next-generation [WebP](https://developers.google.com/speed/webp) format. We strongly recommend you do not change this option, as doing so will affect performance scores. - **quality**: The default quality. This is overridden by any format-specific options diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx index c4243d431c404..76cc0785cafb7 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx @@ -26,7 +26,7 @@ describe(`GatsbyImage browser`, () => { image = { width: 100, height: 100, - layout: `fluid`, + layout: `fullWidth`, images: { fallback: { src: `some-src-fallback.jpg`, sizes: `192x192` } }, placeholder: { sources: [] }, diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx index 94ad14151f181..845941430eefa 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx @@ -41,8 +41,8 @@ describe(`GatsbyImage server`, () => { }) describe(`style verifications`, () => { - it(`has a valid style attributes for fluid layout`, () => { - const layout = `fluid` + it(`has a valid style attributes for fullWidth layout`, () => { + const layout = `fullWidth` const image: IGatsbyImageData = { width: 100, @@ -350,11 +350,11 @@ icon.svg`, }) describe(`placeholder verifications`, () => { - it(`has a placeholder in a div with valid styles for fluid layout`, () => { + it(`has a placeholder in a div with valid styles for fullWidth layout`, () => { const image: IGatsbyImageData = { width: 100, height: 100, - layout: `fluid`, + layout: `fullWidth`, images: {}, placeholder: { sources: [] }, backgroundColor: `red`, diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 57d90730e4099..6648d48825d97 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -176,7 +176,7 @@ export function getPlaceholderProps( wrapperStyle.left = 0 wrapperStyle.bottom = 0 wrapperStyle.right = 0 - } else if (layout === `fluid`) { + } else if (layout === `fullWidth`) { wrapperStyle.position = `absolute` wrapperStyle.top = 0 wrapperStyle.left = 0 diff --git a/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx b/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx index 2e66946a59430..09ae80690c389 100644 --- a/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx +++ b/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx @@ -45,7 +45,7 @@ export function getSizer( height: number ): string { let sizer: string | null = null - if (layout === `fluid`) { + if (layout === `fullWidth`) { sizer = `` @@ -63,7 +63,7 @@ export const LayoutWrapper: FunctionComponent = function La children, }) { let sizer: JSX.Element | null = null - if (layout === `fluid`) { + if (layout === `fullWidth`) { sizer = (
) diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx index 555018f97f61d..3a5e014d48ae1 100644 --- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx +++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx @@ -110,7 +110,7 @@ const checkDimensionProps: PropTypes.Validator = ( return PropTypes.number(props, propName, ...rest) } -const validLayouts = new Set([`fixed`, `fluid`, `constrained`]) +const validLayouts = new Set([`fixed`, `fullWidth`, `constrained`]) export const propTypes = { src: PropTypes.string.isRequired, @@ -130,7 +130,7 @@ export const propTypes = { } return new Error( - `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "fixed". Valid values are "fixed", "fluid" or "constrained"` + `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "fixed". Valid values are "fixed", "fullWidth" or "constrained"` ) }, } diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts index 5f99eada9c298..8dbb22c7523b6 100644 --- a/packages/gatsby-plugin-image/src/image-utils.ts +++ b/packages/gatsby-plugin-image/src/image-utils.ts @@ -8,7 +8,7 @@ const DEFAULT_FIXED_WIDTH = 400 export type Fit = "cover" | "fill" | "inside" | "outside" | "contain" -export type Layout = "fixed" | "fluid" | "constrained" +export type Layout = "fixed" | "fullWidth" | "constrained" export type ImageFormat = "jpg" | "png" | "webp" | "avif" | "auto" | "" /** @@ -110,7 +110,7 @@ export const getSizes = (width: number, layout: Layout): string | undefined => { return `${width}px` // Image is always the width of the screen - case `fluid`: + case `fullWidth`: return `100vw` default: @@ -256,7 +256,7 @@ export function generateImageData( imageProps.height = imageSizes.presentationHeight break - case `fluid`: + case `fullWidth`: imageProps.width = 1 imageProps.height = 1 / imageSizes.aspectRatio break @@ -299,11 +299,11 @@ export function calculateImageSizes(args: IImageSizeArgs): IImageSizes { if (layout === `fixed`) { return fixedImageSizes(args) - } else if (layout === `fluid` || layout === `constrained`) { - return fluidImageSizes(args) + } else if (layout === `fullWidth` || layout === `constrained`) { + return responsiveImageSizes(args) } else { reporter.warn( - `No valid layout was provided for the image at ${filename}. Valid image layouts are fixed, fluid, and constrained.` + `No valid layout was provided for the image at ${filename}. Valid image layouts are fixed, fullWidth, and constrained.` ) return { sizes: [imgDimensions.width], @@ -391,7 +391,7 @@ export function fixedImageSizes({ } } -export function fluidImageSizes({ +export function responsiveImageSizes({ filename, sourceMetadata: imgDimensions, width, diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts index 21b3c7de68670..5a685b938a1f5 100644 --- a/packages/gatsby-plugin-image/src/resolver-utils.ts +++ b/packages/gatsby-plugin-image/src/resolver-utils.ts @@ -28,7 +28,7 @@ export const ImageLayoutType = new GraphQLEnumType({ name: `GatsbyImageLayout`, values: { FIXED: { value: `fixed` }, - FLUID: { value: `fluid` }, + FULL_WIDTH: { value: `fullWidth` }, CONSTRAINED: { value: `constrained` }, }, }) @@ -56,7 +56,7 @@ export function getGatsbyImageFieldConfig( description: stripIndent` The layout for the image. FIXED: A static image sized, that does not resize according to the screen width - FLUID: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. + FULL_WIDTH: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. `, }, diff --git a/packages/gatsby-plugin-image/src/utils.ts b/packages/gatsby-plugin-image/src/utils.ts index dcfb51b2ed42e..d83fbeb8b73a2 100644 --- a/packages/gatsby-plugin-image/src/utils.ts +++ b/packages/gatsby-plugin-image/src/utils.ts @@ -26,7 +26,7 @@ export interface ICommonImageProps { rotate?: number } -export interface IFluidImageProps extends ICommonImageProps { +export interface IFullWidthImageProps extends ICommonImageProps { maxWidth?: number maxHeight?: number aspectRatio?: number @@ -52,7 +52,7 @@ export type ImageComponentProps = Omit< } export type StaticImageProps = IImageOptions & - IFluidImageProps & + IFullWidthImageProps & IFixedImageProps & ImageComponentProps & { src: string } @@ -60,7 +60,7 @@ export type ImageProps = IImageOptions & IFluidImageProps & IFixedImageProps & { src: string } export type SharpProps = Omit -export type AnyImageProps = (IFluidImageProps | IFixedImageProps) & +export type AnyImageProps = (IFullWidthImageProps | IFixedImageProps) & ICommonImageProps export interface IImageOptions { diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index fa35c489af28f..803fb12526945 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -11,7 +11,7 @@ const DEFAULT_BLURRED_IMAGE_WIDTH = 20 type ImageFormat = "jpg" | "png" | "webp" | "avif" | "" | "auto" export interface ISharpGatsbyImageArgs { - layout?: "fixed" | "fluid" | "constrained" + layout?: "fixed" | "fullWidth" | "constrained" formats?: Array placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none" tracedSVGOptions?: Record @@ -133,7 +133,7 @@ export async function generateImageData({ ) { if (layout === `constrained`) { args.maxWidth = metadata.width - } else if (layout === `fluid`) { + } else if (layout === `fullWidth`) { args.maxWidth = Math.round(metadata.width / 2) } } @@ -364,7 +364,7 @@ export async function generateImageData({ imageProps.height = imageSizes.presentationHeight break - case `fluid`: + case `fullWidth`: imageProps.width = 1 imageProps.height = 1 / primaryImage.aspectRatio break diff --git a/packages/gatsby-plugin-sharp/src/utils.js b/packages/gatsby-plugin-sharp/src/utils.js index d4ade83da8108..436ddd667048a 100644 --- a/packages/gatsby-plugin-sharp/src/utils.js +++ b/packages/gatsby-plugin-sharp/src/utils.js @@ -128,11 +128,11 @@ export function calculateImageSizes(args) { if (layout === `fixed`) { return fixedImageSizes(args) - } else if (layout === `fluid` || layout === `constrained`) { - return fluidImageSizes(args) + } else if (layout === `fullWidth` || layout === `constrained`) { + return responsiveImageSizes(args) } else { reporter.warn( - `No valid layout was provided for the image at ${file.absolutePath}. Valid image layouts are fixed, fluid, and constrained.` + `No valid layout was provided for the image at ${file.absolutePath}. Valid image layouts are fixed, fullWidth, and constrained.` ) return [] } @@ -223,7 +223,7 @@ export function fixedImageSizes({ } } -export function fluidImageSizes({ +export function responsiveImageSizes({ file, imgDimensions, width, @@ -328,7 +328,7 @@ export const getSizes = (width, layout) => { return `${width}px` // Image is always the width of the screen - case `fluid`: + case `fullWidth`: return `100vw` default: diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js index fc6903daed5bd..02071a8916cf7 100644 --- a/packages/gatsby-transformer-sharp/src/customize-schema.js +++ b/packages/gatsby-transformer-sharp/src/customize-schema.js @@ -403,7 +403,7 @@ const imageNodeType = ({ description: stripIndent` The layout for the image. FIXED: A static image sized, that does not resize according to the screen width - FLUID: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. + FULL_WIDTH: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. CONSTRAINED: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. `, }, diff --git a/packages/gatsby-transformer-sharp/src/types.ts b/packages/gatsby-transformer-sharp/src/types.ts index 7cfb0f37f450d..22174df504a40 100644 --- a/packages/gatsby-transformer-sharp/src/types.ts +++ b/packages/gatsby-transformer-sharp/src/types.ts @@ -30,7 +30,7 @@ export const ImageLayoutType = new GraphQLEnumType({ name: `ImageLayout`, values: { FIXED: { value: `fixed` }, - FLUID: { value: `fluid` }, + FULL_WIDTH: { value: `fullWidth` }, CONSTRAINED: { value: `constrained` }, }, }) From b095e8c3632daa8b0b3b6580cc24fa14c64df745 Mon Sep 17 00:00:00 2001 From: LB Date: Tue, 12 Jan 2021 08:29:32 -0500 Subject: [PATCH 2/9] Update packages/gatsby-plugin-image/README.md Co-authored-by: Matt Kane --- packages/gatsby-plugin-image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md index d02ee0ec22967..0b0d101fa959d 100644 --- a/packages/gatsby-plugin-image/README.md +++ b/packages/gatsby-plugin-image/README.md @@ -288,7 +288,7 @@ In Gatsby's GraphQL implementation, you specify the type of image with the `layo # GraphQL resolver -We have added a new `gatsbyImageData` resolver to the `ImageSharp` node. Unlike the existing `fixed` and `fullWidth` resolvers, this returns a +We have added a new `gatsbyImageData` resolver to the `ImageSharp` node. Unlike the existing `fixed` and `fluid` resolvers, this returns a JSON type, meaning you don't specify the individual fields, but are instead given the whole object. This is because the object is then passed in to the `` component. The API is like this: ```graphql From 2e4deec7ee55e6393a12d324acfe6073d5e272be Mon Sep 17 00:00:00 2001 From: Laurie Date: Tue, 12 Jan 2021 08:58:35 -0500 Subject: [PATCH 3/9] remove compat --- .../gatsby-plugin-image/compat.browser.js | 1 - .../compat.browser.modern.js | 1 - .../compat.browser.module.js | 1 - packages/gatsby-plugin-image/compat.js | 1 - packages/gatsby-plugin-image/package.json | 12 -- .../src/components/compat.browser.tsx | 152 ------------------ .../src/components/compat.tsx | 7 - 7 files changed, 175 deletions(-) delete mode 100644 packages/gatsby-plugin-image/compat.browser.js delete mode 100644 packages/gatsby-plugin-image/compat.browser.modern.js delete mode 100644 packages/gatsby-plugin-image/compat.browser.module.js delete mode 100644 packages/gatsby-plugin-image/compat.js delete mode 100644 packages/gatsby-plugin-image/src/components/compat.browser.tsx delete mode 100644 packages/gatsby-plugin-image/src/components/compat.tsx diff --git a/packages/gatsby-plugin-image/compat.browser.js b/packages/gatsby-plugin-image/compat.browser.js deleted file mode 100644 index f8bfce3e48254..0000000000000 --- a/packages/gatsby-plugin-image/compat.browser.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./dist/gatsby-image.compat.browser" diff --git a/packages/gatsby-plugin-image/compat.browser.modern.js b/packages/gatsby-plugin-image/compat.browser.modern.js deleted file mode 100644 index 8fb5f6ffbeb7e..0000000000000 --- a/packages/gatsby-plugin-image/compat.browser.modern.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./dist/gatsby-image.compat.browser.modern" diff --git a/packages/gatsby-plugin-image/compat.browser.module.js b/packages/gatsby-plugin-image/compat.browser.module.js deleted file mode 100644 index f3262fd5f0a30..0000000000000 --- a/packages/gatsby-plugin-image/compat.browser.module.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./dist/gatsby-image.compat.browser.module" diff --git a/packages/gatsby-plugin-image/compat.js b/packages/gatsby-plugin-image/compat.js deleted file mode 100644 index bba870070f87b..0000000000000 --- a/packages/gatsby-plugin-image/compat.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./dist/gatsby-image.compat" diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json index 9dfbbbb24a7cc..cad9c4367c74d 100644 --- a/packages/gatsby-plugin-image/package.json +++ b/packages/gatsby-plugin-image/package.json @@ -7,16 +7,12 @@ "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --no-compress --external=common-tags,react --no-sourcemap", "build:server": "microbundle -f cjs,es --jsx React.createElement --define SERVER=true", "build:browser": "microbundle -i src/index.browser.ts -f cjs,modern,es --jsx React.createElement -o dist/gatsby-image.browser --define SERVER=false", - "build:server-compat": "microbundle -i src/components/compat.tsx -f cjs,es --jsx React.createElement -o dist/gatsby-image.compat --define SERVER=true", - "build:browser-compat": "microbundle -i src/components/compat.browser.tsx -f cjs,modern,es --jsx React.createElement -o dist/gatsby-image.compat.browser --define SERVER=false", "prepare": "yarn build", "watch": "run-p watch:*", "watch:gatsby-node": "yarn build:gatsby-node --watch", "watch:gatsby-ssr": "yarn build:gatsby-ssr watch", "watch:server": "yarn build:server --no-compress watch", "watch:browser": "yarn build:browser --no-compress watch", - "watch:server-compat": "yarn build:server-compat --no-compress watch", - "watch:browser-compat": "yarn build:browser-compat --no-compress watch", "test": "jest", "test:watch": "jest --watch", "clean": "del-cli dist/*" @@ -30,20 +26,12 @@ "module": "dist/gatsby-image.module.js", "esmodule": "dist/gatsby-image.modern.js", "browser": { - "./compat.js": "./compat.browser.module.js", - "./compat.module.js": "./compat.browser.module.js", - "./compat.modern.js": "./compat.browser.modern.js", "./dist/gatsby-image.js": "./dist/gatsby-image.browser.js", "./dist/gatsby-image.module.js": "./dist/gatsby-image.browser.module.js", "./dist/gatsby-image.modern.js": "./dist/gatsby-image.browser.modern.js" }, "files": [ "dist/*", - "compat.js", - "compat.module.js", - "compat.browser.js", - "compat.browser.module.js", - "compat.browser.modern.js", "gatsby-node.js", "gatsby-ssr.js" ], diff --git a/packages/gatsby-plugin-image/src/components/compat.browser.tsx b/packages/gatsby-plugin-image/src/components/compat.browser.tsx deleted file mode 100644 index ebc0bd6f532ae..0000000000000 --- a/packages/gatsby-plugin-image/src/components/compat.browser.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React, { FunctionComponent, ComponentType, ElementType } from "react" -import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser" -import { GatsbyImage as GatsbyImageOriginal } from "./gatsby-image.browser" - -export interface ICompatProps { - backgroundColor?: string | true - critical?: boolean - Tag?: ElementType - fixed?: { - base64?: string - tracedSVG?: string - width: number - height: number - src: string - srcSet: string - srcWebp?: string - srcSetWebp?: string - } - fluid?: { - base64?: string - tracedSVG?: string - aspectRatio: number - src: string - srcSet: string - srcWebp?: string - srcSetWebp?: string - maxWidth?: number - maxHeight?: number - sizes?: string - } -} - -function warnForArtDirection(): void { - if (process.env.NODE_ENV === `development`) { - console.warn( - `gatsby-plugin-image/compat does not support passing arrays to "fixed" or "fluid"` - ) - } -} - -export function _createCompatLayer( - Component: ComponentType -): FunctionComponent { - const GatsbyImageCompat: FunctionComponent = function GatsbyImageCompat({ - fixed, - fluid, - backgroundColor, - critical, - Tag, - ...props - }) { - const rewiredProps: Partial = { - alt: ``, - as: Tag, - image: undefined, - ...props, - } - - if (backgroundColor) { - rewiredProps.style = rewiredProps.style || {} - rewiredProps.style.backgroundColor = - backgroundColor === true ? `light-gray` : backgroundColor - } - - if (critical) { - rewiredProps.loading = `eager` - } - - if (fixed) { - if (Array.isArray(fixed)) { - warnForArtDirection() - fixed = fixed[0] as Exclude - } - - const image: IGatsbyImageData = { - placeholder: undefined, - layout: `fixed`, - width: fixed.width, - height: fixed.height, - images: { - fallback: { - src: fixed.src, - srcSet: fixed.srcSet, - }, - sources: [], - }, - } - - const placeholder = fixed.tracedSVG || fixed.base64 - - if (placeholder) { - image.placeholder = { - fallback: placeholder, - } - } - - if (fixed.srcSetWebp) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - image.images.sources!.push({ - srcSet: fixed.srcSetWebp, - type: `image/webp`, - }) - } - rewiredProps.image = image - } else if (fluid) { - if (Array.isArray(fluid)) { - warnForArtDirection() - fluid = fluid[0] as Exclude - } - - const image: IGatsbyImageData = { - width: 1, - height: fluid.aspectRatio, - layout: `fluid`, - images: { - fallback: { - src: fluid.src, - srcSet: fluid.srcSet, - sizes: fluid.sizes, - }, - sources: [], - }, - } - const placeholder = fluid.tracedSVG || fluid.base64 - - if (placeholder) { - image.placeholder = { - fallback: placeholder, - } - } - - if (fluid.srcSetWebp) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - image.images!.sources!.push({ - srcSet: fluid.srcSetWebp, - type: `image/webp`, - sizes: fluid.sizes, - }) - } - - rewiredProps.image = image - } - - return - } - - return GatsbyImageCompat -} - -export const GatsbyImage: FunctionComponent = _createCompatLayer( - GatsbyImageOriginal -) diff --git a/packages/gatsby-plugin-image/src/components/compat.tsx b/packages/gatsby-plugin-image/src/components/compat.tsx deleted file mode 100644 index c8f62dfa0e99b..0000000000000 --- a/packages/gatsby-plugin-image/src/components/compat.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { FunctionComponent } from "react" -import { GatsbyImage as GatsbyImageOriginal } from "./gatsby-image.server" -import { ICompatProps, _createCompatLayer } from "./compat.browser" - -export const GatsbyImage: FunctionComponent = _createCompatLayer( - GatsbyImageOriginal -) From 68ac04bf8110c0aaad11276674eb0ab97e60222e Mon Sep 17 00:00:00 2001 From: Laurie Date: Tue, 12 Jan 2021 09:13:30 -0500 Subject: [PATCH 4/9] update types --- .../src/components/static-image.server.tsx | 4 ++-- packages/gatsby-plugin-image/src/image-utils.ts | 2 +- packages/gatsby-plugin-image/src/resolver-utils.ts | 2 +- packages/gatsby-plugin-sharp/src/image-data.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx index 9cbf8bc38c1a2..6f16d23f8cff8 100644 --- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx +++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx @@ -68,12 +68,12 @@ const checkDimensionProps: PropTypes.Validator = ( ...rest ) => { if ( - props.layout === `fluid` && + props.layout === `fullWidth` && (propName === `width` || propName === `height`) && props[propName] ) { return new Error( - `"${propName}" ${props[propName]} may not be passed when layout is fluid.` + `"${propName}" ${props[propName]} may not be passed when layout is fullWidth.` ) } return PropTypes.number(props, propName, ...rest) diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts index 46080d0b845aa..a1d15ca89d2cc 100644 --- a/packages/gatsby-plugin-image/src/image-utils.ts +++ b/packages/gatsby-plugin-image/src/image-utils.ts @@ -20,7 +20,7 @@ export interface IReporter { } export interface ISharpGatsbyImageArgs { - layout?: "fixed" | "fluid" | "constrained" + layout?: Layout formats?: Array placeholder?: "tracedSVG" | "dominantColor" | "blurred" | "none" tracedSVGOptions?: Record diff --git a/packages/gatsby-plugin-image/src/resolver-utils.ts b/packages/gatsby-plugin-image/src/resolver-utils.ts index b4d1aa0b76fca..84f6fb1995bb5 100644 --- a/packages/gatsby-plugin-image/src/resolver-utils.ts +++ b/packages/gatsby-plugin-image/src/resolver-utils.ts @@ -52,7 +52,7 @@ export function getGatsbyImageFieldConfig( args: { layout: { type: ImageLayoutType, - defaultValue: `fixed`, + defaultValue: `constrained`, description: stripIndent` The layout for the image. FIXED: A static image sized, that does not resize according to the screen width diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index 7aff0b73a235f..857d43d3cdc3c 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -99,7 +99,7 @@ export async function generateImageData({ const metadata = await getImageMetadata(file, placeholder === `dominantColor`) - if ((args.width || args.height) && layout === `fluid`) { + if ((args.width || args.height) && layout === `fullWidth`) { reporter.warn( `Specifying fullWidth images will ignore the width and height arguments, you may want a constrained image instead. Otherwise, use the breakpoints argument.` ) From 44be597889243fc57f1bb862d9d853a84a46845c Mon Sep 17 00:00:00 2001 From: Laurie Date: Tue, 12 Jan 2021 09:42:34 -0500 Subject: [PATCH 5/9] update tests --- .../src/__tests__/image-utils.ts | 6 +++--- .../gatsby-plugin-sharp/src/__tests__/utils.js | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts index c2cec986e6179..879a049a9c803 100644 --- a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts +++ b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts @@ -37,7 +37,7 @@ const args: IGatsbyImageHelperArgs = { const fluidArgs: IGatsbyImageHelperArgs = { ...args, - layout: `fluid`, + layout: `fullWidth`, } const constrainedArgs: IGatsbyImageHelperArgs = { @@ -153,7 +153,7 @@ describe(`the image data helper`, () => { expect(data.images.fallback?.sizes).toEqual(`400px`) }) - it(`calculates sizes for fluid`, () => { + it(`calculates sizes for fullWidth`, () => { const data = generateImageData(fluidArgs) expect(data.images.fallback?.sizes).toEqual(`100vw`) }) @@ -176,7 +176,7 @@ describe(`the image data helper`, () => { ) }) - it(`returns URLs for fluid`, () => { + it(`returns URLs for fullWidth`, () => { const data = generateImageData(fluidArgs) expect(data?.images?.fallback?.src).toEqual( `https://example.com/afile.jpg/400/300/image.jpg` diff --git a/packages/gatsby-plugin-sharp/src/__tests__/utils.js b/packages/gatsby-plugin-sharp/src/__tests__/utils.js index 2fe7ff3376bde..9df25e69f2be4 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/utils.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/utils.js @@ -118,7 +118,7 @@ describe(`calculateImageSizes (fixed)`, () => { }) }) -describe(`calculateImageSizes (fluid & constrained)`, () => { +describe(`calculateImageSizes (fullWidth & constrained)`, () => { it(`should throw if width is less than 1`, () => { const args = { layout: `constrained`, @@ -155,7 +155,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { it(`should include the original size of the image when height is passed`, () => { const args = { - layout: `fluid`, + layout: `fullWidth`, height: 300, file, imgDimensions, @@ -166,7 +166,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { it(`should create images of different sizes (0.25x, 0.5x, 1x, 2x) from a width`, () => { const args = { - layout: `fluid`, + layout: `fullWidth`, width: 320, file, imgDimensions, @@ -177,7 +177,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { it(`should create images of different sizes (0.25x, 0.5x, 1x) without any defined size provided`, () => { const args = { - layout: `fluid`, + layout: `fullWidth`, file, imgDimensions, } @@ -189,7 +189,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { const srcSetBreakpoints = [50, 70, 150, 250, 300] const width = 500 const args = { - layout: `fluid`, + layout: `fullWidth`, width, srcSetBreakpoints, file, @@ -211,7 +211,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { ] const width = 1500 // also shouldn't be included const args = { - layout: `fluid`, + layout: `fullWidth`, width, srcSetBreakpoints, file, @@ -228,7 +228,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { const srcSetBreakpoints = [400, 800] // should find these const width = 500 const args = { - layout: `fluid`, + layout: `fullWidth`, width, outputPixelDensities: [2, 4], // and ignore these, ie [1000, 2000] srcSetBreakpoints, @@ -241,7 +241,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { expect(sizes).toEqual(expect.arrayContaining([400, 500, 800])) }) - it(`should adjust fluid sizes according to fit type`, () => { + it(`should adjust fullWidth sizes according to fit type`, () => { const imgDimensions = { width: 2810, height: 1360, @@ -308,7 +308,7 @@ describe(`calculateImageSizes (fluid & constrained)`, () => { outputPixelDensities, reporter, imgDimensions, - layout: `fluid`, + layout: `fullWidth`, }) expect([presentationWidth, presentationHeight]).toEqual(result) }) From 22de2c4c0bb00b15669fd8c97f28efd4d12b7cef Mon Sep 17 00:00:00 2001 From: Laurie Date: Tue, 12 Jan 2021 10:35:37 -0500 Subject: [PATCH 6/9] more test fixes --- e2e-tests/gatsby-static-image/cypress/integration/image.js | 3 +-- .../src/pages/images/{fluid.js => fullWidth.js} | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) rename e2e-tests/visual-regression/src/pages/images/{fluid.js => fullWidth.js} (87%) diff --git a/e2e-tests/gatsby-static-image/cypress/integration/image.js b/e2e-tests/gatsby-static-image/cypress/integration/image.js index 09ba968efc612..5a3b557b98129 100644 --- a/e2e-tests/gatsby-static-image/cypress/integration/image.js +++ b/e2e-tests/gatsby-static-image/cypress/integration/image.js @@ -2,7 +2,7 @@ const fluidTestId = `image-fluid` describe(`Production gatsby-image`, () => { beforeEach(() => { - cy.visit(`/fluid`).waitForRouteChange() + cy.visit(`/fullWidth`).waitForRouteChange() }) describe(`wrapping elements`, () => { @@ -30,5 +30,4 @@ describe(`Production gatsby-image`, () => { .should(`not.exist`) }) }) - }) diff --git a/e2e-tests/visual-regression/src/pages/images/fluid.js b/e2e-tests/visual-regression/src/pages/images/fullWidth.js similarity index 87% rename from e2e-tests/visual-regression/src/pages/images/fluid.js rename to e2e-tests/visual-regression/src/pages/images/fullWidth.js index d4410d0b15529..010a3a5259131 100644 --- a/e2e-tests/visual-regression/src/pages/images/fluid.js +++ b/e2e-tests/visual-regression/src/pages/images/fullWidth.js @@ -9,7 +9,7 @@ const Page = () => { query { file(relativePath: { eq: "cornwall.jpg" }) { childImageSharp { - gatsbyImageData(width: 1024, layout: FLUID) + gatsbyImageData(width: 1024, layout: FULL_WIDTH) } } } @@ -17,7 +17,7 @@ const Page = () => { return ( -

Fluid, maxWidth

+

fullWidth, maxWidth

Date: Tue, 12 Jan 2021 11:19:28 -0500 Subject: [PATCH 7/9] intermediate test naming --- e2e-tests/visual-regression/cypress/integration/image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e-tests/visual-regression/cypress/integration/image.js b/e2e-tests/visual-regression/cypress/integration/image.js index 1a0b79b73ee00..22a35912450b0 100644 --- a/e2e-tests/visual-regression/cypress/integration/image.js +++ b/e2e-tests/visual-regression/cypress/integration/image.js @@ -1,14 +1,14 @@ const testCases = [ ["fixed image", "/images/fixed"], ["fixed image smaller than requested size", "/images/fixed-too-big"], - ["fullWidth image", "/images/fullWidth"], + ["fluid image", "/images/fullWidth"], ["constrained image", "/images/constrained"], ["avif format", "/images/avif"], ] const staticImageTestCases = [ ["fixed image", "/static-images/fixed"], ["fixed image smaller than requested size", "/static-images/fixed-too-big"], - ["fullWidth image", "/static-images/fullWidth"], + ["fluid image", "/static-images/fullWidth"], ["constrained image", "/static-images/constrained"], ["avif format", "/static-images/avif"], ] From 9417c9041349647699b0fe93415adca60e834da8 Mon Sep 17 00:00:00 2001 From: LB Date: Tue, 12 Jan 2021 12:07:48 -0500 Subject: [PATCH 8/9] Update packages/gatsby-plugin-image/README.md Co-authored-by: Matt Kane --- packages/gatsby-plugin-image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md index 4006f97647f2b..38675f060eb99 100644 --- a/packages/gatsby-plugin-image/README.md +++ b/packages/gatsby-plugin-image/README.md @@ -294,7 +294,7 @@ JSON type, meaning you don't specify the individual fields, but are instead give ```graphql coverImage: file(relativePath: { eq: "plant.jpg" }) { childImageSharp { - gatsbyImageData(maxWidth: 720, layout: CONSTRAINED, placeholder: TRACED_SVG) + gatsbyImageData(width: 720, layout: CONSTRAINED, placeholder: TRACED_SVG) } } ``` From 6d35c41785b5c8d67c7efa99be2528b0537e06bb Mon Sep 17 00:00:00 2001 From: Laurie Date: Tue, 12 Jan 2021 12:08:37 -0500 Subject: [PATCH 9/9] conflict --- packages/gatsby-plugin-image/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md index 38675f060eb99..ce902f9df8a51 100644 --- a/packages/gatsby-plugin-image/README.md +++ b/packages/gatsby-plugin-image/README.md @@ -329,7 +329,6 @@ These arguments can be passed to the `gatsbyImageData()` resolver: - `FULL_WIDTH`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. - **outputPixelDensities**: A list of image pixel densities to generate, for high-resolution (retina) screens. It will never generate images larger than the source, and will always include a 1x image. Default is `[ 0.25, 0.5, 1, 2 ]`, for fullWidth/constrained images, and `[ 1, 2 ]` for fixed. - > > > > > > > master - **sizes**: The "[sizes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" attribute, passed to the `` tag. This describes the display size of the image. This does not affect the generated images, but is used by the browser to decide which images to download. You can leave this blank for fixed images, or if the responsive image container will be the full width of the screen. In these cases we will generate an appropriate value. If, however, you are generating responsive images that are not the full width of the screen, you should provide a sizes property for best performance. You can alternatively pass this value to the component. - **formats**: an array of file formats to generate. The default is `[AUTO, WEBP]`, which means it will generate images in the same format as the source image, as well as in the next-generation [WebP](https://developers.google.com/speed/webp) format. We strongly recommend you do not change this option, as doing so will affect performance scores. - **quality**: The default quality. This is overridden by any format-specific options