perf(gatsby-cli): dont retain logs in memory in non-ink loggers (#34045)

Author: pieh

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

@@ -8,14 +8,15 @@ import { Message, IMessageProps } from "./components/messages"
 import { Error as ErrorComponent } from "./components/error"
 import Develop from "./components/develop"
 import PageTree from "./components/pageTree"
-import { IGatsbyCLIState, IActivity } from "../../redux/types"
+import { IGatsbyCLIState, IActivity, ILog } from "../../redux/types"
 import { ActivityLogLevels } from "../../constants"
 import { IStructuredError } from "../../../structured-errors/types"
 
 const showProgress = isTTY()
 
 interface ICLIProps {
   logs: IGatsbyCLIState
+  messages: Array<ILog>
   showStatusBar: boolean
   showPageTree: boolean
 }
@@ -48,7 +49,8 @@ class CLI extends React.Component<ICLIProps, ICLIState> {
 
   render(): React.ReactElement {
     const {
-      logs: { messages, activities },
+      logs: { activities },
+      messages,
       showStatusBar,
       showPageTree,
     } = this.props

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

@@ -1,22 +1,43 @@
 import React, { useState, useLayoutEffect, createContext } from "react"
 import { getStore, onLogAction } from "../../redux"
-import { IGatsbyCLIState } from "../../redux/types"
+import { IGatsbyCLIState, ActionsUnion, ILog } from "../../redux/types"
 import { IRenderPageArgs } from "../../types"
+import { Actions } from "../../constants"
 
-const StoreStateContext = createContext<{
+interface IStoreStateContext {
   logs: IGatsbyCLIState
+  messages: Array<ILog>
   pageTree: IRenderPageArgs | null
-}>(getStore().getState())
+}
+
+const StoreStateContext = createContext<IStoreStateContext>({
+  ...getStore().getState(),
+  messages: [],
+})
 
 export const StoreStateProvider: React.FC = ({
   children,
 }): React.ReactElement => {
-  const [state, setState] = useState(getStore().getState())
+  const [state, setState] = useState<IStoreStateContext>({
+    ...getStore().getState(),
+    messages: [],
+  })
 
   useLayoutEffect(
     () =>
-      onLogAction(() => {
-        setState(getStore().getState())
+      onLogAction((action: ActionsUnion) => {
+        if (action.type === Actions.Log) {
+          setState(state => {
+            return {
+              ...state,
+              messages: [...state.messages, action.payload],
+            }
+          })
+        } else {
+          setState(state => {
+            return { ...getStore().getState(), messages: state.messages }
+          })
+        }
       }),
     []
   )

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

@@ -17,6 +17,7 @@ const ConnectedCLI: React.FC = (): React.ReactElement => {
       showStatusBar={Boolean(showStatusBar)}
       showPageTree={Boolean(showPageTree)}
       logs={state.logs}
+      messages={state.messages}
     />
   )
 }

packages/gatsby-cli/src/reporter/redux/internal-actions.ts

@@ -128,7 +128,7 @@ export const createLog = ({
     type: Actions.Log,
     payload: {
       level,
-      text,
+      text: !text ? `\u2800` : text,
       statusText,
       duration,
       group,

packages/gatsby-cli/src/reporter/redux/reducers/logs.ts

@@ -3,7 +3,6 @@ import { Actions } from "../../constants"
 
 export const reducer = (
   state: IGatsbyCLIState = {
-    messages: [],
     activities: {},
     status: ``,
   },
@@ -17,18 +16,6 @@ export const reducer = (
       }
     }
 
-    case Actions.Log: {
-      if (!action.payload.text) {
-        // set empty character to fix ink
-        action.payload.text = `\u2800`
-      }
-
-      return {
-        ...state,
-        messages: [...state.messages, action.payload],
-      }
-    }
-
     case Actions.StartActivity: {
       const { id } = action.payload
       return {

packages/gatsby-cli/src/reporter/redux/types.ts

@@ -4,7 +4,6 @@ import { ErrorCategory } from "../../structured-errors/error-map"
 import { IRenderPageArgs } from "../types"
 
 export interface IGatsbyCLIState {
-  messages: Array<ILog>
   activities: {
     [id: string]: IActivity
   }
@@ -37,7 +36,7 @@ export interface IActivity {
   errored?: boolean
 }
 
-interface ILog {
+export interface ILog {
   level: string
   text: string | undefined
   statusText: string | undefined