[1.0] Fix edge case in processing images with gatsby-sharp

CHANGELOG.md

@@ -22,7 +22,7 @@ Our first beta!!! 🎉
 
 ### Fixed
 * Fix graphql compiler on typescript #949 @fabien0102
-* Replace react.createClass with ES6 classes in exmaples html.js, add PropTypes #1169 @abachuk
+* Replace react.createClass with ES6 classes in examples html.js, add PropTypes #1169 @abachuk
 * Fix windows build issue #1158 @kyleamathews
 * Use custom delimiter when flattening example values for enum fields so easy to convert back @kyleamathews
 * gatsby-remark-responsive-images: use span instead of div #1151 @rstacruz

docs/blog/gatsby-first-beta-release.md

@@ -22,15 +22,15 @@ Gatsby v1 take form and helping shape that and the growing community around it.
 
 ### What's part of v1
 
-Froom Gatsby's initial release just over two years ago, Gatsby has let you build
+From Gatsby's initial release just over two years ago, Gatsby has let you build
 static websites using React.js components as well as markdown, JSON,
 and YAML.
 
 Building on this strong foundation, v1 adds:
 
 * New plugin architecture (to date 45+ plugins have been written)
 * New data layer which lets you integrate data from both remote (CMSs, APIs, etc.) and local sources
-* Progress web app features such as automatic code and data splitting (by route), prefetching, and service worker and offline-first support
+* Progressive web app features such as automatic code and data splitting (by route), prefetching, and service worker and offline-first support
 
 ## Special thanks to
 
@@ -80,7 +80,7 @@ and companies.
 
 ### Fixed
 * Fix graphql compiler on typescript [#949](https://github.com/gatsbyjs/pull/949) @fabien0102
-* Replace react.createClass with ES6 classes in exmaples html.js, add PropTypes [#1169](https://github.com/gatsbyjs/pull/1169) @abachuk
+* Replace react.createClass with ES6 classes in examples html.js, add PropTypes [#1169](https://github.com/gatsbyjs/pull/1169) @abachuk
 * Fix windows build pull [#1158](https://github.com/gatsbyjs/pull/1158) @kyleamathews
 * Use custom delimiter when flattening example values for enum fields so easy to convert back @kyleamathews
 * gatsby-remark-responsive-images: use span instead of div [#1151](https://github.com/gatsbyjs/pull/1151) @rstacruz

packages/gatsby-plugin-sharp/src/index.js

@@ -30,17 +30,16 @@ const bar = new ProgressBar(
   }
 )
 
+let totalJobs = 0
 const processFile = (file, jobs, cb) => {
-  totalJobs += jobs.length
-  bar.total = _.sumBy(
-    Object.keys(toProcess),
-    key => _.values(toProcess[key]).length
-  )
+  // console.log("totalJobs", totalJobs)
+  bar.total = totalJobs
 
   let imagesFinished = 0
 
   // Wait for each job promise to resolve.
   Promise.all(jobs.map(job => job.finishedPromise)).then(() => cb())
+
   const pipeline = sharp(file).rotate()
   jobs.forEach(async job => {
     const args = job.args
@@ -133,7 +132,6 @@ const processFile = (file, jobs, cb) => {
   })
 }
 
-let totalJobs = 0
 const toProcess = {}
 const q = queue((task, callback) => {
   task(callback)
@@ -142,10 +140,11 @@ const q = queue((task, callback) => {
 const queueJob = job => {
   const inputFileKey = job.file.absolutePath.replace(/\./g, `%2E`)
   const outputFileKey = job.outputPath.replace(/\./g, `%2E`)
+  const jobPath = `${inputFileKey}.${outputFileKey}`
 
   // Check if the job has already been queued. If it has, there's nothing
   // to do, return.
-  if (_.has(toProcess, `${inputFileKey}.${outputFileKey}`)) {
+  if (_.has(toProcess, jobPath)) {
     return
   }
 
@@ -158,19 +157,17 @@ const queueJob = job => {
   if (toProcess[inputFileKey]) {
     notQueued = false
   }
-  _.set(
-    toProcess,
-    `${job.file.absolutePath.replace(/\./g, `%2E`)}.${job.outputPath.replace(
-      /\./g,
-      `%2E`
-    )}`,
-    job
-  )
-
-  // totalJobs += 1
+  _.set(toProcess, jobPath, job)
+
+  // console.log(`queueJob ${inputFileKey}.${outputFileKey}`)
+  totalJobs += 1
+
   if (notQueued) {
     q.push(cb => {
       // console.log("processing image", job.file.absolutePath)
+      const jobs = _.values(toProcess[inputFileKey])
+      // Delete the input key from the toProcess list so more jobs can be queued.
+      delete toProcess[inputFileKey]
       boundActionCreators.createJob(
         {
           id: `processing image ${job.file.absolutePath}`,
@@ -179,19 +176,15 @@ const queueJob = job => {
         { name: `gatsby-plugin-sharp` }
       )
       // We're now processing the file's jobs.
-      processFile(
-        job.file.absolutePath,
-        _.values(toProcess[inputFileKey]),
-        () => {
-          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()
+      })
     })
   }
 }

packages/gatsby-remark-responsive-image/src/index.js

@@ -54,6 +54,7 @@ module.exports = (
               file: imageNode,
               args: options,
             }).then(responsiveSizesResult => {
+              // console.log("responsiveSizesResult", responsiveSizesResult)
               // Calculate the paddingBottom %
               const ratio = `${1 / responsiveSizesResult.aspectRatio * 100}%`
 

www/package.json

@@ -5,28 +5,27 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "bluebird": "^3.4.6",
-    "gatsby": "canary",
-    "gatsby-link": "canary",
-    "gatsby-plugin-catch-links": "canary",
-    "gatsby-plugin-glamor": "canary",
-    "gatsby-plugin-google-analytics": "canary",
-    "gatsby-plugin-manifest": "canary",
-    "gatsby-plugin-nprogress": "canary",
-    "gatsby-plugin-offline": "canary",
-    "gatsby-plugin-react-helmet": "canary",
-    "gatsby-plugin-sharp": "canary",
-    "gatsby-remark-autolink-headers": "canary",
-    "gatsby-remark-copy-linked-files": "canary",
-    "gatsby-remark-prismjs": "canary",
-    "gatsby-remark-responsive-iframe": "canary",
-    "gatsby-remark-responsive-image": "canary",
-    "gatsby-remark-smartypants": "canary",
-    "gatsby-sharp": "canary",
-    "gatsby-source-filesystem": "canary",
-    "gatsby-transformer-documentationjs": "canary",
-    "gatsby-transformer-remark": "canary",
-    "gatsby-transformer-sharp": "canary",
-    "gatsby-transformer-yaml": "canary",
+    "gatsby": "next",
+    "gatsby-link": "next",
+    "gatsby-plugin-catch-links": "next",
+    "gatsby-plugin-glamor": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-nprogress": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-remark-autolink-headers": "next",
+    "gatsby-remark-copy-linked-files": "next",
+    "gatsby-remark-prismjs": "next",
+    "gatsby-remark-responsive-iframe": "next",
+    "gatsby-remark-responsive-image": "next",
+    "gatsby-remark-smartypants": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-documentationjs": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-transformer-yaml": "next",
     "lodash": "^4.16.6",
     "mitt": "^1.1.2",
     "parse-filepath": "^1.0.1",