From 6615009120d9aad6ee0a0cb90e764578a78b807a Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Sun, 18 Feb 2018 19:48:36 +0100 Subject: [PATCH 1/4] [gatsby-plugin-sharp] dont import reporter directly, let it be passed is function paramater add helper function that will use reporter if supplied or standard console.error if not add panic on build as we don't want build successfuly if there were errors during image processing --- packages/gatsby-plugin-sharp/src/index.js | 68 ++++++++++++++--------- 1 file changed, 43 insertions(+), 25 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 38fc03c4ebc1f..a2227163ea94c 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -13,7 +13,6 @@ const path = require(`path`) const duotone = require(`./duotone`) const { boundActionCreators } = require(`gatsby/dist/redux/actions`) -const report = require(`gatsby-cli/lib/reporter`) // Promisify the sharp prototype (methods) to promisify the alternative (for // raw) callback-accepting toBuffer(...) method @@ -33,8 +32,20 @@ const bar = new ProgressBar( } ) +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) + } +} + let totalJobs = 0 -const processFile = (file, jobs, cb) => { +const processFile = (file, jobs, cb, reporter) => { // console.log("totalJobs", totalJobs) bar.total = totalJobs @@ -47,7 +58,7 @@ const processFile = (file, jobs, cb) => { try { pipeline = sharp(file).rotate() } catch (err) { - report.error(`Failed to process image ${file}`, err) + reportError(`Failed to process image ${file}`, err, reporter) jobs.forEach(job => job.outsideReject(err)) return } @@ -120,7 +131,7 @@ const processFile = (file, jobs, cb) => { ) if (err) { - report.error(`Failed to process image ${file}`, err) + reportError(`Failed to process image ${file}`, err, reporter) job.outsideReject(err) } else { job.outsideResolve() @@ -181,7 +192,7 @@ const q = queue((task, callback) => { task(callback) }, 1) -const queueJob = job => { +const queueJob = (job, reporter) => { const inputFileKey = job.file.absolutePath.replace(/\./g, `%2E`) const outputFileKey = job.outputPath.replace(/\./g, `%2E`) const jobPath = `${inputFileKey}.${outputFileKey}` @@ -218,20 +229,25 @@ const queueJob = job => { { name: `gatsby-plugin-sharp` } ) // We're now processing the file's jobs. - processFile(job.file.absolutePath, jobs, () => { - boundActionCreators.endJob( - { - id: `processing image ${job.file.absolutePath}`, - }, - { name: `gatsby-plugin-sharp` } - ) - cb() - }) + processFile( + job.file.absolutePath, + jobs, + () => { + boundActionCreators.endJob( + { + id: `processing image ${job.file.absolutePath}`, + }, + { name: `gatsby-plugin-sharp` } + ) + cb() + }, + reporter + ) }) } } -function queueImageResizing({ file, args = {} }) { +function queueImageResizing({ file, args = {}, reporter }) { const defaultArgs = { width: 400, quality: 50, @@ -313,7 +329,7 @@ function queueImageResizing({ file, args = {} }) { outputPath: filePath, } - queueJob(job) + queueJob(job, reporter) // Prefix the image src. const prefixedSrc = options.pathPrefix + `/static` + imgSrc @@ -329,7 +345,7 @@ function queueImageResizing({ file, args = {} }) { } } -async function notMemoizedbase64({ file, args = {} }) { +async function notMemoizedbase64({ file, args = {}, reporter }) { const defaultArgs = { width: 20, quality: 50, @@ -344,7 +360,7 @@ async function notMemoizedbase64({ file, args = {} }) { try { pipeline = sharp(file.absolutePath).rotate() } catch (err) { - report.error(`Failed to process image ${file.absolutePath}`, err) + reportError(`Failed to process image ${file.absolutePath}`, err, reporter) return null } @@ -398,7 +414,7 @@ async function base64(args) { return await memoizedBase64(args) } -async function responsiveSizes({ file, args = {} }) { +async function responsiveSizes({ file, args = {}, reporter }) { const defaultArgs = { maxWidth: 800, quality: 50, @@ -419,7 +435,7 @@ async function responsiveSizes({ file, args = {} }) { try { metadata = await sharp(file.absolutePath).metadata() } catch (err) { - report.error(`Failed to process image ${file.absolutePath}`, err) + reportError(`Failed to process image ${file.absolutePath}`, err, reporter) return null } @@ -478,6 +494,7 @@ async function responsiveSizes({ file, args = {} }) { return queueImageResizing({ file, args: arrrgs, // matey + reporter, }) }) @@ -492,7 +509,7 @@ async function responsiveSizes({ file, args = {} }) { } // Get base64 version - const base64Image = await base64({ file, args: base64Args }) + const base64Image = await base64({ file, args: base64Args, reporter }) // Construct src and srcSet strings. const originalImg = _.maxBy(images, image => image.width).src @@ -518,7 +535,7 @@ async function responsiveSizes({ file, args = {} }) { } } -async function resolutions({ file, args = {} }) { +async function resolutions({ file, args = {}, reporter }) { const defaultArgs = { width: 400, quality: 50, @@ -574,6 +591,7 @@ async function resolutions({ file, args = {} }) { return queueImageResizing({ file, args: arrrgs, + reporter, }) }) @@ -584,7 +602,7 @@ async function resolutions({ file, args = {} }) { } // Get base64 version - const base64Image = await base64({ file, args: base64Args }) + const base64Image = await base64({ file, args: base64Args, reporter }) const fallbackSrc = images[0].src const srcSet = images @@ -622,7 +640,7 @@ async function resolutions({ file, args = {} }) { } } -async function notMemoizedtraceSVG({ file, args, fileArgs }) { +async function notMemoizedtraceSVG({ file, args, fileArgs, reporter }) { const potrace = require(`potrace`) const trace = Promise.promisify(potrace.trace) const defaultArgs = { @@ -647,7 +665,7 @@ async function notMemoizedtraceSVG({ file, args, fileArgs }) { try { pipeline = sharp(file.absolutePath).rotate() } catch (err) { - report.error(`Failed to process image ${file.absolutePath}`, err) + reportError(`Failed to process image ${file.absolutePath}`, err, reporter) return null } From 58b4344287daa4727adb4d24eb12b1ada627fd8d Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Sun, 18 Feb 2018 19:49:11 +0100 Subject: [PATCH 2/4] [gatsby-transformer-sharp] pass reporter to gatsby-plugin-sharp --- .../src/extend-node-type.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-transformer-sharp/src/extend-node-type.js b/packages/gatsby-transformer-sharp/src/extend-node-type.js index 779d2f136f463..c01a4b06d0962 100644 --- a/packages/gatsby-transformer-sharp/src/extend-node-type.js +++ b/packages/gatsby-transformer-sharp/src/extend-node-type.js @@ -89,7 +89,12 @@ const PotraceType = new GraphQLInputObjectType({ }, }) -module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { +module.exports = ({ + type, + pathPrefix, + getNodeAndSavePathDependency, + reporter, +}) => { if (type.name !== `ImageSharp`) { return {} } @@ -172,6 +177,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { resolutions({ file, args, + reporter, }) ).then(({ src }) => src) }, @@ -187,6 +193,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { resolutions({ file, args, + reporter, }) ).then(({ srcSet }) => srcSet) }, @@ -242,6 +249,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { resolutions({ file, args, + reporter, }) ).then(o => Object.assign({}, o, { @@ -275,6 +283,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { sizes({ file, args, + reporter, }) ).then(({ src }) => src) }, @@ -290,6 +299,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { sizes({ file, args, + reporter, }) ).then(({ srcSet }) => srcSet) }, @@ -347,6 +357,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { sizes({ file, args, + reporter, }) ).then(o => Object.assign({}, o, { @@ -415,6 +426,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { resolutions({ file, args, + reporter, }) ).then(o => Object.assign({}, o, { @@ -483,6 +495,7 @@ module.exports = ({ type, pathPrefix, getNodeAndSavePathDependency }) => { sizes({ file, args, + reporter, }) ).then(o => Object.assign({}, o, { From da477e87639bea65b9e0ad0403b340edce1323ec Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Sun, 18 Feb 2018 19:51:06 +0100 Subject: [PATCH 3/4] [gatsby-remark-images] pass reporter to gatsby-plugin-sharp --- packages/gatsby-remark-images/src/index.js | 3 ++- packages/gatsby-transformer-remark/src/extend-node-type.js | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 7d064851ceab5..c9f3c9949e2f8 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -14,7 +14,7 @@ const slash = require(`slash`) // 4. Create the responsive images. // 5. Set the html w/ aspect ratio helper. module.exports = ( - { files, markdownNode, markdownAST, pathPrefix, getNode }, + { files, markdownNode, markdownAST, pathPrefix, getNode, reporter }, pluginOptions ) => { const defaults = { @@ -60,6 +60,7 @@ module.exports = ( let responsiveSizesResult = await sizes({ file: imageNode, args: options, + reporter, }) // Calculate the paddingBottom % diff --git a/packages/gatsby-transformer-remark/src/extend-node-type.js b/packages/gatsby-transformer-remark/src/extend-node-type.js index 96e481cbbf34c..c0f4dbe622ea7 100644 --- a/packages/gatsby-transformer-remark/src/extend-node-type.js +++ b/packages/gatsby-transformer-remark/src/extend-node-type.js @@ -52,7 +52,7 @@ const withPathPrefix = (url, pathPrefix) => (pathPrefix + url).replace(/\/\//, `/`) module.exports = ( - { type, store, pathPrefix, getNode, cache }, + { type, store, pathPrefix, getNode, cache, reporter }, pluginOptions ) => { if (type.name !== `MarkdownRemark`) { @@ -104,6 +104,7 @@ module.exports = ( markdownNode, files, getNode, + reporter, }, plugin.pluginOptions ) @@ -170,6 +171,7 @@ module.exports = ( getNode, files, pathPrefix, + reporter, }, plugin.pluginOptions ) From 5a8f5d0852b202e8673c543f8d7e6f581a0a13e8 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Sun, 18 Feb 2018 19:51:57 +0100 Subject: [PATCH 4/4] [gatsby-remark-images] bail early if gatsby-plugin-sizes couldn't generate sizes --- packages/gatsby-remark-images/src/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index c9f3c9949e2f8..9a4fc93fb7ec9 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -63,6 +63,10 @@ module.exports = ( reporter, }) + if (!responsiveSizesResult) { + return resolve() + } + // Calculate the paddingBottom % const ratio = `${1 / responsiveSizesResult.aspectRatio * 100}%`