Skip to content

Commit

Permalink
Add image helper
Browse files Browse the repository at this point in the history
  • Loading branch information
ascorbic committed Nov 16, 2020
1 parent fa19ba2 commit ecb1fe7
Show file tree
Hide file tree
Showing 13 changed files with 624 additions and 38 deletions.
88 changes: 88 additions & 0 deletions packages/gatsby-plugin-image/src/__tests__/image-utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import {
generateImageData,
IGatsbyImageHelperArgs,
IImage,
} from "../image-utils"

const args: IGatsbyImageHelperArgs = {
pluginName: `gatsby-plugin-fake`,
filename: `afile.jpg`,
generateImageSource: jest.fn(),
width: 400,
sourceMetadata: {
width: 800,
height: 600,
format: `jpg`,
},
reporter: {
warn: jest.fn(),
},
}

describe(`the image data helper`, () => {
beforeEach(() => {
jest.resetAllMocks()
})
it(`throws if there's not a valid generateURL function`, () => {
const generateImageSource = `this should be a function`

expect(() =>
generateImageData(({
...args,
generateImageSource,
} as any) as IGatsbyImageHelperArgs)
).toThrow()
})

it(`calls the generateImageSource function`, () => {
generateImageData(args)
expect(args.generateImageSource).toHaveBeenCalledWith(
`afile.jpg`,
800,
600,
`jpg`,
undefined,
undefined
)
})

it(`returns URLs as generated`, () => {
const generateImageSource = (
file: string,
width: number,
height: number,
format
): IImage => {
return {
src: `https://example.com/${file}?width=${width}&height=${height}`,
width,
height,
format,
}
}
const data = generateImageData({ ...args, generateImageSource })
expect(data).toMatchInlineSnapshot(`
Object {
"height": undefined,
"images": Object {
"fallback": Object {
"sizes": "400px",
"src": "https://example.com/afile.jpg?width=400&height=300",
"srcSet": "https://example.com/afile.jpg?width=400&height=300 400w,
https://example.com/afile.jpg?width=800&height=600 800w",
},
"sources": Array [
Object {
"sizes": "400px",
"srcSet": "https://example.com/afile.jpg?width=400&height=300 400w,
https://example.com/afile.jpg?width=800&height=600 800w",
"type": "image/webp",
},
],
},
"layout": "fixed",
"width": 400,
}
`)
})
})
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react"
import { render, screen } from "@testing-library/react"
import { GatsbyImage } from "../gatsby-image.server"
import { ISharpGatsbyImageData } from "../gatsby-image.browser"
import { IGatsbyImageData } from "../gatsby-image.browser"
import { SourceProps } from "../picture"

type GlobalOverride = NodeJS.Global &
Expand All @@ -22,8 +22,8 @@ describe(`GatsbyImage server`, () => {

afterEach(() => {
jest.clearAllMocks()
;(global as GlobalOverride).SERVER = undefined
;(global as GlobalOverride).GATSBY___IMAGE = undefined
;(global as GlobalOverride).SERVER = false
;(global as GlobalOverride).GATSBY___IMAGE = false
})

it(`shows nothing when the image props is not passed`, () => {
Expand All @@ -44,7 +44,7 @@ describe(`GatsbyImage server`, () => {
it(`has a valid style attributes for fluid layout`, () => {
const layout = `fluid`

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout,
Expand Down Expand Up @@ -77,7 +77,7 @@ describe(`GatsbyImage server`, () => {
it(`has a valid style attributes for fixed layout`, () => {
const layout = `fixed`

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout,
Expand Down Expand Up @@ -116,7 +116,7 @@ describe(`GatsbyImage server`, () => {
it(`has a valid style attributes for constrained layout`, () => {
const layout = `constrained`

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout,
Expand Down Expand Up @@ -155,7 +155,7 @@ describe(`GatsbyImage server`, () => {
// no fallback provided
const images = {}

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down Expand Up @@ -186,7 +186,7 @@ describe(`GatsbyImage server`, () => {
it(`has a valid src value when fallback is provided in images`, () => {
const images = { fallback: { src: `some-src-fallback.jpg` } }

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down Expand Up @@ -227,7 +227,7 @@ icon.svg`,
},
}

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down Expand Up @@ -263,7 +263,7 @@ icon.svg`,
// no fallback provided
const images = {}

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down Expand Up @@ -304,7 +304,7 @@ icon.svg`,
},
]

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down Expand Up @@ -342,7 +342,7 @@ icon.svg`,

describe(`placeholder verifications`, () => {
it(`has a placeholder in a div with valid styles for fluid layout`, () => {
const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `fluid`,
Expand All @@ -368,7 +368,7 @@ icon.svg`,
})

it(`has a placeholder in a div with valid styles for fixed layout`, () => {
const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `fixed`,
Expand All @@ -394,7 +394,7 @@ icon.svg`,
})

it(`has a placeholder in a div with valid styles for constrained layout`, () => {
const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 100,
height: 100,
layout: `constrained`,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { FunctionComponent, ComponentType, ElementType } from "react"
import { GatsbyImageProps, ISharpGatsbyImageData } from "./gatsby-image.browser"
import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"
import { GatsbyImage as GatsbyImageOriginal } from "./gatsby-image.browser"

export interface ICompatProps {
Expand Down Expand Up @@ -72,7 +72,7 @@ export function _createCompatLayer(
fixed = fixed[0] as Exclude<ICompatProps["fixed"], undefined>
}

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
placeholder: undefined,
layout: `fixed`,
width: fixed.width,
Expand Down Expand Up @@ -108,7 +108,7 @@ export function _createCompatLayer(
fluid = fluid[0] as Exclude<ICompatProps["fluid"], undefined>
}

const image: ISharpGatsbyImageData = {
const image: IGatsbyImageData = {
width: 1,
height: fluid.aspectRatio,
layout: `fluid`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ export type GatsbyImageProps = Omit<
alt: string
as?: ElementType
className?: string
image: ISharpGatsbyImageData
image: IGatsbyImageData
onLoad?: () => void
onError?: () => void
onStartLoad?: Function
}

export interface ISharpGatsbyImageData {
export interface IGatsbyImageData {
layout: Layout
height?: number
backgroundColor?: string
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { ElementType, FunctionComponent, CSSProperties } from "react"
import { GatsbyImageProps, ISharpGatsbyImageData } from "./gatsby-image.browser"
import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"
import { getWrapperProps, getMainProps, getPlaceholderProps } from "./hooks"
import { Placeholder } from "./placeholder"
import { MainImage, MainImageProps } from "./main-image"
Expand Down Expand Up @@ -44,7 +44,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
layout
)

const cleanedImages: ISharpGatsbyImageData["images"] = {
const cleanedImages: IGatsbyImageData["images"] = {
fallback: undefined,
sources: [],
}
Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby-plugin-image/src/components/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Node } from "gatsby"
import { PlaceholderProps } from "./placeholder"
import { MainImageProps } from "./main-image"
import { Layout } from "../utils"
import { ISharpGatsbyImageData } from "./gatsby-image.browser"
import { IGatsbyImageData } from "./gatsby-image.browser"
const imageCache = new Set<string>()

// Native lazy-loading support: https://addyosmani.com/blog/lazy-loading/
Expand All @@ -32,11 +32,11 @@ export function hasImageLoaded(cacheKey: string): boolean {

export type FileNode = Node & {
childImageSharp?: Node & {
gatsbyImageData?: ISharpGatsbyImageData
gatsbyImageData?: IGatsbyImageData
}
}

export const getImage = (file: FileNode): ISharpGatsbyImageData | undefined =>
export const getImage = (file: FileNode): IGatsbyImageData | undefined =>
file?.childImageSharp?.gatsbyImageData

export function getWrapperProps(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { FunctionComponent } from "react"
import { StaticImageProps } from "../utils"
import { GatsbyImage as GatsbyImageServer } from "./gatsby-image.server"
import { GatsbyImageProps, ISharpGatsbyImageData } from "./gatsby-image.browser"
import { GatsbyImageProps, IGatsbyImageData } from "./gatsby-image.browser"

// These values are added by Babel. Do not add them manually
interface IPrivateProps {
__imageData?: ISharpGatsbyImageData
__imageData?: IGatsbyImageData
__error?: string
}

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-plugin-image/src/components/static-image.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {
GatsbyImage as GatsbyImageBrowser,
ISharpGatsbyImageData,
IGatsbyImageData,
} from "./gatsby-image.browser"
import { _getStaticImage } from "./static-image.server"
import { StaticImageProps } from "../utils"
// These values are added by Babel. Do not add them manually
interface IPrivateProps {
__imageData?: ISharpGatsbyImageData
__imageData?: IGatsbyImageData
__error?: string
}

Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby-plugin-image/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export {};
export {}

declare global {
declare var SERVER: boolean;
declare var SERVER: boolean

namespace NodeJS {
interface Global {
GATSBY___IMAGE: boolean;
GATSBY___IMAGE: boolean | undefined
}
}
}
Loading

0 comments on commit ecb1fe7

Please sign in to comment.