chore: update ink to v3

packages/gatsby-cli/package.json

@@ -27,8 +27,8 @@
     "gatsby-recipes": "^0.2.3",
     "gatsby-telemetry": "^1.3.26",
     "hosted-git-info": "^3.0.4",
-    "ink": "^2.7.1",
-    "ink-spinner": "^3.1.0",
+    "ink": "^3.0.4",
+    "ink-spinner": "^4.0.1",
     "is-valid-path": "^0.1.1",
     "lodash": "^4.17.15",
     "meant": "^1.0.1",

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

@@ -63,30 +63,6 @@ class CLI extends React.Component<ICLIProps, ICLIState> {
       )
     }
 
-    /*
-      Only operation on messages array is to push new message into it. Once
-      message is there it can't change. Because of that we can do single
-      transform from message object to react element and store it.
-      This will avoid calling React.createElement completely for every message
-      that can't change.
-    */
-    if (messages.length > this.memoizedReactElementsForMessages.length) {
-      for (
-        let index = this.memoizedReactElementsForMessages.length;
-        index < messages.length;
-        index++
-      ) {
-        const msg = messages[index]
-        this.memoizedReactElementsForMessages.push(
-          msg.level === `ERROR` ? (
-            <ErrorComponent details={msg as IStructuredError} key={index} />
-          ) : (
-            <Message key={index} {...(msg as IMessageProps)} />
-          )
-        )
-      }
-    }
-
     const spinners: Array<IActivity> = []
     const progressBars: Array<IActivity> = []
     if (showProgress) {
@@ -107,7 +83,21 @@ class CLI extends React.Component<ICLIProps, ICLIState> {
     return (
       <Box flexDirection="column">
         <Box flexDirection="column">
-          <Static>{this.memoizedReactElementsForMessages}</Static>
+          <Static items={messages}>
+            {message =>
+              message.level === `ERROR` ? (
+                <ErrorComponent
+                  details={message as IStructuredError}
+                  key={messages.indexOf(message)}
+                />
+              ) : (
+                <Message
+                  key={messages.indexOf(message)}
+                  {...(message as IMessageProps)}
+                />
+              )
+            }
+          </Static>
 
           {spinners.map(activity => (
             <Spinner key={activity.id} {...activity} />

packages/gatsby-cli/src/reporter/loggers/ink/components/develop.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from "react"
-import { Box, Color, StdoutContext } from "ink"
+import { Box, Text, useStdout } from "ink"
 import StoreStateContext from "../context"
 import { ActivityStatuses } from "../../../constants"
 import { createLabel } from "./utils"
@@ -24,7 +24,12 @@ const getLabel = (
 
 // Track the width and height of the terminal. Responsive app design baby!
 const useTerminalResize = (): Array<number> => {
-  const { stdout } = useContext(StdoutContext)
+  const { stdout } = useStdout()
+
+  if (!stdout) {
+    return [0]
+  }
+
   const [sizes, setSizes] = useState([stdout.columns, stdout.rows])
   useEffect(() => {
     const resizeListener = (): void => {
@@ -52,13 +57,15 @@ const Develop: React.FC<IDevelopProps> = ({ pagesCount, appName, status }) => {
 
   return (
     <Box flexDirection="column" marginTop={2}>
-      <Box textWrap={`truncate`}>{`—`.repeat(width)}</Box>
+      <Box>
+        <Text wrap="truncate">{`—`.repeat(width)}</Text>
+      </Box>
       <Box height={1} flexDirection="row">
         <StatusLabel />
         <Box flexGrow={1} />
-        <Color>{appName}</Color>
+        <Text>{appName}</Text>
         <Box flexGrow={1} />
-        <Color>{pagesCount} pages</Color>
+        <Text>{pagesCount} pages</Text>
       </Box>
     </Box>
   )

packages/gatsby-cli/src/reporter/loggers/ink/components/error.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react"
 import path from "path"
-import { Color, Box } from "ink"
+import { Box, Text } from "ink"
 import { IStructuredError } from "../../../../structured-errors/types"
 
 interface IFileProps {
@@ -21,10 +21,10 @@ const File: FunctionComponent<IFileProps> = ({ filePath, location }) => {
   }
 
   return (
-    <Color blue>
+    <Text color="blue">
       {path.relative(process.cwd(), filePath)}
       {locString}
-    </Color>
+    </Text>
   )
 }
 
@@ -38,7 +38,7 @@ const DocsLink: FunctionComponent<IDocsLinkProps> = ({ docsUrl }) => {
   if (docsUrl === `https://gatsby.dev/issue-how-to`) return null
   return (
     <Box marginTop={1}>
-      See our docs page for more info on this error: {docsUrl}
+      <Text>See our docs page for more info on this error: {docsUrl}</Text>
     </Box>
   )
 }
@@ -56,17 +56,19 @@ export const Error: FunctionComponent<IErrorProps> = React.memo(
         <Box flexDirection="column">
           <Box>
             <Box marginRight={1}>
-              <Color black bgRed>
+              <Text color="black" backgroundColor="red">
                 {` ${details.level} `}
                 {details.code ? `#${details.code} ` : ``}
-              </Color>
-              <Color red>{details.type ? ` ` + details.type : ``}</Color>
+              </Text>
+              <Text color="red">{details.type ? ` ` + details.type : ``}</Text>
             </Box>
           </Box>
-          <Box marginTop={1}>{details.text}</Box>
+          <Box marginTop={1}>
+            <Text>{details.text}</Text>
+          </Box>
           {details.filePath && (
             <Box marginTop={1}>
-              File:{` `}
+              <Text>File:{` `}</Text>
               <File filePath={details.filePath} location={details.location} />
             </Box>
           )}

packages/gatsby-cli/src/reporter/loggers/ink/components/messages.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box } from "ink"
+import { Box, Text } from "ink"
 import { createLabel } from "./utils"
 
 import { ActivityLogLevels, LogLevels } from "../../../constants"
@@ -44,16 +44,18 @@ export const Message = React.memo<IMessageProps>(
       message += ` - ${statusText}`
     }
     if (!level || level === `LOG`) {
-      return <>{message}</>
+      return <Text>{message}</Text>
     }
 
     const TextLabel = getLabel(level)
 
     return (
-      <Box textWrap="wrap" flexDirection="row">
-        <TextLabel />
-        {` `}
-        {message}
+      <Box flexDirection="row">
+        <Text wrap="wrap">
+          <TextLabel />
+          {` `}
+          {message}
+        </Text>
       </Box>
     )
   }

packages/gatsby-cli/src/reporter/loggers/ink/components/progress-bar.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box } from "ink"
+import { Box, Text } from "ink"
 import { calcElapsedTime } from "../../../../util/calc-elapsed-time"
 
 const maxWidth = 30
@@ -38,18 +38,26 @@ export function ProgressBar({
   return (
     <Box flexDirection="row">
       <Box marginRight={3} width={progressBarWidth}>
-        [
+        <Text>[</Text>
         <Box width={progressBarWidth - 2}>
-          {`=`.repeat(((progressBarWidth - 2) * percentage) / 100)}
+          <Text>{`=`.repeat(((progressBarWidth - 2) * percentage) / 100)}</Text>
         </Box>
-        ]
+        <Text>]</Text>
       </Box>
-      <Box marginRight={1}>{calcElapsedTime(startTime)} s</Box>
       <Box marginRight={1}>
-        {current}/{total}
+        <Text>{calcElapsedTime(startTime)} s</Text>
+      </Box>
+      <Box marginRight={1}>
+        <Text>
+          {current}/{total}
+        </Text>
+      </Box>
+      <Box marginRight={1}>
+        <Text>{`` + percentage}%</Text>
+      </Box>
+      <Box>
+        <Text wrap="truncate">{message}</Text>
       </Box>
-      <Box marginRight={1}>{`` + percentage}%</Box>
-      <Box textWrap="truncate">{message}</Box>
     </Box>
   )
 }

packages/gatsby-cli/src/reporter/loggers/ink/components/spinner.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box } from "ink"
+import { Box, Text } from "ink"
 import InkSpinner from "ink-spinner"
 
 interface ISpinnerProps {
@@ -14,7 +14,9 @@ export function Spinner({ text, statusText }: ISpinnerProps): JSX.Element {
 
   return (
     <Box>
-      <InkSpinner type="dots" /> {label}
+      <Text>
+        <InkSpinner type="dots" /> {label}
+      </Text>
     </Box>
   )
 }

packages/gatsby-cli/src/reporter/loggers/ink/components/utils.tsx

@@ -1,14 +1,11 @@
 import React, { FunctionComponent } from "react"
-import { Color, ColorProps } from "ink"
-
-export const ColorSwitcher: FunctionComponent<ColorProps> = ({
-  children,
-  ...props
-}) => <Color {...props}>{children}</Color>
+import { Text, TextProps } from "ink"
 
 export const createLabel = (
   text: string,
   color: string
-): FunctionComponent<ColorProps> => (...props): JSX.Element => (
-  <ColorSwitcher {...{ [color]: true, ...props }}>{text}</ColorSwitcher>
+): FunctionComponent<TextProps> => (...props): JSX.Element => (
+  <Text color={color} {...props}>
+    {text}
+  </Text>
 )

packages/gatsby-recipes/package.json

@@ -98,9 +98,9 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
-    "ink": "next",
+    "ink": "^3.0.4",
     "ink-select-input": "^4.0.0",
-    "ink-spinner": "^4.0.0-0",
+    "ink-spinner": "^4.0.1",
     "react": "^16.12.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.23.0",