fix(*): fix gatsby-cli dep in source-filesystem & plugin-sharp (#14881)

Bring back progressbar functionality in ink and npm fixes.

docs/docs/schema-customization.md

@@ -801,6 +801,7 @@ exports.createResolvers = ({
   createNodeId,
   createResolvers,
   store,
+  reporter,
 }) => {
   const { createNode } = actions
   createResolvers({
@@ -814,6 +815,7 @@ exports.createResolvers = ({
             cache,
             createNode,
             createNodeId,
+            reporter,
           })
         },
       },

examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js

@@ -1,7 +1,14 @@
 const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
 
 exports.onCreateNode = async (
-  { actions: { createNode }, node, createContentDigest, store, cache },
+  {
+    actions: { createNode },
+    node,
+    createContentDigest,
+    store,
+    cache,
+    reporter,
+  },
   { filter, nodeName = `localFile` }
 ) => {
   if (filter(node)) {
@@ -11,6 +18,7 @@ exports.onCreateNode = async (
       cache,
       createNode,
       createNodeId: createContentDigest,
+      reporter,
     })
 
     if (fileNode) {

examples/using-gatsby-source-graphql/gatsby-node.js

@@ -35,6 +35,7 @@ exports.createResolvers = ({
   createNodeId,
   createResolvers,
   store,
+  reporter,
 }) => {
   const { createNode } = actions
   createResolvers({
@@ -64,6 +65,7 @@ exports.createResolvers = ({
             cache,
             createNode,
             createNodeId,
+            reporter,
           })
         },
       },

packages/gatsby-cli/package.json

@@ -33,6 +33,7 @@
     "object.entries": "^1.1.0",
     "opentracing": "^0.14.3",
     "pretty-error": "^2.1.1",
+    "progress": "^2.0.3",
     "prompts": "^2.1.0",
     "react": "^16.8.4",
     "resolve-cwd": "^2.0.0",

packages/gatsby-cli/src/reporter/index.js

@@ -93,13 +93,88 @@ const reporter: Reporter = {
     const spanArgs = parentSpan ? { childOf: parentSpan } : {}
     const span = tracer.startSpan(name, spanArgs)
 
-    const activity = reporterInstance.createActivity(name)
+    const activity = reporterInstance.createActivity({
+      type: `spinner`,
+      id: name,
+      status: ``,
+    })
 
     return {
-      ...activity,
+      start() {
+        activity.update({
+          startTime: process.hrtime(),
+        })
+      },
+      setStatus(status) {
+        activity.update({
+          status: status,
+        })
+      },
       end() {
         span.finish()
-        activity.end()
+        activity.done()
+      },
+      span,
+    }
+  },
+
+  /**
+   * Create a progress bar for an activity
+   * @param {string} name - Name of activity.
+   * @param {number} total - Total items to be processed.
+   * @param {number} start - Start count to show.
+   * @param {ActivityArgs} activityArgs - optional object with tracer parentSpan
+   * @returns {ActivityTracker} The activity tracker.
+   */
+  createProgress(
+    name: string,
+    total,
+    start = 0,
+    activityArgs: ActivityArgs = {}
+  ): ActivityTracker {
+    const { parentSpan } = activityArgs
+    const spanArgs = parentSpan ? { childOf: parentSpan } : {}
+    const span = tracer.startSpan(name, spanArgs)
+
+    let hasStarted = false
+    let current = start
+    const activity = reporterInstance.createActivity({
+      type: `progress`,
+      id: name,
+      current,
+      total,
+    })
+
+    return {
+      start() {
+        if (hasStarted) {
+          return
+        }
+
+        hasStarted = true
+        activity.update({
+          startTime: process.hrtime(),
+        })
+      },
+      setStatus(status) {
+        activity.update({
+          status: status,
+        })
+      },
+      tick() {
+        activity.update({
+          current: ++current,
+        })
+      },
+      done() {
+        span.finish()
+        activity.done()
+      },
+      set total(value) {
+        total = value
+        activity.update({
+          total: value,
+        })
       },
       span,
     }

packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { Box } from "ink"
+import calcElapsedTime from "../../../../util/calc-elapsed-time"
+
+const maxWidth = 30
+const minWidth = 10
+
+const getLength = prop => String(prop).length
+
+export default function ProgressBar({ message, current, total, startTime }) {
+  const percentage = total ? Math.round((current / total) * 100) : 0
+  const terminalWidth = process.stdout.columns || 80
+  const availableWidth =
+    terminalWidth -
+    getLength(message) -
+    getLength(current) -
+    getLength(total) -
+    getLength(percentage) -
+    11 // margins + extra characters
+
+  const progressBarWidth = Math.max(
+    minWidth,
+    Math.min(maxWidth, availableWidth)
+  )
+
+  return (
+    <Box flexDirection="row">
+      <Box marginRight={3} width={progressBarWidth}>
+        [
+        <Box width={progressBarWidth - 2}>
+          {`=`.repeat(((progressBarWidth - 2) * percentage) / 100)}
+        </Box>
+        ]
+      </Box>
+      <Box marginRight={1}>{calcElapsedTime(startTime)} s</Box>
+      <Box marginRight={1}>
+        {current}/{total}
+      </Box>
+      <Box marginRight={1}>{`` + percentage}%</Box>
+      <Box textWrap="truncate">{message}</Box>
+    </Box>
+  )
+}

packages/gatsby-cli/src/reporter/reporters/ink/components/activity.js → packages/gatsby-cli/src/reporter/reporters/ink/components/spinner.js

@@ -1,14 +1,7 @@
 import React from "react"
-import convertHrtime from "convert-hrtime"
 import { Box } from "ink"
 import Spinner from "ink-spinner"
 
-export const calcElapsedTime = startTime => {
-  const elapsed = process.hrtime(startTime)
-
-  return convertHrtime(elapsed)[`seconds`].toFixed(3)
-}
-
 export default function Activity({ name, status }) {
   let statusText = name
   if (status) {

packages/gatsby-cli/src/reporter/reporters/ink/reporter.js

@@ -1,19 +1,29 @@
 import React from "react"
 import { Static, Box } from "ink"
-import { isCI } from "ci-info"
 import chalk from "chalk"
-import Activity, { calcElapsedTime } from "./components/activity"
+import Spinner from "./components/spinner"
+import ProgressBar from "./components/progress-bar"
 import { Message } from "./components/messages"
+import isTTY from "../../../util/is-tty"
+import calcElapsedTime from "../../../util/calc-elapsed-time"
+
+const showProgress = isTTY
+
+const successTextGenerator = {
+  spinner: activity => {
+    let successText = `${activity.id} - ${calcElapsedTime(
+      activity.startTime
+    )} s`
+    if (activity.status) {
+      successText += ` — ${activity.status}`
+    }
 
-const showProgress = process.stdout.isTTY && !isCI
-
-const generateActivityFinishedText = (name, activity) => {
-  let successText = `${name} - ${calcElapsedTime(activity.startTime)} s`
-  if (activity.status) {
-    successText += ` — ${activity.status}`
-  }
-
-  return successText
+    return successText
+  },
+  progress: activity =>
+    `${activity.id} — ${activity.current}/${activity.total} - ${calcElapsedTime(
+      activity.startTime
+    )} s`,
 }
 
 export default class GatsbyReporter extends React.Component {
@@ -26,44 +36,40 @@ export default class GatsbyReporter extends React.Component {
 
   format = chalk
 
-  createActivity = name => {
+  createActivity = ({ id, ...options }) => {
+    this.setState(state => {
+      return {
+        activities: {
+          ...state.activities,
+          [id]: {
+            id,
+            ...options,
+          },
+        },
+      }
+    })
+
     return {
-      start: () => {
-        this.setState(state => {
-          return {
-            activities: {
-              ...state.activities,
-              [name]: {
-                status: ``,
-                startTime: process.hrtime(),
-              },
-            },
-          }
-        })
-      },
-      setStatus: status => {
+      update: newState => {
         this.setState(state => {
-          const activity = state.activities[name]
-
           return {
             activities: {
               ...state.activities,
-              [name]: {
-                ...activity,
-                status: status,
+              [id]: {
+                ...state.activities[id],
+                ...newState,
               },
             },
           }
         })
       },
-      end: () => {
-        const activity = this.state.activities[name]
-
-        this.success(generateActivityFinishedText(name, activity))
+      done: () => {
+        const activity = this.state.activities[id]
+        this.success(successTextGenerator[activity.type]({ id, ...activity }))
 
         this.setState(state => {
           const activities = { ...state.activities }
-          delete activities[name]
+          delete activities[id]
 
           return {
             activities,
@@ -116,27 +122,48 @@ export default class GatsbyReporter extends React.Component {
   }
 
   render() {
+    const { activities, messages, disableColors } = this.state
+
+    const spinners = []
+    const progressBars = []
+    if (showProgress) {
+      Object.keys(activities).forEach(activityName => {
+        const activity = activities[activityName]
+        if (activity.type === `spinner`) {
+          spinners.push(activity)
+        }
+        if (activity.type === `progress` && activity.startTime) {
+          progressBars.push(activity)
+        }
+      })
+    }
+
     return (
       <Box flexDirection="column">
         <Box flexDirection="column">
           <Static>
-            {this.state.messages.map((msg, index) => (
+            {messages.map((msg, index) => (
               <Box textWrap="wrap" key={index}>
-                <Message type={msg.type} hideColors={this.state.disableColors}>
+                <Message type={msg.type} hideColors={disableColors}>
                   {msg.text}
                 </Message>
               </Box>
             ))}
           </Static>
 
-          {showProgress &&
-            Object.keys(this.state.activities).map(activityName => (
-              <Activity
-                key={activityName}
-                name={activityName}
-                {...this.state.activities[activityName]}
-              />
-            ))}
+          {spinners.map(activity => (
+            <Spinner key={activity.id} name={activity.id} {...activity} />
+          ))}
+
+          {progressBars.map(activity => (
+            <ProgressBar
+              key={activity.id}
+              message={activity.id}
+              total={activity.total}
+              current={activity.current}
+              startTime={activity.startTime}
+            />
+          ))}
         </Box>
       </Box>
     )