feat(gatsby-cli): move progressbar into ink (gatsbyjs#14220)

package.json

@@ -17,7 +17,7 @@
     "md5-file": "^3.1.1",
     "mime": "^2.2.0",
     "pretty-bytes": "^4.0.2",
-    "progress": "^1.1.8",
+    "progress": "^2.0.3",
     "read-chunk": "^3.0.0",
     "valid-url": "^1.0.9",
     "xstate": "^3.1.0"

src/__tests__/create-remote-file-node.js

@@ -19,30 +19,31 @@ jest.mock(`got`, () => {
     stream: jest.fn(),
   }
 })
-jest.mock(
-  `progress`,
-  () =>
-    class ProgressBar {
-      static total = 0
-      static tick = jest.fn(() => (ProgressBar.total -= 1))
-
-      total = ProgressBar.total
-      tick = ProgressBar.tick
-    }
-)
+
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {
+    createProgress: jest.fn(),
+  }
+})
 jest.mock(`../create-file-node`, () => {
   return {
     createFileNode: jest.fn(),
   }
 })
+const { createProgress } = require(`gatsby-cli/lib/reporter`)
+const progressBar = {
+  start: jest.fn(),
+  total: 0,
+  tick: jest.fn(),
+}
+createProgress.mockImplementation(() => progressBar)
+
 const got = require(`got`)
-const ProgressBar = require(`progress`)
 const createRemoteFileNode = require(`../create-remote-file-node`)
 const { createFileNode } = require(`../create-file-node`)
 
 beforeEach(() => {
-  ProgressBar.total = 0
-  ProgressBar.tick.mockClear()
+  progressBar.tick.mockClear()
 })
 
 describe(`create-remote-file-node`, () => {
@@ -73,8 +74,8 @@ describe(`create-remote-file-node`, () => {
 
         expect(value).rejects.toMatch(`wrong url: `)
 
-        expect(ProgressBar.total).toBe(0)
-        expect(ProgressBar.tick).not.toHaveBeenCalled()
+        expect(progressBar.total).toBe(0)
+        expect(progressBar.tick).not.toHaveBeenCalled()
       })
     })
   })
@@ -141,7 +142,8 @@ describe(`create-remote-file-node`, () => {
     it(`invokes ProgressBar tick`, async () => {
       await setup()
 
-      expect(ProgressBar.tick).toHaveBeenCalledTimes(1)
+      expect(progressBar.total).toBe(1)
+      expect(progressBar.tick).toHaveBeenCalledTimes(1)
     })
 
     describe(`requesting remote image`, () => {

src/__tests__/utils.js

@@ -1,4 +1,13 @@
-const { getRemoteFileExtension, getRemoteFileName, slash } = require(`../utils`)
+jest.mock(`gatsby-cli/lib/reporter`)
+jest.mock(`progress`)
+const {
+  getRemoteFileExtension,
+  getRemoteFileName,
+  createProgress,
+  slash,
+} = require(`../utils`)
+const reporter = require(`gatsby-cli/lib/reporter`)
+const progress = require(`progress`)
 
 describe(`create remote file node`, () => {
   it(`can correctly retrieve file name and extensions`, () => {
@@ -23,6 +32,24 @@ describe(`create remote file node`, () => {
   })
 })
 
+describe(`createProgress`, () => {
+  it(`should use createProgress from gatsby-cli when available`, () => {
+    createProgress(`test`)
+    expect(reporter.createProgress).toBeCalled()
+    expect(progress).not.toBeCalled()
+  })
+
+  it(`should fallback to a local implementation`, () => {
+    reporter.createProgress = null
+    const bar = createProgress(`test`)
+    expect(progress).toHaveBeenCalledTimes(1)
+    expect(bar).toHaveProperty(`start`, expect.any(Function))
+    expect(bar).toHaveProperty(`tick`, expect.any(Function))
+    expect(bar).toHaveProperty(`done`, expect.any(Function))
+    expect(bar).toHaveProperty(`total`)
+  })
+})
+
 describe(`slash path`, () => {
   it(`can correctly slash path`, () => {
     ;[
@@ -34,6 +61,7 @@ describe(`slash path`, () => {
       expect(slash(path)).toBe(expectRes)
     })
   })
+
   it(`does not modify extended length paths`, () => {
     const extended = `\\\\?\\some\\path`
     expect(slash(extended)).toBe(extended)

src/create-remote-file-node.js

@@ -6,19 +6,15 @@ const { isWebUri } = require(`valid-url`)
 const Queue = require(`better-queue`)
 const readChunk = require(`read-chunk`)
 const fileType = require(`file-type`)
-const ProgressBar = require(`progress`)
+const { createProgress } = require(`./utils`)
 
 const { createFileNode } = require(`./create-file-node`)
 const { getRemoteFileExtension, getRemoteFileName } = require(`./utils`)
 const cacheId = url => `create-remote-file-node-${url}`
 
-const bar = new ProgressBar(
-  `Downloading remote files [:bar] :current/:total :elapsed secs :percent`,
-  {
-    total: 0,
-    width: 30,
-  }
-)
+let bar
+// Keep track of the total number of jobs we push in the queue
+let totalJobs = 0
 
 /********************
  * Type Definitions *
@@ -84,6 +80,14 @@ const queue = new Queue(pushToQueue, {
   concurrent: process.env.GATSBY_CONCURRENT_DOWNLOAD || 200,
 })
 
+// when the queue is empty we stop the progressbar
+queue.on(`drain`, () => {
+  if (bar) {
+    bar.done()
+  }
+  totalJobs = 0
+})
+
 /**
  * @callback {Queue~queueCallback}
  * @param {*} error
@@ -271,9 +275,6 @@ const pushTask = task =>
       })
   })
 
-// Keep track of the total number of jobs we push in the queue
-let totalJobs = 0
-
 /***************
  * Entry Point *
  ***************/
@@ -329,6 +330,11 @@ module.exports = ({
     return Promise.reject(`wrong url: ${url}`)
   }
 
+  if (totalJobs === 0) {
+    bar = createProgress(`Downloading remote files`)
+    bar.start()
+  }
+
   totalJobs += 1
   bar.total = totalJobs
 

src/utils.js

@@ -1,5 +1,7 @@
 const path = require(`path`)
 const Url = require(`url`)
+const ProgressBar = require(`progress`)
+const reporter = require(`gatsby-cli/lib/reporter`)
 
 /**
  * getParsedPath
@@ -40,6 +42,33 @@ export function getRemoteFileName(url) {
   return getParsedPath(url).name
 }
 
+// TODO remove in V3
+export function createProgress(message) {
+  if (reporter.createProgress) {
+    return reporter.createProgress(message)
+  }
+
+  const bar = new ProgressBar(
+    ` [:bar] :current/:total :elapsed s :percent ${message}`,
+    {
+      total: 0,
+      width: 30,
+      clear: true,
+    }
+  )
+
+  return {
+    start() {},
+    tick() {
+      bar.tick()
+    },
+    done() {},
+    set total(value) {
+      bar.total = value
+    },
+  }
+}
+
 /**
  * slash
  * --