fix(gatsby-cli): fix pagetree global cli (#33200)

Author: wardpeet

packages/gatsby-cli/src/reporter/constants.ts

@@ -3,6 +3,7 @@ export enum Actions {
   SetStatus = `SET_STATUS`,
   Log = `LOG`,
   SetLogs = `SET_LOGS`,
+  RenderPageTree = `RENDER_PAGE_TREE`,
 
   StartActivity = `ACTIVITY_START`,
   EndActivity = `ACTIVITY_END`,

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

@@ -83,7 +83,9 @@ const ConnectedDevelop: React.FC = () => {
 
   return (
     <Develop
+      // @ts-ignore - program exists on state but we should refactor this
       pagesCount={state.pages?.size || 0}
+      // @ts-ignore - program exists on state but we should refactor this
       appName={state.program?.sitePackageJson.name || ``}
       status={state.logs?.status || ``}
     />

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React, { ReactElement, useContext } from "react"
 import { Box, Text, BoxProps, Spacer } from "ink"
 import path from "path"
@@ -114,16 +115,17 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
   const state = useContext(StoreStateContext)
 
   const componentWithPages = new Map<string, IComponentWithPageModes>()
-  for (const { componentPath, pages } of state.components.values()) {
+
+  for (const { componentPath, pages } of state.pageTree!.components.values()) {
     const pagesByMode = {
       SSG: new Set<string>(),
       DSG: new Set<string>(),
       SSR: new Set<string>(),
       FN: new Set<string>(),
     }
     pages.forEach(pagePath => {
-      const gatsbyPage = state.pages.get(pagePath)
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const gatsbyPage = state.pageTree!.pages.get(pagePath)
+
       pagesByMode[gatsbyPage!.mode].add(pagePath)
     })
 
@@ -133,7 +135,7 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
   for (const {
     originalAbsoluteFilePath,
     functionRoute,
-  } of state.functions.values()) {
+  } of state.pageTree!.functions.values()) {
     componentWithPages.set(originalAbsoluteFilePath, {
       SSG: new Set<string>(),
       DSG: new Set<string>(),
@@ -143,7 +145,7 @@ const ConnectedPageTree: React.FC = function ConnectedPageTree() {
   }
 
   return (
-    <PageTree components={componentWithPages} root={state.program.directory} />
+    <PageTree components={componentWithPages} root={state.pageTree!.root} />
   )
 }
 

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

@@ -1,27 +1,22 @@
 import React, { useState, useLayoutEffect, createContext } from "react"
 import { getStore, onLogAction } from "../../redux"
-// TODO remove and copy types
-import { IGatsbyState } from "gatsby/src/redux/types"
+import { IGatsbyCLIState } from "../../redux/types"
+import { IRenderPageArgs } from "../../types"
 
-// These weird castings we are doing in this file is because the way gatsby-cli works is that it starts with it's own store
-// but then quickly swaps it out with the store from the installed gatsby. This would benefit from a refactor later on
-// to not use it's own store temporarily.
-// By the time this is actually running, it will become an `IGatsbyState`
-const StoreStateContext = createContext<IGatsbyState>(
-  getStore().getState() as any as IGatsbyState
-)
+const StoreStateContext = createContext<{
+  logs: IGatsbyCLIState
+  pageTree: IRenderPageArgs | null
+}>(getStore().getState())
 
 export const StoreStateProvider: React.FC = ({
   children,
 }): React.ReactElement => {
-  const [state, setState] = useState(
-    getStore().getState() as any as IGatsbyState
-  )
+  const [state, setState] = useState(getStore().getState())
 
   useLayoutEffect(
     () =>
       onLogAction(() => {
-        setState(getStore().getState() as any as IGatsbyState)
+        setState(getStore().getState())
       }),
     []
   )

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

@@ -6,11 +6,11 @@ import CLI from "./cli"
 const ConnectedCLI: React.FC = (): React.ReactElement => {
   const state = useContext(StoreStateContext)
   const showStatusBar =
+    // @ts-ignore - program exists on state but we should refactor this
     state.program?._?.[0] === `develop` &&
+    // @ts-ignore - program exists on state but we should refactor this
     state.program?.status === `BOOTSTRAP_FINISHED`
-  const showPageTree =
-    state.program?._?.[0] === `build` &&
-    state.logs.messages.find(message => message?.text?.includes(`onPostBuild`))
+  const showPageTree = !!state.pageTree
 
   return (
     <CLI

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

@@ -1,5 +1,5 @@
 import path from "path"
-import { getStore, onLogAction } from "../../redux"
+import { onLogAction } from "../../redux"
 import {
   Actions,
   LogLevels,
@@ -16,8 +16,7 @@ import {
   generatePageTree,
   IComponentWithPageModes,
 } from "../../../util/generate-page-tree"
-// TODO remove and copy types
-import { IGatsbyState } from "gatsby/src/redux/types"
+import { IRenderPageArgs } from "../../types"
 
 interface IYurnalistActivities {
   [activityId: string]: {
@@ -28,11 +27,11 @@ interface IYurnalistActivities {
   }
 }
 
-function generatePageTreeToConsole(yurnalist: any): void {
-  const state = getStore().getState() as IGatsbyState
-
-  // TODO use program
-  const root = state.program.directory
+function generatePageTreeToConsole(
+  yurnalist: any,
+  state: IRenderPageArgs
+): void {
+  const root = state.root
   const componentWithPages = new Map<string, IComponentWithPageModes>()
   for (const { componentPath, pages } of state.components.values()) {
     const pagesByMode = {
@@ -159,10 +158,6 @@ export function initializeYurnalistLogger(): void {
           yurnalistMethod(message)
         }
 
-        if (action.payload.text?.includes(`onPostBuild`)) {
-          generatePageTreeToConsole(yurnalist)
-        }
-
         break
       }
       case Actions.StartActivity: {
@@ -252,6 +247,12 @@ export function initializeYurnalistLogger(): void {
           activity.end()
           delete activities[action.payload.id]
         }
+        break
+      }
+
+      case Actions.RenderPageTree: {
+        generatePageTreeToConsole(yurnalist, action.payload)
+        break
       }
     }
   })

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

@@ -27,3 +27,5 @@ export const setActivityTotal =
   boundActions.setActivityTotal as typeof actions.setActivityTotal
 export const activityTick =
   boundActions.activityTick as typeof actions.activityTick
+export const renderPageTree =
+  boundActions.renderPageTree as typeof actions.renderPageTree

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

@@ -1,16 +1,20 @@
 import { createStore, combineReducers, Store } from "redux"
-import { reducer } from "./reducer"
+import { reducer as logsReducer } from "./reducers/logs"
+import { reducer as pageTreeReducer } from "./reducers/page-tree"
 import { ActionsUnion, ISetLogs, IGatsbyCLIState } from "./types"
 import { isInternalAction } from "./utils"
 import { createStructuredLoggingDiagnosticsMiddleware } from "./diagnostics"
 import { Actions } from "../constants"
+import { IRenderPageArgs } from "../../reporter/types"
 
-let store: Store<{ logs: IGatsbyCLIState }> = createStore(
-  combineReducers({
-    logs: reducer,
-  }),
-  {}
-)
+let store: Store<{ logs: IGatsbyCLIState; pageTree: IRenderPageArgs }> =
+  createStore(
+    combineReducers({
+      logs: logsReducer,
+      pageTree: pageTreeReducer,
+    }),
+    {}
+  )
 
 const diagnosticsMiddleware =
   createStructuredLoggingDiagnosticsMiddleware(store)

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

@@ -21,6 +21,7 @@ import {
   IActivityErrored,
   IGatsbyCLIState,
   ISetLogs,
+  IRenderPageTree,
 } from "./types"
 import {
   delayedCall,
@@ -30,6 +31,7 @@ import {
 } from "./utils"
 import { IStructuredError } from "../../structured-errors/types"
 import { ErrorCategory } from "../../structured-errors/error-map"
+import { IRenderPageArgs } from "../types"
 
 const ActivityStatusToLogLevel = {
   [ActivityStatuses.Interrupted]: ActivityLogLevels.Interrupted,
@@ -379,3 +381,10 @@ export const setLogs = (logs: IGatsbyCLIState): ISetLogs => {
     payload: logs,
   }
 }
+
+export const renderPageTree = (payload: IRenderPageArgs): IRenderPageTree => {
+  return {
+    type: Actions.RenderPageTree,
+    payload,
+  }
+}

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

@@ -1,5 +1,5 @@
-import { ActionsUnion, IGatsbyCLIState, ISetLogs } from "./types"
-import { Actions } from "../constants"
+import { ActionsUnion, IGatsbyCLIState, ISetLogs } from "../types"
+import { Actions } from "../../constants"
 
 export const reducer = (
   state: IGatsbyCLIState = {

packages/gatsby-cli/src/reporter/redux/reducers/page-tree.ts

@@ -0,0 +1,16 @@
+import { ActionsUnion } from "../types"
+import { IRenderPageArgs } from "../../types"
+import { Actions } from "../../constants"
+
+export const reducer = (
+  state: IRenderPageArgs | null = null,
+  action: ActionsUnion
+): IRenderPageArgs | null => {
+  switch (action.type) {
+    case Actions.RenderPageTree: {
+      return action.payload
+    }
+  }
+
+  return state
+}

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

@@ -1,6 +1,7 @@
 import { Actions, ActivityStatuses, ActivityTypes } from "../constants"
 import { IStructuredError } from "../../structured-errors/types"
 import { ErrorCategory } from "../../structured-errors/error-map"
+import { IRenderPageArgs } from "../types"
 
 export interface IGatsbyCLIState {
   messages: Array<ILog>
@@ -20,6 +21,7 @@ export type ActionsUnion =
   | IUpdateActivity
   | IActivityErrored
   | ISetLogs
+  | IRenderPageTree
 
 export interface IActivity {
   startTime?: [number, number]
@@ -125,3 +127,8 @@ export interface ISetLogs {
   type: Actions.SetLogs
   payload: IGatsbyCLIState
 }
+
+export interface IRenderPageTree {
+  type: Actions.RenderPageTree
+  payload: IRenderPageArgs
+}

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

@@ -13,7 +13,12 @@ import { IConstructError, IStructuredError } from "../structured-errors/types"
 import { createTimerReporter, ITimerReporter } from "./reporter-timer"
 import { createPhantomReporter, IPhantomReporter } from "./reporter-phantom"
 import { createProgressReporter, IProgressReporter } from "./reporter-progress"
-import { ErrorMeta, CreateLogAction, ILogIntent } from "./types"
+import {
+  ErrorMeta,
+  CreateLogAction,
+  ILogIntent,
+  IRenderPageArgs,
+} from "./types"
 
 const errorFormatter = getErrorFormatter()
 const tracer = globalTracer()
@@ -342,6 +347,10 @@ class Reporter {
       }
     })
   }
+
+  _renderPageTree(args: IRenderPageArgs): void {
+    reporterActions.renderPageTree(args)
+  }
 }
 export type { Reporter }
 export const reporter = new Reporter()

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

@@ -58,6 +58,27 @@ export interface ILogIntent {
       }
 }
 
+type PageMode = "SSG" | "DSG" | "SSR"
+
+interface IGatsbyPageComponent {
+  componentPath: string
+  pages: Set<string>
+}
+interface IGatsbyPage {
+  mode: PageMode
+}
+interface IGatsbyFunction {
+  functionRoute: string
+  originalAbsoluteFilePath: string
+}
+
+export interface IRenderPageArgs {
+  pages: Map<string, IGatsbyPage>
+  components: Map<string, IGatsbyPageComponent>
+  functions: Array<IGatsbyFunction>
+  root: string
+}
+
 export type ReporterMessagesFromChild = ILogIntent
 
 export { ActionCreators }

packages/gatsby/src/commands/build.ts

@@ -51,6 +51,7 @@ import { createGraphqlEngineBundle } from "../schema/graphql-engine/bundle-webpa
 import { createPageSSRBundle } from "../utils/page-ssr-module/bundle-webpack"
 import { shouldGenerateEngines } from "../utils/engines-helpers"
 import uuidv4 from "uuid/v4"
+import reporter from "gatsby-cli/lib/reporter"
 
 module.exports = async function build(program: IBuildArgs): Promise<void> {
   // global gatsby object to use without store
@@ -315,6 +316,14 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
 
   await Promise.all([waitForCompilerClose, waitForCompilerCloseBuildHtml])
 
+  const state = store.getState()
+  reporter._renderPageTree({
+    components: state.components,
+    functions: state.functions,
+    pages: state.pages,
+    root: state.program.directory,
+  })
+
   report.info(`Done building in ${process.uptime()} sec`)
 
   buildSpan.finish()

packages/gatsby/src/redux/reducers/index.ts

@@ -1,5 +1,5 @@
 import { nodesReducer } from "./nodes"
-import { reducer as logReducer } from "gatsby-cli/lib/reporter/redux/reducer"
+import { reducer as logReducer } from "gatsby-cli/lib/reporter/redux/reducers/logs"
 import { pagesReducer } from "./pages"
 import { redirectsReducer } from "./redirects"
 import { schemaReducer } from "./schema"