Ts migration/convert yurnalist logger (#24224)

* chore(gatsby-cli): Convert yurnalist logger to TypeScript

* chore(gatsby-cli): Convert yurnalist logger to TypeScript

* chore(gatsby-cli): Convert yurnalist logger to TypeScript

* fix lint error

* support tsx

* fix tsx support

* fix build process in cli

jest-transformer.js

@@ -4,7 +4,7 @@ module.exports = require(`babel-jest`).createTransformer({
   overrides: [
     ...(babelPreset.overrides || []),
     {
-      test: `**/*.ts`,
+      test: [`**/*.ts`, `**/*.tsx`],
       plugins: [[`@babel/plugin-transform-typescript`, { isTSX: true }]],
     },
   ],

packages/gatsby-cli/src/reporter/loggers/ink/index.tsx

@@ -12,8 +12,10 @@ const ConnectedCLI: React.FC = (): React.ReactElement => {
   return <CLI showStatusBar={Boolean(showStatusBar)} logs={state.logs} />
 }
 
-render(
-  <StoreStateProvider>
-    <ConnectedCLI />
-  </StoreStateProvider>
-)
+export function initializeINKLogger(): void {
+  render(
+    <StoreStateProvider>
+      <ConnectedCLI />
+    </StoreStateProvider>
+  )
+}

packages/gatsby-cli/src/reporter/loggers/ipc/index.ts

@@ -28,7 +28,7 @@ const sanitizeAction = (action: ActionsUnion): ActionsUnion => {
   return copiedAction
 }
 
-export const ipcLogger = (): void => {
+export const initializeIPCLogger = (): void => {
   onLogAction((action: ActionsUnion) => {
     if (!process.send) return
 

packages/gatsby-cli/src/reporter/loggers/yurnalist/index.ts

@@ -0,0 +1,138 @@
+import { onLogAction } from "../../redux"
+import {
+  Actions,
+  LogLevels,
+  ActivityLogLevels,
+  ActivityTypes,
+} from "../../constants"
+
+import { createReporter } from "yurnalist"
+import ProgressBar from "progress"
+import chalk from "chalk"
+import { IUpdateActivity } from "../../redux/types"
+
+interface IYurnalistActivities {
+  [activityId: string]: {
+    text: string | undefined
+    statusText: string | undefined
+    update(payload: IUpdateActivity["payload"]): void
+    end(): void
+  }
+}
+
+export function initializeYurnalistLogger(): void {
+  const activities: IYurnalistActivities = {}
+  const yurnalist = createReporter({ emoji: true, verbose: true })
+
+  const levelToYurnalist = {
+    [LogLevels.Log]: yurnalist.log.bind(yurnalist),
+    [LogLevels.Warning]: yurnalist.warn.bind(yurnalist),
+    [LogLevels.Error]: yurnalist.error.bind(yurnalist),
+    [LogLevels.Info]: yurnalist.info.bind(yurnalist),
+    [LogLevels.Success]: yurnalist.success.bind(yurnalist),
+    [ActivityLogLevels.Success]: yurnalist.success.bind(yurnalist),
+    [ActivityLogLevels.Failed]: (text: string): void => {
+      yurnalist.log(`${chalk.red(`failed`)} ${text}`)
+    },
+    [ActivityLogLevels.Interrupted]: (text: string): void => {
+      yurnalist.log(`${chalk.gray(`not finished`)} ${text}`)
+    },
+  }
+
+  onLogAction(action => {
+    switch (action.type) {
+      case Actions.Log: {
+        const yurnalistMethod = levelToYurnalist[action.payload.level]
+        if (!yurnalistMethod) {
+          process.stdout.write(`NO "${action.payload.level}" method\n`)
+        } else {
+          let message = action.payload.text
+          if (action.payload.duration) {
+            message += ` - ${action.payload.duration.toFixed(3)}s`
+          }
+          if (action.payload.statusText) {
+            message += ` - ${action.payload.statusText}`
+          }
+          yurnalistMethod(message)
+        }
+        break
+      }
+      case Actions.StartActivity: {
+        if (action.payload.type === ActivityTypes.Spinner) {
+          const spinner = yurnalist.activity()
+          spinner.tick(action.payload.text)
+
+          const activity = {
+            text: action.payload.text,
+            statusText: action.payload.statusText,
+            update(payload: any): void {
+              // TODO: I'm not convinced that this is ever called with a text property.
+              // From searching the codebase it appears that we do not ever assign a text
+              // property during the IUpdateActivity action.
+              if (payload.text) {
+                activity.text = payload.text
+              }
+              if (payload.statusText) {
+                activity.statusText = payload.statusText
+              }
+
+              let message = activity.text
+              if (activity.statusText) {
+                message += ` - ${activity.statusText}`
+              }
+
+              message += ` id:"${action.payload.id}"`
+
+              spinner.tick(message)
+            },
+            end(): void {
+              spinner.end()
+            },
+          }
+          activities[action.payload.id] = activity
+        } else if (action.payload.type === ActivityTypes.Progress) {
+          const bar = new ProgressBar(
+            ` [:bar] :current/:total :elapsed s :percent ${action.payload.text}`,
+            {
+              total: action.payload.total,
+              curr: action.payload.current,
+              width: 30,
+              clear: true,
+            }
+          )
+
+          activities[action.payload.id] = {
+            text: undefined,
+            statusText: undefined,
+            update(payload): void {
+              if (payload.total) {
+                bar.total = payload.total
+              }
+              if (payload.current) {
+                bar.curr = payload.current
+              }
+
+              bar.tick(0)
+            },
+            end(): void {},
+          }
+        }
+        break
+      }
+      case Actions.UpdateActivity: {
+        const activity = activities[action.payload.id]
+        if (activity) {
+          activity.update(action.payload)
+        }
+        break
+      }
+      case Actions.EndActivity: {
+        const activity = activities[action.payload.id]
+        if (activity) {
+          activity.end()
+          delete activities[action.payload.id]
+        }
+      }
+    }
+  })
+}

packages/gatsby-cli/src/reporter/start-logger.ts

@@ -3,7 +3,10 @@
  */
 import semver from "semver"
 import { isCI } from "gatsby-core-utils"
-import { ipcLogger } from "./loggers/ipc"
+import { initializeIPCLogger } from "./loggers/ipc"
+import { initializeJSONLogger } from "./loggers/json"
+import { initializeYurnalistLogger } from "./loggers/yurnalist"
+import { initializeINKLogger } from "./loggers/ink"
 
 export const startLogger = (): void => {
   let inkExists = false
@@ -28,14 +31,14 @@ export const startLogger = (): void => {
   if (process.send) {
     // process.env.FORCE_COLOR = `0`
 
-    ipcLogger()
+    initializeIPCLogger()
   }
 
   if (process.env.GATSBY_LOGGER.includes(`json`)) {
-    require(`./loggers/json`)
+    initializeJSONLogger()
   } else if (process.env.GATSBY_LOGGER.includes(`yurnalist`)) {
-    require(`./loggers/yurnalist`)
+    initializeYurnalistLogger()
   } else {
-    require(`./loggers/ink`)
+    initializeINKLogger()
   }
 }