index.js

try {
  require(`sharp`)
} catch (error) {
  // Bail early if sharp isn't available
  console.error(
    `
      The dependency "sharp" does not seem to have been built or installed correctly.

      - Try to reinstall packages and look for errors during installation
      - Consult "sharp" installation page at http://sharp.pixelplumbing.com/en/stable/install/
      
      If neither of the above work, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    `
  )
  console.log()
  console.error(error)
  process.exit(1)
}

const sharp = require(`sharp`)
const crypto = require(`crypto`)
const imageSize = require(`probe-image-size`)
const { promisify } = require(`bluebird`)
const _ = require(`lodash`)
const fs = require(`fs-extra`)
const path = require(`path`)
const { scheduleJob } = require(`./scheduler`)
const { createArgsDigest } = require(`./process-file`)

const imageSizeCache = new Map()
const getImageSize = file => {
  if (
    process.env.NODE_ENV !== `test` &&
    imageSizeCache.has(file.internal.contentDigest)
  ) {
    return imageSizeCache.get(file.internal.contentDigest)
  } else {
    const dimensions = imageSize.sync(
      toArray(fs.readFileSync(file.absolutePath))
    )
    imageSizeCache.set(file.internal.contentDigest, dimensions)
    return dimensions
  }
}

const duotone = require(`./duotone`)

// Bound action creators should be set when passed to onPreInit in gatsby-node.
// ** It is NOT safe to just directly require the gatsby module **.
// There is no guarantee that the module resolved is the module executing!
// This can occur in mono repos depending on how dependencies have been hoisted.
// The direct require has been left only to avoid breaking changes.
let { boundActionCreators } = require(`gatsby/dist/redux/actions`)
exports.setBoundActionCreators = actions => {
  boundActionCreators = actions
}

// We set the queue to a Map instead of an array to easily search in onCreateDevServer Api hook
const queue = new Map()
exports.queue = queue

/// Plugin options are loaded onPreInit in gatsby-node
const pluginDefaults = {
  forceBase64Format: false,
  useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
  stripMetadata: true,
  lazyImageGeneration: true,
  defaultQuality: 50,
}

const generalArgs = {
  quality: 50,
  jpegProgressive: true,
  pngCompressionLevel: 9,
  // default is 4 (https://github.com/kornelski/pngquant/blob/4219956d5e080be7905b5581314d913d20896934/rust/bin.rs#L61)
  pngCompressionSpeed: 4,
  base64: true,
  grayscale: false,
  duotone: false,
  pathPrefix: ``,
  toFormat: ``,
  toFormatBase64: ``,
  sizeByPixelDensity: false,
}

let pluginOptions = Object.assign({}, pluginDefaults)
exports.setPluginOptions = opts => {
  pluginOptions = Object.assign({}, pluginOptions, opts)
  generalArgs.quality = pluginOptions.defaultQuality

  return pluginOptions
}

const reportError = (message, err, reporter) => {
  if (reporter) {
    reporter.error(message, err)
  } else {
    console.error(message, err)
  }

  if (process.env.gatsby_executing_command === `build`) {
    process.exit(1)
  }
}
exports.reportError = reportError

const healOptions = (
  { defaultQuality: quality },
  args,
  fileExtension,
  defaultArgs = {}
) => {
  let options = _.defaults({}, args, { quality }, defaultArgs, generalArgs)
  options.quality = parseInt(options.quality, 10)
  options.pngCompressionLevel = parseInt(options.pngCompressionLevel, 10)
  options.pngCompressionSpeed = parseInt(options.pngCompressionSpeed, 10)
  options.toFormat = options.toFormat.toLowerCase()
  options.toFormatBase64 = options.toFormatBase64.toLowerCase()

  // when toFormat is not set we set it based on fileExtension
  if (options.toFormat === ``) {
    options.toFormat = fileExtension.toLowerCase()

    if (fileExtension === `jpeg`) {
      options.toFormat = `jpg`
    }
  }

  // only set width to 400 if neither width nor height is passed
  if (options.width === undefined && options.height === undefined) {
    options.width = 400
  } else if (options.width !== undefined) {
    options.width = parseInt(options.width, 10)
  } else if (options.height !== undefined) {
    options.height = parseInt(options.height, 10)
  }

  // only set maxWidth to 800 if neither maxWidth nor maxHeight is passed
  if (options.maxWidth === undefined && options.maxHeight === undefined) {
    options.maxWidth = 800
  } else if (options.maxWidth !== undefined) {
    options.maxWidth = parseInt(options.maxWidth, 10)
  } else if (options.maxHeight !== undefined) {
    options.maxHeight = parseInt(options.maxHeight, 10)
  }

  return options
}

function queueImageResizing({ file, args = {}, reporter }) {
  const options = healOptions(pluginOptions, args, file.extension)
  if (!options.toFormat) {
    options.toFormat = file.extension
  }

  const argsDigestShort = createArgsDigest(options)
  const imgSrc = `/${file.name}.${options.toFormat}`
  const dirPath = path.join(
    process.cwd(),
    `public`,
    `static`,
    file.internal.contentDigest,
    argsDigestShort
  )
  const filePath = path.join(dirPath, imgSrc)
  fs.ensureDirSync(dirPath)

  let width
  let height
  // Calculate the eventual width/height of the image.
  const dimensions = getImageSize(file)
  let aspectRatio = dimensions.width / dimensions.height
  const originalName = file.base

  // If the width/height are both set, we're cropping so just return
  // that.
  if (options.width && options.height) {
    width = options.width
    height = options.height
    // Recalculate the aspectRatio for the cropped photo
    aspectRatio = width / height
  } else if (options.width) {
    // Use the aspect ratio of the image to calculate what will be the resulting
    // height.
    width = options.width
    height = Math.round(options.width / aspectRatio)
  } else {
    // Use the aspect ratio of the image to calculate what will be the resulting
    // width.
    height = options.height
    width = Math.round(options.height * aspectRatio)
  }

  // encode the file name for URL
  const encodedImgSrc = `/${encodeURIComponent(file.name)}.${options.toFormat}`

  // Prefix the image src.
  const digestDirPrefix = `${file.internal.contentDigest}/${argsDigestShort}`
  const prefixedSrc =
    options.pathPrefix + `/static/${digestDirPrefix}` + encodedImgSrc

  // Create job and add it to the queue, the queue will be processed inside gatsby-node.js
  const job = {
    args: options,
    inputPath: file.absolutePath,
    outputPath: filePath,
  }

  queue.set(prefixedSrc, job)

  // schedule job immediately - this will be changed when image processing on demand is implemented
  const finishedPromise = scheduleJob(
    job,
    boundActionCreators,
    pluginOptions
  ).then(() => {
    queue.delete(prefixedSrc)
  })

  return {
    src: prefixedSrc,
    absolutePath: filePath,
    width,
    height,
    aspectRatio,
    finishedPromise,
    // // finishedPromise is needed to not break our API (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sqip/src/extend-node-type.js#L115)
    // finishedPromise: {
    //   then: (resolve, reject) => {
    //     scheduleJob(job, boundActionCreators, pluginOptions).then(() => {
    //       queue.delete(prefixedSrc)
    //       resolve()
    //     }, reject)
    //   },
    // },
    originalName: originalName,
  }
}

// A value in pixels(Int)
const defaultBase64Width = () => pluginOptions.base64Width || 20
async function generateBase64({ file, args, reporter }) {
  const options = healOptions(pluginOptions, args, file.extension, {
    width: defaultBase64Width(),
  })
  let pipeline
  try {
    pipeline = sharp(file.absolutePath).rotate()
  } catch (err) {
    reportError(`Failed to process image ${file.absolutePath}`, err, reporter)
    return null
  }

  const forceBase64Format =
    args.toFormatBase64 || pluginOptions.forceBase64Format
  if (forceBase64Format) {
    args.toFormat = forceBase64Format
  }

  pipeline
    .resize(options.width, options.height, {
      position: options.cropFocus,
    })
    .png({
      compressionLevel: options.pngCompressionLevel,
      adaptiveFiltering: false,
      force: args.toFormat === `png`,
    })
    .jpeg({
      quality: options.quality,
      progressive: options.jpegProgressive,
      force: args.toFormat === `jpg`,
    })
    .webp({
      quality: options.quality,
      force: args.toFormat === `webp`,
    })

  // grayscale
  if (options.grayscale) {
    pipeline = pipeline.grayscale()
  }

  // rotate
  if (options.rotate && options.rotate !== 0) {
    pipeline = pipeline.rotate(options.rotate)
  }

  // duotone
  if (options.duotone) {
    pipeline = await duotone(options.duotone, args.toFormat, pipeline)
  }
  const { data: buffer, info } = await pipeline.toBuffer({
    resolveWithObject: true,
  })
  const base64output = {
    src: `data:image/${info.format};base64,${buffer.toString(`base64`)}`,
    width: info.width,
    height: info.height,
    aspectRatio: info.width / info.height,
    originalName: file.base,
  }
  return base64output
}

const base64CacheKey = ({ file, args }) => `${file.id}${JSON.stringify(args)}`

const memoizedBase64 = _.memoize(generateBase64, base64CacheKey)

const cachifiedBase64 = async ({ cache, ...arg }) => {
  const cacheKey = base64CacheKey(arg)

  const cachedBase64 = await cache.get(cacheKey)
  if (cachedBase64) {
    return cachedBase64
  }

  const base64output = await generateBase64(arg)

  await cache.set(cacheKey, base64output)

  return base64output
}

async function base64(arg) {
  if (arg.cache) {
    // Not all tranformer plugins are going to provide cache
    return await cachifiedBase64(arg)
  }

  return await memoizedBase64(arg)
}

async function getTracedSVG(options, file) {
  if (options.generateTracedSVG && options.tracedSVG) {
    const tracedSVG = await traceSVG({
      file,
      args: options.tracedSVG,
      fileArgs: options,
    })
    return tracedSVG
  }
  return undefined
}

async function fluid({ file, args = {}, reporter, cache }) {
  const options = healOptions(pluginOptions, args, file.extension)
  // Account for images with a high pixel density. We assume that these types of
  // images are intended to be displayed at their native resolution.
  let metadata
  try {
    metadata = await sharp(file.absolutePath).metadata()
  } catch (err) {
    reportError(`Failed to process image ${file.absolutePath}`, err, reporter)
    return null
  }

  const { width, height, density, format } = metadata
  const defaultImagePPI = 72 // Standard digital image pixel density
  const pixelRatio =
    options.sizeByPixelDensity && typeof density === `number` && density > 0
      ? density / defaultImagePPI
      : 1

  // if no maxWidth is passed, we need to resize the image based on the passed maxHeight
  const fixedDimension =
    options.maxWidth === undefined ? `maxHeight` : `maxWidth`

  if (options[fixedDimension] < 1) {
    throw new Error(
      `${fixedDimension} has to be a positive int larger than zero (> 0), now it's ${
        options[fixedDimension]
      }`
    )
  }

  let presentationWidth, presentationHeight
  if (fixedDimension === `maxWidth`) {
    presentationWidth = Math.min(
      options.maxWidth,
      Math.round(width / pixelRatio)
    )
    presentationHeight = Math.round(presentationWidth * (height / width))
  } else {
    presentationHeight = Math.min(
      options.maxHeight,
      Math.round(height / pixelRatio)
    )
    presentationWidth = Math.round(presentationHeight * (width / height))
  }

  // If the users didn't set default sizes, we'll make one.
  if (!options.sizes) {
    options.sizes = `(max-width: ${presentationWidth}px) 100vw, ${presentationWidth}px`
  }

  // Create sizes (in width) for the image if no custom breakpoints are
  // provided. If the max width of the container for the rendered markdown file
  // is 800px, the sizes would then be: 200, 400, 800, 1200, 1600, 2400.
  //
  // This is enough sizes to provide close to the optimal image size for every
  // device size / screen resolution while (hopefully) not requiring too much
  // image processing time (Sharp has optimizations thankfully for creating
  // multiple sizes of the same input file)
  const fluidSizes = [
    options[fixedDimension], // ensure maxWidth (or maxHeight) is added
  ]
  // use standard breakpoints if no custom breakpoints are specified
  if (!options.srcSetBreakpoints || !options.srcSetBreakpoints.length) {
    fluidSizes.push(options[fixedDimension] / 4)
    fluidSizes.push(options[fixedDimension] / 2)
    fluidSizes.push(options[fixedDimension] * 1.5)
    fluidSizes.push(options[fixedDimension] * 2)
    fluidSizes.push(options[fixedDimension] * 3)
  } else {
    options.srcSetBreakpoints.forEach(breakpoint => {
      if (breakpoint < 1) {
        throw new Error(
          `All ints in srcSetBreakpoints should be positive ints larger than zero (> 0), found ${breakpoint}`
        )
      }
      // ensure no duplicates are added
      if (fluidSizes.includes(breakpoint)) {
        return
      }
      fluidSizes.push(breakpoint)
    })
  }
  const filteredSizes = fluidSizes.filter(
    size => size < (fixedDimension === `maxWidth` ? width : height)
  )

  // Add the original image to ensure the largest image possible
  // is available for small images. Also so we can link to
  // the original image.
  filteredSizes.push(fixedDimension === `maxWidth` ? width : height)

  // Sort sizes for prettiness.
  const sortedSizes = _.sortBy(filteredSizes)

  // Queue sizes for processing.
  const dimensionAttr = fixedDimension === `maxWidth` ? `width` : `height`
  const otherDimensionAttr = fixedDimension === `maxWidth` ? `height` : `width`
  const images = sortedSizes.map(size => {
    const arrrgs = {
      ...options,
      [otherDimensionAttr]: undefined,
      [dimensionAttr]: Math.round(size),
    }
    // Queue sizes for processing.
    if (options.maxWidth !== undefined && options.maxHeight !== undefined) {
      arrrgs.height = Math.round(size * (options.maxHeight / options.maxWidth))
    }

    return queueImageResizing({
      file,
      args: arrrgs, // matey
      reporter,
    })
  })

  let base64Image
  if (options.base64) {
    const base64Width = options.base64Width || defaultBase64Width()
    const base64Height = Math.max(1, Math.round((base64Width * height) / width))
    const base64Args = {
      duotone: options.duotone,
      grayscale: options.grayscale,
      rotate: options.rotate,
      toFormat: options.toFormat,
      toFormatBase64: options.toFormatBase64,
      width: base64Width,
      height: base64Height,
    }
    // Get base64 version
    base64Image = await base64({ file, args: base64Args, reporter, cache })
  }

  const tracedSVG = await getTracedSVG(options, file)

  // Construct src and srcSet strings.
  const originalImg = _.maxBy(images, image => image.width).src
  const fallbackSrc = _.minBy(images, image =>
    Math.abs(options[fixedDimension] - image[dimensionAttr])
  ).src
  const srcSet = images
    .map(image => `${image.src} ${Math.round(image.width)}w`)
    .join(`,\n`)
  const originalName = file.base

  // figure out the srcSet format
  let srcSetType = `image/${format}`

  if (options.toFormat) {
    switch (options.toFormat) {
      case `png`:
        srcSetType = `image/png`
        break
      case `jpg`:
        srcSetType = `image/jpeg`
        break
      case `webp`:
        srcSetType = `image/webp`
        break
      case ``:
      case `no_change`:
      default:
        break
    }
  }

  return {
    base64: base64Image && base64Image.src,
    aspectRatio: images[0].aspectRatio,
    src: fallbackSrc,
    srcSet,
    srcSetType,
    sizes: options.sizes,
    originalImg: originalImg,
    originalName: originalName,
    density,
    presentationWidth,
    presentationHeight,
    tracedSVG,
  }
}

async function fixed({ file, args = {}, reporter, cache }) {
  const options = healOptions(pluginOptions, args, file.extension)

  // if no width is passed, we need to resize the image based on the passed height
  const fixedDimension = options.width === undefined ? `height` : `width`

  // Create sizes for different resolutions — we do 1x, 1.5x, 2x, and 3x.
  const sizes = []
  sizes.push(options[fixedDimension])
  sizes.push(options[fixedDimension] * 1.5)
  sizes.push(options[fixedDimension] * 2)
  sizes.push(options[fixedDimension] * 3)
  const dimensions = getImageSize(file)

  const filteredSizes = sizes.filter(size => size <= dimensions[fixedDimension])

  // If there's no fluid images after filtering (e.g. image is smaller than what's
  // requested, add back the original so there's at least something)
  if (filteredSizes.length === 0) {
    filteredSizes.push(dimensions[fixedDimension])
    console.warn(
      `
                 The requested ${fixedDimension} "${
        options[fixedDimension]
      }px" for a resolutions field for
                 the file ${file.absolutePath}
                 was larger than the actual image ${fixedDimension} of ${
        dimensions[fixedDimension]
      }px!
                 If possible, replace the current image with a larger one.
                 `
    )
  }

  // Sort images for prettiness.
  const sortedSizes = _.sortBy(filteredSizes)

  const images = sortedSizes.map(size => {
    const arrrgs = {
      ...options,
      [fixedDimension]: Math.round(size),
    }
    // Queue images for processing.
    if (options.width !== undefined && options.height !== undefined) {
      arrrgs.height = Math.round(size * (options.height / options.width))
    }

    return queueImageResizing({
      file,
      args: arrrgs,
      reporter,
    })
  })

  let base64Image
  if (options.base64) {
    const base64Args = {
      // height is adjusted accordingly with respect to the aspect ratio
      width: options.base64Width,
      duotone: options.duotone,
      grayscale: options.grayscale,
      rotate: options.rotate,
      toFormat: options.toFormat,
      toFormatBase64: options.toFormatBase64,
    }

    // Get base64 version
    base64Image = await base64({
      file,
      args: base64Args,
      reporter,
      cache,
    })
  }

  const tracedSVG = await getTracedSVG(options, file)

  const fallbackSrc = images[0].src
  const srcSet = images
    .map((image, i) => {
      let resolution
      switch (i) {
        case 0:
          resolution = `1x`
          break
        case 1:
          resolution = `1.5x`
          break
        case 2:
          resolution = `2x`
          break
        case 3:
          resolution = `3x`
          break
        default:
      }
      return `${image.src} ${resolution}`
    })
    .join(`,\n`)

  const originalName = file.base

  return {
    base64: base64Image && base64Image.src,
    aspectRatio: images[0].aspectRatio,
    width: images[0].width,
    height: images[0].height,
    src: fallbackSrc,
    srcSet,
    originalName: originalName,
    tracedSVG,
  }
}

async function notMemoizedtraceSVG({ file, args, fileArgs, reporter }) {
  const potrace = require(`potrace`)
  const svgToMiniDataURI = require(`mini-svg-data-uri`)
  const trace = promisify(potrace.trace)
  const defaultArgs = {
    color: `lightgray`,
    optTolerance: 0.4,
    turdSize: 100,
    turnPolicy: potrace.Potrace.TURNPOLICY_MAJORITY,
  }
  const optionsSVG = _.defaults(args, defaultArgs)
  const options = healOptions(pluginOptions, fileArgs, file.extension)
  let pipeline
  try {
    pipeline = sharp(file.absolutePath).rotate()
  } catch (err) {
    reportError(`Failed to process image ${file.absolutePath}`, err, reporter)
    return null
  }

  pipeline
    .resize(options.width, options.height, {
      position: options.cropFocus,
    })
    .png({
      compressionLevel: options.pngCompressionLevel,
      adaptiveFiltering: false,
      force: args.toFormat === `png`,
    })
    .jpeg({
      quality: options.quality,
      progressive: options.jpegProgressive,
      force: args.toFormat === `jpg`,
    })

  // grayscale
  if (options.grayscale) {
    pipeline = pipeline.grayscale()
  }

  // rotate
  if (options.rotate && options.rotate !== 0) {
    pipeline = pipeline.rotate(options.rotate)
  }

  // duotone
  if (options.duotone) {
    pipeline = await duotone(
      options.duotone,
      args.toFormat || file.extension,
      pipeline
    )
  }

  const tmpDir = require(`os`).tmpdir()
  const tmpFilePath = `${tmpDir}/${file.internal.contentDigest}-${
    file.name
  }-${crypto
    .createHash(`md5`)
    .update(JSON.stringify(fileArgs))
    .digest(`hex`)}.${file.extension}`

  await new Promise(resolve =>
    pipeline.toFile(tmpFilePath, (err, info) => {
      resolve()
    })
  )

  return trace(tmpFilePath, optionsSVG)
    .then(optimize)
    .then(svgToMiniDataURI)
}

const memoizedTraceSVG = _.memoize(
  notMemoizedtraceSVG,
  ({ file, args }) => `${file.absolutePath}${JSON.stringify(args)}`
)

async function traceSVG(args) {
  return await memoizedTraceSVG(args)
}

const optimize = svg => {
  const SVGO = require(`svgo`)
  const svgo = new SVGO({ multipass: true, floatPrecision: 0 })
  return svgo.optimize(svg).then(({ data }) => data)
}

function toArray(buf) {
  var arr = new Array(buf.length)

  for (var i = 0; i < buf.length; i++) {
    arr[i] = buf[i]
  }

  return arr
}

exports.queueImageResizing = queueImageResizing
exports.resize = queueImageResizing
exports.base64 = base64
exports.traceSVG = traceSVG
exports.sizes = fluid
exports.resolutions = fixed
exports.fluid = fluid
exports.fixed = fixed
exports.getImageSize = getImageSize